FAI Web Coder

Goal

Translate product requirements into maintainable frontend code with predictable UX quality and implementation constraints.

Input Contract

Step 1 - Convert Requirement to UI Spec

{
  "page": "Pricing",
  "sections": ["Hero", "Plan Cards", "FAQ", "CTA"],
  "states": ["loading", "empty", "error", "success"],
  "actions": ["Select plan", "Contact sales"]
}

Step 2 - Scaffold Component Architecture

export function PricingPage() {
  return (
    <main>
      <HeroSection />
      <PlanGrid />
      <FaqSection />
      <CtaBanner />
    </main>
  );
}

Step 3 - Apply Responsive and A11y Rules

• Use semantic regions (main, section, nav, footer).
• Keep keyboard flow and focus visibility.
• Ensure contrast ratios meet WCAG AA.
• Use aria-live for async status updates.

:root {
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

Step 4 - Add State Handling

if (isLoading) return <SkeletonGrid />;
if (error) return <ErrorState retry={refetch} />;
if (!plans.length) return <EmptyState />;

Step 5 - Add Test Hooks

<button data-testid="select-plan-pro">Choose Pro</button>

Validation Checklist

Troubleshooting