🎨 Frontend Development Excellence
Frontend implementation should strictly follow the design system and patterns identified in the discovery phase
Component Architecture
Structured approach to component development
Design System
Consistent visual language from discovery
Responsive Design
Mobile-first with progressive enhancement
RTL & i18n
International support when needed
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>
)
}
Only use advanced component libraries for specific, complex needs identified in discovery
HeroUI
When to use:
- Complex data tables with filtering
- Advanced sorting and pagination
- Inline editing capabilities
- Export functionality
Implementation:// Wrap in custom component
import { DataTable } from 'heroui'
export function AnalyticsTable(props) {
return (
<DataTable
columns={columns}
data={data}
features={['sort', 'filter', 'export']}
/>
)
}
Aceternity
When to use:
- Hero sections with animations
- Interactive showcases
- Onboarding flows
- Marketing pages
Note: Heavy on animations, use sparingly 21st.dev Patterns
When to use:
- Need modern UI patterns
- Looking for inspiration
- Complex interactions
Process:
- Find pattern on 21st.dev
- Analyze implementation
- Rebuild with shadcn/ui base
- Customize for brand
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
">
RTL Implementation Guide
Implement full RTL support when required by discovery phase
CSS Logical Properties
/* Instead of left/right, use logical properties */
.component {
/* Old way */
/* margin-left: 1rem; */
/* padding-right: 2rem; */
/* Logical way */
margin-inline-start: 1rem;
padding-inline-end: 2rem;
inset-inline-start: 0;
border-inline-end: 1px solid;
}
Tailwind RTL Classes
// RTL-aware Tailwind classes
<div className="
text-left rtl:text-right
ml-4 rtl:ml-0 rtl:mr-4
space-x-4 rtl:space-x-reverse
divide-x rtl:divide-x-reverse
">
<button className="
pl-4 pr-8
rtl:pl-8 rtl:pr-4
border-l-4
rtl:border-l-0 rtl:border-r-4
">
<ChevronRight className="rtl:rotate-180" />
</button>
</div>
i18n Implementation
// i18n configuration
import { useTranslation } from 'next-i18next'
export function Component() {
const { t, i18n } = useTranslation()
const isRTL = ['ar', 'he', 'fa'].includes(i18n.language)
return (
<div dir={isRTL ? 'rtl' : 'ltr'}>
<h1>{t('welcome')}</h1>
</div>
)
}
Test RTL thoroughly with native speakers - automatic RTL is rarely perfect
Next Step
With frontend patterns established, proceed to backend architecture →
