React Patterns 技能：用 Context 组织复合 Tabs 组件
EnglishClaude Code 安装步骤
- 从 GitHub 固定提交获取完整的 `cli-tool/components/skills/development/react-patterns` 目录。
- 复制到目标项目的 `.claude/skills/`，确认 `.claude/skills/react-patterns/SKILL.md`，再从项目根目录启动 Claude Code，输入 `/react-patterns`。
中文摘要
让 Claude Code 将共享选择状态留在 Tabs 父组件，子组件通过 Context 读取当前项并切换，保留可访问交互与独立实例。
SKILL.md 中文导读
可复现示例
创建文档标签 Overview、FAQ 与独立的账户标签 Profile、Settings。点击文档的 FAQ，检查只显示 FAQ 面板，同时账户保持在 Profile。工作步骤
- 把当前 tab、切换动作和初始化值交给 Tabs 父组件，Tab 和 Panel 只负责各自职责。
- 用可访问名称和键盘路径验证选中项，并测试一个实例的切换不会影响另一实例。
验收方法
两个实例均正确显示自身选中项。测试可从角色和可访问名称找到选项并核对面板。
GitHub 原文 · 更新日期
适用环境
准备自己的 React 项目及组件测试入口。示例用两个独立 Tabs 实例验证状态隔离。
常见问题
所有页面的 Tabs 都要共用一个 Context 实例吗？
各 Tabs 渲染自己的 Provider，每个实例持有自己的选择状态。同一 Context 定义可以复用。