Generating Components

Generating Components

Agent Workflow (MANDATORY)

Before ANY component generation, use TeamCreate to spawn 3 agents:

1. fuse-ai-pilot:explore-codebase - Analyze existing UI patterns, colors, typography
2. fuse-ai-pilot:research-expert - Verify latest component patterns via Context7
3. mcp__magic__21st_magic_component_inspiration - Search 21st.dev for inspiration

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

Critical Rules

1. ALWAYS use Gemini Design - Never write UI code manually
2. Search inspiration first - 21st.dev before coding
3. Match existing tokens - Analyze codebase before generating
4. No forbidden fonts - Inter, Roboto, Arial are BANNED
5. Framer Motion required - Every component needs animations

Architecture

components/
├── ui/
│   ├── Button.tsx        (~40 lines)
│   ├── Card.tsx          (~50 lines)
│   └── HeroSection.tsx   (~80 lines)
└── sections/
    ├── HeroBackground.tsx (~30 lines)
    └── FeatureGrid.tsx    (~60 lines)

→ See hero-section.md for complete example

Reference Guide

Concepts

Templates

Quick Reference

Gemini Design Tools

// Create full view from scratch
mcp__gemini-design__create_frontend({
  prompt: "Hero section with glassmorphism",
  designSystem: "contents of design-system.md"
})

// Modify existing component
mcp__gemini-design__modify_frontend({
  existingCode: "<Button>...",
  prompt: "Add hover animation"
})

// Generate snippet
mcp__gemini-design__snippet_frontend({
  prompt: "Loading spinner"
})

→ See gemini-design-workflow.md for complete workflow

Anti-AI-Slop Table

→ See ui-visual-design.md for 2026 trends

Best Practices

DO

• Read gemini-design-workflow.md FIRST
• Search 21st.dev for inspiration before coding
• Match existing design tokens exactly
• Use Framer Motion for all animations
• Split components into <100 line files

DON'T

• Write UI code manually (use Gemini Design)
• Use forbidden fonts (Inter, Roboto, Arial)
• Skip inspiration search phase
• Forget hover/focus states
• Create components without animations

Framework Delegation (AFTER Gemini)

After generating UI, ALWAYS delegate to framework expert for SOLID validation.

Detection → Expert

Why Delegate?

design-expert handles:

• ✅ Beautiful UI (Anti-AI-Slop)
• ✅ Animations (Framer Motion)
• ✅ Accessibility (WCAG 2.2)

Framework expert handles:

• ✅ SOLID compliance (files < 100 lines)
• ✅ Framework patterns (App Router, Server Components)
• ✅ Integration (Better Auth, Prisma, TanStack)

Delegation Workflow

1. Generate component with Gemini Design
2. Detect framework from project files
3. Launch Task with framework expert
4. Expert validates SOLID + patterns
5. sniper runs final validation