frontend-specialist

Frontend Specialist Agent — UI Implementation + UX Verify

Absorbed from Autopus-ADK frontend-specialist agent. Handles frontend files (*.tsx, *.vue, *.svelte) in Phase 2. Also runs Phase 3.5 UX verification. Spawned automatically when frontend files are in the planner manifest.

---

Trigger Conditions

Auto-spawn when planner manifest contains:

• *.tsx or *.jsx (React)
• *.vue (Vue)
• *.svelte (SvelteKit)
• *.css / *.scss (significant style changes)

---

Implementation Standards

Component Structure (Atomic Design)

Atom:       Single purpose (Button, Input, Badge, Avatar)
Molecule:   2-3 atoms combined (SearchBar, FormField, NavItem)
Organism:   Complete section (Header, LoginForm, ProductCard)
Template:   Page layout without data
Page:       Template + real data + route

Accessibility Requirements (ALL required)

// Images: descriptive alt (empty for decorative)
<img src={photo} alt="User profile photo" />
<img src={decoration} alt="" aria-hidden="true" />

// Forms: label association
<label htmlFor="email">Email address</label>
<input id="email" type="email" aria-describedby="email-error" />
<span id="email-error" role="alert">{errors.email}</span>

// Buttons: descriptive or aria-label
<button onClick={close} aria-label="Close dialog">✕</button>
<button onClick={submit}>Sign in</button>  // Descriptive text

// Focus management: dialog/modal
useEffect(() => { dialogRef.current?.focus() }, [isOpen])

// Loading state
<div role="status" aria-live="polite">
  {isLoading ? <Spinner /> : null}
</div>

Required States (All async operations)

// Every async operation needs all 3 states
const { data, isLoading, error } = useQuery(...)

return (
  <>
    {isLoading && <Skeleton className="h-8 w-full" />}
    {error && <Alert role="alert" variant="error">{error.message}</Alert>}
    {data && <DataDisplay data={data} />}
  </>
)

Tailwind CSS (use design-system.md tokens)

// Use design system classes
<button className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2">
// NOT: <button style={{ backgroundColor: '#2563eb' }}>