Phase 3: Map design-system.md to 7 Gemini XML blocks (aesthetics, style_reference, typography, color_system, spacing, states, forbidden), call create_frontend, add component variants (Glass/Outline/Flat via CVA).
From fuse-designnpx claudepluginhub fusengine/agents --plugin fuse-designThis skill uses the workspace's default tool permissions.
references/21st-dev.mdreferences/buttons-guide.mdreferences/cards-guide.mdreferences/component-composition-ref.mdreferences/component-examples.mdreferences/component-variants-ref.mdreferences/design-patterns.mdreferences/forms-guide.mdreferences/gemini-design-workflow.mdreferences/gemini-feedback-loop.mdreferences/gemini-tool-signatures.mdreferences/grids-layout.mdreferences/icons-guide.mdreferences/layouts/navigation/footer.mdreferences/layouts/navigation/mobile-nav.mdreferences/layouts/navigation/navbar.mdreferences/layouts/navigation/sidebar.mdreferences/layouts/page-architecture.mdreferences/layouts/pages/auth-login.mdreferences/layouts/pages/auth-register.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
After Phases 0-2 are complete. design-system.md, tokens, and copy-guide.md must exist.
design-system.md with OKLCH palette, typography, motion personality.copy-guide.md from Phase 2 (voice, CTAs, microcopy).mcp__playwright__browser_navigate + mcp__playwright__browser_take_screenshot on sector-matching sites (see ../1-designing-systems/references/design-inspiration.md and ../1-designing-systems/references/design-inspiration-urls.md). New project: 4 sites. New page: 2 sites. New component: 1 site.mcp__magic__21st_magic_component_inspiration for component patterns.references/premium-patterns/PATTERNS.md, pick 2-3 patterns matching your sector, then read their description.md. Copy the "Gemini Context Prompt" section from each.<aesthetics>, <typography>, <color_system>, <spacing>, <layout>, <states>, <forbidden>.mcp__gemini-design__create_frontend with design-system.md tokens + premium pattern context prompts combined. In the context parameter, ALWAYS include the copied Gemini Context Prompts + "Visual depth required: hero >= 75vh, 3-level shadows, alternating section backgrounds, glassmorphism nav, typography contrast 3:1 H1 vs body. NO flat design."references/component-variants-ref.md — size, state, color variants.references/layouts/ (pages, navigation, patterns) and references/component-composition-ref.md.mcp__gemini-design__modify_frontend per references/gemini-feedback-loop.md.4-adding-animations/SKILL.md — Add motion, interactions, and visual effects.
| File | Purpose |
|---|---|
references/gemini-design-workflow.md | Gemini MCP workflow |
references/gemini-tool-signatures.md | Gemini tool API signatures |
references/gemini-feedback-loop.md | Iterative refinement process |
references/premium-patterns/PATTERNS.md | 10 premium design patterns with CSS specs + Gemini prompts |
../1-designing-systems/references/design-inspiration.md | Browsing methodology (Phase 1) |
../1-designing-systems/references/design-inspiration-urls.md | Sector-specific URLs (Phase 1) |
references/component-variants-ref.md | Variant patterns |
references/component-composition-ref.md | Composition patterns |
references/layouts/ | Page layouts, navigation, patterns |
references/templates/ | Component templates (hero, pricing, etc.) |
references/21st-dev.md | 21st.dev component library |
references/shadcn.md | shadcn/ui integration |