con un clic
react-design-principles
// Design React APIs and abstractions in a React-like way. Covers declarative interfaces, lifecycle-safe abstractions, minimal surfaces, zero-dependency bias, type safety, and documentation.
// Design React APIs and abstractions in a React-like way. Covers declarative interfaces, lifecycle-safe abstractions, minimal surfaces, zero-dependency bias, type safety, and documentation.
| name | react-design-principles |
| description | Design React APIs and abstractions in a React-like way. Covers declarative interfaces, lifecycle-safe abstractions, minimal surfaces, zero-dependency bias, type safety, and documentation. |
Use this skill for higher-level React API decisions: when to extract an abstraction, whether an API is declarative enough, or whether a helper fights React's model.
If the task becomes a specific custom hook implementation or review, pair this with react-hook-writing or react-hook-review.
React works best when APIs describe desired state, not orchestration steps.
Do not introduce abstractions that fight React's lifecycle model.
useMount, useEffectOnce, or useLifecycles unless there is a concrete external synchronization need.useWindowSize or useOnlineStatus over generic lifecycle wrappers.React already provides minimal primitives. Additional abstractions should stay composable and lightweight.
Good React abstractions are predictable in SSR, testable in isolation, and clear at the type level.
any.Dependencies add bundle weight, version pressure, and replacement cost.
peerDependencies over runtime dependencies for shared React packages.Use these questions before finalizing an abstraction:
See principles.md for the detailed rationale behind these principles.
Review React hooks against design philosophy. Checks return values, SSR safety, state design, effect usage, TypeScript patterns, and performance.
Write React hooks following design philosophy. Covers naming, return values, SSR safety, state design, effect patterns, TypeScript, and performance.
Create branches following repo conventions. Use when creating branches, starting new features.
PR/code review. 100% coverage, SSR safety, JSDoc validation. Use when reviewing code, checking PRs.
Create commits following repo conventions. Use when committing changes, creating commit messages.
Complete workflow from new Hook/Component/Util development to deployment. Use when starting new feature development.