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
1---2name: generating-components3description: Generate production-ready React components using shadcn/ui, 21st.dev, and Tailwind CSS. Use when user asks for UI components, buttons, forms, cards, hero sections, or mentions design inspiration.4---5
6# Generating Components
7
8## APEX WORKFLOW (MANDATORY)
9
10### Phase A: ANALYZE
11
12```
13Task: explore-codebase
14Prompt: "Analyze UI: components, colors, typography, spacing, animations"
15```
16
17### Phase A: SEARCH INSPIRATION
18
19```typescript
20// 21st.dev (MANDATORY FIRST)
21mcp__magic__21st_magic_component_inspiration({
22 message: "Create a hero section",
23 searchQuery: "hero section glassmorphism"
24})
25
26// shadcn/ui
27mcp__shadcn__search_items_in_registries({
28 registries: ["@shadcn"],
29 query: "button"
30})
31```
32
33### Phase P: PLAN
34
35TodoWrite with file breakdown (<100 lines each):
36- `components/ui/HeroSection.tsx` (~60 lines)
37- `components/ui/HeroBackground.tsx` (~30 lines)
38
39### Phase E: CODE
40
41Write component using:
42- Design tokens from Phase A
43- Inspiration from 21st.dev/shadcn
44- Framer Motion animations
45- WCAG 2.2 AA compliance
46
47### Phase X: VALIDATE
48
49```
50Task: sniper
51Prompt: "Validate component: lint, accessibility, design consistency"
52```
53
54## ANTI-AI SLOP (MANDATORY)
55
56| FORBIDDEN | USE INSTEAD |
57|-----------|-------------|
58| Roboto, Arial, system default | Inter, Clash Display, Satoshi, Syne |
59| Purple/pink gradients | CSS variables, sharp accents |
60| Border-left indicators | Icon + bg-*/10 rounded |
61| Flat backgrounds | Glassmorphism, gradient orbs |
62| No animations | Framer Motion stagger |
63
64**See:** `../../references/typography.md`, `../../references/color-system.md`
65
66## Component Template
67
68```tsx
69"use client";
70import { motion } from "framer-motion";
71
72const variants = {
73 hidden: { opacity: 0, y: 20 },
74 show: { opacity: 1, y: 0, transition: { staggerChildren: 0.1 } }
75};
76
77export function Component({ className }: { className?: string }) {
78 return (
79 <motion.div variants={variants} initial="hidden" animate="show">
80 {/* Background from existing design tokens */}
81 <div className="absolute inset-0 -z-10">
82 <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl" />
83 </div>
84 {/* Content */}
85 </motion.div>
86 );
87}
88```
89
90## Validation
91
92```
93[ ] Phase 0 completed (analyze existing)
94[ ] Inspiration searched (21st.dev, shadcn)
95[ ] Matches existing design tokens
96[ ] No AI slop patterns
97[ ] Framer Motion animations
98[ ] Files < 100 lines
99```
100
101## References
102
103- **UI Visual Design**: `../../references/ui-visual-design.md` (visual hierarchy, spacing, 2026 trends)
104- **UX Principles**: `../../references/ux-principles.md` (Nielsen heuristics, Laws of UX, cognitive psychology)
105- **Typography**: `../../references/typography.md` (fonts, sizes, line-height, mobile guidelines)
106- **Colors**: `../../references/color-system.md` (psychology, palettes, OKLCH, 60-30-10)
107- **Buttons**: `../../references/buttons-guide.md` (states, sizing, accessibility)
108- **Forms**: `../../references/forms-guide.md` (validation, layout, states)
109- **Icons**: `../../references/icons-guide.md` (types, consistency, scalability)
110- **Grids & Layout**: `../../references/grids-layout.md` (12-column, responsive, containers)
111- **Motion**: `../../references/motion-patterns.md`
112- **Design Patterns**: `../../references/design-patterns.md`
113- **21st.dev Guide**: `../../references/21st-dev.md`
majiayu000