Frontend UI Engineering

Overview

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."

When to Use

• Building new UI components or pages
• Modifying existing user-facing interfaces
• Implementing responsive layouts
• Adding interactivity or state management
• Fixing visual or UX issues

Component Architecture

File Structure

Colocate everything related to a component:

src/components/
  TaskList/
    TaskList.tsx          # Component implementation
    TaskList.test.tsx     # Tests
    TaskList.stories.tsx  # Storybook stories (if using)
    use-task-list.ts      # Custom hook (if complex state)
    types.ts              # Component-specific types (if needed)

Component Patterns

Prefer composition over configuration:

// Good: Composable
<Card>
  <CardHeader>
    <CardTitle>Tasks</CardTitle>
  </CardHeader>
  <CardBody>
    <TaskList tasks={tasks} />
  </CardBody>
</Card>

// Avoid: Over-configured
<Card
  title="Tasks"
  headerVariant="large"
  bodyPadding="md"
  content={<TaskList tasks={tasks} />}
/>

Keep components focused:

// Good: Does one thing
export function TaskItem({ task, onToggle, onDelete }: TaskItemProps) {
  return (
    <li className="flex items-center gap-3 p-3">
      <Checkbox checked={task.done} onChange={() => onToggle(task.id)} />
      <span className={task.done ? 'line-through text-muted' : ''}>{task.title}</span>
      <Button variant="ghost" size="sm" onClick={() => onDelete(task.id)}>
        <TrashIcon />
      </Button>
    </li>
  );
}

Separate data fetching from presentation:

// Container: handles data
export function TaskListContainer() {
  const { tasks, isLoading, error } = useTasks();

  if (isLoading) return <TaskListSkeleton />;
  if (error) return <ErrorState message="Failed to load tasks" retry={refetch} />;
  if (tasks.length === 0) return <EmptyState message="No tasks yet" />;

  return <TaskList tasks={tasks} />;
}

// Presentation: handles rendering
export function TaskList({ tasks }: { tasks: Task[] }) {
  return (
    <ul role="list" className="divide-y">
      {tasks.map(task => <TaskItem key={task.id} task={task} />)}
    </ul>
  );
}

State Management

Choose the simplest approach that works:

Local state (useState)           → Component-specific UI state
Lifted state                     → Shared between 2-3 sibling components
Context                          → Theme, auth, locale (read-heavy, write-rare)
URL state (searchParams)         → Filters, pagination, shareable UI state
Server state (React Query, SWR)  → Remote data with caching
Global store (Zustand, Redux)    → Complex client state shared app-wide

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.

Design System Adherence

Avoid the AI Aesthetic

AI-generated UI has recognizable patterns. Avoid all of them:

Spacing and Layout

Use a consistent spacing scale. Don't invent values:

/* Use the scale: 0.25rem increments (or whatever the project uses) */
/* Good */  padding: 1rem;      /* 16px */
/* Good */  gap: 0.75rem;       /* 12px */
/* Bad */   padding: 13px;      /* Not on any scale */
/* Bad */   margin-top: 2.3rem; /* Not on any scale */

Typography

Respect the type hierarchy:

h1 → Page title (one per page)
h2 → Section title
h3 → Subsection title
body → Default text
small → Secondary/helper text

Don't skip heading levels. Don't use heading styles for non-heading content.

Color

• Use semantic color tokens: text-primary, bg-surface, border-default — not raw hex values
• Ensure sufficient contrast (4.5:1 for normal text, 3:1 for large text)
• Don't rely solely on color to convey information (use icons, text, or patterns too)

Accessibility (WCAG 2.1 AA)

Every component must meet these standards:

Keyboard Navigation

// Every interactive element must be keyboard accessible
<button onClick={handleClick}>Click me</button>        // ✓ Focusable by default
<div onClick={handleClick}>Click me</div>               // ✗ Not focusable
<div role="button" tabIndex={0} onClick={handleClick}    // ✓ But prefer <button>
     onKeyDown={e => {
       if (e.key === 'Enter') handleClick();
       if (e.key === ' ') e.preventDefault();
     }}
     onKeyUp={e => {
       if (e.key === ' ') handleClick();
     }}>
  Click me
</div>

ARIA Labels

// Label interactive elements that lack visible text
<button aria-label="Close dialog"><XIcon /></button>

// Label form inputs
<label htmlFor="email">Email</label>
<input id="email" type="email" />

// Or use aria-label when no visible label exists
<input aria-label="Search tasks" type="search" />

Focus Management

// Move focus when content changes
function Dialog({ isOpen, onClose }: DialogProps) {
  const closeRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (isOpen) closeRef.current?.focus();
  }, [isOpen]);

  // Trap focus inside dialog when open
  return (
    <dialog open={isOpen}>
      <button ref={closeRef} onClick={onClose}>Close</button>
      {/* dialog content */}
    </dialog>
  );
}

Meaningful Empty and Error States

// Don't show blank screens
function TaskList({ tasks }: { tasks: Task[] }) {
  if (tasks.length === 0) {
    return (
      <div role="status" className="text-center py-12">
        <TasksEmptyIcon className="mx-auto h-12 w-12 text-muted" />
        <h3 className="mt-2 text-sm font-medium">No tasks</h3>
        <p className="mt-1 text-sm text-muted">Get started by creating a new task.</p>
        <Button className="mt-4" onClick={onCreateTask}>Create Task</Button>
      </div>
    );
  }

  return <ul role="list">...</ul>;
}

Responsive Design

Design for mobile first, then expand:

// Tailwind: mobile-first responsive
<div className="
  grid grid-cols-1      /* Mobile: single column */
  sm:grid-cols-2        /* Small: 2 columns */
  lg:grid-cols-3        /* Large: 3 columns */
  gap-4
">

Test at these breakpoints: 320px, 768px, 1024px, 1440px.

Loading and Transitions

// Skeleton loading (not spinners for content)
function TaskListSkeleton() {
  return (
    <div className="space-y-3" aria-busy="true" aria-label="Loading tasks">
      {Array.from({ length: 3 }).map((_, i) => (
        <div key={i} className="h-12 bg-muted animate-pulse rounded" />
      ))}
    </div>
  );
}

// Optimistic updates for perceived speed
function useToggleTask() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: toggleTask,
    onMutate: async (taskId) => {
      await queryClient.cancelQueries({ queryKey: ['tasks'] });
      const previous = queryClient.getQueryData(['tasks']);

      queryClient.setQueryData(['tasks'], (old: Task[]) =>
        old.map(t => t.id === taskId ? { ...t, done: !t.done } : t)
      );

      return { previous };
    },
    onError: (_err, _taskId, context) => {
      queryClient.setQueryData(['tasks'], context?.previous);
    },
  });
}

See Also

For detailed accessibility requirements and testing tools, see ../../references/accessibility-checklist.md.

Data-Bound UI Integration

When integrating live telemetry data into a static HTML page (e.g., a dashboard), follow this pattern to keep the page read-only and decoupled from backend changes:

1. Serve static HTML via a dedicated route (e.g., /analysis-v2) that loads a copy of the design files (HTML/CSS) from static/. Do not modify existing production pages unless required.
2. Annotate the HTML with data-bind attributes indicating the JSON path to the value (e.g., data-bind="trade_analytics.mean_return_pct"). Use data-fmt for formatting (pct, usd, cents, x, pctmul, etc.) and data-sign to force a sign (+/-) when appropriate.
3. Write a client-side JavaScript file (e.g., analysis_v2.js) that:
   • Fetches the JSON payload from /api/kpi (or with ?run_id=).
   • Parses the payload and resolves dotted paths.
   • Applies formatting and sign based on attributes.
   • Updates the DOM by setting textContent or innerHTML on matched elements.
   • Handles special derived values (e.g., progress bars, computed verdicts) via a derived() helper.
   • Paints charts by generating SVG paths from series data (histograms, lines, bands) and injecting them into .chart-area containers.
   • Updates badge classes based on verdict bands from the payload or computed gates.
4. Keep the page read-only: The JS should never make backend calls that modify state; it only reads from /api/kpi.
5. Verify via smoke-test: Use a headless Node harness that stubs the DOM, loads the JS, feeds a sample payload, and asserts that the expected text/attributes are painted.
6. Empty mock content: Remove hardcoded mock numbers and SVG paths from the HTML so that the design does not accidentally display stale values if JS fails.

Pitfalls:

• Do not bind to required_observations directly if the payload omits it; provide a fallback (e.g., 120) in the JS.
• Format percentages correctly: The payload may contain fractions (0.6) or percentages (-6.76). Use separate formatters (pct for percentages already multiplied by 100, pctmul for fractions).
• Negative depths: When rendering a loss depth (e.g., negative_depth_usd), ensure the displayed value is negative (multiply by -1).
• Empty payloads: On zero data, the page should display "unmeasured" or blanks, not fabricate numbers or claim a winning edge.
• Chart series: When painting histograms, use the bin data from the payload (e.g., position_returns, pair_costs) and scale appropriately.
• Avoid duplicate work: Let the existing JS toggle IIFE (e.g., for confidence tables) handle UI updates after you set data attributes; only paint what JS cannot.

Verifying a Vanilla-JS Change Without a Browser

Hand-written JS with no framework and no build step has no component test runner, and require()-ing the app file throws at parse time. Use the two recipes in references/vanilla-js-verification.md:

• Smoke-test a render function — slice the target function plus its real helpers out of the app file by string marker and run them in a vm context with a stub DOM. Never stub the whole world to load the file; keep the project's own helpers so the test proves the code, not your mock. Write the scratch as .cjs when the project is ESM, and delete it before committing.
• Prove a served change is live — launch through the project's own venv, grep the server source for route decorators instead of guessing paths, then fetch the static asset the page loads and confirm the new symbol is in the served bytes.

After building UI, verification is positive-evidence based: rendered DOM output or an interaction result for behavior, with a served-asset grep confirming delivery only, never "it looks fine" or a syntax check alone.

Common Rationalizations

Red Flags

• Components with more than 200 lines (split them)
• Inline styles or arbitrary pixel values
• Missing error states, loading states, or empty states
• No keyboard navigation testing
• Color as the sole indicator of state (red/green without text or icons)
• Generic "AI look" (purple gradients, oversized cards, stock layouts)

Verification

After building UI:

• Component renders without console errors
• All interactive elements are keyboard accessible (Tab through the page)
• Screen reader can convey the page's content and structure
• Responsive: works at 320px, 768px, 1024px, 1440px
• Loading, error, and empty states all handled
• Follows the project's design system (spacing, colors, typography)
• No accessibility warnings in dev tools or axe-core
• A no-build vanilla-JS change has a rendered-DOM sample or interaction result for behavior, and a served-asset grep for delivery (see references/vanilla-js-verification.md), not a syntax check alone