Skip to main content
affpapa.org
RU EN
skill

react-patterns · davila7 — Claude Code skill: React patterns and setup

Get guidance on React components, hooks, state choices, and performance. Useful when building or refactoring a React interface with TypeScript.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/react-patterns
Open on GitHub

What react-patterns does

This skill covers component boundaries, reusable hooks, and where state belongs, from a component’s own useState to Context or an app-wide store. It also addresses React 19 hooks such as useActionState and useOptimistic, along with TypeScript prop and event-handler types.

For slow renders, the guidance is to inspect performance with DevTools and locate the bottleneck before changing code. Then choose a targeted measure, such as virtualizing a large list or using useMemo for expensive calculations. That means memoization is not treated as a default fix. Error boundaries and testing levels are covered too.

Install it with npx claude-code-templates@latest --skill development/react-patterns. The listed tools are Read, Write, Edit, Glob, and Grep.

What it helps with

  • split a large component into focused pieces
  • choose where shared state should live
  • extract repeated logic into a custom hook
  • locate the cause of slow renders before optimizing
  • type component props and event handlers in TypeScript

Example prompts for the agent

  • Review this large React component and suggest a clearer component and state structure.
  • Find repeated logic here that should become a custom hook.
  • Help me locate the bottleneck in this slow list and choose a suitable fix.

How to install react-patterns

1claude-code-templates

npx claude-code-templates@latest --skill development/react-patterns

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill react-patterns -a claude-code

3Manually: put the files in place

~/.claude/skills/react-patterns/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/react-patterns/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about react-patterns

How do I install react-patterns in Claude Code?

Run npx claude-code-templates@latest --skill development/react-patterns. Then use the skill in Claude Code.

What does react-patterns do?

It provides guidance on React components, hooks, state management, performance, error handling, and testing. It also covers React 19 and TypeScript patterns.

How does react-patterns approach React performance issues?

It recommends profiling with DevTools to identify the bottleneck before applying a focused change. Suggestions include list virtualization and useMemo for expensive calculations.

Similar skills

All skills for Frontend and UI →

react-patterns by other authors comes first.

react-patterns affaan-m A skill for Claude and other AI editors that steers the agent toward idiomatic React 18/19: hooks discipline, server/client boundaries, forms, data fetching. CX Codex +1 4,900installs react-patterns giuseppe-trisciuoglio Teaches your agent React 19 and Next.js App Router patterns: Server Components, Server Actions, useOptimistic, Suspense boundaries. Useful when the app is already on React 19. CX Codex +1 4,800installs react-patterns jezweb A skill that checks React 19 components for waterfalls, bundle bloat and re-renders, and suggests composition fixes. Useful while writing or reviewing code. CX Codex +1 1,300installs react-patterns manutej A skill that hands your agent ready React recipes: hooks, component composition, state management and fewer wasted re-renders. CX Codex +1 471installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
create-database-migrations A Claude slash command that generates database migration files with versioning and rollback methods. Useful when you change a schema and don't want to hand-write up/down. 329installs nia-oracle A Claude subagent that finds repositories and documentation through Nia tools, indexes them, and pulls answers back out. 329installs accessibility This skill guides Claude Code through web accessibility reviews based on WCAG 2.1. Use it to inspect keyboard access, screen reader support, and interface elements. 325installs domain-name-brainstormer Generates domain name ideas for your project and checks which ones are free across several TLDs. Handy when you are naming a new product or rebranding. 321installs firebase This skill guides Firebase backend work across auth, databases, functions, storage, and hosting. Use it before choosing a data model or access rules. 321installs core-web-vitals This skill examines LCP, INP, and CLS and suggests code changes for loading, responsiveness, and layout stability. Use it when diagnosing weak page metrics. 315installs context-window-management A skill for handling LLM context windows: summarization, trimming, routing and fighting context rot. Useful when a long dialogue runs into the token limit. 309installs documentation-templates This skill provides outlines and templates for READMEs, API references, code comments, and project records. Use it when starting documentation or bringing existing pages into a clearer structure. 305installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor