Shade component decision
Installation
SKILL.md
Shade — pick the right layer (and decide whether to add to Shade at all)
Before adding anything to Shade, walk the decision flow and the promotion checklist. The default is keep code local first — premature design system additions lock in the wrong API.
The five layers
| Layer | Lives in | Examples |
|---|---|---|
| Token | theme-variables.css, tailwind.theme.css |
--background, --text-base, --radius-md |
| Primitive | src/components/primitives/ |
Stack, Inline, Box, Grid, Container, Text |
| Component | src/components/ui/ |
Button, Input, Dialog, Tabs, Card |
| Recipe | src/components/ui/<name>.ts (no JSX) |
inputSurface |
| Pattern | src/components/patterns/ |
PageHeader, KpiCard, Filters, GhAreaChart |
Plus one additional barrel:
page-templates/(@tryghost/shade/page-templates) — top-level page wrappers (ListPagetoday). Composes Patterns + Components + Primitives. If you're building a new shape that wraps a whole admin page, this is where it goes. Seeshade-page-templates.