frontend-ui-engineering

1# Frontend UI Engineering
2 
3## Overview
4 
5Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."
6 
7## When to Use
8 
9- Building new UI components or pages
10- Modifying existing user-facing interfaces
11- Implementing responsive layouts
12- Adding interactivity or state management
13- Fixing visual or UX issues
14 
15## Component Architecture
16 
17### File Structure
18 
19Colocate everything related to a component:
20 
21```
22src/components/
23  TaskList/
24    TaskList.tsx          # Component implementation
25    TaskList.test.tsx     # Tests
26    TaskList.stories.tsx  # Storybook stories (if using)
27    use-task-list.ts      # Custom hook (if complex state)
28    types.ts              # Component-specific types (if needed)
29```
30 
31### Component Patterns
32 
33**Prefer composition over configuration:**
34 
35```tsx
36// Good: Composable
37<Card>
38  <CardHeader>
39    <CardTitle>Tasks</CardTitle>
40  </CardHeader>
41  <CardBody>
42    <TaskList tasks={tasks} />
43  </CardBody>
44</Card>
45 
46// Avoid: Over-configured
47<Card
48  title="Tasks"
49  headerVariant="large"
50  bodyPadding="md"
51  content={<TaskList tasks={tasks} />}
52/>
53```
54 
55**Keep components focused:**
56 
57```tsx
58// Good: Does one thing
59export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
60…