STACK IT FAST design system

What it does

Loads the peach/apricot color tokens, the Manrope + IBM Plex Mono typography scale, the radius and shadow scale, the component variant map for @stackitfast/ui, and 13 reusable layout patterns. It is the reference every other design skill in the repo defers to.

When it triggers

Claude Code loads this skill whenever a prompt mentions building, restyling, or reviewing UI in the repository — hero sections, cards, buttons, badges, navigation, modals — or asks for “design”, “pastel”, “restyle”, “tokens”, or “component variant”.

What’s inside

• A full token table (background, surface, text, accent, border, status) with exact hex values and Tailwind class names.
• Typography rules: when to use Manrope versus IBM Plex Mono, and the full font-size scale from text-2xs-mono to text-hero.
• The component variant map for Button, Badge, Card, Tabs, and more.
• 13 named layout patterns (mono eyebrow headline, browser-chrome demo card, bento icon tiles, FAQ accordion, and others) with markup sketches.
• Hard “never” rules: no dark mode, no second accent hue, no default Tailwind blur shadows, no decorative emojis.

Example prompt

Restyle the pricing cards on the landing page to match our design system.