write-react-component-design

Writes concise React component design records documenting non-inferable architectural decisions.

931|91|Updated Aug 13, 2025
One-click install
npx skills add https://github.com/videojs/v10 --skill write-react-component-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: write-react-component-design
Source: https://github.com/videojs/v10/tree/main/.agents/skills/write-react-component-design
Command: npx skills add https://github.com/videojs/v10 --skill write-react-component-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React component design decisions often live only in code, leaving teams unable to understand why a component was structured a certain way. This Skill produces compact design records that capture the rationale and constraints that code and tests alone cannot explain.

Core Features & Use Cases

  • Design Record Authoring: Writes focused React component design records covering ownership, anatomy, props, context, rendering, CSS APIs, opt-outs, exports, and bundle cost only where they explain a decision.
  • Source-Grounded Documentation: Reads existing design records, React code, tests, exports, and package metadata before writing, and links to source instead of duplicating inventories.
  • Use Case: A maintainer asks for a design record for a chapter selection component. The Skill inspects the relevant code and tests, then produces a few paragraphs stating the component boundary, the non-inferable rationale, and links to source files.

Quick Start

Ask the assistant to write a React component design record for a specific component, such as chapter selection.

Frequently Asked Questions about write-react-component-design

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

FAQPage Schema
How do I write a React component design record?

Explicitly request a design record for a specific component, optionally providing a path. The Skill reads nearby records, React code, tests, and package metadata, then writes a few paragraphs covering the component boundary and rationale that code cannot explain.

What should a React component design document include?

It should state the component boundary and only the rationale or constraints that code and tests cannot explain. Topics like ownership, anatomy, props, context, rendering, CSS APIs, opt-outs, exports, or bundle cost are covered only when they explain the decision.

When should I request a component design record?

Request one only when you explicitly need documented rationale for a React component decision. The Skill requires an explicit request and will not generate records proactively or add companion records without a separate request.

Does the design record duplicate code documentation?

No. The record links to source files instead of copying inventories or mechanics, and includes alternatives or consequences only when material. It stays limited to a few paragraphs of non-inferable rationale.

What are the limitations of generated design records?

Records are intentionally compact and exclude HTML contracts or companion records unless separately requested. They document decisions, not full API references, so they are not a substitute for generated API documentation.