skills.rest
videojs
videojsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

review-react-component

Review React UI components for data flow, API surface, styling contracts, and bundle boundaries.

931|91|Updated Aug 13, 2025
Search Tags:#bundle analysis#component architecture#Data Flow#videojs#reAct#Code review#UI Components
One-click install
npx skills add https://github.com/videojs/v10 --skill review-react-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-react-component
Source: https://github.com/videojs/v10/tree/main/.agents/skills/review-react-component
Command: npx skills add https://github.com/videojs/v10 --skill review-react-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviewing React UI components for architectural soundness is time-consuming and easy to get wrong: mirrored state, synchronization effects, bloated public APIs, weak primitive boundaries, and bundle bloat often slip through informal reviews. This Skill provides a structured, read-only review checklist grounded in the Video.js v10 codebase conventions.

Core Features & Use Cases

  • State and Data Flow Audit: Traces sources of truth, selectors, context, callbacks, and effects, flagging mirrored state, broad subscriptions, and unstable context values.
  • Public Surface Review: Examines props, callbacks, refs, render functions, data attributes, CSS custom properties, and exports, checking controlled/uncontrolled modes and opt-out behavior.
  • Bundle and Export Analysis: Inspects imports, re-exports, client boundaries, and tree shaking, enforcing compound export patterns like export * as Name from './index.parts'.
  • Use Case: Ask for a review of a new React chapter menu component and receive prioritized findings on ownership, compound anatomy, styling contracts, opt-outs, and bundle boundaries, each with location, evidence, and the smallest viable improvement.

Quick Start

Ask the assistant to review a specific React component in the repository, for example by saying: review the new React chapter menu component for data flow, API surface, and bundle issues.

Frequently Asked Questions about review-react-component

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

FAQPage Schema
How do I review a React component's architecture before merging?▼

Trace the source of truth, selectors, context, callbacks, and effects, then check the public surface including props, refs, render functions, and data attributes. This Skill automates that checklist and reports findings by severity with evidence and minimal fixes.

What React state patterns should be flagged in code review?▼

Flag mirrored state, effects that synchronize rendered state, broad subscriptions, and unstable context values. Refs should be limited to browser imperatives so React remains authoritative over the DOM.

Does this review modify my React component code?▼

No, the review is read-only. It reads implementations, tests, exports, and package metadata, then reports findings with location, affected consumer, evidence, and the smallest viable improvement.

How should compound React components structure their exports?▼

Use `export * as Name from './index.parts'` with direct part re-exports rather than a runtime namespace object. Optional parts should not force unrelated code into a consumer's bundle.

When is a React component's API surface too large?▼

When the surface grows around multiple independent concerns, split behavior into another component or hook. Each controlled or uncontrolled mode must have a demonstrated consumer, and complex descendant selectors often signal a weak primitive boundary.

Related Skills

Explore More Software Engineering Skills→
keystone-uikeystone-ui
3

component-architecture

Define structural conventions for Keystone UI component files.

Official
Advanced
sunholo-datasunholo-data
33

Codebase Organizer

Split oversized files into AI-friendly modules while preserving dependencies and verifying tests before and after refactoring.

Community
Intermediate
legioncodeinclegioncodeinc
72

icon-system-stinger

Select icon libraries and delivery patterns for React applications.

Official
Advanced
mindcockpit-aimindcockpit-ai
11

react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

Official
Intermediate