Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →tryghost/Shade use primitives
Replace bare divs that only carry flex/grid/gap utilities with Shade primitives (Stack, Inline, Box, Grid, Container, Text). Use semantic gap="md" instead of gap-4.
Passed 21 of 22 test cases with the skill, and 8 of 22 without it.
and 18 more in the full report
14 fixed7 passed either way0 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
Refactor this top-level page layout container using primitives, replacing `gap-8` with the proper semantic prop: ```tsx export function PageLayout({ children }) { return ( <div className="flex flex-col gap-8"> {children} </div> ); } ```
| Checked | Without skill | With skill |
|---|---|---|
| Uses gap="2xl" for page-level rhythm corresponding to gap-8. | Missed | Passed |
The instructions your model reads when the skill loads.
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';
| 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 |
gap="md" reads as intent and resolves to the shared spacing scale. Mapping:
| Step | Tailwind | Use for |
|---|---|---|
none | gap-0 | flush |
xs | gap-1 | inline icons-to-text |
sm | gap-2 | dense lists, badges |
md | gap-3 | default row/column spacing |
lg | gap-5 | section spacing |
xl | gap-6 | between major blocks |
2xl | gap-8 | page-level rhythm |
The same scale applies to Box padding (padding="md" → p-3).
<Box padding="lg" radius="md" className="border border-border-default">
<Inline align="center" gap="md" justify="between">
test cases passed, vs 8 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.