Narrow React Prop Types

Use this skill when a React component's props have been widened for stories, mocks, tests, or demos and now express states the live application does not enter.

The goal is to make component types describe the real live-code-path contract, then require stories/tests/mocks to adapt to that contract instead of weakening it.

Core Requirements

• Find the actual non-test, non-Storybook call sites before changing types.
• Treat live code paths as the source of truth for the prop contract.
• Do not preserve optional props only because they make Storybook, tests, or mock data easier.
• Keep props optional only when there are non-Storybook, non-test call sites which do not provide them and which have a good reason for not doing so.
• Types should not enable expressing states which are not observed in non-test, non-Storybook call sites.
• Types should be as strict as possible so code can be as simple as possible.
• Prefer deriving and extracting types from existing live-code-path values and APIs where possible.

Workflow

For an example recurring GitHub Actions workflow that runs this skill through CodeLayer, see references/agent-narrow-component-props.yml. Its example agent memory file is references/narrow-component-props-memory.md. For CI agent response formatting, see references/response-template.md.