🎨 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>
)
}
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 →
