frontend-dev-kit

Audit or fix accessibility in React components — semantic HTML, keyboard navigation, focus management, ARIA, accessible names for shadcn/ui primitives (Dialog, Select, Combobox, Tooltip), live regions for loading and error states, and verification with axe, Playwright, or Chrome DevTools. Use when building interactive UI, fixing an a11y finding, or reviewing a component for accessibility.

Set up the HTTP layer using ky (httpClient from shared/api/base.ts), AppError normalization, and the central query-key registry. Use when establishing the HTTP layer, adding new API endpoints, or wiring auth headers. Never use raw fetch, axios, or import ky directly in feature code.

Audit a React FSD app for layer, slice, and segment consistency — import direction, public APIs, query-key registry, state ownership, auth, widgets, entities — then report violations and fix them after confirmation. Use when checking whether the current implementation matches the architecture, verifying FSD boundaries, or asking if features, entities, and widgets are structured correctly.

Debug and verify React UI in the browser via Chrome DevTools MCP. Use when testing UI behavior, inspecting DOM/CSS, checking console errors, or validating implemented features in a running app.

Two-axis review of the diff between HEAD and a fixed point the user supplies — does the code conform to this repo's documented coding standards, and does it faithfully implement the originating issue/spec. Runs both axes as parallel sub-agents so they don't pollute each other's context, then aggregates their findings. Use before merging, when auditing a branch or PR, or when asked to review a diff against a base ref.

Implement AppError taxonomy, error boundaries (three kinds — FeatureLoadError, render crash, and expected business outcomes), and global/per-mutation error feedback using shared/lib/notify. Use when adding error handling to a new feature, setting up global error notification, or wrapping every route/page and every feature with an error boundary so one crash never takes down the app.

Internationalize React components with react-i18next — every user-visible string as a typed key (global copy in shared/lib/i18n/locales, feature copy in the feature's locales), no hardcoded strings or string-map objects, useTranslation, the Trans component for embedded markup, Intl formatters for dates/numbers/currency, plural forms, translated zod messages, and RTL-safe layout. Use when adding translated copy or a new user-facing string, formatting a date/number/currency value, wiring up a plural count, or handling bidirectional text.

Hide a React FSD feature behind a feature flag, turn a flag on or off, remove a flag after launch, or delete a feature slice and every leftover dependency (routes, query keys, locales, flags, entities, e2e, stories). Use when the user asks to flag a feature, disable or enable a feature, unflag it, or remove a feature and clean up connected files.

Scaffold a standalone React component folder with the mandatory files — kebab-case name.tsx (button.tsx, custom-button.tsx), styles.ts (required, no exceptions), index.ts, types.ts — following FSD layer conventions. Use when adding a single component outside a full feature slice or wrapping a shadcn primitive.

Scaffold and implement a React feature slice following FSD with api/, ui/, models/, hooks/, config/, and index.ts. Use when building a new page, CRUD feature, or business capability. Query keys live in shared/api/query-keys/, not per-feature. Every component folder gets a mandatory styles.ts.

Create TanStack Query v5 hooks with the central query-key registry, typed fetchers via httpClient, and cache invalidation across features. Use when adding data fetching, mutations, or API integration. Cross-feature cache invalidation goes through shared/api/query-keys/, never through another feature's exports.

Build forms with react-hook-form + zod validation, shadcn/ui form components, and react-query mutations. Use when creating or updating forms, adding validation, or wiring form submission to API mutations.

Implement React Router v7 patterns for the FSD app/router/ structure — route config in routes.ts, lazyFeature() code splitting, RequireAuth/RequirePermission/RequireFlag wrapper guards, and sessionKey-derived session scoping. Use when adding new pages, setting up the router, or implementing auth-gated navigation.

Compose and wrap shadcn/ui primitives — installing with the CLI, keeping the registry's structure, style, and open/close animation verbatim, composing parts the way the registry demos do, asChild composition, closed-set prop constants (ButtonVariant, ButtonType), wrapper components that merge className via cn(), portalled components (Dialog, Popover, Select, Tooltip, Dropdown), and theming through CSS custom properties. No dark: variants, no ThemeProvider — one light palette only.

Write Storybook stories using CSF3 format with TypeScript. One story file per shared/ui primitive, and one story for a feature's public entry — not for inner feature parts. Use when documenting a shared component or a whole feature, building in isolation, or adding visual regression baselines.

Style React components using styles.ts (mandatory for every component folder), cva() for variants, and semantic CSS custom property tokens. ALL Tailwind classes go in styles.ts — never inline in JSX, no exceptions. One light palette only — no dark theme, no dark: variants, no ThemeProvider.

Write or fix tests for specified files, or for recently changed files if none are specified

Create and consume Zustand v5 stores for shared client-side state inside a feature's models/ segment. Stores are session-scoped (created by factory, not module-level). Use useShallow for derived collections. Never use for server data — that belongs in TanStack Query.