词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code new-component：按项目约定创建 React JSX 组件

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/new-component/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/new-component/`，把核对后的文件保存为 `.claude/skills/new-component/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/new-component`。

中文摘要

按现有 React 工程的 JSX、默认导出、参数解构和内联样式约定生成小组件。

SKILL.md 中文导读

可复现示例

示例 component-19 要显示一张本地参考卡，组件名 ReferenceNote，输入 {title: 'Garden ideas', expanded: false}。

工作步骤

  1. 确定组件用途、参数和项目当前默认目录。
  2. 用项目的 JSX 和样式方式生成组件，核对输入与显示状态。

验收方法

生成默认导出的 ReferenceNote.jsx，未展开时核对 {visibleTitle: 'Garden ideas', detailVisible: false}。使用内联样式，保持依赖为 React。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中准备目标 React 项目。这个流程按 Mental Kung Fu 项目当前使用的 JSX 和内联样式工作。

常见问题

什么情况下需要额外的组件库？

这套项目约定使用 React 自带能力。简单的当前组件用现有项目数据和 React 钩子即可。

相关指南