| name | superpowers-sage:sage-design-system |
| description | Design system implementation in Sage/Tailwind v4 — Figma to @theme tokens, design tokens CSS, Tailwind v4 @theme, color tokens, typography tokens, spacing scale, Blade UI components, kitchensink page, design-to-code, @layer base @layer components, CSS custom properties, resources/css/app.css, Paper MCP, Figma MCP, design file to code, SVG icons, responsive layout, design system audit, UI component library, atom design, layout components
|
| user-invocable | true |
| argument-hint | [design tool URL or path, or 'detect' to auto-detect] |
Sage Design System — Visual Foundation
Establish the complete visual foundation of a Sage/Acorn theme: design tokens → UI atoms → layout components → kitchensink → structural layouts. This must run before any block, view, or page implementation.
Announce at start: "I'm using the sage-design-system skill to establish the visual foundation."
When to use
- Standalone: user invokes
/sage-design-system at project start
- Auto-gate from
/architecting: before any architecture discovery, /architecting checks if design system is validated (kitchensink route exists + design-tokens.css present). If not, it invokes this skill first and waits.
- Resuming: if some phases are already complete, detect which files exist and skip completed phases
Inputs
$ARGUMENTS
If a design tool URL or path is provided, use it. Otherwise invoke /designing to detect the active design tool (Figma / Paper / Pencil / Stitch).
See references/tokens-setup.md for design token extraction workflow.
See references/component-phases.md for component implementation phases.
Completion
After all phases:
- Confirm
resources/css/design-tokens.css exists with traceability comments
- Confirm
resources/views/components/ui/ has all 5 atoms
- Confirm
resources/views/components/layout/ has all 5 structure components
- Confirm kitchensink screenshot was taken and saved
- Commit:
git add resources/css/design-tokens.css \
resources/views/components/ui/ \
resources/views/components/layout/ \
resources/views/kitchensink.blade.php \
routes/web.php \
docs/plans/<active-plan>/assets/kitchensink-ref.png
git commit -m "feat(theme): design system foundation — tokens, ui, layout components, kitchensink"
git push
Do NOT proceed to /architecting or /building until this commit exists.
