Example skill
STACK IT FAST design system
The Stack File · Character language — ink shell, apricot CTAs, Stacky and stickers, and the component library.
v0.3.0 Updated
Written for the STACK IT FAST codebase and published as a worked example. Read it for the shape of a good skill; the
method skills are the ones to install in your own project.
What it does
Teaches your agent the STACK IT FAST design language: an ink shell with cream paper panels for reading, one apricot accent for the primary action, Manrope in sentence case, the folded-file corner for anything that is a file, and the Stacky mascot with a sticker illustration set. It is the reference every other design skill in the repo defers to.
When it triggers
Whenever a prompt builds, restyles or reviews UI in the repository — heroes, cards, buttons, navigation, modals, empty states, OG cards — or mentions “design”, “redesign”, “tokens”, “component”, “ink”, “Stacky” or “sticker”.
What’s inside
- Principles that trace every rule back to the logo and the character.
- Tokens (ink, on-ink, paper, apricot, sticker palette, radii, shadows, motion) generated into CSS variables from one file.
- Typography, surfaces (ink vs paper) and page skeletons.
- The
@stackitfast/uicomponent map:ToolCard,OptionTile,CodeWindow,FileCard,ShareCard,Stackyand more. - Twelve patterns: hero picker, tool cards, share fan, spec line, honesty table, ink band and others.
- Motion and voice rules, plus two scripts: a contrast checker that reads the real tokens and a design lint that flags banned patterns.
Example prompt
Build the pricing section in our design system: three tool cards with stickers and one primary action.