graph TD
    A[UI Code Generation] --> B[Apply Rule Categories]
    B --> C[Accessibility: WCAG 2.2 AA]
    B --> D[Focus States: Visible + Logical]
    B --> E[Forms: Validation + Labels]
    B --> F[Animation: prefers-reduced-motion]
    B --> G[Typography: Fluid Scale]
    B --> H[Images: Responsive + Alt Text]
    B --> I[Performance: Lazy Load + CLS]
    B --> J[Navigation: Keyboard + Hierarchy]
    B --> K[Dark Mode: System Preference]
    B --> L[Touch: 44px Min Target]
    B --> M[i18n: RTL + Locale]
    C --> N[Validated UI Output]
    D --> N
    E --> N
    F --> N
    G --> N
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N

/* Focus: Always visible, high contrast */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Animation: Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Typography: Fluid responsive scale */
:root {
  --step-0: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --step-1: clamp(1.2rem, 0.61vw + 1.07rem, 1.58rem);
  --step-2: clamp(1.44rem, 0.98vw + 1.24rem, 2.11rem);
}

/* Dark mode: System preference + manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --fg: #ededed;
  }
}

/* Touch: Minimum 44px targets */
button, a, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

// Form: Accessible label + validation + error association
function EmailField({ error }: { error?: string }) {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Email address</label>
      <input
        id={id}
        type="email"
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        autoComplete="email"
      />
      {error && <p id={`${id}-error`} role="alert">{error}</p>}
    </div>
  );
}