generating-components

Name: generating-components
Author: fusengine

github.com/fusengineDesign & UI3445 installsUpdated 2w ago

About generating-components

A workflow skill for generating HTML/CSS components with Gemini Design after design-system and copy preparation. It guides designers and developers through inspiration research, pattern selection, component variants, layout composition, and iterative refinement.

Key features

01Pre-generation design-system checks
02Browser-based design inspiration research
0321st.dev component pattern search
04Premium pattern prompts for Gemini
05Variant definition and layout composition
06Iterative Gemini frontend refinement

Use cases

01Generate components after design tokens and copy are ready
02Explore sector-specific visual references
03Create size, state, and color variants
04Refine generated layouts in successive iterations

MCP support

Uses MCP tools for browser research, 21st.dev component inspiration, and Gemini frontend generation and modification.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill generating-components

After installing, type/generating-componentsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

21st-dev.md

buttons-guide.md

cards-guide.md

component-composition-ref.md

component-examples.md

component-variants-ref.md

design-patterns.md

forms-guide.md

gemini-design-workflow.md

gemini-feedback-loop.md

gemini-tool-signatures.md

grids-layout.md

icons-guide.md

references/layouts/

page-architecture.md

references/layouts/navigation/

footer.md

mobile-nav.md

navbar.md

sidebar.md

references/layouts/pages/

auth-login.md

auth-register.md

dashboard.md

error-pages.md

onboarding.md

profile.md

settings.md

references/layouts/patterns/

command-palette.md

data-table.md

empty-state.md

modal-dialog.md

toast-notifications.md

Details

From the project README

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.md with OKLCH palette, typography, motion personality.
CSS-precise observations from Phase 1 fuse-browser browsing (oklch values, clamp sizes, grid ratios).
copy-guide.md from 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_open then mcp__fuse-browser__browser_navigate + mcp__fuse-browser__browser_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.
Search 21st.dev — mcp__magic__21st_magic_component_inspiration for component patterns.
Read premium patterns — Read 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.
Prepare 7 XML blocks for Gemini: <aesthetics>, <typography>, <color_system>, <spacing>, <layout>, <states>, <forbidden>.
Generate — 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."
Add variants per references/component-variants-ref.md — size, state, color variants.
Compose layouts using references/layouts/ (pages, navigation, patterns) and references/component-composition-ref.md.
Iterate — mcp__gemini-design__modify_frontend per references/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

Comments

Markdown supported