Agent Skills › videojs/video.js › review-html-component-design

review-html-component-design

GitHub

审查 HTML 组件设计，评估边界、API、可复用性、生命周期及无障碍访问。通过追踪数据流和 bundle 成本，确保组件符合最佳实践并最小化变更。

.agents/skills/review-html-component-design/SKILL.md videojs/video.js

触发场景

审查 HTML 组件设计方案评估 Web Component API 与边界

安装

npx skills add videojs/video.js --skill review-html-component-design -g -y

更多选项

非标准路径

npx skills add https://github.com/videojs/video.js/tree/main/.agents/skills/review-html-component-design -g -y

不安装直接使用

npx skills use videojs/video.js@review-html-component-design

指定 Agent (Claude Code)

npx skills add videojs/video.js --skill review-html-component-design -a claude-code -g -y

安装 repo 全部 skill

npx skills add videojs/video.js --all -g -y

预览 repo 内 skill

npx skills add videojs/video.js --list

SKILL.md

Frontmatter

{
    "name": "review-html-component-design",
    "description": "Review HTML component designs. Use for boundaries, APIs, opt-outs, and bundles."
}

HTML component design review

Read the proposal, nearby records, and relevant HTML code, tests, exports, and package metadata.

Ask whether the proposal is a reusable primitive or app/skin composition before adding an element or part.
Trace ownership and data flow across core, DOM behavior, and the element. Check lifecycle and cleanup.
Review light-DOM anatomy, element and CSS APIs, and whether each addition has a consumer. Leave visual structure to CSS. If the surface spans independent features, separate them into another element or controller. Treat descendant selectors, :has(), and other complex selectors introduced by composition as a likely sign of a weak primitive boundary or missing data-* or CSS custom-property hooks.
Exercise omission, replacement, styling, behavior, and registration opt-outs.
Weigh API complexity against bundle cost and verify side-effect boundaries. Check accessibility and interaction constraints.

Use packages/html/src/ui/, definition entries, and package metadata as evidence. Report findings by severity with the smallest change.

Where local precedent is insufficient, consult Open UI for anatomy and API questions, Lit for element composition, WAI-ARIA APG for interaction patterns, and webpack for tree shaking.