React Refactor
A comprehensive architectural guide for cleaning up React codebases with 40 rules across component structure, state management, and hook patterns. Organized by impact level, so you tackle critical issues like state colocation and compound components before worrying about test strategies. Most useful when you're refactoring a messy codebase, reviewing PRs for architectural smells, or breaking apart those 800-line components everyone's afraid to touch. The rules are specific and measurable, like "reduces prop count by 50-70%" or "eliminates 2-4 levels of nesting." Deliberately scoped to architecture only, so pair it with the react-optimise skill if you're chasing performance wins too.
- skills.sh installs
- 791
- GitHub stars
- 222
- last updated
- Aug 21, 2026
Install
$ npx -y skills add pproenca/dot-skills --skill react-refactor --agent claude-codeInstalls into .claude/skills of the current project.
Files
React Refactor Best Practices
Architectural refactoring guide for React applications. Contains 40 rules across 7 categories, prioritized by impact from critical (component and state architecture) to incremental (refactoring safety).
When to Apply
- Refactoring existing React codebases or planning large-scale restructuring
- Reviewing PRs for architectural issues and code smells
- Decomposing oversized components into focused units
- Extracting reusable hooks from component logic
- Improving testability of React code
- Reducing coupling between feature modules
Rule Categories
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/pproenca/dot-skills
- Categories
- Frontend Development, Backend & APIs, Documentation, Code Review & Quality, Debugging
- First seen
- Jun 3, 2026
More from pproenca/dot-skills
All 100- Chrome Extension Ui732
- Shadcn732
- Chrome Extension729
- Shell704
- Tailwind657
- Refactor651
- Expo561
- React496
- Tailwind Responsive Ui470
- Tailwind Ui Refactor467
- Zustand453
- Debug444
- Ios Design436
- Feature Spec431
- Feature Arch423
- React Testing Library418
- Jscodeshift416
- Expo React Native Coder415
- Tdd415
- Humanize409
- React Optimise403
- Knip Deadcode390
- Rails Hotwire380
- Ts Google378
Recommended
More Frontend Development
react-hook-form-zodovachiever/droid-tingsBuild type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with 724skills.sh installs
sentry-nextjs-sdkgetsentry/sentry-agent-skillsFull Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, 665skills.sh installs
react-native-animationspluginagentmarketplace/custom-plugin-react-nativeMaster animations - Reanimated 3, Gesture Handler, layout animations, and performance optimization663skills.sh installs
nextjs-best-practicesdavila7/claude-code-templatesNext.js App Router principles. Server Components, data fetching, routing patterns.632skills.sh installs
vercel-react-best-practiceslanggenius/difyReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c612skills.sh installs
frontend-accessibilityaj-geddes/useful-ai-promptsImplement WCAG compliance using semantic HTML, ARIA, keyboard navigation, and screen reader support. Use when building inclusive applications for all users.604skills.sh installs