component-engineering

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Component Engineering Specification

组件工程规范

<overview> This skill embodies the formal standard for building professional, accessible, and composable React artifacts. </overview> <context name="Knowledge Deep-Dives"> 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. </context> <workflow> <phase name="review">

<overview> 本Skill体现了构建专业、可访问且可组合的React制品的正式标准。 </overview> <context name="知识深度探究"> 你必须阅读以下参考文件以履行职责： - **架构**：`composition.md` - asChild、Taxonomy、组件组合。 - **可访问性**：`accessibility.md` - 键盘映射、ARIA、焦点管理。 - **样式**：`styling.md` - `cn`工具、数据属性、CVA、设计令牌。 </context> <workflow> <phase name="评审">

/component-review [file]

Strictly audit the file against the specification pillars.

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

严格按照规范核心要点审核文件。

开始前你必须阅读
```
references/
```
目录下的所有参考文件。
使用
```
taxonomy.md
```
对制品进行分类。
评估可访问性：你必须对照
```
accessibility.md
```
检查键盘支持和语义化HTML。
评估架构：你必须对照
```
composition.md
```
检查单体模式与组件组合的情况。
评估样式：检查
```
data-slot
```
的使用和属性扩散情况，对照
```
styling.md
```
。 </phase>

/component-create [name] [intent]

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

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

</workflow>

遵循「架构优先」的工作流构建新制品。

你必须阅读相关的
```
references/*.md
```
文件以选择正确的模式。
选择Taxonomy类型。
选择基础的语义化元素或Headless Primitive。
你必须实现键盘映射（Keyboard Map）。
如果组件是激活器/触发器，你必须实现asChild支持。
你必须暴露数据属性（Data Attributes）（
```
data-state
```
、
```
data-slot
```
）。
使用
```
cn
```
工具进行类名合并。 </phase>

</workflow>