Narrow React prop types
Treat the request text that activated this skill as the narrowing task. Treat production routes, wired components, providers, hooks, and exported production packages as the
contract. Stories, tests, fixtures, mocks, and demos are support code and must not widen it.
Use this method when React props permit states that live callers do not use. Use
typescript-best-practices for broader TypeScript
domain or boundary work; it may call this method for the prop-contract portion. A general
typecheck failure or a nullable state used in production is not evidence for narrowing.
- Find every import and usage of the component, its exported prop type, and affected child
primitives. Classify each call site as live or support code.
- From live call sites, classify each prop as required, meaningfully optional, nullable, or unused.
Required nullable state is not an optional prop.
- Tighten the exported type. Require handlers for always-rendered interactions and remove states
no live path enters.
- Prefer types derived from live APIs (
Parameters, ReturnType, Extract, and React setter
types) over duplicated approximations. Use explicit state generics when inference widens intent.
- Tighten internal child props and remove fallbacks or optional calls that existed only for the
widened contract.
- Update all variants sharing the type. Make stories, tests, fixtures, and mocks supply realistic
values; never loosen production types to reduce support-code setup.
- Run the repository's formatter, package typecheck, affected consumer typechecks, and focused
tests. Re-scan live call sites after the change.
Do not remove runtime states that real live call sites use. Report the components changed, live
evidence for each narrowing, support-code updates, exact checks, and risk.
1---2name: narrow-react-prop-types3description: Narrow React component prop types to the states used by live application call sites, then adapt stories, tests, and mocks to the stricter contract.4---56# Narrow React prop types78Treat the request text that activated this skill as the narrowing task. Treat production routes, wired components, providers, hooks, and exported production packages as the9contract. Stories, tests, fixtures, mocks, and demos are support code and must not widen it.1011Use this method when React props permit states that live callers do not use. Use12[`typescript-best-practices`](../typescript-best-practices/SKILL.md) for broader TypeScript13domain or boundary work; it may call this method for the prop-contract portion. A general14typecheck failure or a nullable state used in production is not evidence for narrowing.15161. Find every import and usage of the component, its exported prop type, and affected child17 primitives. Classify each call site as live or support code.182. From live call sites, classify each prop as required, meaningfully optional, nullable, or unused.19 Required nullable state is not an optional prop.203. Tighten the exported type. Require handlers for always-rendered interactions and remove states21 no live path enters.224. Prefer types derived from live APIs (`Parameters`, `ReturnType`, `Extract`, and React setter23 types) over duplicated approximations. Use explicit state generics when inference widens intent.245. Tighten internal child props and remove fallbacks or optional calls that existed only for the25 widened contract.266. Update all variants sharing the type. Make stories, tests, fixtures, and mocks supply realistic27 values; never loosen production types to reduce support-code setup.287. Run the repository's formatter, package typecheck, affected consumer typechecks, and focused29 tests. Re-scan live call sites after the change.3031Do not remove runtime states that real live call sites use. Report the components changed, live32evidence for each narrowing, support-code updates, exact checks, and risk.
njs14