一键在 Manus 中运行任何 Skill

superpowers-sage-sage-design-system

星标13

分支0

更新时间2026年6月5日 23:05

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

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

hekivo

hekivo/superpowers-sage

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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.

同仓库更多 Skills

同仓库

superpowers-sage-abilities-authoring

hekivo/superpowers-sage

Creates custom WordPress Abilities for the WP MCP Adapter (WP 6.9+). An Ability is a PHP class extending Roots\AcornAi\Abilities\Ability that exposes a JSON schema and execute() method — auto-discovered by the MCP Adapter and callable via Claude's execute-ability tool. Covers: lando wp acorn make:ability, AbilitiesServiceProvider registration, JSON schema definition, discover-abilities validation. Invoke for: abilities, make ability, custom mcp endpoint, discover-abilities, execute-ability, acorn ability, abilities-authoring, mcp endpoint, wp ability, make:ability.

2026-06-0513

superpowers-sage-acorn-commands

hekivo/superpowers-sage

Acorn CLI commands for WordPress automation — lando acorn make:command, artisan-style commands, Command::class, $signature, $description, handle() method, command arguments and options, output formatting, dependency injection in commands, calling other commands, AppServiceProvider registration, wp acorn schedule:run, scheduled commands, data import scripts, maintenance commands, theme automation tasks, lando acorn list

2026-06-0513

superpowers-sage-acorn-eloquent

hekivo/superpowers-sage

Eloquent, model, migration, relationship, hasMany, belongsTo, belongsToMany, Acorn Eloquent, custom table, wp_posts, wp_users, wp_postmeta, factory, query scope, scopePublished, global scope, make:model, make:migration, lando acorn migrate, $fillable, $casts, $timestamps, $primaryKey, HasFactory, db:seed, seeder — Eloquent ORM for custom and WordPress tables via Acorn

2026-06-0513

superpowers-sage-acorn-livewire

hekivo/superpowers-sage

Livewire v3 in WordPress via Acorn: Livewire component, wire:model, wire:model.live, @livewire directive, reactive component, livewire component, make:livewire, Alpine + Livewire, wire:click, wire:submit, WithFileUploads, computed properties, mount lifecycle, hydrate, Acorn Livewire, roots/acorn-livewire, real-time UI, reactive forms — interactive server-driven UI without writing JavaScript in Sage themes

2026-06-0513

superpowers-sage-acorn-logging

hekivo/superpowers-sage

Logging in Acorn/WordPress — Log::debug(), Log::error(), Log::channel(), custom log channels, daily log files, stack channel, Slack log notifications, exception handling logging, WordPress debug.log integration, WP_DEBUG_LOG, structured logging, context arrays, monolog handlers, log levels, emergency info warning error debug, lando logs, lando ssh tail log

2026-06-0513

superpowers-sage-acorn-middleware

hekivo/superpowers-sage

HTTP middleware, JWT authentication, auth middleware, custom guards, JWT guard, route middleware, request filter, middleware group, Acorn middleware, guard, rate limiting, CORS, CheckRole, throttle, bearer token, request filtering, middleware registration, HTTP Kernel — using Acorn's Laravel middleware stack inside WordPress/Sage/Bedrock

2026-06-0513

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

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.