# 🎨 UI-First Builder Skill --- name: ui-first-builder description: Build user interfaces first, then add logic - the visual-first development approach --- ## 🎯 Purpose Develop applications by creating the UI first with mock data, then gradually adding real functionality. ## 📋 When to Use - Starting new features - Rapid prototyping - Getting stakeholder feedback early - When requirements are unclear ## 🔧 UI-First Workflow ``` ┌─────────────────┐ │ 1. MOCKUP │ ← Wireframe/Design └────────┬────────┘ ▼ ┌─────────────────┐ │ 2. STATIC UI │ ← HTML/CSS with mock data └────────┬────────┘ ▼ ┌─────────────────┐ │ 3. COMPONENTS │ ← Break into reusable parts └────────┬────────┘ ▼ ┌─────────────────┐ │ 4. INTERACTIONS │ ← Add click handlers, forms └────────┬────────┘ ▼ ┌─────────────────┐ │ 5. REAL DATA │ ← Connect to APIs └────────┬────────┘ ▼ ┌─────────────────┐ │ 6. POLISH │ ← Animations, edge cases └─────────────────┘ ``` ## 📝 Step-by-Step Guide ### Step 1: Create Mockup ```markdown - Sketch the UI layout - Identify key components - Define user flow - Get initial feedback ``` ### Step 2: Static UI with Mock Data ```jsx // Mock data first const mockUsers = [ { id: 1, name: 'John Doe', email: 'john@example.com' }, { id: 2, name: 'Jane Smith', email: 'jane@example.com' }, ]; // Static component function UserList() { return (

{mockUsers.map(user => (

{user.name}

{user.email}

))}

); } ``` ### Step 3: Extract Components ```jsx // UserCard component function UserCard({ user }) { return (

{user.name}

{user.email}

); } // UserList uses UserCard function UserList({ users }) { return (

{users.map(user => ( ))}

); } ``` ### Step 4: Add Interactions ```jsx function UserCard({ user, onSelect }) { return (

onSelect(user)} >

{user.name}

{user.email}

); } ``` ### Step 5: Connect Real Data ```jsx function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('/api/users') .then(res => res.json()) .then(data => { setUsers(data); setLoading(false); }); }, []); if (loading) return ; return (

{users.map(user => ( ))}

); } ``` ### Step 6: Polish ```jsx // Add animations, error states, empty states function UserList() { const { users, loading, error } = useUsers(); if (loading) return ; if (error) return ; if (users.length === 0) return ; return ( {users.map(user => ( ))} ); } ``` ## 🎨 Component Patterns ### Card Pattern ```jsx function Card({ children, header, footer }) { return (

{header &&

{header}

}

{children}

{footer &&

{footer}

}

); } ``` ### List Pattern ```jsx function List({ items, renderItem, emptyMessage }) { if (items.length === 0) { return

{emptyMessage}

; } return (

{renderItem(item)}

); } ``` ## ✅ UI-First Checklist - [ ] Mockup reviewed and approved - [ ] Static UI matches design - [ ] Components are reusable - [ ] All states handled (loading, error, empty) - [ ] Interactions feel responsive - [ ] Mobile responsive - [ ] Animations smooth ## 🔗 Related Skills - `design-mastery` - Design patterns - `vision-to-code` - Convert designs - `testing` - Test UI components

🎨 UI-First Builder Skill

Install this skill

Comments