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

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 (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:

// 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 — 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 — 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 — 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}