How do I install the Superpowers Sage:sage Design System skill?

Run npx skillmds@latest add hekivo/superpowers-sage-sage-design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Superpowers Sage:sage Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Superpowers Sage:sage Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Superpowers Sage:sage Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Superpowers Sage:sage Design System?

hekivo (@hekivo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Superpowers Sage:sage Design System by hekivo

Name: Superpowers Sage:sage Design System
Rating: 4.2 (5 reviews)
Author: hekivo

Superpowers Sage:sage Design System

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

hekivo Updated Aug 19, 2026 13 repo stars

File contents

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.

---name: superpowers-sage-sage-design-systemdescription: 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---# Sage Design System — Visual FoundationEstablish 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$ARGUMENTSIf 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](references/tokens-setup.md) for design token extraction workflow.See [references/component-phases.md](references/component-phases.md) for component implementation phases.---## CompletionAfter all phases:1. Confirm `resources/css/design-tokens.css` exists with traceability comments2. Confirm `resources/views/components/ui/` has all 5 atoms3. Confirm `resources/views/components/layout/` has all 5 structure components4. Confirm kitchensink screenshot was taken and saved5. Commit:```bashgit 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.pnggit 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.**

Frequently asked questions