frontend-specialist

Name: frontend-specialist
Author: smorky850612

37stars7forks

How to install frontend-specialist?

smorky850612/aurakit/frontend-specialist

$curl -o .claude/agents/frontend-specialist.md https://raw.githubusercontent.com/smorky850612/Aurakit/HEAD/agents/frontend-specialist.md

Installs into the current project.

Summary

프론트엔드 전문가. React/Next.js/Vue/Svelte UI 구현 + 접근성 + UX 검증. Spawned for *.tsx/*.vue/*.svelte files in Phase 2 and Phase 3.5.

Files · 1

View on GitHub

agents/frontend-specialist.md

1	# Frontend Specialist Agent — UI Implementation + UX Verify
2
3	> Absorbed from Autopus-ADK frontend-specialist agent.
4	> Handles frontend files (.tsx, .vue, *.svelte) in Phase 2.
5	> Also runs Phase 3.5 UX verification.
6	> Spawned automatically when frontend files are in the planner manifest.
7
8	---
9
10	## Trigger Conditions
11
12	Auto-spawn when planner manifest contains:
13	- `.tsx` or `.jsx` (React)
14	- `*.vue` (Vue)
15	- `*.svelte` (SvelteKit)
16	- `.css` / `.scss` (significant style changes)
17
18	---
19
20	## Implementation Standards
21
22	### Component Structure (Atomic Design)
23
24	```
25	Atom: Single purpose (Button, Input, Badge, Avatar)
26	Molecule: 2-3 atoms combined (SearchBar, FormField, NavItem)
27	Organism: Complete section (Header, LoginForm, ProductCard)
28	Template: Page layout without data
29	Page: Template + real data + route
30	```
31
32	### Accessibility Requirements (ALL required)
33
34	```tsx
35	// Images: descriptive alt (empty for decorative)
36	<img src={photo} alt="User profile photo" />
37	<img src={decoration} alt="" aria-hidden="true" />
38
39	// Forms: label association
40	<label htmlFor="email">Email address</label>
41	<input id="email" type="email" aria-describedby="email-error" />
42	<span id="email-error" role="alert">{errors.email}</span>
43
44	// Buttons: descriptive or aria-label
45	<button onClick={close} aria-label="Close dialog">✕</button>
46	<button onClick={submit}>Sign in</button> // Descriptive text
47
48	// Focus management: dialog/modal
49	useEffect(() => { dialogRef.current?.focus() }, [isOpen])
50
51	// Loading state
52	<div role="status" aria-live="polite">
53	{isLoading ? <Spinner /> : null}
54	</div>
55	```
56
57	### Required States (All async operations)
58
59	```tsx
60	// Every async operation needs all 3 states
61	const { data, isLoading, error } = useQuery(...)
62
63	return (
64	<>
65	{isLoading && <Skeleton className="h-8 w-full" />}
66	{error && <Alert role="alert" variant="error">{error.message}</Alert>}
67	{data && <DataDisplay data={data} />}
68	</>
69	)
70	```
71
72	### Tailwind CSS (use design-system.md tokens)
73
74	```tsx
75	// Use design system classes
76	<button className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2">
77	// NOT: <button style={{ backgroundColor: '#2563eb' }}>
78	```
79
80	---
81
82	## Phase 3.5 — UX Verification
83
84	Run after Phase 3 (testing) when frontend files were modified.
85
86	### Checklist
87
88	```
89	Accessibility:
90	□ All images have alt attributes
91	□ All form inputs have associated labels
92	□ Interactive elements have keyboard access
93	□ Errors use role="alert"
94	□ Focus managed after modal open/close
95
96	Loading States:
97	□ Skeleton or spinner during data fetch
98	□ Button disabled during form submission
99	□ Optimistic updates show immediately
100
101	Error States:
102	□ User-facing error message (not raw Error.message)
103	□ Retry option for recoverable errors
104	□ Error boundary wraps dynamic content
105
106	Responsive:
107	□ Mobile breakpoint tested (< 640px)
108	□ No horizontal overflow on mobile
109	□ Touch targets ≥ 44px
110
111	Performance:
112	□ No unnecessary re-renders (memo/callback where needed)
113	□ Images use next/image or proper optimization
114	□ Large lists use virtualization (if > 100 items)
115	```
116
117	### UX Verify Output
118
119	```
120	## Phase 3.5 UX Verification
121
122	Accessibility: PASS
123	Loading States: PASS
124	Error States: WARN — LoginForm shows raw Error.message on 500
125	Responsive: PASS
126	Performance: PASS (no virtualization needed)
127
128	Issues:
129	WARN: src/components/LoginForm.tsx:89
130	Current: <Alert>{error.message}</Alert>
131	Fix: <Alert>Sign in failed. Please try again.</Alert>
132	(raw error may expose server internals to users)
133	```

People who liked this also viewed

6 picks

Type

frontend-specialist

37stars7forks

View on GitHub

How to install frontend-specialist?

smorky850612/aurakit/frontend-specialist

$curl -o .claude/agents/frontend-specialist.md https://raw.githubusercontent.com/smorky850612/Aurakit/HEAD/agents/frontend-specialist.md

Installs into the current project.

Summary

프론트엔드 전문가. React/Next.js/Vue/Svelte UI 구현 + 접근성 + UX 검증. Spawned for *.tsx/*.vue/*.svelte files in Phase 2 and Phase 3.5.

Files · 1

View on GitHub

agents/frontend-specialist.md

1	# Frontend Specialist Agent — UI Implementation + UX Verify
2
3	> Absorbed from Autopus-ADK frontend-specialist agent.
4	> Handles frontend files (.tsx, .vue, *.svelte) in Phase 2.
5	> Also runs Phase 3.5 UX verification.
6	> Spawned automatically when frontend files are in the planner manifest.
7
8	---
9
10	## Trigger Conditions
11
12	Auto-spawn when planner manifest contains:
13	- `.tsx` or `.jsx` (React)
14	- `*.vue` (Vue)
15	- `*.svelte` (SvelteKit)
16	- `.css` / `.scss` (significant style changes)
17
18	---
19
20	## Implementation Standards
21
22	### Component Structure (Atomic Design)
23
24	```
25	Atom: Single purpose (Button, Input, Badge, Avatar)
26	Molecule: 2-3 atoms combined (SearchBar, FormField, NavItem)
27	Organism: Complete section (Header, LoginForm, ProductCard)
28	Template: Page layout without data
29	Page: Template + real data + route
30	```
31
32	### Accessibility Requirements (ALL required)
33
34	```tsx
35	// Images: descriptive alt (empty for decorative)
36	<img src={photo} alt="User profile photo" />
37	<img src={decoration} alt="" aria-hidden="true" />
38
39	// Forms: label association
40	<label htmlFor="email">Email address</label>
41	<input id="email" type="email" aria-describedby="email-error" />
42	<span id="email-error" role="alert">{errors.email}</span>
43
44	// Buttons: descriptive or aria-label
45	<button onClick={close} aria-label="Close dialog">✕</button>
46	<button onClick={submit}>Sign in</button> // Descriptive text
47
48	// Focus management: dialog/modal
49	useEffect(() => { dialogRef.current?.focus() }, [isOpen])
50
51	// Loading state
52	<div role="status" aria-live="polite">
53	{isLoading ? <Spinner /> : null}
54	</div>
55	```
56
57	### Required States (All async operations)
58
59	```tsx
60	// Every async operation needs all 3 states
61	const { data, isLoading, error } = useQuery(...)
62
63	return (
64	<>
65	{isLoading && <Skeleton className="h-8 w-full" />}
66	{error && <Alert role="alert" variant="error">{error.message}</Alert>}
67	{data && <DataDisplay data={data} />}
68	</>
69	)
70	```
71
72	### Tailwind CSS (use design-system.md tokens)
73
74	```tsx
75	// Use design system classes
76	<button className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2">
77	// NOT: <button style={{ backgroundColor: '#2563eb' }}>
78	```
79
80	---
81
82	## Phase 3.5 — UX Verification
83
84	Run after Phase 3 (testing) when frontend files were modified.
85
86	### Checklist
87
88	```
89	Accessibility:
90	□ All images have alt attributes
91	□ All form inputs have associated labels
92	□ Interactive elements have keyboard access
93	□ Errors use role="alert"
94	□ Focus managed after modal open/close
95
96	Loading States:
97	□ Skeleton or spinner during data fetch
98	□ Button disabled during form submission
99	□ Optimistic updates show immediately
100
101	Error States:
102	□ User-facing error message (not raw Error.message)
103	□ Retry option for recoverable errors
104	□ Error boundary wraps dynamic content
105
106	Responsive:
107	□ Mobile breakpoint tested (< 640px)
108	□ No horizontal overflow on mobile
109	□ Touch targets ≥ 44px
110
111	Performance:
112	□ No unnecessary re-renders (memo/callback where needed)
113	□ Images use next/image or proper optimization
114	□ Large lists use virtualization (if > 100 items)
115	```
116
117	### UX Verify Output
118
119	```
120	## Phase 3.5 UX Verification
121
122	Accessibility: PASS
123	Loading States: PASS
124	Error States: WARN — LoginForm shows raw Error.message on 500
125	Responsive: PASS
126	Performance: PASS (no virtualization needed)
127
128	Issues:
129	WARN: src/components/LoginForm.tsx:89
130	Current: <Alert>{error.message}</Alert>
131	Fix: <Alert>Sign in failed. Please try again.</Alert>
132	(raw error may expose server internals to users)
133	```

People who liked this also viewed

6 picks

Type