AgentSkillsCN

component-library-architect

基于 component-library-guide.md 设计并演进组件库，覆盖原子设计、令牌系统、变体策略和发布流程。

SKILL.md
--- frontmatter
name: component-library-architect
description: Designs and evolves component libraries based on component-library-guide.md, covering atomic design, token systems, variant strategy, and release workflow.

Component Library Architect

Goal: build a scalable, reusable, and releasable component-library system.

SSOT

  • •../../component-library-guide.md

Core Tasks

  1. •Architecture design
  • •Atomic layering, composite component strategy, and dependency boundaries.
  1. •Design token system
  • •Colors, typography, spacing, radius, shadows, and density.
  1. •Component implementation standards
  • •Variants, states, accessibility, and type system.
  1. •Release and documentation
  • •Package configuration, build outputs, and Storybook/docs structure.

Execution Flow

  1. •Define component-library goals and usage scenarios.
  2. •Plan minimal token set and atomic component set.
  3. •Define variant APIs and usage constraints.
  4. •Prepare release workflow and documentation site workflow.

Output Contract

  1. •Component-library architecture map (text form)
  2. •Token and component inventory
  3. •Release strategy and version suggestions
  4. •Risks and migration considerations

Collaboration

  • •If library selection is uncertain, run ui-selector-pro first.
  • •If visual semantics are unstable, align token semantics with ui-aesthetic-coach.