🎨 Frontend Development Excellence
Frontend implementation should strictly follow the design system and patterns identified in the discovery phase
Component Development Strategy
Component Hierarchy
Advanced Components
Base Components (shadcn/ui)
Start with shadcn/ui as your foundation - these are your atomic components
# Install base components first
pnpm dlx shadcn-ui@latest add button card dialog form input
# Then add as needed
pnpm dlx shadcn-ui@latest add data-table sheet tabs
- Forms: Form, Input, Label, Textarea, Select, Checkbox, Radio, Switch
- Feedback: Alert, Toast, Dialog, AlertDialog, Tooltip, Progress
- Layout: Card, Separator, ScrollArea, AspectRatio, Container
- Navigation: NavigationMenu, Breadcrumb, Tabs, Pagination
- Data Display: Table, DataTable, Badge, Avatar, Skeleton
Feature Components
Composite Components
Build feature-specific components combining base components:// components/features/user-profile-card.tsx
import { Card, Avatar, Badge } from '@/components/ui'
export function UserProfileCard({ user }) {
return (
<Card className="p-6">
<Avatar src={user.avatar} />
<h3>{user.name}</h3>
<Badge>{user.role}</Badge>
</Card>
)
}
Page Layouts
Layout Components
Create consistent page structures:// components/layouts/dashboard-layout.tsx
export function DashboardLayout({ children }) {
return (
<div className="min-h-screen">
<Sidebar />
<main className="lg:pl-64">
<Header />
<div className="p-4 md:p-6 lg:p-8">
{children}
</div>
</main>
</div>
)
}
Design System Implementation
/* From discovery phase brand guidelines */
:root {
/* Brand Colors from Discovery */
--brand-primary: #[from-discovery];
--brand-secondary: #[from-discovery];
/* Semantic Colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;
/* Neutral Palette */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--gray-950: #030712;
/* Spacing System */
--space-xs: 0.5rem; /* 8px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4rem; /* 64px */
/* Typography Scale */
--font-xs: 0.75rem; /* 12px */
--font-sm: 0.875rem; /* 14px */
--font-base: 1rem; /* 16px */
--font-lg: 1.125rem; /* 18px */
--font-xl: 1.25rem; /* 20px */
--font-2xl: 1.5rem; /* 24px */
--font-3xl: 1.875rem; /* 30px */
--font-4xl: 2.25rem; /* 36px */
--font-5xl: 3rem; /* 48px */
--font-6xl: 3.75rem; /* 60px */
/* Animation */
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 350ms;
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
Mobile-First Responsive Design
Mobile Base (320px)
Mobile First Approach
Start with mobile design and enhance progressively:/* Base mobile styles */
.component {
padding: 1rem;
font-size: 0.875rem;
}
/* Tablet enhancement */
@media (min-width: 768px) {
.component {
padding: 1.5rem;
font-size: 1rem;
}
}
/* Desktop enhancement */
@media (min-width: 1024px) {
.component {
padding: 2rem;
font-size: 1.125rem;
}
}
Breakpoint System
| Breakpoint | Min Width | Target Devices | Columns |
|---|
| Base | 320px | Small phones | 4 |
| sm | 640px | Phones | 6 |
| md | 768px | Tablets | 8 |
| lg | 1024px | Small laptops | 12 |
| xl | 1280px | Desktops | 12 |
| 2xl | 1536px | Large screens | 12 |
Responsive Patterns
// Responsive grid example
<div className="
grid
grid-cols-1 // Mobile: 1 column
sm:grid-cols-2 // Small: 2 columns
md:grid-cols-3 // Medium: 3 columns
lg:grid-cols-4 // Large: 4 columns
gap-4
md:gap-6
lg:gap-8
">
{items.map(item => <Card key={item.id} />)}
</div>
// Responsive navigation
<nav className="
fixed bottom-0 left-0 right-0 // Mobile: bottom nav
md:static md:top-0 // Tablet: top nav
lg:fixed lg:left-0 lg:top-0 lg:bottom-0 lg:w-64 // Desktop: sidebar
">
Next Step
With frontend patterns established, proceed to backend architecture →
