// 13 tips tagged "react"
Give Claude your OpenAPI spec and ask for a handcrafted typed API client — clean method names, custom error handling, and TanStack Query hooks, without the ugly auto-gen output.
Ask Claude to generate Storybook stories from your existing React components — it reads your prop types and produces complete CSF3 story files with meaningful variants in seconds.
Ask Claude to audit your UI components for WCAG accessibility issues — it catches semantic problems, missing ARIA attributes, and keyboard navigation gaps that automated tools miss.
Give Claude a clear product brief and let it scaffold a working full-stack MVP — backend, frontend, and dev tooling — in a single session.
Migrate React class components to functional components with hooks — Claude handles lifecycle methods, state, refs, and HoC replacements automatically.
CSS animations are expressive but syntax-heavy. Describe the motion you want — fade, slide, bounce, shimmer — and Claude handles the keyframes, timing functions, and accessibility considerations.
Paste a React component and ask Claude to write comprehensive RTL tests covering rendering, user interactions, and async behaviour — following RTL best practices.
Describe your stack and build requirements and let Claude write a proper vite.config.ts — path aliases, dev proxies, chunk splitting, source maps, and tree-shaking all configured correctly.
Paste your PageSpeed Insights or DevTools data and ask Claude to identify the root causes of poor LCP, CLS, and INP scores — it traces each metric back to specific code and writes the fixes.
Paste your components and Claude will write a complete stories file — variants, edge cases, and interactive controls included.
Paste your components and Claude will flag WCAG violations, missing ARIA attributes, and keyboard navigation issues — then fix them.
Paste your API routes and ask Claude to generate complete MSW 2.x handlers with realistic payloads and error variants — no more hand-crafting mocks.