AgentSkillsCN

component-engineering

遵循面向无障碍、组件化与样式的正式标准，打造专业的React组件。在创建或审查React组件时，应主动运用此标准。 示例： - 用户输入：“/component-create Button trigger” → 构建可访问的按钮，同时集成asChild属性与键盘事件映射 - 用户输入：“/component-review src/components/Input.tsx” → 从无障碍与组件化合规性的角度进行审计 - 用户输入：“构建响应式滑块” → 选择合适的分类体系，并结合数据属性加以实现 - 用户输入：“审查我的布局组件” → 检查是否存在单体式设计，抑或采用组件化架构

SKILL.md
--- frontmatter
name: component-engineering
description: |-
  Apply the formal standard for React component engineering focusing on accessibility, composition, and styling. Use for building professional, composable React artifacts. Use proactively when creating or reviewing React components.
  Examples:
  - user: "/component-create Button trigger" → build accessible button with asChild and keyboard map
  - user: "/component-review src/components/Input.tsx" → audit for accessibility and composition compliance
  - user: "Build a responsive slider" → select taxonomy type and implement with data attributes
  - user: "Review my layout component" → check for monolithic patterns vs composition
<overview> Formal standard for building professional, accessible, and composable React artifacts. </overview> <constraints> You MUST read these reference files to perform your duties:
  • •Architecture: composition.md - asChild, Taxonomy, Composition
  • •Accessibility: accessibility.md - Keyboard maps, ARIA, Focus management
  • •Styling: styling.md - cn utility, Data attributes, CVA, Design tokens </constraints>
<workflow> <phase name="review">

/component-review [file]

Strictly audit the file against the specification pillars.

  1. •You MUST read all reference files in the references/ directory before proceeding
  2. •Classify the artifact using taxonomy.md
  3. •Evaluate Accessibility: You MUST check keyboard support and semantic HTML against accessibility.md
  4. •Evaluate Architecture: You MUST check for monolithic patterns vs composition against composition.md
  5. •Evaluate Styling: Look for data-slot usage and prop spreading against styling.md
</phase> <phase name="create">

/component-create [name] [intent]

Build a new artifact following the "Architecture First" workflow.

  1. •You MUST read the relevant references/*.md files to select the correct patterns
  2. •Choose the Taxonomy type
  3. •Select the base Semantic Element or Headless Primitive
  4. •You MUST implement the Keyboard Map
  5. •You MUST apply asChild support if the component is an activator/trigger
  6. •You MUST expose Data Attributes (data-state, data-slot)
  7. •Use the cn utility for class merging
</phase> </workflow>