원클릭으로 Manus에서 모든 스킬 실행

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 저장소 열기 Creator 저장소 보기

다운로드

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.