frontend-ui-engineering

Name: frontend-ui-engineering
Author: addyosmani

16kinstalls8.6kforks

How to install frontend-ui-engineering?

addyosmani/agent-skills/frontend-ui-engineering

$npx -y skills add addyosmani/agent-skills --skill frontend-ui-engineering

Installs into the current project.

Summary

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality

Files · 1

View on GitHub

SKILL.md

1	# Frontend UI Engineering
2
3	## Overview
4
5	Build 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
19	Colocate everything related to a component:
20
21	```
22	src/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
59	export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
60	return (
61	<li className="flex items-center gap-3 p-3">
62	<Checkbox checked={task.done} onChange={() => onToggle(task.id)} />
63	<span className={task.done ? 'line-through text-muted' : ''}>{task.title}</span>
64	<Button variant="ghost" size="sm" onClick={() => onDelete(task.id)}>
65	<TrashIcon />
66	</Button>
67	</li>
68	);
69	}
70	```
71
72	Separate data fetching from presentation:
73
74	```tsx
75	// Container: handles data
76	export function TaskListContainer() {
77	const { tasks, isLoading, error } = useTasks();
78
79	if (isLoading) return <TaskListSkeleton />;
80	if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />;
81	if (tasks.length === 0) return <EmptyState message="No tasks yet" />;
82
83	return <TaskList tasks={tasks} />;
84	}
85
86	// Presentation: handles rendering
87	export function TaskList({ tasks }: { tasks: Task[] }) {
88	return (
89	<ul role="list" className="divide-y">
90	{tasks.map(task => <TaskItem key={task.id} task={task} />)}
91	</ul>
92	);
93	}
94	```
95
96	## State Management
97
98	Choose the simplest approach that works:
99
100	```
101	Local state (useState) → Component-specific UI state
102	Lifted state → Shared between 2-3 sibling components
103	Context → Theme, auth, locale (read-heavy, write-rare)
104	URL state (searchParams) → Filters, pagination, shareable UI state
105	Server state (React Query, SWR) → Remote data with caching
106	Global store (Zustand, Redux) → Complex client state shared app-wide
107	```
108
109	Avoid prop drilling deeper than 3 levels. If you're passing props through components that don't use them, introduce context or restructure the component tree.
110
111	## Design System Adherence
112
113	### Avoid the AI Aesthetic
114
115	AI-generated UI has recognizable patterns. Avoid all of them:
116
117	\| AI Default \| Why It Is a Problem \| Production Quality \|
118	\|---\|---\|---\|
119	\| Purple/indigo everything \| Models default to visually "safe" palettes, making every app look identical \| Use the project's actual color palette \|
120	\| Excessive gradients \| Gradients add visual noise and clash with most design systems \| Flat or subtle gradients matching the design system \|
121	\| Rounded everything (rounded-2xl) \| Maximum rounding signals "friendly" but ignores the hierarchy of corner radii in real designs \| Consistent border-radius from the design system \|
122	\| Generic hero sections \| Template-driven layout with no connection to the actual content or user need \| Content-first layouts \|
123	\| Lorem ipsum-style copy \| Placeholder text hides layout problems that real content reveals (length, wrapping, overflow) \| Realistic placeholder content \|
124	\| Oversized padding everywhere \| Equal generous padding destroys visual hierarchy and wastes screen space \| Consistent spacing scale \|
125	\| Stock card grids \| Uniform grids are a layout shortcut that ignores information priority and scanning patterns \| Purpose-driven layouts \|
126	\| Shadow-heavy design \| Layered shadows add depth that competes with content and slows rendering on low-end devices \| Subtle or no shadows unless the design system specifies \|
127
128	### Spacing and Layout
129
130	Use a consistent spacing scale. Don't invent values:
131
132	``

People who liked this also viewed

6 picks

Type

frontend-ui-engineering

16kinstalls8.6kforks

View on GitHub

How to install frontend-ui-engineering?

addyosmani/agent-skills/frontend-ui-engineering

$npx -y skills add addyosmani/agent-skills --skill frontend-ui-engineering

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend UI Engineering
2
3	## Overview
4
5	Build 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
19	Colocate everything related to a component:
20
21	```
22	src/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
59	export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
60	return (
61	<li className="flex items-center gap-3 p-3">
62	<Checkbox checked={task.done} onChange={() => onToggle(task.id)} />
63	<span className={task.done ? 'line-through text-muted' : ''}>{task.title}</span>
64	<Button variant="ghost" size="sm" onClick={() => onDelete(task.id)}>
65	<TrashIcon />
66	</Button>
67	</li>
68	);
69	}
70	```
71
72	Separate data fetching from presentation:
73
74	```tsx
75	// Container: handles data
76	export function TaskListContainer() {
77	const { tasks, isLoading, error } = useTasks();
78
79	if (isLoading) return <TaskListSkeleton />;
80	if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />;
81	if (tasks.length === 0) return <EmptyState message="No tasks yet" />;
82
83	return <TaskList tasks={tasks} />;
84	}
85
86	// Presentation: handles rendering
87	export function TaskList({ tasks }: { tasks: Task[] }) {
88	return (
89	<ul role="list" className="divide-y">
90	{tasks.map(task => <TaskItem key={task.id} task={task} />)}
91	</ul>
92	);
93	}
94	```
95
96	## State Management
97
98	Choose the simplest approach that works:
99
100	```
101	Local state (useState) → Component-specific UI state
102	Lifted state → Shared between 2-3 sibling components
103	Context → Theme, auth, locale (read-heavy, write-rare)
104	URL state (searchParams) → Filters, pagination, shareable UI state
105	Server state (React Query, SWR) → Remote data with caching
106	Global store (Zustand, Redux) → Complex client state shared app-wide
107	```
108
109	Avoid prop drilling deeper than 3 levels. If you're passing props through components that don't use them, introduce context or restructure the component tree.
110
111	## Design System Adherence
112
113	### Avoid the AI Aesthetic
114
115	AI-generated UI has recognizable patterns. Avoid all of them:
116
117	\| AI Default \| Why It Is a Problem \| Production Quality \|
118	\|---\|---\|---\|
119	\| Purple/indigo everything \| Models default to visually "safe" palettes, making every app look identical \| Use the project's actual color palette \|
120	\| Excessive gradients \| Gradients add visual noise and clash with most design systems \| Flat or subtle gradients matching the design system \|
121	\| Rounded everything (rounded-2xl) \| Maximum rounding signals "friendly" but ignores the hierarchy of corner radii in real designs \| Consistent border-radius from the design system \|
122	\| Generic hero sections \| Template-driven layout with no connection to the actual content or user need \| Content-first layouts \|
123	\| Lorem ipsum-style copy \| Placeholder text hides layout problems that real content reveals (length, wrapping, overflow) \| Realistic placeholder content \|
124	\| Oversized padding everywhere \| Equal generous padding destroys visual hierarchy and wastes screen space \| Consistent spacing scale \|
125	\| Stock card grids \| Uniform grids are a layout shortcut that ignores information priority and scanning patterns \| Purpose-driven layouts \|
126	\| Shadow-heavy design \| Layered shadows add depth that competes with content and slows rendering on low-end devices \| Subtle or no shadows unless the design system specifies \|
127
128	### Spacing and Layout
129
130	Use a consistent spacing scale. Don't invent values:
131
132	``

People who liked this also viewed

6 picks

Type