fusengine/generating-components
plugins/design-expert/skills/3-generating-components/SKILL.md
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).
$ install --global
skillsauthnpx skillsauth add fusengine/agents generating-componentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 4, 2026, 3:44 AM302.4s55 files scanned
SKILL.md
- name:
- generating-components
- description:
- 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).
- phase:
- 3
Phase 3: GENERATING COMPONENTS — Build UI with Gemini Design
When
After Phases 0-2 are complete. design-system.md, tokens, and copy-guide.md must exist.
Input (from Phases 0-2)
design-system.mdwith OKLCH palette, typography, motion personality.- CSS-precise observations from Phase 1 fuse-browser browsing (oklch values, clamp sizes, grid ratios).
copy-guide.mdfrom Phase 2 (voice, CTAs, microcopy).
Steps
- Pre-generation checklist — Verify: design-system.md exists, OKLCH tokens defined, typography pair set, motion profile set, visual-technique-matrix consulted.
- Browse inspiration —
mcp__fuse-browser__browser_openthenmcp__fuse-browser__browser_navigate+mcp__fuse-browser__browser_screenshoton sector-matching sites (see../1-designing-systems/references/design-inspiration.mdand../1-designing-systems/references/design-inspiration-urls.md). New project: 4 sites. New page: 2 sites. New component: 1 site. - Search 21st.dev —
mcp__magic__21st_magic_component_inspirationfor component patterns. - Read premium patterns — Read
references/premium-patterns/PATTERNS.md, pick 2-3 patterns matching your sector, then read theirdescription.md. Copy the "Gemini Context Prompt" section from each. - Prepare 7 XML blocks for Gemini:
<aesthetics>,<typography>,<color_system>,<spacing>,<layout>,<states>,<forbidden>. - Generate —
mcp__gemini-design__create_frontendwith design-system.md tokens + premium pattern context prompts combined. In thecontextparameter, 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." - Add variants per
references/component-variants-ref.md— size, state, color variants. - Compose layouts using
references/layouts/(pages, navigation, patterns) andreferences/component-composition-ref.md. - Iterate —
mcp__gemini-design__modify_frontendperreferences/gemini-feedback-loop.md.
Output
- HTML/CSS components generated via Gemini, matching design-system.md identity.
- Variants (size, state, color) defined. Page layouts composed.
- Components ready for animation in Phase 4.
Next → Phase 4: ADDING ANIMATIONS
4-adding-animations/SKILL.md — Add motion, interactions, and visual effects.
References
| 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 |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026