npx claudepluginhub codigodoleo/superpowers-sage --plugin superpowers-sageThis skill uses the workspace's default tool permissions.
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.
Extracts UI/UX designs from Figma, Paper, Stitch, or Pencil for Sage projects into Blade components and Tailwind v4 tokens. Supports layout, responsive design, visual review, and design-to-code workflows.
Build production-ready design systems with Tailwind CSS, design tokens, component variants, responsive patterns, and accessibility. Use for component libraries, UI standardization, theming, and dark mode.
Automates Figma design review: extracts tokens, maps components to React/Vue/Svelte codebases, detects drift, generates implementation plans and tasks. For design handoffs.
Share bugs, ideas, or general feedback.
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.