FFT-Frontend - React, Vue, Angular, and Modern UI
Overview
Section titled “Overview”FFT-Frontend builds interfaces that are fast, accessible, and maintainable. It applies component architecture that scales, hits Core Web Vitals budgets, and enforces FlowForge’s 80% test-coverage floor with Rule #3-compliant test locations. It is as comfortable writing a new design system as integrating with an existing one.
Capabilities
Section titled “Capabilities”- React: hooks, server components, Suspense, React Query, Zustand and Redux patterns.
- Vue: Vue 3 Composition API, Pinia, Nuxt 3 SSR.
- Angular: standalone components, signals, RxJS patterns.
- Component architecture: composition over inheritance, headless components, compound components.
- Accessibility: WCAG 2.1 AA, keyboard navigation, ARIA patterns, screen-reader QA.
- Performance: code splitting, lazy hydration, image optimization, Core Web Vitals budgets.
- Animation: Framer Motion, GSAP, CSS animations with reduced-motion support.
- Testing: Testing Library, Vitest, Playwright, Storybook-driven visual regression.
When to Use
Section titled “When to Use”- Building a new feature’s UI after design approval.
- Migrating a legacy frontend to a modern framework or from JavaScript to TypeScript.
- Diagnosing and fixing performance regressions (LCP, CLS, INP).
- Adding accessibility fixes or refactoring for keyboard-first navigation.
Example Prompts
Section titled “Example Prompts”"Implement the patient-dashboard page in React with lazy loading and full keyboard support""Refactor the checkout flow into a headless state machine to reuse the logic in a future mobile app""Audit the landing page for Core Web Vitals and propose a prioritized optimization list"