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

review-html-component

Reviews custom-element UI components for data flow, markup, styling, and registration issues.

931|91|Updated Aug 13, 2025
Search Tags:#HTML#tree-shaking#web components#custom elements#video.js#Code review#reactiveelement
One-click install
npx skills add https://github.com/videojs/v10 --skill review-html-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: review-html-component
Source: https://github.com/videojs/v10/tree/main/.agents/skills/review-html-component
Command: npx skills add https://github.com/videojs/v10 --skill review-html-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviewing custom-element UI code by hand is error-prone: duplicated state, DOM mutations outside the ReactiveElement lifecycle, bloated public surfaces, and incorrect registration or bundling boundaries are easy to miss. This Skill provides a structured review checklist for HTML components without editing any code.

Core Features & Use Cases

  • Data Flow Audit: Traces sources of truth, subscriptions, mutations, and events to flag duplicated state, upward property writes, and hidden coupling.
  • Lifecycle & DOM Contract Checks: Detects render-affecting DOM mutations outside the ReactiveElement update lifecycle and verifies markup semantics, focus, and accessibility.
  • Registration & Bundle Review: Inspects safeDefine registration, tree-shaking boundaries, package.json side-effect flags, and build entries.
  • Use Case: When a new HTML chapter menu element is added to the Video.js v10 codebase, run this review to get prioritized findings on ownership, events, styling contracts, opt-outs, and bundle boundaries before merging.

Quick Start

Review the new HTML chapter menu component in packages/html/src/ui and report prioritized findings on data flow, lifecycle, and registration.

Frequently Asked Questions about review-html-component

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

FAQPage Schema
How do I review a custom element component for data flow issues?▼

Trace the source of truth, subscriptions, mutations, and events through the element. Flag duplicated state, upward property writes, hidden coupling, and platform behavior that belongs in a core layer rather than the UI element.

How to check DOM mutations outside the ReactiveElement update lifecycle?▼

Look for render-affecting DOM changes made outside the scheduled update cycle. These bypass scheduling, updateComplete, test observation, and integration behavior, and should be moved into the ReactiveElement update flow.

Should custom element classes self-register with customElements.define?▼

No. Element classes should not self-register; separate define/ui modules should register narrowly through a safeDefine helper. This preserves tree-shaking boundaries and lets package.json mark only real side effects.

What public surface should a custom element review cover?▼

Review properties, reflected attributes, events, methods, context, data attributes, CSS custom properties, tag names, and exports. Tie every addition to a concrete consumer and split independent behavior into another element or controller.

When is this review approach not appropriate?▼

It is scoped to read-only review of custom-element UI code and does not edit code. For implementation changes, refactoring, or non-web-component frameworks like React-only codebases, use a different workflow.

Related Skills

Explore More Software Engineering Skills→
tmorrowdevtmorrowdev

cre8-a2ui

Generate vanilla HTML and Web Components markup using cre8-* custom elements.

Community
Intermediate
Comfy-OrgComfy-Org
2.0k

consolidating-test-setup

Consolidates repeated test setup and teardown into the narrowest shared lifecycle owner.

Official
Advanced
gwpjpgwpjp
3

accessibility-auditor

Audit running web applications for accessibility issues via the accessibility tree and keyboard navigation.

Community
Intermediate
takusaotometakusaotome
5

safe-by-default-architect

Convert recurring unsafe implementation patterns into safe architectural defaults and static analysis rules.

Community
Advanced