Skip to content
Get packs

React Patterns Guide

Writes and reviews React 18/19 components using hooks, server/client boundaries, forms and accessibility best practices

Source Download skill
Repository
affaan-m/ECC
Stars
295,127
Licence
MIT
Files
1 file

What it does

When installed, the agent follows a set of React coding guidelines whenever it writes or reviews React components. It favours deriving values during render instead of storing them in extra state, places Suspense and error boundaries sensibly, uses React 19 form actions for new forms, picks a state-management approach using a decision tree, and recommends libraries like TanStack Query for fetching data. The file is guidance only; it contains no scripts.

Great for

  • Frontend developers building or reviewing React or Next.js App Router code
  • Teams wanting consistent React patterns across a codebase
  • Developers migrating older class or useEffect-heavy React code

Skip it if

  • Non-React frameworks such as Vue or Angular, where these patterns do not apply
  • Beginners expecting a full React tutorial, since it assumes working knowledge of hooks and components
  • Projects on React versions earlier than 18 where the form-action examples will not run as written

Try asking

  • “Review this React component for hooks misuse and unnecessary useEffect state”
  • “Refactor this form to use React 19 form actions with validation”
  • “Should this state live in context, a store, or a server-state library? Here is my app structure”
  • “Split this page into server and client components for the Next.js App Router”
Step-by-step guide: how to use React Patterns GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    react-patterns.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip react-patterns.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip react-patterns.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the specific component or file to review so it can apply the rules to real code.
  • Mention your React and framework versions (for example React 18 with Next.js 14) so it chooses the correct form API.
  • The guidance references an external rules file via a relative link; if it is not installed alongside, the agent will only have the highlights in SKILL.md.

What's inside

  • SKILL.md

Redistributed unmodified from affaan-m/ECC under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.