@bovinphang

fec-testing-strategy guides frontend test layer selection by risk and code proximity, mapping coverage across static checks, unit, component, integration, e2e, visual, a11y, security and performance tiers to avoid over-relying on slow or fragile test categories.

fec-api-integration covers frontend-to-backend boundary design, typed client choices (tRPC, OpenAPI, fetch), error mapping to user actions, auth refresh queueing, upload/realtime transport selection, and integration verification checkpoints. scoped to cross-boundary concerns, not backend-only or query cache policy.

fec-typescript-type-safety covers type boundary definition, type guards for untrusted data, discriminated unions for state machines, constrained generics, and type testing for public APIs. addresses frontend type contract design with concrete patterns and anti-patterns.

fec-svg-animation covers selection and implementation of svg animation strategies (css, framer motion, gsap, smil) with worked examples, motion accessibility via prefers-reduced-motion, and performance constraints for icon, logo, and illustration motion.

fec-responsive-layout covers mobile-first design strategy, fluid sizing techniques, container queries, data-dense table handling, and touch/keyboard verification across viewport sizes. outputs actionable layout decisions and validation checkpoints.

fec-accessibility-check covers wcag 2.2 aa frontend audits across semantic structure, keyboard navigation, aria patterns, screen reader behavior, and visual/touch accessibility. includes procedural steps, constraint enforcement, and reference templates for consistent reporting.

fec-vite-project-standard covers vite configuration, environment variable safety, dev server setup, and build optimization for applications and component libraries. addresses project type detection, plugin selection, and common production hazards.

fec-state-management guides ownership classification across react, vue, next.js, nuxt and state layers (local ui, form, server, url, global, persistence). classifies before tooling and enforces minimal derived state to prevent store bloat and sync bugs.

fec-refactor-clean removes dead frontend code, unused exports, and stale dependencies under verification guardrails, categorizing deletions by risk level and requiring validation after each batch.

fec-form-handling covers react hook form and zod integration for substantial forms, including validation schemas, dynamic fields, file uploads, and multi-step flows with accessibility markers and performance guidance.

fec-pwa-implementation covers installability, service worker setup, workbox caching strategy, offline fallbacks and update prompts. scope-gates on use cases (mobile/desktop install, weak network) and constraints (https, cache segmentation, ios limitations).

fec-source-driven-development enforces fact-based frontend decisions grounded in official docs, current versions, and project reality rather than stale patterns. applies to framework behavior, library changes, browser apis, and version-sensitive choices.

fec-data-fetching covers server-state management patterns for typed queries, caching strategies, invalidation workflows, mutations with optimistic updates, and ssr integration. applies to tanstack query, swr, and framework-native solutions.

fec-monorepo-project-standard covers directory layout, dependency linking, task orchestration, and publishing constraints for pnpm/turborepo/nx monorepos. prescriptive on structure but light on troubleshooting and failure recovery.

fec-implement-from-design guides high-fidelity ui implementation from multiple design tools (figma, sketch, mastergo, pixso, modao, mockingbot) with emphasis on component reuse, design token mapping, accessibility, and production-ready frontend code.

fec-storybook-component-doc covers isolated component state documentation, design-system presentation, story setup patterns, decorators for provider dependencies, and optional interaction or visual regression testing within storybook scope only.

fec-legacy-web-standard covers safe maintenance of vanilla js, jquery, html/css and server-rendered templates without framework migration, enforcing namespace discipline, dom caching, ajax error handling and xss prevention within existing architecture.

fec-doc-sync aligns frontend project documentation against source-of-truth files like package.json, configs, routes, and schemas. covers multilingual readme sync, fact extraction from code artifacts, and consistency validation across documentation entry points.

fec-tailwind-design-system guides token mapping, component variants, and maintainable class organization for tailwind projects. covers theme extension, dark mode strategy, and responsive utility governance but lacks concrete configuration examples.

fec-browser-storage guides selection and implementation of client-side storage mechanisms (localStorage, sessionStorage, IndexedDB, cookies) based on data sensitivity, volume, and lifecycle requirements, with security constraints and cleanup strategies.

fec-nuxt-project-standard covers file-based routing, rendering modes (ssr/ssg/spa), data fetching with usefetch/useasyncdata, middleware, plugins and server routes for nuxt 3 projects. lacks actionable decision trees and explicit failure recovery.

fec-alchemy covers absorbing ideas, patterns, and practices from reference systems into a target project through original redesign rather than copying. structured around baseline analysis, capability extraction, and architecture-native reimplementation.

Use when implementing or reviewing frontend route protection, auth guards, RBAC, permission routes, login state handling, redirects, middleware, React Router...

Use when implementing new frontend behavior, fixing bugs, or refactoring logic where tests can describe the expected behavior first. Apply to components, hoo...

Use when optimizing or reviewing large lists, virtual scrolling, windowing, react-window, TanStack Virtual, variable-height rows, dynamic measurement, infini...

Use when diagnosing frontend build failures, runtime errors, UI anomalies, API/data problems, white screens, request failures, or unexplained production exce...

Use when running existing project validation commands and fixing failures after code changes, including lint, type-check, unit/integration test, build, CI, o...

Use when reviewing frontend security risks such as XSS, CSRF, sensitive data exposure, unsafe DOM APIs, untrusted user input, authentication/token handling,...

Use when moving expensive browser work off the main thread with Web Workers, SharedWorker, worker pools, Comlink, transferable objects, Vite/Webpack worker i...

Use when the user asks for general frontend code review, PR review, merge-readiness assessment, architecture maintainability, type-safety, rendering/state ri...

Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, m...