# How the narrow-react-prop-types Skill Defines Unused and Live-Code-Path-Only Props

> Understand how the narrow-react-prop-types skill classifies unused and live-code-path-only props. Learn about production usage and non-test call sites.

- Repository: [HumanLayer/skills](https://github.com/humanlayer/skills)
- Tags: deep-dive
- Published: 2026-09-13

---

**The narrow-react-prop-types skill classifies React component props as "unused" (removed) when no non-test, non-Storybook call site references them, and as "live-code-path-only" (required) when every production usage supplies a value.**

The **narrow-react-prop-types** skill in the `humanlayer/skills` repository provides a systematic approach to tightening TypeScript prop interfaces by analyzing actual runtime usage patterns. Unlike traditional static analysis, this skill specifically filters out test files and Storybook stories to focus exclusively on production code paths when determining prop necessity.

## Defining "Unused" Props in narrow-react-prop-types

A prop is classified as **unused** or **removed** when it appears in a component's type definition but **no non-test, non-Storybook call site uses it**. According to the source documentation in [`plugins/narrow-react-prop-types/skills/narrow-react-prop-types/SKILL.md`](https://github.com/humanlayer/skills/blob/main/plugins/narrow-react-prop-types/skills/narrow-react-prop-types/SKILL.md) (lines 53-56), if a prop never appears in any live-code-path usage, it should be eliminated from the component’s public API entirely.

This classification helps maintain lean interfaces by automatically identifying defensive props added "just in case" that never materialize in actual application code. When the skill detects such a prop, it guides the CI agent to delete it from the TypeScript interface rather than marking it optional.

## Understanding Live-Code-Path-Only Props

The **live-code-path-only** classification describes props that are effectively required in production environments. A prop earns this designation when **every non-test, non-Storybook call site supplies it**, as documented in the same SKILL.md reference (lines 53-55).

However, the skill allows for nuanced handling of optional states. A prop becomes optional only if at least one live call site omits it **and that omission represents a meaningful runtime state**. If all production code paths provide the prop, the skill recommends marking it as required (non-optional) in the component’s interface, even if it was previously typed with a `?` modifier.

## Practical Implementation Example

The following TypeScript example demonstrates how the narrow-react-prop-types skill transforms a component interface based on actual usage analysis:

```tsx
// Before narrowing
type CardProps = {
  title?: string;           // ← optional – maybe unused
  onClose?: () => void;    // ← optional – maybe unused
  data: Data | null;       // ← required but nullable
};

// After applying the skill’s rules:
// - `title` is never passed in live code → removed
// - `onClose` is always supplied by live components → required
// - `data` is always supplied (may be null) → keep as required nullable
type CardProps = {
  onClose: () => void;
  data: Data | null;
};

```

In this scenario, the skill identified that `title` never appeared in production call sites, `onClose` was consistently provided across all live usages, and `data` remained necessary despite being nullable.

## Key Source Files and Configuration

The narrow-react-prop-types skill relies on several configuration files to drive its analysis:

- **[`plugins/narrow-react-prop-types/skills/narrow-react-prop-types/SKILL.md`](https://github.com/humanlayer/skills/blob/main/plugins/narrow-react-prop-types/skills/narrow-react-prop-types/SKILL.md)** — Contains the core classification logic defining removed (unused) and required (live-code-path-only) props based on non-test, non-Storybook usage patterns.

- **[`plugins/narrow-react-prop-types/skills/narrow-react-prop-types/references/response-template.md`](https://github.com/humanlayer/skills/blob/main/plugins/narrow-react-prop-types/skills/narrow-react-prop-types/references/response-template.md)** — Provides the template for the CI agent’s pull request responses, ensuring consistent formatting when reporting narrowed prop recommendations.

- **[`plugins/narrow-react-prop-types/skills/narrow-react-prop-types/references/agent-narrow-component-props.yml`](https://github.com/humanlayer/skills/blob/main/plugins/narrow-react-prop-types/skills/narrow-react-prop-types/references/agent-narrow-component-props.yml)** — Example GitHub Actions workflow configuration that executes the skill against your React codebase.

## Summary

- **Unused props** are those never referenced in non-test, non-Storybook code and should be removed from interface definitions entirely.
- **Live-code-path-only props** are supplied by every production call site and should be marked as required TypeScript properties.
- The skill ignores test files and Storybook stories to focus exclusively on runtime application behavior.
- Source definitions live in [`SKILL.md`](https://github.com/humanlayer/skills/blob/main/SKILL.md) within the `humanlayer/skills` repository under the narrow-react-prop-types plugin path.

## Frequently Asked Questions

### How does narrow-react-prop-types distinguish between test files and production code?

The skill explicitly filters out files located in test directories and Storybook stories when analyzing prop usage. It scans only **live (non-test, non-Storybook) call sites** to determine whether a prop is truly required or completely unused, ensuring that mock data structures in tests don't artificially inflate component interfaces.

### Can a prop be optional if it's only omitted in test files?

No. According to the narrow-react-prop-types classification system, if a prop is omitted exclusively in test files or Storybook stories but supplied in every production usage, it should be marked as **required** in the TypeScript interface. The skill considers only live-code-path usage patterns when determining optionality, making exceptions only when a live production call site legitimately omits the prop to represent a meaningful runtime state.

### Where can I view the exact classification rules for this skill?

The definitive source for classification rules is located at [`plugins/narrow-react-prop-types/skills/narrow-react-prop-types/SKILL.md`](https://github.com/humanlayer/skills/blob/main/plugins/narrow-react-prop-types/skills/narrow-react-prop-types/SKILL.md) in the `humanlayer/skills` repository. Lines 53-56 specifically define the criteria for removed (unused) and required (live-code-path-only) props, while the `references/` directory contains templates and workflow configurations for implementation.