Frontend Ui Engineering Skill Security Audit

1---2name: frontend-ui-engineering3description: 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 rather than AI-generated.4---

7677**Separate data fetching from presentation:**7879```tsx80// Container: handles data81export function TaskListContainer() {82  const { tasks, isLoading, error } = useTasks();8384  if (isLoading) return <TaskListSkeleton />;85  if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />;86  if (tasks.length === 0) return <EmptyState message="No tasks yet" />;8788  return <TaskList tasks={tasks} />;89}

168169### Keyboard Navigation170171```tsx172// Every interactive element must be keyboard accessible173<button onClick={handleClick}>Click me</button>        // ✓ Focusable by default174<div onClick={handleClick}>Click me</div>               // ✗ Not focusable175<div role="button" tabIndex={0} onClick={handleClick}    // ✓ But prefer <button>176     onKeyDown={e => {

186187### ARIA Labels188189```tsx190// Label interactive elements that lack visible text191<button aria-label="Close dialog"><XIcon /></button>192193// Label form inputs194<label htmlFor="email">Email</label>195<input id="email" type="email" />196197// Or use aria-label when no visible label exists198<input aria-label="Search tasks" type="search" />199```

317318## Verification319320After building UI:321322- [ ] Component renders without console errors323- [ ] All interactive elements are keyboard accessible (Tab through the page)324- [ ] Screen reader can convey the page's content and structure325- [ ] Responsive: works at 320px, 768px, 1024px, 1440px326- [ ] Loading, error, and empty states all handled327- [ ] Follows the project's design system (spacing, colors, typography)328- [ ] No accessibility warnings in dev tools or axe-core329