React Patterns
Idiomatic React 18/19 patterns: hooks discipline, server/client component boundaries, Suspense, forms, data fetching, and accessibility-first composition.
- What
- Idiomatic React 18/19 patterns: hooks discipline, server/client component boundaries, Suspense, forms, data fetching, and accessibility-first composition.
- Cost
- Free
- Needs
- Use "React Patterns" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: a patterns skill for writing and reviewing React 18/19 code the way experienced teams do. It covers hooks discipline (top-level only, cleanup every subscription, functional updaters, memoize only when a profiler proves it matters), the state-location decision tree (local state, lifted state, context, external store, or server-state library), and React Server Components versus Client Components boundaries in the Next.js App Router era. You get Suspense plus error-boundary placement guidance, React 19 form actions and controlled-input rules, a data-fetching decision matrix (RSC, TanStack Query, SWR), composition recipes (slots, compound components, render props), and performance rules for when React.memo actually helps instead of adding overhead. Accessibility is built in, not bolted on: semantic HTML first, keyboard reachability, labels on every input, focus management on route changes. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: pure guidance, nothing to install; focused on React 18/19, so older class-component codebases get less value. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseThe install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Use "React Patterns" with your Muse. Prerequisites: none beyond a React 18/19 codebase to work on. Pure guidance skill, nothing to install. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/react-patterns/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Review [this component / this hook] against these patterns and tell me what breaks the rules." 3. For new code, ask: "Write [this feature] following these React patterns, with accessibility-first composition." Tip: point it at a specific file or component for the sharpest review; broad "review my app" asks get generic answers. Safety: a skill is plain-text instructions; it runs nothing by itself. Never paste secrets into a chat, and review anything Muse proposes before it changes your code.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.