Generating Components

APEX WORKFLOW (MANDATORY)

Phase A: ANALYZE

Task: explore-codebase
Prompt: "Analyze UI: components, colors, typography, spacing, animations"

Phase A: SEARCH INSPIRATION

// 21st.dev (MANDATORY FIRST)
mcp__magic__21st_magic_component_inspiration({
  message: "Create a hero section",
  searchQuery: "hero section glassmorphism"
})

// shadcn/ui
mcp__shadcn__search_items_in_registries({
  registries: ["@shadcn"],
  query: "button"
})

Phase P: PLAN

TodoWrite with file breakdown (<100 lines each):

• components/ui/HeroSection.tsx

  (~60 lines)

• components/ui/HeroBackground.tsx

  (~30 lines)

Phase E: CODE

Write component using:

• Design tokens from Phase A
• Inspiration from 21st.dev/shadcn
• Framer Motion animations
• WCAG 2.2 AA compliance

Phase X: VALIDATE

Task: sniper
Prompt: "Validate component: lint, accessibility, design consistency"

ANTI-AI SLOP (MANDATORY)

FORBIDDEN	USE INSTEAD
Roboto, Arial, system default	Inter, Clash Display, Satoshi, Syne
Purple/pink gradients	CSS variables, sharp accents
Border-left indicators	Icon + bg-*/10 rounded
Flat backgrounds	Glassmorphism, gradient orbs
No animations	Framer Motion stagger

See:

../../references/typography.md

,

../../references/color-system.md

Component Template

"use client";
import { motion } from "framer-motion";

const variants = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0, transition: { staggerChildren: 0.1 } }
};

export function Component({ className }: { className?: string }) {
  return (
    <motion.div variants={variants} initial="hidden" animate="show">
      {/* Background from existing design tokens */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl" />
      </div>
      {/* Content */}
    </motion.div>
  );
}

Validation

[ ] Phase 0 completed (analyze existing)
[ ] Inspiration searched (21st.dev, shadcn)
[ ] Matches existing design tokens
[ ] No AI slop patterns
[ ] Framer Motion animations
[ ] Files < 100 lines

References

• UI Visual Design:

  ../../references/ui-visual-design.md

  (visual hierarchy, spacing, 2026 trends)
• UX Principles:

  ../../references/ux-principles.md

  (Nielsen heuristics, Laws of UX, cognitive psychology)
• Typography:

  ../../references/typography.md

  (fonts, sizes, line-height, mobile guidelines)
• Colors:

  ../../references/color-system.md

  (psychology, palettes, OKLCH, 60-30-10)
• Buttons:

  ../../references/buttons-guide.md

  (states, sizing, accessibility)
• Forms:

  ../../references/forms-guide.md

  (validation, layout, states)
• Icons:

  ../../references/icons-guide.md

  (types, consistency, scalability)
• Grids & Layout:

  ../../references/grids-layout.md

  (12-column, responsive, containers)
• Motion:

  ../../references/motion-patterns.md

• Design Patterns:

  ../../references/design-patterns.md

• 21st.dev Guide:

  ../../references/21st-dev.md