菜单
plan and document reusable frontend component libraries, component apis, variants, states, accessibility, tests, and usage examples. use when the user asks for ui components, design system primitives, reusable react/vue/svelte components, or component governance.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Interactive front-end design companion — iterate on layouts, live component previews, and design tokens in a real browser, then hand the validated design to the frontend-family implement skills. Use when the user wants to design or refine UI look-and-feel, compare layout/wireframe options, preview real components, or tune color/spacing/typography before building.
Ingest, decompose, govern, and route large repository PDR packages into agent-routable work queues with manifests, decision registers, risk registers, governance gates, and swarm-ready handoff packets. Use when the user provides repo PDR packages, audit bundles, project design records, implementation plans, backlog packs, or governance artifacts and wants them parsed, scored, split into agent assignments, and dispatched through the Chromatic router.
Triage scattered, nonlinear, or overloaded thinking into a structured stack of decisions, priorities, and handoffs. Use when the project feels ambiguous, when too many threads are running in parallel, when you cannot determine what to work on next, or when a session has accumulated more open questions than resolved ones.
Audit and redesign a repository's folder structure, root hygiene, scattered files, and naming conventions. Use when the repo root is cluttered, directories have grown organically without governance, files are misplaced across boundaries, or you need a clean canonical tree before onboarding agents or contributors.
Enforce numbered folder and subfolder naming standards across a repository. Audit whether directories follow an established numeric prefix convention (e.g. .01_, .02_, 01-, 1.) and produce a compliance report with remediation steps. Use when repo directories have grown without consistent naming, when onboarding contributors, or before a structural refactor.
Plan, audit, and standardize GitHub organization and repository governance — including personal-to-org repo transfers, branch protection, rulesets, team permissions, labels, repository settings, secrets review, and post-transfer validation. Use when moving repos into an organization, auditing existing permissions, generating settings checklists, or producing migration runbooks.
| name | component-library |
| description | plan and document reusable frontend component libraries, component apis, variants, states, accessibility, tests, and usage examples. use when the user asks for ui components, design system primitives, reusable react/vue/svelte components, or component governance. |
Use references/component-library-blueprint.md.
See skill description above and references/ subdirectory for detailed guidance.
Follow the numbered steps in this document, produce the specified output artifacts,
and verify against the guardrails before completing the task.
Deliverables as described in the skill body above. Typically includes source files, component definitions, or documentation placed at paths specified in the skill steps.
