React component review
Read the implementation, core and DOM contracts, rendered semantics, tests, exports, package metadata, relevant design record, and nearest comparable component.
- Trace the source of truth, selectors, context, callbacks, and effects. Flag mirrored state, synchronization effects, broad subscriptions, unstable context values, or platform behavior that belongs in core.
- Flag direct mutation of React-owned DOM or effects that synchronize rendered state; refs should be limited to browser imperatives so React debugging, tests, hydration, and integrations remain authoritative.
- Check that each component or compound part has a scoped primitive responsibility; flag app or skin composition embedded in it. Prefer CSS or pseudo-elements when a distinction is purely visual.
- Review the whole public surface: props, callbacks, context, refs, render functions, data attributes, CSS custom properties, namespaces, and exports. Controlled or uncontrolled modes must each have a demonstrated consumer. Split independent behavior into another component or hook when the surface is growing around multiple concerns. Flag descendant selectors,
:has(), or other complex selectors introduced by composition as likely evidence of a weak primitive boundary or missing data-* or CSS custom-property hooks.
- Test opt-outs: optional parts can be omitted, default markup remains useful,
render replacements preserve semantics, props, events, and refs, and unsupported features leave no hidden behavior.
- Inspect imports, dependencies, re-exports, client boundaries, and production tree shaking. Compound APIs should use
export * as Name from './index.parts' with direct part re-exports, not a runtime namespace object. Optional parts or integrations should not force unrelated code into a consumer bundle.
- Check transition presence and races, cleanup, SSR behavior, accessibility, and tests for state flow, nested roots, prop/ref composition, rendered output, and customization.
Use packages/react/src/ui/create-media-button.tsx, packages/react/src/utils/use-render.tsx, packages/react/src/ui/play-button/, packages/react/src/ui/slider/, packages/react/package.json, and packages/react/vite.config.ts as comparison anchors.
Report findings by severity with the location, affected consumer, evidence, and smallest viable improvement. Separate correctness and contract gaps from optional trade-offs.
Example
Input: “Review the new React chapter menu.”
Output: Prioritized findings about ownership, compound anatomy, render escape hatches, styling contracts, opt-outs, exports, or bundle boundaries.
1---2name: review-react-component3description: Review React UI without editing code. Use for data flow, APIs, customization, styling, transitions, or bundles.4---56# React component review78Read the implementation, core and DOM contracts, rendered semantics, tests, exports, package metadata, relevant design record, and nearest comparable component.9101. Trace the source of truth, selectors, context, callbacks, and effects. Flag mirrored state, synchronization effects, broad subscriptions, unstable context values, or platform behavior that belongs in core.112. Flag direct mutation of React-owned DOM or effects that synchronize rendered state; refs should be limited to browser imperatives so React debugging, tests, hydration, and integrations remain authoritative.123. Check that each component or compound part has a scoped primitive responsibility; flag app or skin composition embedded in it. Prefer CSS or pseudo-elements when a distinction is purely visual.134. Review the whole public surface: props, callbacks, context, refs, render functions, data attributes, CSS custom properties, namespaces, and exports. Controlled or uncontrolled modes must each have a demonstrated consumer. Split independent behavior into another component or hook when the surface is growing around multiple concerns. Flag descendant selectors, `:has()`, or other complex selectors introduced by composition as likely evidence of a weak primitive boundary or missing `data-*` or CSS custom-property hooks.145. Test opt-outs: optional parts can be omitted, default markup remains useful, `render` replacements preserve semantics, props, events, and refs, and unsupported features leave no hidden behavior.156. Inspect imports, dependencies, re-exports, client boundaries, and production tree shaking. Compound APIs should use `export * as Name from './index.parts'` with direct part re-exports, not a runtime namespace object. Optional parts or integrations should not force unrelated code into a consumer bundle.167. Check transition presence and races, cleanup, SSR behavior, accessibility, and tests for state flow, nested roots, prop/ref composition, rendered output, and customization.1718Use `packages/react/src/ui/create-media-button.tsx`, `packages/react/src/utils/use-render.tsx`, `packages/react/src/ui/play-button/`, `packages/react/src/ui/slider/`, `packages/react/package.json`, and `packages/react/vite.config.ts` as comparison anchors.1920Report findings by severity with the location, affected consumer, evidence, and smallest viable improvement. Separate correctness and contract gaps from optional trade-offs.2122## Example2324Input: “Review the new React chapter menu.”2526Output: Prioritized findings about ownership, compound anatomy, render escape hatches, styling contracts, opt-outs, exports, or bundle boundaries.
videojs