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/seo-entity
development
VerifiedTrustedCommunity
Use when optimizing entity-based / semantic SEO 2026. Covers entity maps, Google Knowledge Graph resolution, salience scoring, passage-level ranking, about/sameAs/knowsAbout schema, Cloud Natural Language API validation.
13SKILL.mdUpdated Jun 4, 2026
fusengine/seo
development
VerifiedTrustedCommunity
Use when running SEO, GEO, schema, Core Web Vitals, sitemap, hreflang, E-E-A-T, AI Overviews, technical SEO, or structured data tasks. Covers full-site audits, single-page analysis, schema markup, content quality, AI search optimization, local SEO, sitemap/robots, internal linking, semantic clustering, and search experience.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-sxo
development
VerifiedTrustedCommunity
Use when optimizing search experience (SXO). Covers intent matching, user personas, user stories, page-type analysis, dwell time, scroll depth, pogo-sticking prevention.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-local
development
VerifiedTrustedCommunity
Use when optimizing local SEO. Covers Google Business Profile, NAP consistency, citations, reviews acquisition, Local Pack ranking, location pages, LocalBusiness schema.
13SKILL.mdUpdated May 17, 2026