frontend-ui-engineering

Name: frontend-ui-engineering
Author: jmxt3

32stars3forks

How to install frontend-ui-engineering?

jmxt3/gitscape.ai/frontend-ui-engineering

$npx -y skills add jmxt3/gitscape.ai --skill frontend-ui-engineering

Installs into the current project.

Summary

Builds production-quality UIs. Use when building or modifying user-facing interfaces. Use when creating components, implementing layouts, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

Files · 1

View on GitHub

SKILL.md

1	# Frontend UI Engineering
2
3	## Overview
4
5	Production-quality UI engineering: component architecture, accessible markup, responsive design, and state management. The bar is not "does it render?" — the bar is "would a user notice a difference from a product they paid for?"
6
7	## When to Use
8
9	- Building or modifying any user-facing component
10	- Implementing layouts, navigation, or data displays
11	- Adding or changing state management
12	- Any change that affects what a user sees or can interact with
13
14	## Component Architecture
15
16	### Hierarchy of Concerns
17
18	```
19	Page (route-level)
20	└── Layout (grid/columns)
21	├── Feature Component (data + logic)
22	│ └── UI Component (pure display, no data fetching)
23	└── Shared Component (reusable, generic)
24	```
25
26	- Page components handle routing. No business logic.
27	- Feature components fetch data and own state. Not reusable.
28	- UI components receive props, render output. Fully reusable, no side effects.
29	- Shared components are the design system: Button, Input, Modal, etc.
30
31	### Component Rules
32
33	```tsx
34	// GOOD: UI component — pure, testable, reusable
35	interface SkillCardProps {
36	name: string;
37	description: string;
38	onExport: () => void;
39	}
40
41	export function SkillCard({ name, description, onExport }: SkillCardProps) {
42	return (
43	<article className="skill-card">
44	<h3>{name}</h3>
45	<p>{description}</p>
46	<button onClick={onExport} aria-label={`Export ${name} skill`}>
47	Export
48	</button>
49	</article>
50	);
51	}
52
53	// BAD: UI component that fetches its own data — not reusable, hard to test
54	export function SkillCard({ skillId }: { skillId: string }) {
55	const { data } = useQuery(['skill', skillId], fetchSkill);
56	// ...
57	}
58	```
59
60	## Accessibility (Non-Negotiable)
61
62	Every interactive element must be keyboard-accessible and screen-reader-friendly.
63
64	### Minimum Requirements (WCAG 2.1 AA)
65
66	```tsx
67	// Interactive elements use semantic HTML
68	<button onClick={handleExport}>Export Skill</button> // ✓
69	<div onClick={handleExport}>Export Skill</div> // ✗
70
71	// Images have alt text
72	<img src={logo} alt="GitScape logo" />
73	<img src={decoration} alt="" /> // decorative: explicit empty string
74
75	// Forms have associated labels
76	<label htmlFor="repo-url">Repository URL</label>
77	<input id="repo-url" type="url" required />
78
79	// Icon-only buttons have aria-label
80	<button aria-label="Close dialog">✕</button>
81
82	// Loading states are announced
83	<div aria-busy={isLoading} aria-label="Loading skills">
84	{isLoading ? <Spinner /> : <SkillList />}
85	</div>
86	```
87
88	### Focus Management
89
90	- Tab order should follow visual order
91	- Modals trap focus while open; return focus on close
92	- Never remove focus outlines — style them instead
93
94	## State Management
95
96	### Where State Lives
97
98	\| State Type \| Where It Lives \| Example \|
99	\|---\|---\|---\|
100	\| Server data \| React Query / SWR \| Fetched skill list \|
101	\| URL state \| URL params \| Active tab, filters \|
102	\| UI state (local) \| `useState` in component \| Modal open/closed \|
103	\| UI state (shared) \| Lifted to nearest common ancestor \| Selected file set \|
104	\| Global app state \| Context or Zustand \| Auth user, theme \|
105
106	### Rules
107
108	- Never duplicate server state in local state — React Query is the cache
109	- Never put derived values in state — compute them during render
110	- Lift state only as high as necessary (not straight to global)
111
112	```tsx
113	// BAD: Derived value stored in state
114	const [filteredSkills, setFilteredSkills] = useState(skills);
115	useEffect(() => setFilteredSkills(skills.filter(...)), [skills, filter]);
116
117	// GOOD: Derived during render
118	const filteredSkills = skills.filter(...);
119	```
120
121	## Performance in Components
122
123	### Avoid Common Re-render Traps
124
125	```tsx
126	// BAD: Creates new object on every render, causing children to re-render
127	function SkillList() {
128	return <SkillFilters options={{ sortBy: 'name', order: 'asc' }} />;
129	}
130
131	// GOOD: Stable reference
132	const DEFAULT_OPTIONS = { sortBy: 'name', order: 'asc' } as const;
133	function SkillList() {
134	return <SkillFilters options={DEFAULT_OPTIONS} />;
135	}
136
137	// Use React.memo only for expensive components that receive stable props
138	const SkillCard = React.memo(function SkillCard({ skill }: Props) {
139	return <div>{/* expensive render */}</div>;
140	});
141	```
142
143	### File Preview Truncation (GitScape-Specific)
144
145	File previews must be truncated to prevent browser freeze. Large files kill the page:
146
147	```tsx
148	const MAX_PREVIEW_CHARS = 10_000; // ~200 lines
149
150	function FilePreview({ content }: { content: string }) {
151	const truncated = content.length > MAX_PREVIEW_CHARS;
152	const display = truncated ? content.slice(0, MAX_PREVIEW_CHARS) : content;
153	return (
154	<div>
155	<pre>{display}</pre>
156	{truncated && (
157	<p className="truncation-notice">
158	P

People who liked this also viewed

6 picks

Type

frontend-ui-engineering

32stars3forks

View on GitHub

How to install frontend-ui-engineering?

jmxt3/gitscape.ai/frontend-ui-engineering

$npx -y skills add jmxt3/gitscape.ai --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	Production-quality UI engineering: component architecture, accessible markup, responsive design, and state management. The bar is not "does it render?" — the bar is "would a user notice a difference from a product they paid for?"
6
7	## When to Use
8
9	- Building or modifying any user-facing component
10	- Implementing layouts, navigation, or data displays
11	- Adding or changing state management
12	- Any change that affects what a user sees or can interact with
13
14	## Component Architecture
15
16	### Hierarchy of Concerns
17
18	```
19	Page (route-level)
20	└── Layout (grid/columns)
21	├── Feature Component (data + logic)
22	│ └── UI Component (pure display, no data fetching)
23	└── Shared Component (reusable, generic)
24	```
25
26	- Page components handle routing. No business logic.
27	- Feature components fetch data and own state. Not reusable.
28	- UI components receive props, render output. Fully reusable, no side effects.
29	- Shared components are the design system: Button, Input, Modal, etc.
30
31	### Component Rules
32
33	```tsx
34	// GOOD: UI component — pure, testable, reusable
35	interface SkillCardProps {
36	name: string;
37	description: string;
38	onExport: () => void;
39	}
40
41	export function SkillCard({ name, description, onExport }: SkillCardProps) {
42	return (
43	<article className="skill-card">
44	<h3>{name}</h3>
45	<p>{description}</p>
46	<button onClick={onExport} aria-label={`Export ${name} skill`}>
47	Export
48	</button>
49	</article>
50	);
51	}
52
53	// BAD: UI component that fetches its own data — not reusable, hard to test
54	export function SkillCard({ skillId }: { skillId: string }) {
55	const { data } = useQuery(['skill', skillId], fetchSkill);
56	// ...
57	}
58	```
59
60	## Accessibility (Non-Negotiable)
61
62	Every interactive element must be keyboard-accessible and screen-reader-friendly.
63
64	### Minimum Requirements (WCAG 2.1 AA)
65
66	```tsx
67	// Interactive elements use semantic HTML
68	<button onClick={handleExport}>Export Skill</button> // ✓
69	<div onClick={handleExport}>Export Skill</div> // ✗
70
71	// Images have alt text
72	<img src={logo} alt="GitScape logo" />
73	<img src={decoration} alt="" /> // decorative: explicit empty string
74
75	// Forms have associated labels
76	<label htmlFor="repo-url">Repository URL</label>
77	<input id="repo-url" type="url" required />
78
79	// Icon-only buttons have aria-label
80	<button aria-label="Close dialog">✕</button>
81
82	// Loading states are announced
83	<div aria-busy={isLoading} aria-label="Loading skills">
84	{isLoading ? <Spinner /> : <SkillList />}
85	</div>
86	```
87
88	### Focus Management
89
90	- Tab order should follow visual order
91	- Modals trap focus while open; return focus on close
92	- Never remove focus outlines — style them instead
93
94	## State Management
95
96	### Where State Lives
97
98	\| State Type \| Where It Lives \| Example \|
99	\|---\|---\|---\|
100	\| Server data \| React Query / SWR \| Fetched skill list \|
101	\| URL state \| URL params \| Active tab, filters \|
102	\| UI state (local) \| `useState` in component \| Modal open/closed \|
103	\| UI state (shared) \| Lifted to nearest common ancestor \| Selected file set \|
104	\| Global app state \| Context or Zustand \| Auth user, theme \|
105
106	### Rules
107
108	- Never duplicate server state in local state — React Query is the cache
109	- Never put derived values in state — compute them during render
110	- Lift state only as high as necessary (not straight to global)
111
112	```tsx
113	// BAD: Derived value stored in state
114	const [filteredSkills, setFilteredSkills] = useState(skills);
115	useEffect(() => setFilteredSkills(skills.filter(...)), [skills, filter]);
116
117	// GOOD: Derived during render
118	const filteredSkills = skills.filter(...);
119	```
120
121	## Performance in Components
122
123	### Avoid Common Re-render Traps
124
125	```tsx
126	// BAD: Creates new object on every render, causing children to re-render
127	function SkillList() {
128	return <SkillFilters options={{ sortBy: 'name', order: 'asc' }} />;
129	}
130
131	// GOOD: Stable reference
132	const DEFAULT_OPTIONS = { sortBy: 'name', order: 'asc' } as const;
133	function SkillList() {
134	return <SkillFilters options={DEFAULT_OPTIONS} />;
135	}
136
137	// Use React.memo only for expensive components that receive stable props
138	const SkillCard = React.memo(function SkillCard({ skill }: Props) {
139	return <div>{/* expensive render */}</div>;
140	});
141	```
142
143	### File Preview Truncation (GitScape-Specific)
144
145	File previews must be truncated to prevent browser freeze. Large files kill the page:
146
147	```tsx
148	const MAX_PREVIEW_CHARS = 10_000; // ~200 lines
149
150	function FilePreview({ content }: { content: string }) {
151	const truncated = content.length > MAX_PREVIEW_CHARS;
152	const display = truncated ? content.slice(0, MAX_PREVIEW_CHARS) : content;
153	return (
154	<div>
155	<pre>{display}</pre>
156	{truncated && (
157	<p className="truncation-notice">
158	P

People who liked this also viewed

6 picks

Type