# Write React Component Design

> Write React design records. Use when the user explicitly requests one.

- Skill: `videojs/write-react-component-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add videojs/write-react-component-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/videojs/write-react-component-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: videojs (https://skillmd.com/u/videojs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/videojs/write-react-component-design

---


# React component design records

Read `internal/design/README.md`, nearby records, and relevant React code, tests, exports, and package metadata.

1. Require an explicit request. Use its path or the smallest UI record location, with React scope clear.
2. State the component boundary and only the rationale or constraint that code and tests cannot explain.
3. Cover ownership, anatomy, props, context, rendering, CSS APIs, opt-outs, exports, or bundle cost only when they explain the choice.
4. Link source instead of copying inventories or mechanics. Include alternatives or consequences only when material.

Keep it to a few paragraphs. Do not add an HTML contract or companion record without a separate request.

## Example

Input: “Write a React component design record for chapter selection.”

Output: A compact React decision, its non-inferable rationale, and useful source links.