Stats
Actions
Tags
From superpowers-sage
Establishes a complete Sage/Acorn design system foundation: extracts Figma design tokens into Tailwind v4 @theme, builds UI atoms and layout components, and generates a kitchensink reference page.
How this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers-sage:sage-design-system [design tool URL or path, or 'detect' to auto-detect][design tool URL or path, or 'detect' to auto-detect]The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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."
/sage-design-system at project start/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.$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.
After all phases:
resources/css/design-tokens.css exists with traceability commentsresources/views/components/ui/ has all 5 atomsresources/views/components/layout/ has all 5 structure componentsgit 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.
npx claudepluginhub hekivo/superpowers-sageExtracts UI/UX design data from Paper, Figma, Stitch, or local files and guides implementation with design-to-code workflow, responsive design, and design system alignment.
Extracts Stitch designs to generate CSS custom properties with dark mode tokens, Tailwind v4 @theme block, and semantic design system document. Use before framework component skills.
Extracts design tokens from existing sites and generates consistent UI design systems using Shadcn UI, Halo, Lunaris, or Nitro kits with MCP servers.