frontend-toolkit

Audit and fix accessibility (a11y) issues against WCAG 2.2 AA across React-family web and React Native — semantics, keyboard, focus, accessible names, contrast, and motion. Use when auditing a UI for accessibility, fixing a11y bugs, adding ARIA or focus management, reviewing for WCAG compliance, or making components usable with a screen reader and keyboard.

Add motion that communicates and stays cheap — animate compositor-only properties (transform/opacity), drive it off the main/JS thread, and honor reduced-motion preferences on web and React Native. Use when adding a transition or animation, building a motion-heavy interaction, fixing janky or expensive animation, or making motion respect prefers-reduced-motion / OS accessibility settings.

Design React-family and React Native components with clear composition, prop boundaries, and ownership — when to split, when to compose, what to lift, and what to keep local. Use when creating a new component, refactoring a bloated one, deciding a component's props/children API, or reviewing component structure.

Handle async data the house way — treat server state as a cache (not useState + useEffect), render loading/error/empty/success explicitly, fetch with keys/dedup/revalidation, and mutate optimistically then reconcile. Use when fetching data in a component, adding caching, wiring loading/error states, building a mutation, or reviewing data-fetching code.

Debug frontend web issues against a live Chrome via the Chrome DevTools MCP instead of guessing from source — reproduce the bug in the running page, then read the real console, network, DOM, and performance signal. Use when a page throws a console error, a network request fails or returns the wrong data, layout or styling renders wrong, or an interaction janks, and when first wiring the DevTools MCP into a repo.