component-icon

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SKILL: component-icon

Generate an fpkit-style accessible Icon component directly into a developer's project.

直接在开发者的项目中生成一个fpkit风格的无障碍Icon组件。

Workflow

工作流程

Read the source doc. Prefer the neutral icon.component.md
in this skill directory (the spec-driven source of truth). Read its
```
## Target: react
```
adapter (Generation Contract on its
```
generation:
```
line,
```
## Props Interface(s)
```
, and
```
## TSX Template
```
), plus
```
## Accessibility
```
and
```
## Examples
```
. Icon is presentational — it has no
```
## Styles
```
/SCSS section and no
```
## Behavior
```
section. If
```
icon.component.md
```
is absent, fall back to
```
reference.md
```
(canonical templates, Generation Contract, Props Interface, CSS Variables, Accessibility, Usage Examples). Both yield byte-identical output (golden-guarded).

Init check — run

python3 ${CLAUDE_PLUGIN_ROOT}/scripts/detect_target.py <cwd>

. If foundation (

ui.tsx

) is missing, run Step A of

${CLAUDE_PLUGIN_ROOT}/skills/kit-core/SKILL.md

to initialize it before generating this component.

Dependencies — Icon has no upstream dependencies (it is a leaf component). Skip dep resolution.
Generate — apply the Generation Contract to produce:
- ```
<targetDir>/icon.tsx
```
  from the
```
## TSX Template
```
  (under
```
## Target: react
```
  in
```
icon.component.md
```
  , or top-level in
```
reference.md
```
  ) Icon has no SCSS template (renders via props/
```
currentColor
```
  on the host element). Substitute
```
{{IMPORT_SOURCE:...}}
```
  ,
```
{{NAME}}
```
  ,
```
{{FIELDS}}
```
  placeholders if present.

Verify — run

python3 ${CLAUDE_PLUGIN_ROOT}/scripts/verify_integration.py <projectRoot>

and print the summary to the developer.

阅读源文档：优先使用本技能目录中的中立文档**
```
icon.component.md
```
**（基于规范的权威来源）。阅读其中的
```
## Target: react
```
适配器（
```
generation:
```
行的生成约定、
```
## Props Interface(s)
```
以及
```
## TSX Template
```
），还有
```
## Accessibility
```
和
```
## Examples
```
部分。Icon是展示性组件——它没有
```
## Styles
```
/SCSS章节和
```
## Behavior
```
章节。如果
```
icon.component.md
```
不存在，则退而使用
```
reference.md
```
（标准模板、生成约定、Props接口、CSS变量、无障碍规范、使用示例）。两者生成的内容完全一致（受黄金标准校验）。
初始化检查——运行
```
python3 ${CLAUDE_PLUGIN_ROOT}/scripts/detect_target.py <cwd>
```
。如果基础组件（
```
ui.tsx
```
）缺失，在生成此组件前，先执行
```
${CLAUDE_PLUGIN_ROOT}/skills/kit-core/SKILL.md
```
中的步骤A来初始化。
依赖项——Icon没有上游依赖项（它是一个叶子组件）。跳过依赖解析步骤。
生成组件——应用生成约定来创建：
- 从
```
## TSX Template
```
  （来自
```
icon.component.md
```
  中的
```
## Target: react
```
  部分，或
```
reference.md
```
  的顶层内容）生成
```
<targetDir>/icon.tsx
```
  Icon没有SCSS模板（通过宿主元素的props/
```
currentColor
```
  渲染）。如果存在
```
{{IMPORT_SOURCE:...}}
```
  、
```
{{NAME}}
```
  、
```
{{FIELDS}}
```
  占位符，请进行替换。

验证——运行

python3 ${CLAUDE_PLUGIN_ROOT}/scripts/verify_integration.py <projectRoot>

并将验证总结打印给开发者。

Reference

参考资料

Templates and documentation live in

icon.component.md

(the neutral spec-driven source) alongside this SKILL.md, with

reference.md

kept as the byte-identical fallback. The shared generation contract, accessibility patterns, SCSS conventions, and CSS variable strategy are documented in

${CLAUDE_PLUGIN_ROOT}/skills/kit-core/references/

模板和文档存放在与本SKILL.md同级的

icon.component.md

（基于中立规范的源文件）中，

reference.md

作为内容完全一致的备用文件。通用的生成约定、无障碍模式、SCSS规范以及CSS变量策略都记录在

${CLAUDE_PLUGIN_ROOT}/skills/kit-core/references/

目录下。