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.