Generating Components

Agent Workflow (MANDATORY)

TeamCreate

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

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)

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"
})

Anti-AI-Slop Table

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)

Detection → Expert

next.config.*

fuse-nextjs:nextjs-expert

package.json

fuse-react:react-expert

composer.json

fuse-laravel:laravel-expert

Why Delegate?

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

• ✅ 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