Menu
Use when a site needs to look designed rather than defaulted, before building sections: establish a cohesive design system of type scale, spacing, colour, radius and shadow tokens so every component shares one premium visual language.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when several pieces of work are genuinely independent and can run at once, to fan them out across parallel agents instead of doing them in sequence. Cuts wall-clock time and keeps each strand in its own clean context.
Use when a written plan exists and you are about to build it in the current session, to work it task by task with a checkpoint after each. Keeps execution honest against the plan instead of drifting into a freehand build.
Use when work needs its own isolated checkout — parallel strands that would fight over files, or a risky change you want quarantined from the main tree. Gives each strand a real working directory on its own branch without re-cloning.
Use whenever the user says "use slipstream", "use superpowers", or starts any task in a project that has slipstream. A hard, always-on discipline that forces scoped reads over whole-file reads to save tokens, recalls memory before acting, and records what is durable every turn so memory grows constantly.
Use when building the top of a landing page, to produce a high-impact hero with confident display type, a clear single call to action and balanced composition, the kind of opening a polished marketing site leads with.
Use when filling out a landing page below the hero, to build the polished marketing sections a premium site is made of: a feature grid, a logo or social-proof strip, a testimonial and a closing call to action.
| name | frontend-design-system |
| description | Use when a site needs to look designed rather than defaulted, before building sections: establish a cohesive design system of type scale, spacing, colour, radius and shadow tokens so every component shares one premium visual language. |
| slipstream | {"category":"frontend","requires":["frontend-tailwind"],"verification":{"kind":"build","description":"The app builds with the design tokens applied.","command":"pnpm --dir {{appName}} build"},"tags":["design","polish","tokens"]} |
The difference between a site that looks default and one that looks made in a design tool is consistency: one type scale, one spacing rhythm, one restrained palette, applied everywhere. This skill sets that foundation in the Tailwind theme so every later section inherits it, which is what gives the polished, deliberate feel.
tailwind.config.js, set a modular type scale (for example a 1.25 ratio from a 16px base) and a spacing rhythm on a consistent step.font-display: swap. Map them to fontFamily.display and fontFamily.sans.rounded-xl defaults and a soft layered shadow token) so cards and buttons share one physical language.body: the background token, the body font, antialiasing and a comfortable line height, so unstyled text already looks intentional.Build the app and confirm it compiles with the extended theme, then grep the emitted CSS for one of the custom tokens (a custom colour or the display font) to confirm the theme is wired in rather than ignored.