react-design-patterns
React Design Patterns
Overview
13 patterns ranked by 2025 popularity. Golden rule: start with a Custom Hook — upgrade to Compound Components only if structural sharing is needed.
Pattern Decision Guide
| Need | Pattern |
|---|---|
| Reusable logic, no UI opinion | Custom Hook |
| Controlled vs uncontrolled component behavior | Control Props |
| Tightly coupled UI subcomponents (Tabs, Modal, Accordion) | Compound Components |
| Logic without imposed styling | Headless Component |
| Separate data fetching from rendering | Container / Presentational |
| Global stable state (auth, theme) | Provider (Context) |
| Reverse data flow (child → parent) | Render Props |
| Full render control via children | Children as Function |
| Flexible API with pre-built props | Props Getters |
More from b4r7x/agent-skills
human-commit
Generates human-like git commit messages based on staged or unstaged changes. Reads git diff, analyzes what changed, and outputs 3 natural commit message options that sound like they were written by a developer — not AI. This skill should be used when the user wants a commit message, asks "what should I write for commit", "generate commit message", "human like commit", "wiadomość do commita", or just asks for help committing.
25humanize-readme
Rewrites a README.md to remove AI slop — buzzwords, generic openers, fake enthusiasm, and formulaic structure — replacing it with direct, honest, human-sounding writing. This skill should be used when the user wants to humanize a README, remove AI-generated writing patterns, make documentation sound less like ChatGPT wrote it, or asks to "fix the README", "humanize readme", "remove AI slop", "make it sound human".
25improve-prompt
Transforms a rough, unpolished prompt idea into a precise, structured AI coding prompt. Automatically researches the current project context (stack, file structure, conventions, git history) before generating. This skill should be used when the user provides a vague or "dirty" prompt idea and asks to refine, improve, or rewrite it — e.g. "improve this prompt", "refine my prompt", "ulepszony prompt", "dopracuj prompt", or simply describes what they want done in rough terms.
24react-anti-patterns
Use when reviewing React code — especially AI-generated code — to catch common anti-patterns. Covers 18 anti-patterns with detection difficulty, including stale closures, state mutation, useEffect abuse, and boolean explosion.
22deep-plan
Takes a rough, unpolished prompt idea and autonomously turns it into an implementation plan. Researches the project deeply, asks clarifying questions, generates a precise internal prompt, then executes it to produce a structured plan with todos. Designed for plan mode. Use when the user gives a vague feature request, rough idea, or "dirty" prompt and wants a ready-to-execute implementation plan — e.g. "plan this", "deep plan", "turn this into a plan", "zaplanuj to", "zrób plan".
20react-useeffect
Use when writing, reviewing, or debugging useEffect in React. Covers the 6 valid use cases, 7 anti-patterns, dependency pitfalls, and the decision tree for whether you actually need an effect.
19