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

Claude Code component-patterns：为 React 组件选取文件结构与运行边界

English

Claude Code 安装步骤

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

中文摘要

按照项目约定确定组件目录、类型和共置测试，在需要浏览器状态或事件时标记客户端边界。

SKILL.md 中文导读

可复现示例

交互样例 ui-29 新增 SaveFilter，用户按按钮后在浏览器设置当前筛选状态，属性为 {label: 'Save filter', disabled: false}。

工作步骤

  1. 确认组件职责和交互，按项目约定选目录与导出方式。
  2. 核对属性类型和运行边界，将测试放在组件目录复查用户行为。

验收方法

在 SaveFilter 目录使用 index.tsx 默认导出并列出显式属性类型。因按钮事件需要客户端处理，方案记录 {component: 'SaveFilter', client: true}，测试与实现放同一目录。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中打开相同约定的 React 工程。区分 Server Component 和 Client Component 需要项目本身支持这套架构。

常见问题

每个组件都要加 use client 吗？

适用 Server Component 的场景可保留默认边界。组件使用本地状态、事件或浏览器专用接口时，再加客户端声明。

相关指南