From shipshitdev-library
Guides architectural refactoring for React apps covering component/state architecture, hook patterns, decomposition, coupling/cohesion, data flow, safety. For refactoring codebases, PR reviews, oversized components, module boundaries.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
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).
AGENTS.mdREADME.mdassets/templates/_template.mdreferences/_sections.mdreferences/arch-composition-over-props.mdreferences/arch-compound-components.mdreferences/arch-container-presentational.mdreferences/arch-feature-colocation.mdreferences/arch-headless-pattern.mdreferences/arch-interface-segregation.mdreferences/arch-push-client-low.mdreferences/arch-render-props-to-hooks.mdreferences/couple-barrel-free-features.mdreferences/couple-break-circular-deps.mdreferences/couple-dependency-injection.mdreferences/couple-stable-imports.mdreferences/data-context-module-pattern.mdreferences/data-granular-error-boundaries.mdreferences/data-server-first-fetch.mdreferences/data-tanstack-query-client.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
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).
| Category | Impact | Rules | Key Topics |
|---|---|---|---|
| Component Architecture | CRITICAL | 8 | Compound components, headless pattern, composition over props, client boundaries |
| State Architecture | CRITICAL | 7 | Colocation, state machines, URL state, derived values |
| Hook Patterns | HIGH | 6 | Single responsibility, naming, dependency stability, composition |
| Component Decomposition | HIGH | 6 | Scroll test, extraction by change reason, view/logic separation |
| Coupling & Cohesion | MEDIUM | 4 | Dependency injection, circular deps, stable imports, barrel-free |
| Data & Side Effects | MEDIUM | 4 | Server-first fetch, TanStack Query, error boundaries |
| Refactoring Safety | LOW-MEDIUM | 5 | Characterization tests, behavior testing, integration tests |
Critical patterns — get these right first:
Common mistakes — avoid these anti-patterns:
react skillreact-optimise skillreact-hook-form skill