تشغيل أي مهارة في Manus بنقرة واحدة

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

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

hekivo

hekivo/superpowers-sage

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مصممو واجهات الويب والرقميةمهن الحاسوب والرياضيات·SOC 15-1255

مستكشف الملفات

3 ملفات

SKILL.md

readonly

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

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.

المزيد من هذا المستودع

نفس المستودع

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.