# Narrow React Prop Types

Narrow React component prop types to match live code paths

- Repository: https://github.com/humanlayer/humanlayer (12740 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add humanlayer/humanlayer --skill narrow-react-prop-types -g -a claude-code -y`
Codex: `npx skills add humanlayer/humanlayer --skill narrow-react-prop-types -g -a codex -y`
Cursor: `npx skills add humanlayer/humanlayer --skill narrow-react-prop-types -g -a cursor -y`
Gemini CLI: `npx skills add humanlayer/humanlayer --skill narrow-react-prop-types -g -a gemini-cli -y`

## Description

narrow React component prop types to match live code paths

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

### 1. Identify the suspect component

Look for components with these signals:

- Large props interfaces with many optional fields.
- Optional callback calls such as `onSelect?.(...)` or `onArchive?.(...)`.
- Fallback state handling such as `items ?? []`, `count ?? 0`, or `handler && ...` around values live code likely always supplies.
- UI affordances that always render even though their callbacks are optional.
- Props that look demo-oriented, such as `defaultFoo`, alternate handler shapes, or display toggles not used by live code.

Do not pick a target from a story or test alone. Use stories/tests only as supporting evidence that the type has been widened, not as evidence that a state is real.

### 2. Find every live usage

Search for all imports/usages of the component, exported prop type, and shared child primitives.

Classify call sites by whether they are live code paths or support code:

The rest: https://github.com/humanlayer/humanlayer/blob/HEAD/.claude/skills/narrow-react-prop-types/SKILL.md