메뉴
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.
