How to use the React Patterns Guide agent skill

What the react-patterns skill makes the agent do

An agent skill is a folder containing a SKILL.md file with instructions the agent reads when a task matches the skill's description. This one is triggered for writing or reviewing React components. Its description names React 18/19 patterns, including hooks discipline, server/client component boundaries, Suspense and error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition.

In practice, the skill pushes the agent toward specific choices. It favours deriving values during render instead of storing them in extra state, so a total computed from a list is calculated rather than copied into useState. It places Suspense and error boundaries close to the data they guard. For new forms it prefers React 19 form actions. For state it walks through a decision tree: local useState first, then lifting state, then context, an external store, or a server-state library. For fetching it recommends libraries such as TanStack Query and SWR, and advises against useEffect plus fetch for application data.

Install the skill from the ZIP download

Download the react-patterns ZIP from this page and unzip it. The package contains one file, SKILL.md. You can install it in two ways. For a personal setup that applies to all your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. The skill is meant to activate when you ask the agent to write or review React components, so describe the task in plain language. The skill's activation notes also cover JSX/TSX review, migrating class components or useEffect-heavy code, choosing between state approaches, and working with Server Components in the Next.js App Router.

Naming React and the kind of work you want is usually enough. Mentioning the skill by name is a reasonable backup if the agent does not seem to apply its guidance.

• Write a React 19 form for updating a user profile that uses form actions.
• Review this TSX component for useEffect misuse and derived state.
• Should this cart state live in context, a store, or local state?
• Migrate this class component to a function component with hooks.
• Add Suspense and an error boundary around this data-loading component in my Next.js App Router page.

What the skill needs and what it does not do

The skill lists no requirements. It runs no scripts and makes no network calls. The package is guidance only, so there is nothing to configure beyond placing the folder correctly.

The guidance assumes you already work with React. It is written for developers who know hooks and components, and it is not a beginner tutorial. It also targets React 18 and 19. The form-action example uses useActionState, which needs React 19; on React 18 the source tells you to use useFormState from react-dom instead.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Safety notes on scripts and network access

Because the skill contains only SKILL.md and no scripts, it cannot execute code or fetch data on its own. Its effects come from the instructions it gives the agent. The example code in the file, such as server actions and database calls, is illustrative and should be reviewed against your own project before you copy it.

As with any instruction file, read the SKILL.md before you install it so you know what guidance your agent will follow.

Tips for getting better results

The skill's guidance is most useful when your request includes context: the React version, whether you use Next.js App Router, and which data library, if any, your project already uses. That lets the agent pick compatible examples, such as useFormState on React 18 rather than useActionState.

Ask for reviews against the skill's rules when you want consistency across a codebase. The skill also says not to add useMemo or useCallback by default, so expect the agent to question premature memoization rather than add it everywhere.

• State your React version and framework in the request.
• Name your data library (TanStack Query, SWR, or RSC fetch) if you already use one.
• Use review requests to catch useEffect-based fetching and derived state stored in useState.