Frontend Patterns
React and Next.js patterns for components, state, data fetching, forms, and render performance.
- What
- React and Next.js patterns for components, state, data fetching, forms, and render performance.
- Cost
- Free
- Needs
- Use "Frontend Patterns" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: a practical pattern library for modern frontend development with React and Next.js, written as pass/fail code examples an agent can apply directly while building or reviewing. Covers component composition over inheritance, state management choices (useState, useReducer, Zustand, Context and when each one earns its place), data fetching with SWR, React Query, and server components, render performance (memoization, virtualization, code splitting), forms with validation and controlled inputs (Zod schemas), and client-side routing. The emphasis is on judgment, not just syntax: which pattern fits which situation, and what the common failure modes look like. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: pure guidance, nothing to install; React and Next.js oriented throughout, so the examples assume that stack even though the underlying ideas (composition, colocation, derived state) travel well. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseWe automatically scan every listing and flag anything suspicious, but we can't review every line of community code. Here's how to check a build yourself before you install it.
Use "Frontend Patterns" with your Muse. Prerequisites: the Muse app (mobile or web). Pure guidance skill, nothing to install. A React or Next.js codebase to build or review. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/frontend-patterns/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Review [this component / this state logic] against these frontend patterns: [paste your code or describe the screen]." 3. Ask Muse to flag pattern violations (prop drilling that wants composition, derived state stored redundantly, missing memoization on hot paths) and propose the corrected shape with before/after code. Tip: ask for the "why" behind each flagged pattern, not just the fix. The judgment transfers to the next component you write. Safety: a skill is plain-text instructions; it runs nothing by itself. Review any code before committing it, never paste secrets into a chat, and review anything Muse proposes before it acts.
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.