Shade use primitives
Installation
SKILL.md
Shade — use primitives, not flex divs
A <div> whose className is only flex / grid / gap / items-* / justify-* utilities is a primitive call site. Use a Shade primitive instead so layouts read by intent, not by class string.
import {Stack, Inline, Box, Grid, Container, Text} from '@tryghost/shade/primitives';
Picking the primitive
| You need | Use | Element |
|---|---|---|
| Column of children | Stack |
flex-col |
| Row of children | Inline |
flex-row (with optional wrap, as) |
| Padding / radius around content | Box |
div with padding, radius props |
| Two-dimensional layout | Grid |
display: grid |
| Width-constrained shell | Container |
max-width wrapper |
| Text with size/tone/weight | Text |
as, size, tone, weight |