SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场claude-code-showcase

claude-code-showcase

编程与开发

查看项目

更新于 10-16 11:36

技能介绍

用途

claude-code-showcase 提供了配置 Claude Code 项目的综合参考，覆盖以下能力：

  • Skills：领域知识文档，教会 Claude 你的项目模式（测试、GraphQL、UI 组件等）
  • Agents：专用 AI 助手，可自动运行（代码审查者、工单处理者）
  • Hooks：在关键节点运行的脚本（自动格式化、运行测试、阻止主分支编辑）
  • Commands：用于常见工作流的自定义斜杠命令（/onboard、/pr-review、/ticket）
  • MCP Servers：外部集成（JIRA、GitHub、Slack、数据库）
  • GitHub Actions：定时自动化（文档同步、质量审查、依赖审计）

安装与初始化

初始化 Claude Code 目录：

mkdir -p .claude/{agents,commands,hooks,skills,rules}
touch .claude/settings.json
touch CLAUDE.md

添加项目记忆（CLAUDE.md）

在项目根目录创建 CLAUDE.md，记录技术栈、关键命令、代码风格与关键目录，示例技术栈为 React 18、TypeScript 5.x、Node.js 20+、GraphQL（Apollo Client/Server），测试使用 Jest + React Testing Library。

配置 Settings 与 Hooks

在 .claude/settings.json 中配置 hooks，示例包括：

  • PreToolUse 匹配 Edit|Write，在 main 分支上阻止编辑
  • PostToolUse 匹配 Edit|Write 运行 npx prettier --write {{file}}
  • PostToolUse 匹配测试文件运行 npm test -- --findRelatedTests {{file}} --passWithNoTests
  • UserPromptSubmit 运行 .claude/hooks/skill-eval.sh

并配置 allowedCommands（npm、npx、git、node、cat、grep、find）与 environment。

Skills 的主要能力

Skills 是教会 Claude 项目模式与约定的领域知识文档，目录结构示例：

.claude/skills/
├── README.md
├── testing-patterns/
│   └── SKILL.md
├── graphql-schema/
│   └── SKILL.md
└── core-components/
    └── SKILL.md

示例 Skill 包括：

  • testing-patterns：Jest 与 React Testing Library 模式，使用 AAA（Arrange、Act、Assert）结构、Mock 工厂、MSW 进行 GraphQL mock，覆盖率要求新代码最低 80%，需测试 happy path + 错误态 + 加载态
  • graphql-schema：GraphQL schema 设计模式与 resolver 约定，包括类型定义、resolver 模式、错误处理（推荐使用 GraphQLError 和扩展码，如 UNAUTHENTICATED、FORBIDDEN、BAD_USER_INPUT、INTERNAL_SERVER_ERROR）

Agents

Agents 是可自动或按需运行的专用 AI 助手。示例 code-reviewer 代理提供审查清单，覆盖 TypeScript 严格模式、错误处理、测试、GraphQL、性能等维度，并给出审查流程：读取变更文件、按类别检查、提供行级反馈、用代码示例建议改进、指出做得好的地方。

Commands

Commands 是可通过 /command-name 访问的自定义斜杠命令。

  • /pr-review：拉取 PR 详情、读取变更文件、按项目标准审查、检查破坏性变更/迁移需求/测试覆盖/文档更新，输出分类问题与批准建议
  • /ticket：读取工单、实现功能、更新状态；要求配置 JIRA MCP 服务器，Git 分支命名为 feature/TICKET-123-description；流程包括读取工单、分析需求、创建分支、按 Skills 实现、运行测试、更新工单、提示创建 PR

MCP Server 配置

在项目根目录创建 .mcp.json，示例配置 jira、github、postgres 服务器（均为 stdio 类型，通过 npx 运行），并通过 .env（gitignored）设置环境变量如 JIRA_HOST、JIRA_EMAIL、JIRA_API_TOKEN、GITHUB_TOKEN、DATABASE_URL。

Skill 评估 Hooks

可自动根据用户提示推荐相关 Skills：

  • .claude/hooks/skill-eval.sh：通过关键词匹配（test/spec/jest/mock、graphql/query/mutation/resolver、component/ui/button/form）输出建议技能。
  • .claude/hooks/skill-eval.js：Node.js 版技能匹配器，结合 skill-rules.json 中的关键词与路径进行匹配。

GitHub Actions 集成

项目提供多种 GitHub Actions 工作流示例：

  • PR 审查自动化：在 pull_request 事件上运行 Claude Code review，使用代码审查代理并自动发表评论
  • 定时文档同步：每月第一天运行，审阅近 30 天提交并更新文档，自动提交并创建 PR
  • 每周代码质量审查：每周一运行，随机选择一个目录进行质量审查并修复问题

适用场景与限制

该参考方案适用于希望为 Claude Code 搭建完整项目配置的团队，特别是 React + TypeScript + Node.js + GraphQL 技术栈的前端/全栈项目。示例中的部分内容（如 JIRA、GitHub、Postgres MCP 服务器，以及 @anthropic/mcp-*、@anthropic/claude-code 等命令）来自资料事实，实际可用性、收费、价格、平台支持与效果暂未提供。