react-hooks-component-api-review

Review React component and hook API contracts for unsafe props, callbacks, and state ownership.

2|Updated May 6, 2026
One-click install
npx skills add https://github.com/bpcakes/jig-skills --skill react-hooks-component-api-review-bpcakes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-hooks-component-api-review
Source: https://github.com/bpcakes/jig-skills/tree/main/plugins/jig-typescript/skills/react-hooks-component-api-review
Command: npx skills add https://github.com/bpcakes/jig-skills --skill react-hooks-component-api-review-bpcakes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Public React component and hook APIs often allow invalid prop combinations, ambiguous controlled/uncontrolled state ownership, and vague callback contracts that break consumers. This Skill audits exported TypeScript component and hook contracts and reports concrete, severity-ranked findings with suggested signature rewrites. ## Core Features & Use Cases - API Contract Audit: Inspects exported props types, hook signatures, children contracts, callbacks, generics, and polymorphic as props for unsound or ambiguous consumer contracts. - Severity-Ranked Findings: Reports blockers, medium, and low-risk issues with concrete invalid call sites and before/after type rewrites using discriminated unions and never props. - Detailed Checklist Reference: Loads references/component-api-rules.md covering boolean flag explosions, controlled/uncontrolled unions, compound components, reusable hooks, and acceptable tradeoffs. - Use Case: Before publishing a design-system Select component, run this review to catch that multiple does not change the value and onValueChange types, then apply the suggested single/multi discriminated union. ## Quick Start Ask the agent to review the public API of your exported React components and hooks in the current working changes and report findings with file locations without editing code.

Frequently Asked Questions about react-hooks-component-api-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review React component prop types for invalid combinations?

Review React prop types by checking for mutually exclusive or mode-dependent optional props, then remodel them as discriminated unions with `never` for impossible fields. This Skill automates that audit and shows before/after signatures for each finding.

How to type controlled and uncontrolled React components in TypeScript?

Type controlled and uncontrolled modes as a union: a controlled branch requiring `value` plus `onValueChange` with `defaultValue?: never`, and an uncontrolled branch with optional `defaultValue` and `value?: never`. This prevents passing both or switching modes over the component's lifetime.

Does this review apply to internal components with one caller?

The review is lighter for internal single-caller components and strict for exported, shared, or design-system code. It focuses on the public contract a consumer imports rather than routine internal UI implementation.

When should children be React.ReactNode versus a render prop?

Broad `React.ReactNode` children are fine for simple wrappers rendering arbitrary content. Use explicit slots or render-prop signatures when the component expects a function child, named regions, exactly one element, or text-only content.

What are the limitations of TypeScript for compound component APIs?

TypeScript cannot reliably enforce exact child component types after JSX element creation, so rules like "only allow Tab children" need runtime dev checks or structured props such as a `tabs` array. The review flags these cases and recommends safer contracts.