Skill

superpowers-sage:sage-design-system

Implements Sage design system with Tailwind v4: extracts Figma/Paper tokens to CSS, builds Blade UI atoms and layout components, adds kitchensink page.

Tailwind

Css

npx claudepluginhub codigodoleo/superpowers-sage --plugin superpowers-sage

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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.

Supporting Assets

references/component-phases.mdreferences/tokens-setup.md

SKILL.md

Similar Skills

superpowers-sage:designing

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.

superpowers-sage

tailwind-design-system

682

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.

1 file

rmyndharis-antigravity-skills

product-design

166

Automates Figma design review: extracts tokens, maps components to React/Vue/Svelte codebases, detects drift, generates implementation plans and tasks. For design handoffs.

14 files8 tools

navigator

Stats

Stars10

Forks0

Last CommitApr 19, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Sage Design System — Visual Foundation

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.

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.