[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-ChrisWiles--claude-code-showcase":3,"tool-ChrisWiles--claude-code-showcase":61},[4,18,26,36,44,53],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",152630,2,"2026-04-12T23:33:54",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108322,"2026-04-10T11:39:34",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":32,"last_commit_at":50,"category_tags":51,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[52,13,15,14],"插件",{"id":54,"name":55,"github_repo":56,"description_zh":57,"stars":58,"difficulty_score":10,"last_commit_at":59,"category_tags":60,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,14],{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":66,"readme_en":67,"readme_zh":68,"quickstart_zh":69,"use_case_zh":70,"hero_image_url":71,"owner_login":72,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":76,"owner_location":77,"owner_email":78,"owner_twitter":76,"owner_website":79,"owner_url":80,"languages":81,"stars":90,"forks":91,"last_commit_at":92,"license":76,"difficulty_score":32,"env_os":93,"env_gpu":94,"env_ram":94,"env_deps":95,"category_tags":102,"github_topics":76,"view_count":32,"oss_zip_url":76,"oss_zip_packed_at":76,"status":17,"created_at":103,"updated_at":104,"faqs":105,"releases":106},7078,"ChrisWiles\u002Fclaude-code-showcase","claude-code-showcase","Comprehensive Claude Code project configuration example with hooks, skills, agents, commands, and GitHub Actions workflows","claude-code-showcase 是一个专为 Claude Code 打造的全方位项目配置范例，旨在帮助开发者将 AI 助手升级为懂业务、守规范的“超级队友”。它通过预置的配置文件，解决了大模型在协作中容易忽视团队编码习惯、缺乏自动化质检流程以及难以深度集成外部工具等痛点。\n\n该项目特别适合希望提升研发效率、规范代码质量的中高级软件工程师及技术团队使用。其核心亮点在于构建了一套可复用的“技能库”与“智能体”体系：不仅能教会 AI 掌握自定义 UI 库、测试模式等特定领域知识，还能自动执行代码格式化、类型检查及深度代码审查。更独特的是，它展示了如何通过 GitHub Actions 实现文档同步、依赖审计等定时维护任务，并利用 MCP 协议打通 JIRA\u002FLinear 等票务系统，让 AI 能独立理解需求、开发功能甚至更新工单状态。借助这套方案，团队可将大量重复性维护工作自动化，让 AI 真正融入开发流，从被动问答转向主动协作。","# Claude Code Project Configuration Showcase\n\n> Most software engineers are seriously sleeping on how good LLM agents are right now, especially something like Claude Code.\n\nOnce you've got Claude Code set up, you can point it at your codebase, have it learn your conventions, pull in best practices, and refine everything until it's basically operating like a super-powered teammate. **The real unlock is building a solid set of reusable \"[skills](#skills---domain-knowledge)\" plus a few \"[agents](#agents---specialized-assistants)\" for the stuff you do all the time.**\n\n### What This Looks Like in Practice\n\n**Custom UI Library?** We have a [skill that explains exactly how to use it](.claude\u002Fskills\u002Fcore-components\u002FSKILL.md). Same for [how we write tests](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md), [how we structure GraphQL](.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md), and basically how we want everything done in our repo. So when Claude generates code, it already matches our patterns and standards out of the box.\n\n**Automated Quality Gates?** We use [hooks](.claude\u002Fsettings.json) to auto-format code, run tests when test files change, type-check TypeScript, and even [block edits on the main branch](.claude\u002Fsettings.md). Claude Code also created a bunch of ESLint automation, including custom rules and lint checks that catch issues before they hit review.\n\n**Deep Code Review?** We have a [code review agent](.claude\u002Fagents\u002Fcode-reviewer.md) that Claude runs after changes are made. It follows a detailed checklist covering TypeScript strict mode, error handling, loading states, mutation patterns, and more. When a PR goes up, we have a [GitHub Action](.github\u002Fworkflows\u002Fpr-claude-code-review.yml) that does a full PR review automatically.\n\n**Scheduled Maintenance?** We've got GitHub workflow agents that run on a schedule:\n- [Monthly docs sync](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) - Reads commits from the last month and makes sure docs are still aligned\n- [Weekly code quality](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) - Reviews random directories and auto-fixes issues\n- [Biweekly dependency audit](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) - Safe dependency updates with test verification\n\n**Intelligent Skill Suggestions?** We built a [skill evaluation system](#skill-evaluation-hooks) that analyzes every prompt and automatically suggests which skills Claude should activate based on keywords, file paths, and intent patterns.\n\nA ton of maintenance and quality work is just... automated. It runs ridiculously smoothly.\n\n**JIRA\u002FLinear Integration?** We connect Claude Code to our ticket system via [MCP servers](.mcp.json). Now Claude can read the ticket, understand the requirements, implement the feature, update the ticket status, and even create new tickets if it finds bugs along the way. The [`\u002Fticket` command](.claude\u002Fcommands\u002Fticket.md) handles the entire workflow—from reading acceptance criteria to linking the PR back to the ticket.\n\nWe even use Claude Code for ticket triage. It reads the ticket, digs into the codebase, and leaves a comment with what it thinks should be done. So when an engineer picks it up, they're basically starting halfway through already.\n\n**There is so much low-hanging fruit here that it honestly blows my mind people aren't all over it.**\n\n---\n\n## Table of Contents\n\n- [Directory Structure](#directory-structure)\n- [Quick Start](#quick-start)\n- [Configuration Reference](#configuration-reference)\n  - [CLAUDE.md - Project Memory](#claudemd---project-memory)\n  - [settings.json - Hooks & Environment](#settingsjson---hooks--environment)\n  - [MCP Servers - External Integrations](#mcp-servers---external-integrations)\n  - [LSP Servers - Real-Time Code Intelligence](#lsp-servers---real-time-code-intelligence)\n  - [Skill Evaluation Hooks](#skill-evaluation-hooks)\n  - [Skills - Domain Knowledge](#skills---domain-knowledge)\n  - [Agents - Specialized Assistants](#agents---specialized-assistants)\n  - [Commands - Slash Commands](#commands---slash-commands)\n- [GitHub Actions Workflows](#github-actions-workflows)\n- [Best Practices](#best-practices)\n- [Examples in This Repository](#examples-in-this-repository)\n\n---\n\n## Directory Structure\n\n```\nyour-project\u002F\n├── CLAUDE.md                      # Project memory (alternative location)\n├── .mcp.json                      # MCP server configuration (JIRA, GitHub, etc.)\n├── .claude\u002F\n│   ├── settings.json              # Hooks, environment, permissions\n│   ├── settings.local.json        # Personal overrides (gitignored)\n│   ├── settings.md                # Human-readable hook documentation\n│   ├── .gitignore                 # Ignore local\u002Fpersonal files\n│   │\n│   ├── agents\u002F                    # Custom AI agents\n│   │   └── code-reviewer.md       # Proactive code review agent\n│   │\n│   ├── commands\u002F                  # Slash commands (\u002Fcommand-name)\n│   │   ├── onboard.md             # Deep task exploration\n│   │   ├── pr-review.md           # PR review workflow\n│   │   └── ...\n│   │\n│   ├── hooks\u002F                     # Hook scripts\n│   │   ├── skill-eval.sh          # Skill matching on prompt submit\n│   │   ├── skill-eval.js          # Node.js skill matching engine\n│   │   └── skill-rules.json       # Pattern matching configuration\n│   │\n│   ├── skills\u002F                    # Domain knowledge documents\n│   │   ├── README.md              # Skills overview\n│   │   ├── testing-patterns\u002F\n│   │   │   └── SKILL.md\n│   │   ├── graphql-schema\u002F\n│   │   │   └── SKILL.md\n│   │   └── ...\n│   │\n│   └── rules\u002F                     # Modular instructions (optional)\n│       ├── code-style.md\n│       └── security.md\n│\n└── .github\u002F\n    └── workflows\u002F\n        ├── pr-claude-code-review.yml           # Auto PR review\n        ├── scheduled-claude-code-docs-sync.yml # Monthly docs sync\n        ├── scheduled-claude-code-quality.yml   # Weekly quality review\n        └── scheduled-claude-code-dependency-audit.yml\n```\n\n---\n\n## Quick Start\n\n### 1. Create the `.claude` directory\n\n```bash\nmkdir -p .claude\u002F{agents,commands,hooks,skills}\n```\n\n### 2. Add a CLAUDE.md file\n\nCreate `CLAUDE.md` in your project root with your project's key information. See [CLAUDE.md](CLAUDE.md) for a complete example.\n\n```markdown\n# Project Name\n\n## Quick Facts\n- **Stack**: React, TypeScript, Node.js\n- **Test Command**: `npm run test`\n- **Lint Command**: `npm run lint`\n\n## Key Directories\n- `src\u002Fcomponents\u002F` - React components\n- `src\u002Fapi\u002F` - API layer\n- `tests\u002F` - Test files\n\n## Code Style\n- TypeScript strict mode\n- Prefer interfaces over types\n- No `any` - use `unknown`\n```\n\n### 3. Add settings.json with hooks\n\nCreate `.claude\u002Fsettings.json`. See [settings.json](.claude\u002Fsettings.json) for a full example with auto-formatting, testing, and more.\n\n```json\n{\n  \"hooks\": {\n    \"PreToolUse\": [\n      {\n        \"matcher\": \"Edit|Write\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"[ \\\"$(git branch --show-current)\\\" != \\\"main\\\" ] || { echo '{\\\"block\\\": true, \\\"message\\\": \\\"Cannot edit on main branch\\\"}' >&2; exit 2; }\",\n            \"timeout\": 5\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n### 4. Add your first skill\n\nCreate `.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md`. See [testing-patterns\u002FSKILL.md](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md) for a comprehensive example.\n\n```markdown\n---\nname: testing-patterns\ndescription: Jest testing patterns for this project. Use when writing tests, creating mocks, or following TDD workflow.\n---\n\n# Testing Patterns\n\n## Test Structure\n- Use `describe` blocks for grouping\n- Use `it` for individual tests\n- Follow AAA pattern: Arrange, Act, Assert\n\n## Mocking\n- Use factory functions: `getMockUser(overrides)`\n- Mock external dependencies, not internal modules\n```\n\n> **Tip:** The `description` field is critical—Claude uses it to decide when to apply the skill. Include keywords users would naturally mention.\n\n---\n\n## Configuration Reference\n\n### CLAUDE.md - Project Memory\n\nCLAUDE.md is Claude's persistent memory that loads automatically at session start.\n\n**Locations (in order of precedence):**\n1. `.claude\u002FCLAUDE.md` (project, in .claude folder)\n2. `.\u002FCLAUDE.md` (project root)\n3. `~\u002F.claude\u002FCLAUDE.md` (user-level, all projects)\n\n**What to include:**\n- Project stack and architecture overview\n- Key commands (test, build, lint, deploy)\n- Code style guidelines\n- Important directories and their purposes\n- Critical rules and constraints\n\n**📄 Example:** [CLAUDE.md](CLAUDE.md)\n\n---\n\n### settings.json - Hooks & Environment\n\nThe main configuration file for hooks, environment variables, and permissions.\n\n**Location:** `.claude\u002Fsettings.json`\n\n**📄 Example:** [settings.json](.claude\u002Fsettings.json) | [Human-readable docs](.claude\u002Fsettings.md)\n\n#### Hook Events\n\n| Event | When It Fires | Use Case |\n|-------|---------------|----------|\n| `PreToolUse` | Before tool execution | Block edits on main, validate commands |\n| `PostToolUse` | After tool completes | Auto-format, run tests, lint |\n| `UserPromptSubmit` | User submits prompt | Add context, suggest skills |\n| `Stop` | Agent finishes | Decide if Claude should continue |\n\n#### Hook Response Format\n\n```json\n{\n  \"block\": true,           \u002F\u002F Block the action (PreToolUse only)\n  \"message\": \"Reason\",     \u002F\u002F Message to show user\n  \"feedback\": \"Info\",      \u002F\u002F Non-blocking feedback\n  \"suppressOutput\": true,  \u002F\u002F Hide command output\n  \"continue\": false        \u002F\u002F Whether to continue\n}\n```\n\n#### Exit Codes\n- `0` - Success\n- `2` - Blocking error (PreToolUse only, blocks the tool)\n- Other - Non-blocking error\n\n---\n\n### MCP Servers - External Integrations\n\nMCP (Model Context Protocol) servers let Claude Code connect to external tools like JIRA, GitHub, Slack, databases, and more. This is how you enable workflows like \"read a ticket, implement it, and update the ticket status.\"\n\n**Location:** `.mcp.json` (project root, committed to git for team sharing)\n\n**📄 Example:** [.mcp.json](.mcp.json)\n\n#### How MCP Works\n\n```\n┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐\n│   Claude Code   │────▶│   MCP Server    │────▶│  External API   │\n│                 │◀────│  (local bridge) │◀────│  (JIRA, GitHub) │\n└─────────────────┘     └─────────────────┘     └─────────────────┘\n```\n\nMCP servers run locally and provide Claude with tools to interact with external services. When you configure a JIRA MCP server, Claude gets tools like `jira_get_issue`, `jira_update_issue`, `jira_create_issue`, etc.\n\n#### .mcp.json Format\n\n```json\n{\n  \"mcpServers\": {\n    \"server-name\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@anthropic\u002Fmcp-server-name\"],\n      \"env\": {\n        \"API_KEY\": \"${API_KEY}\"\n      }\n    }\n  }\n}\n```\n\n**Fields:**\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `type` | Yes | Server type: `stdio` (local process) or `http` (remote) |\n| `command` | For stdio | Executable to run (e.g., `npx`, `python`) |\n| `args` | No | Command-line arguments |\n| `env` | No | Environment variables (supports `${VAR}` expansion) |\n| `url` | For http | Remote server URL |\n| `headers` | For http | HTTP headers for authentication |\n\n#### Example: JIRA Integration\n\n```json\n{\n  \"mcpServers\": {\n    \"jira\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@anthropic\u002Fmcp-jira\"],\n      \"env\": {\n        \"JIRA_HOST\": \"${JIRA_HOST}\",\n        \"JIRA_EMAIL\": \"${JIRA_EMAIL}\",\n        \"JIRA_API_TOKEN\": \"${JIRA_API_TOKEN}\"\n      }\n    }\n  }\n}\n```\n\n**What this enables:**\n- Read ticket details, acceptance criteria, and comments\n- Update ticket status (To Do → In Progress → In Review)\n- Add comments with progress updates\n- Create new tickets for bugs found during development\n- Link PRs to tickets\n\n**Example workflow with [`\u002Fticket` command](.claude\u002Fcommands\u002Fticket.md):**\n```\nYou: \u002Fticket PROJ-123\n\nClaude:\n1. Fetching PROJ-123 from JIRA...\n   \"Add user profile avatar upload\"\n\n2. Reading acceptance criteria...\n   - Upload button on profile page\n   - Support JPG\u002FPNG up to 5MB\n   - Show loading state\n\n3. Searching codebase for related files...\n   Found: src\u002Fscreens\u002FProfile\u002FProfileScreen.tsx\n\n4. Creating branch: cw\u002FPROJ-123-avatar-upload\n\n5. [Implements feature...]\n\n6. Updating JIRA status to \"In Review\"\n   Adding comment: \"PR #456 ready for review\"\n\n7. Creating PR linked to PROJ-123...\n```\n\n#### Common MCP Server Configurations\n\n**Issue Tracking:**\n```json\n{\n  \"jira\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-jira\"],\n    \"env\": {\n      \"JIRA_HOST\": \"${JIRA_HOST}\",\n      \"JIRA_EMAIL\": \"${JIRA_EMAIL}\",\n      \"JIRA_API_TOKEN\": \"${JIRA_API_TOKEN}\"\n    }\n  },\n  \"linear\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-linear\"],\n    \"env\": { \"LINEAR_API_KEY\": \"${LINEAR_API_KEY}\" }\n  }\n}\n```\n\n**Code & DevOps:**\n```json\n{\n  \"github\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-github\"],\n    \"env\": { \"GITHUB_TOKEN\": \"${GITHUB_TOKEN}\" }\n  },\n  \"sentry\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-sentry\"],\n    \"env\": {\n      \"SENTRY_AUTH_TOKEN\": \"${SENTRY_AUTH_TOKEN}\",\n      \"SENTRY_ORG\": \"${SENTRY_ORG}\"\n    }\n  }\n}\n```\n\n**Communication:**\n```json\n{\n  \"slack\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-slack\"],\n    \"env\": {\n      \"SLACK_BOT_TOKEN\": \"${SLACK_BOT_TOKEN}\",\n      \"SLACK_TEAM_ID\": \"${SLACK_TEAM_ID}\"\n    }\n  }\n}\n```\n\n**Databases:**\n```json\n{\n  \"postgres\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-postgres\"],\n    \"env\": { \"DATABASE_URL\": \"${DATABASE_URL}\" }\n  }\n}\n```\n\n#### Environment Variables\n\nMCP configs support variable expansion:\n- `${VAR}` - Expands to environment variable (fails if not set)\n- `${VAR:-default}` - Uses default if VAR is not set\n\nSet these in your shell profile or `.env` file (don't commit secrets!):\n```bash\nexport JIRA_HOST=\"https:\u002F\u002Fyourcompany.atlassian.net\"\nexport JIRA_EMAIL=\"you@company.com\"\nexport JIRA_API_TOKEN=\"your-api-token\"\n```\n\n#### Settings for MCP\n\nIn `settings.json`, you can auto-approve MCP servers:\n\n```json\n{\n  \"enableAllProjectMcpServers\": true\n}\n```\n\nOr approve specific servers:\n```json\n{\n  \"enabledMcpjsonServers\": [\"jira\", \"github\", \"slack\"]\n}\n```\n\n---\n\n### LSP Servers - Real-Time Code Intelligence\n\nLSP (Language Server Protocol) gives Claude real-time understanding of your code—type information, errors, completions, and navigation. Instead of just reading text, Claude can \"see\" your code the way your IDE does.\n\n**Why this matters:** When you edit TypeScript, Claude immediately knows if you introduced a type error. When you reference a function, Claude can jump to its definition. This dramatically improves code generation quality.\n\n#### Enabling LSP\n\nLSP support is enabled through plugins in `settings.json`:\n\n```json\n{\n  \"enabledPlugins\": {\n    \"typescript-lsp@claude-plugins-official\": true,\n    \"pyright-lsp@claude-plugins-official\": true\n  }\n}\n```\n\n#### What Claude Gets from LSP\n\n| Feature | Description |\n|---------|-------------|\n| **Diagnostics** | Real-time errors and warnings after every edit |\n| **Type Information** | Hover info, function signatures, type definitions |\n| **Code Navigation** | Go to definition, find references |\n| **Completions** | Context-aware symbol suggestions |\n\n#### Available LSP Plugins\n\n| Plugin | Language | Install Binary First |\n|--------|----------|---------------------|\n| `typescript-lsp` | TypeScript\u002FJavaScript | `npm install -g typescript-language-server typescript` |\n| `pyright-lsp` | Python | `pip install pyright` |\n| `rust-lsp` | Rust | `rustup component add rust-analyzer` |\n\n#### Custom LSP Configuration\n\nFor advanced setups, create `.lsp.json`:\n\n```json\n{\n  \"typescript\": {\n    \"command\": \"typescript-language-server\",\n    \"args\": [\"--stdio\"],\n    \"extensionToLanguage\": {\n      \".ts\": \"typescript\",\n      \".tsx\": \"typescriptreact\"\n    },\n    \"initializationOptions\": {\n      \"preferences\": {\n        \"quotePreference\": \"single\"\n      }\n    }\n  }\n}\n```\n\n#### Troubleshooting\n\nIf LSP isn't working:\n\n1. **Check binary is installed:**\n   ```bash\n   which typescript-language-server  # Should return a path\n   ```\n\n2. **Enable debug logging:**\n   ```bash\n   claude --enable-lsp-logging\n   ```\n\n3. **Check plugin status:**\n   ```bash\n   claude \u002Fplugin  # View Errors tab\n   ```\n\n---\n\n### Skill Evaluation Hooks\n\nOne of our most powerful automations is the **skill evaluation system**. It runs on every prompt submission and intelligently suggests which skills Claude should activate.\n\n**📄 Files:** [skill-eval.sh](.claude\u002Fhooks\u002Fskill-eval.sh) | [skill-eval.js](.claude\u002Fhooks\u002Fskill-eval.js) | [skill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json)\n\n#### How It Works\n\nWhen you submit a prompt, the `UserPromptSubmit` hook triggers our skill evaluation engine:\n\n1. **Prompt Analysis** - The engine analyzes your prompt for:\n   - **Keywords**: Simple word matching (`test`, `form`, `graphql`, `bug`)\n   - **Patterns**: Regex matching (`\\btest(?:s|ing)?\\b`, `\\.stories\\.`)\n   - **File Paths**: Extracts mentioned files (`src\u002Fcomponents\u002FButton.tsx`)\n   - **Intent**: Detects what you're trying to do (`create.*test`, `fix.*bug`)\n\n2. **Directory Mapping** - File paths are mapped to relevant skills:\n   ```json\n   {\n     \"src\u002Fcomponents\u002Fcore\": \"core-components\",\n     \"src\u002Fgraphql\": \"graphql-schema\",\n     \".github\u002Fworkflows\": \"github-actions\",\n     \"src\u002Fhooks\": \"react-ui-patterns\"\n   }\n   ```\n\n3. **Confidence Scoring** - Each trigger type has a point value:\n   ```json\n   {\n     \"keyword\": 2,\n     \"keywordPattern\": 3,\n     \"pathPattern\": 4,\n     \"directoryMatch\": 5,\n     \"intentPattern\": 4\n   }\n   ```\n\n4. **Skill Suggestion** - Skills exceeding the confidence threshold are suggested with reasons:\n   ```\n   SKILL ACTIVATION REQUIRED\n\n   Detected file paths: src\u002Fcomponents\u002FUserForm.tsx\n\n   Matched skills (ranked by relevance):\n   1. formik-patterns (HIGH confidence)\n      Matched: keyword \"form\", path \"src\u002Fcomponents\u002FUserForm.tsx\"\n   2. react-ui-patterns (MEDIUM confidence)\n      Matched: directory mapping, keyword \"component\"\n   ```\n\n#### Configuration\n\nSkills are defined in [skill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json):\n\n```json\n{\n  \"testing-patterns\": {\n    \"description\": \"Jest testing patterns and TDD workflow\",\n    \"priority\": 9,\n    \"triggers\": {\n      \"keywords\": [\"test\", \"jest\", \"spec\", \"tdd\", \"mock\"],\n      \"keywordPatterns\": [\"\\\\btest(?:s|ing)?\\\\b\", \"\\\\bspec\\\\b\"],\n      \"pathPatterns\": [\"**\u002F*.test.ts\", \"**\u002F*.test.tsx\"],\n      \"intentPatterns\": [\n        \"(?:write|add|create|fix).*(?:test|spec)\",\n        \"(?:test|spec).*(?:for|of|the)\"\n      ]\n    },\n    \"excludePatterns\": [\"e2e\", \"maestro\", \"end-to-end\"]\n  }\n}\n```\n\n#### Adding to Your Project\n\n1. Copy the hooks to your project:\n   ```bash\n   cp -r .claude\u002Fhooks\u002F your-project\u002F.claude\u002Fhooks\u002F\n   ```\n\n2. Add the hook to your `settings.json`:\n   ```json\n   {\n     \"hooks\": {\n       \"UserPromptSubmit\": [\n         {\n           \"hooks\": [\n             {\n               \"type\": \"command\",\n               \"command\": \"\\\"$CLAUDE_PROJECT_DIR\\\"\u002F.claude\u002Fhooks\u002Fskill-eval.sh\",\n               \"timeout\": 5\n             }\n           ]\n         }\n       ]\n     }\n   }\n   ```\n\n3. Customize [skill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json) with your project's skills and triggers.\n\n---\n\n### Skills - Domain Knowledge\n\nSkills are markdown documents that teach Claude project-specific patterns and conventions.\n\n**Location:** `.claude\u002Fskills\u002F{skill-name}\u002FSKILL.md`\n\n**📄 Examples:**\n- [testing-patterns](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md) - TDD, factory functions, mocking\n- [systematic-debugging](.claude\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md) - Four-phase debugging methodology\n- [react-ui-patterns](.claude\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md) - Loading states, error handling\n- [graphql-schema](.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md) - Queries, mutations, codegen\n- [core-components](.claude\u002Fskills\u002Fcore-components\u002FSKILL.md) - Design system, tokens\n- [formik-patterns](.claude\u002Fskills\u002Fformik-patterns\u002FSKILL.md) - Form handling, validation\n\n#### SKILL.md Frontmatter Fields\n\n| Field | Required | Max Length | Description |\n|-------|----------|------------|-------------|\n| `name` | **Yes** | 64 chars | Lowercase letters, numbers, and hyphens only. Should match directory name. |\n| `description` | **Yes** | 1024 chars | What the skill does and when to use it. Claude uses this to decide when to apply the skill. |\n| `allowed-tools` | No | - | Comma-separated list of tools Claude can use (e.g., `Read, Grep, Bash(npm:*)`). |\n| `model` | No | - | Specific model to use (e.g., `claude-sonnet-4-20250514`). |\n\n#### SKILL.md Format\n\n```markdown\n---\nname: skill-name\ndescription: What this skill does and when to use it. Include keywords users would mention.\nallowed-tools: Read, Grep, Glob\nmodel: claude-sonnet-4-20250514\n---\n\n# Skill Title\n\n## When to Use\n- Trigger condition 1\n- Trigger condition 2\n\n## Core Patterns\n\n### Pattern Name\n```typescript\n\u002F\u002F Example code\n```\n\n## Anti-Patterns\n\n### What NOT to Do\n```typescript\n\u002F\u002F Bad example\n```\n\n## Integration\n- Related skill: `other-skill`\n```\n\n#### Best Practices for Skills\n\n1. **Keep SKILL.md focused** - Under 500 lines; put detailed docs in separate referenced files\n2. **Write trigger-rich descriptions** - Claude uses semantic matching on descriptions to decide when to apply skills\n3. **Include examples** - Show both good and bad patterns with code\n4. **Reference other skills** - Show how skills work together\n5. **Use exact filename** - Must be `SKILL.md` (case-sensitive)\n\n---\n\n### Agents - Specialized Assistants\n\nAgents are AI assistants with focused purposes and their own prompts.\n\n**Location:** `.claude\u002Fagents\u002F{agent-name}.md`\n\n**📄 Examples:**\n- [code-reviewer.md](.claude\u002Fagents\u002Fcode-reviewer.md) - Comprehensive code review with checklist\n- [github-workflow.md](.claude\u002Fagents\u002Fgithub-workflow.md) - Git commits, branches, PRs\n\n#### Agent Format\n\n```markdown\n---\nname: code-reviewer\ndescription: Reviews code for quality, security, and conventions. Use after writing or modifying code.\nmodel: opus\n---\n\n# Agent System Prompt\n\nYou are a senior code reviewer...\n\n## Your Process\n1. Run `git diff` to see changes\n2. Apply review checklist\n3. Provide feedback\n\n## Checklist\n- [ ] No TypeScript `any`\n- [ ] Error handling present\n- [ ] Tests included\n```\n\n#### Agent Configuration Fields\n\n| Field | Required | Description |\n|-------|----------|-------------|\n| `name` | Yes | Lowercase with hyphens |\n| `description` | Yes | When\u002Fwhy to use (max 1024 chars) |\n| `model` | No | `sonnet`, `opus`, or `haiku` |\n| `tools` | No | Comma-separated tool list |\n\n---\n\n### Commands - Slash Commands\n\nCustom commands invoked with `\u002Fcommand-name`.\n\n**Location:** `.claude\u002Fcommands\u002F{command-name}.md`\n\n**📄 Examples:**\n- [onboard.md](.claude\u002Fcommands\u002Fonboard.md) - Deep task exploration\n- [pr-review.md](.claude\u002Fcommands\u002Fpr-review.md) - PR review workflow\n- [pr-summary.md](.claude\u002Fcommands\u002Fpr-summary.md) - Generate PR description\n- [code-quality.md](.claude\u002Fcommands\u002Fcode-quality.md) - Quality checks\n- [docs-sync.md](.claude\u002Fcommands\u002Fdocs-sync.md) - Documentation alignment\n\n#### Command Format\n\n```markdown\n---\ndescription: Brief description shown in command list\nallowed-tools: Bash(git:*), Read, Grep\n---\n\n# Command Instructions\n\nYour task is to: $ARGUMENTS\n\n## Steps\n1. Do this first\n2. Then do this\n```\n\n#### Variables\n\n- `$ARGUMENTS` - All arguments as single string\n- `$1`, `$2`, `$3` - Individual positional arguments\n\n#### Inline Bash\n\n```markdown\nCurrent branch: !`git branch --show-current`\nRecent commits: !`git log --oneline -5`\n```\n\n---\n\n## GitHub Actions Workflows\n\nAutomate code review, quality checks, and maintenance with Claude Code.\n\n**📄 Examples:**\n- [pr-claude-code-review.yml](.github\u002Fworkflows\u002Fpr-claude-code-review.yml) - Auto PR review\n- [scheduled-claude-code-docs-sync.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) - Monthly docs sync\n- [scheduled-claude-code-quality.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) - Weekly quality review\n- [scheduled-claude-code-dependency-audit.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) - Biweekly dependency updates\n\n### PR Code Review\n\nAutomatically reviews PRs and responds to `@claude` mentions.\n\n```yaml\nname: PR - Claude Code Review\non:\n  pull_request:\n    types: [opened, synchronize, reopened]\n  issue_comment:\n    types: [created]\n\njobs:\n  review:\n    if: |\n      github.event_name == 'pull_request' ||\n      (github.event_name == 'issue_comment' &&\n       github.event.issue.pull_request &&\n       contains(github.event.comment.body, '@claude'))\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n        with:\n          fetch-depth: 0\n\n      - uses: anthropics\u002Fclaude-code-action@beta\n        with:\n          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}\n          model: claude-opus-4-5-20251101\n          prompt: |\n            Review this PR using .claude\u002Fagents\u002Fcode-reviewer.md standards.\n            Run `git diff origin\u002Fmain...HEAD` to see changes.\n```\n\n### Scheduled Workflows\n\n| Workflow | Schedule | Purpose |\n|----------|----------|---------|\n| [Code Quality](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) | Weekly (Sunday) | Reviews random directories, auto-fixes issues |\n| [Docs Sync](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) | Monthly (1st) | Ensures docs align with code changes |\n| [Dependency Audit](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) | Biweekly (1st & 15th) | Safe dependency updates with testing |\n\n### Setup Required\n\nAdd `ANTHROPIC_API_KEY` to your repository secrets:\n- Settings → Secrets and variables → Actions → New repository secret\n\n### Cost Estimate\n\n| Workflow | Frequency | Est. Cost |\n|----------|-----------|-----------|\n| PR Review | Per PR | ~$0.05 - $0.50 |\n| Docs Sync | Monthly | ~$0.50 - $2.00 |\n| Dependency Audit | Biweekly | ~$0.20 - $1.00 |\n| Code Quality | Weekly | ~$1.00 - $5.00 |\n\n**Estimated monthly total:** ~$10 - $50 (depending on PR volume)\n\n---\n\n## Best Practices\n\n### 1. Start with CLAUDE.md\n\nYour `CLAUDE.md` is the foundation. Include:\n- Stack overview\n- Key commands\n- Critical rules\n- Directory structure\n\n### 2. Build Skills Incrementally\n\nDon't try to document everything at once:\n1. Start with your most common patterns\n2. Add skills as pain points emerge\n3. Keep each skill focused on one domain\n\n### 3. Use Hooks for Automation\n\nLet hooks handle repetitive tasks:\n- Auto-format on save\n- Run tests when test files change\n- Regenerate types when schemas change\n- Block edits on protected branches\n\n### 4. Create Agents for Complex Workflows\n\nAgents are great for:\n- Code review (with your team's checklist)\n- PR creation and management\n- Debugging workflows\n- Onboarding to tasks\n\n### 5. Leverage GitHub Actions\n\nAutomate maintenance:\n- PR reviews on every PR\n- Weekly quality sweeps\n- Monthly docs alignment\n- Dependency updates\n\n### 6. Version Control Your Config\n\nCommit everything except:\n- `settings.local.json` (personal preferences)\n- `CLAUDE.local.md` (personal notes)\n- User-specific credentials\n\n---\n\n## Examples in This Repository\n\n| File | Description |\n|------|-------------|\n| [CLAUDE.md](CLAUDE.md) | Example project memory file |\n| [.claude\u002Fsettings.json](.claude\u002Fsettings.json) | Full hooks configuration |\n| [.claude\u002Fsettings.md](.claude\u002Fsettings.md) | Human-readable hooks documentation |\n| [.mcp.json](.mcp.json) | MCP server configuration (JIRA, GitHub, Slack, etc.) |\n| **Agents** | |\n| [.claude\u002Fagents\u002Fcode-reviewer.md](.claude\u002Fagents\u002Fcode-reviewer.md) | Comprehensive code review agent |\n| [.claude\u002Fagents\u002Fgithub-workflow.md](.claude\u002Fagents\u002Fgithub-workflow.md) | Git workflow agent |\n| **Commands** | |\n| [.claude\u002Fcommands\u002Fonboard.md](.claude\u002Fcommands\u002Fonboard.md) | Deep task exploration |\n| [.claude\u002Fcommands\u002Fticket.md](.claude\u002Fcommands\u002Fticket.md) | **JIRA\u002FLinear ticket workflow (read → implement → update)** |\n| [.claude\u002Fcommands\u002Fpr-review.md](.claude\u002Fcommands\u002Fpr-review.md) | PR review workflow |\n| [.claude\u002Fcommands\u002Fpr-summary.md](.claude\u002Fcommands\u002Fpr-summary.md) | Generate PR summary |\n| [.claude\u002Fcommands\u002Fcode-quality.md](.claude\u002Fcommands\u002Fcode-quality.md) | Quality checks |\n| [.claude\u002Fcommands\u002Fdocs-sync.md](.claude\u002Fcommands\u002Fdocs-sync.md) | Documentation sync |\n| **Hooks** | |\n| [.claude\u002Fhooks\u002Fskill-eval.sh](.claude\u002Fhooks\u002Fskill-eval.sh) | Skill evaluation wrapper |\n| [.claude\u002Fhooks\u002Fskill-eval.js](.claude\u002Fhooks\u002Fskill-eval.js) | Node.js skill matching engine |\n| [.claude\u002Fhooks\u002Fskill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json) | Pattern matching rules |\n| **Skills** | |\n| [.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md) | TDD, factory functions, mocking |\n| [.claude\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md](.claude\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md) | Four-phase debugging |\n| [.claude\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md](.claude\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md) | Loading\u002Ferror\u002Fempty states |\n| [.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md](.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md) | Queries, mutations, codegen |\n| [.claude\u002Fskills\u002Fcore-components\u002FSKILL.md](.claude\u002Fskills\u002Fcore-components\u002FSKILL.md) | Design system, tokens |\n| [.claude\u002Fskills\u002Fformik-patterns\u002FSKILL.md](.claude\u002Fskills\u002Fformik-patterns\u002FSKILL.md) | Form handling, validation |\n| **GitHub Workflows** | |\n| [.github\u002Fworkflows\u002Fpr-claude-code-review.yml](.github\u002Fworkflows\u002Fpr-claude-code-review.yml) | Auto PR review |\n| [.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) | Monthly docs sync |\n| [.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) | Weekly quality review |\n| [.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) | Biweekly dependency audit |\n\n---\n\n## Learn More\n\n- [Claude Code Documentation](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code)\n- [Claude Code Action](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code-action) - GitHub Action\n- [Anthropic API](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fapi)\n\n---\n\n## License\n\nMIT - Use this as a template for your own projects.\n","# Claude Code 项目配置展示\n\n> 大多数软件工程师都严重低估了当前大语言模型代理的强大能力，尤其是像 Claude Code 这样的工具。\n\n一旦你完成了 Claude Code 的设置，就可以让它指向你的代码库，学习你的编码规范，引入最佳实践，并不断优化，直到它几乎像一个功能超强的团队成员一样工作。**真正的关键在于构建一套坚实的可复用“[技能](#skills---domain-knowledge)”以及几个针对你日常任务的“[代理](#agents---specialized-assistants)”。**\n\n### 实际应用示例\n\n**自定义 UI 库？** 我们有一个[技能专门讲解如何使用它](.claude\u002Fskills\u002Fcore-components\u002FSKILL.md)。同样地，关于[我们如何编写测试](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md)、[GraphQL 的结构化方式](.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md)，以及基本上我们在仓库中希望完成所有事情的方式，都有相应的技能文档。因此，当 Claude 生成代码时，它已经能够直接符合我们的模式和标准。\n\n**自动化质量门控？** 我们使用[钩子](.claude\u002Fsettings.json)来自动格式化代码、在测试文件变更时运行测试、进行 TypeScript 类型检查，甚至[阻止对主分支的编辑](.claude\u002Fsettings.md)。Claude Code 还创建了一系列 ESLint 自动化规则，包括自定义规则和 lint 检查，能够在代码进入评审之前就捕获问题。\n\n**深度代码审查？** 我们有一个[代码审查代理](.claude\u002Fagents\u002Fcode-reviewer.md)，Claude 会在代码变更后运行它。该代理会遵循一份详细的检查清单，涵盖 TypeScript 的严格模式、错误处理、加载状态、数据变更模式等。当 PR 提交时，我们还有一个[GitHub Action](.github\u002Fworkflows\u002Fpr-claude-code-review.yml)，可以自动完成整个 PR 审查流程。\n\n**定期维护？** 我们设置了按计划运行的 GitHub 工作流代理：\n- [每月文档同步](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml)：读取过去一个月的提交记录，确保文档仍然保持一致。\n- [每周代码质量检查](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml)：随机审查目录并自动修复问题。\n- [每两周依赖项审计](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml)：在测试验证通过的情况下安全更新依赖项。\n\n**智能技能建议？** 我们构建了一个[技能评估系统](#skill-evaluation-hooks)，它可以分析每一个提示，并根据关键词、文件路径和意图模式自动建议 Claude 应该激活哪些技能。\n\n大量的维护和质量相关工作都已经实现了自动化，运行得非常顺畅。\n\n**JIRA\u002FLinear 集成？** 我们通过[MCP 服务器](.mcp.json)将 Claude Code 与我们的工单系统连接起来。现在，Claude 可以读取工单、理解需求、实现功能、更新工单状态，甚至在发现 bug 时创建新的工单。`[\u002Fticket] 命令](.claude\u002Fcommands\u002Fticket.md)` 能够处理整个工作流程——从阅读验收条件到将 PR 关联回工单。\n\n我们甚至用 Claude Code 来进行工单分类。它会读取工单内容，深入研究代码库，并留下评论说明它认为应该怎么做。这样，当工程师接手时，实际上已经完成了大约一半的工作。\n\n**这里有太多唾手可得的机会，说实话，我简直不敢相信竟然还有人没有充分利用它们。**\n\n---\n\n## 目录\n\n- [目录结构](#directory-structure)\n- [快速入门](#quick-start)\n- [配置参考](#configuration-reference)\n  - [CLAUDE.md — 项目记忆](#claudemd---project-memory)\n  - [settings.json — 钩子与环境](#settingsjson---hooks--environment)\n  - [MCP 服务器 — 外部集成](#mcp-servers---external-integrations)\n  - [LSP 服务器 — 实时代码智能](#lsp-servers---real-time-code-intelligence)\n  - [技能评估钩子](#skill-evaluation-hooks)\n  - [技能 — 领域知识](#skills---domain-knowledge)\n  - [代理 — 专业助手](#agents---specialized-assistants)\n  - [命令 — 斜杠命令](#commands---slash-commands)\n- [GitHub Actions 工作流](#github-actions-workflows)\n- [最佳实践](#best-practices)\n- [本仓库中的示例](#examples-in-this-repository)\n\n---\n\n## 目录结构\n\n```\nyour-project\u002F\n├── CLAUDE.md                      # 项目记忆（备选位置）\n├── .mcp.json                      # MCP 服务器配置（JIRA、GitHub 等）\n├── .claude\u002F\n│   ├── settings.json              # 钩子、环境、权限\n│   ├── settings.local.json        # 个人覆盖配置（已忽略在 Git 中）\n│   ├── settings.md                # 人类可读的钩子文档\n│   ├── .gitignore                 # 忽略本地\u002F个人文件\n│   │\n│   ├── agents\u002F                    # 自定义 AI 代理\n│   │   └── code-reviewer.md       # 主动式代码审查代理\n│   │\n│   ├── commands\u002F                  # 斜杠命令（\u002Fcommand-name）\n│   │   ├── onboard.md             # 深度任务探索\n│   │   ├── pr-review.md           # PR 审查工作流\n│   │   └── ...\n│   │\n│   ├── hooks\u002F                     # 钩子脚本\n│   │   ├── skill-eval.sh          # 在提交提示时匹配技能\n│   │   ├── skill-eval.js          # Node.js 技能匹配引擎\n│   │   └── skill-rules.json       # 模式匹配配置\n│   │\n│   ├── skills\u002F                    # 领域知识文档\n│   │   ├── README.md              # 技能概述\n│   │   ├── testing-patterns\u002F\n│   │   │   └── SKILL.md\n│   │   ├── graphql-schema\u002F\n│   │   │   └── SKILL.md\n│   │   └── ...\n│   │\n│   └── rules\u002F                     # 模块化指令（可选）\n│       ├── code-style.md\n│       └── security.md\n│\n└── .github\u002F\n    └── workflows\u002F\n        ├── pr-claude-code-review.yml           # 自动 PR 审查\n        ├── scheduled-claude-code-docs-sync.yml # 每月文档同步\n        ├── scheduled-claude-code-quality.yml   # 每周质量审查\n        └── scheduled-claude-code-dependency-audit.yml\n```\n\n---\n\n## 快速入门\n\n### 1. 创建 `.claude` 目录\n\n```bash\nmkdir -p .claude\u002F{agents,commands,hooks,skills}\n```\n\n### 2. 添加 CLAUDE.md 文件\n\n在项目根目录下创建 `CLAUDE.md`，填写项目的关键信息。完整的示例请参阅 [CLAUDE.md](CLAUDE.md)。\n\n```markdown\n# 项目名称\n\n## 快速信息\n- **技术栈**: React、TypeScript、Node.js\n- **测试命令**: `npm run test`\n- **Lint 命令**: `npm run lint`\n\n## 关键目录\n- `src\u002Fcomponents\u002F` — React 组件\n- `src\u002Fapi\u002F` — API 层\n- `tests\u002F` — 测试文件\n\n## 代码风格\n- 使用 TypeScript 严格模式\n- 优先使用接口而非类型\n- 不使用 `any`，改用 `unknown`\n```\n\n### 3. 添加带有钩子的 settings.json\n\n创建 `.claude\u002Fsettings.json`。完整示例请参见 [settings.json](.claude\u002Fsettings.json)，其中包含自动格式化、测试等功能。\n\n```json\n{\n  \"hooks\": {\n    \"PreToolUse\": [\n      {\n        \"matcher\": \"Edit|Write\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"[ \\\"$(git branch --show-current)\\\" != \\\"main\\\" ] || { echo '{\\\"block\\\": true, \\\"message\\\": \\\"Cannot edit on main branch\\\"}' >&2; exit 2; }\",\n            \"timeout\": 5\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n### 4. 添加你的第一个技能\n\n创建 `.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md`。全面示例请参见 [testing-patterns\u002FSKILL.md](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md)。\n\n```markdown\n---\nname: testing-patterns\ndescription: Jest 测试模式，适用于该项目。在编写测试、创建模拟对象或遵循 TDD 工作流程时使用。\n---\n\n# 测试模式\n\n## 测试结构\n- 使用 `describe` 块进行分组\n- 使用 `it` 进行单个测试\n- 遵循 AAA 模式：安排、行动、断言\n\n## 模拟\n- 使用工厂函数：`getMockUser(overrides)`\n- 模拟外部依赖项，而非内部模块\n```\n\n> **提示:** `description` 字段至关重要——Claude 会根据它来决定何时应用该技能。请包含用户自然会提到的关键字。\n\n---\n\n## 配置参考\n\n### CLAUDE.md - 项目记忆\n\nCLAUDE.md 是 Claude 的持久化记忆，在会话开始时会自动加载。\n\n**位置（按优先级顺序）：**\n1. `.claude\u002FCLAUDE.md`（项目级，位于 .claude 文件夹中）\n2. `.\u002FCLAUDE.md`（项目根目录）\n3. `~\u002F.claude\u002FCLAUDE.md`（用户级，适用于所有项目）\n\n**应包含的内容：**\n- 项目技术栈和架构概述\n- 关键命令（测试、构建、 lint、部署）\n- 代码风格指南\n- 重要目录及其用途\n- 重要规则和约束\n\n**📄 示例:** [CLAUDE.md](CLAUDE.md)\n\n---\n\n### settings.json - 钩子与环境\n\n这是用于配置钩子、环境变量和权限的主要配置文件。\n\n**位置:** `.claude\u002Fsettings.json`\n\n**📄 示例:** [settings.json](.claude\u002Fsettings.json) | [人类可读文档](.claude\u002Fsettings.md)\n\n#### 钩子事件\n\n| 事件 | 触发时机 | 使用场景 |\n|-------|---------------|----------|\n| `PreToolUse` | 在工具执行之前 | 阻止在主分支上编辑，验证命令 |\n| `PostToolUse` | 在工具执行完毕后 | 自动格式化，运行测试，执行 lint |\n| `UserPromptSubmit` | 用户提交提示时 | 添加上下文，建议技能 |\n| `Stop` | 代理结束时 | 决定 Claude 是否应继续 |\n\n#### 钩子响应格式\n\n```json\n{\n  \"block\": true,           \u002F\u002F 阻止操作（仅限 PreToolUse）\n  \"message\": \"原因\",     \u002F\u002F 向用户显示的消息\n  \"feedback\": \"信息\",      \u002F\u002F 非阻塞反馈\n  \"suppressOutput\": true,  \u002F\u002F 隐藏命令输出\n  \"continue\": false        \u002F\u002F 是否继续\n}\n```\n\n#### 退出码\n- `0` - 成功\n- `2` - 阻塞型错误（仅限 PreToolUse，会阻止工具执行）\n- 其他 - 非阻塞型错误\n\n---\n\n### MCP 服务器 - 外部集成\n\nMCP（模型上下文协议）服务器使 Claude Code 能够连接到 JIRA、GitHub、Slack、数据库等外部工具。通过这种方式，您可以实现诸如“读取工单、执行开发并更新工单状态”之类的自动化工作流。\n\n**位置：** `.mcp.json` 文件（项目根目录，已提交至 Git 以便团队共享）\n\n**📄 示例：** [.mcp.json](.mcp.json)\n\n#### MCP 的工作原理\n\n```\n┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐\n│   Claude Code   │────▶│   MCP 服务器    │────▶│  外部 API       │\n│                 │◀────│  (本地桥接)      │◀────│  (JIRA、GitHub) │\n└─────────────────┘     └─────────────────┘     └─────────────────┘\n```\n\nMCP 服务器在本地运行，为 Claude 提供与外部服务交互的工具。例如，当您配置一个 JIRA 的 MCP 服务器时，Claude 就会获得 `jira_get_issue`、`jira_update_issue`、`jira_create_issue` 等工具。\n\n#### .mcp.json 格式\n\n```json\n{\n  \"mcpServers\": {\n    \"server-name\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@anthropic\u002Fmcp-server-name\"],\n      \"env\": {\n        \"API_KEY\": \"${API_KEY}\"\n      }\n    }\n  }\n}\n```\n\n**字段说明：**\n\n| 字段     | 必需 | 描述                                                         |\n|----------|------|--------------------------------------------------------------|\n| `type`   | 是   | 服务器类型：`stdio`（本地进程）或 `http`（远程）             |\n| `command`| 是   | 要执行的命令行工具（如 `npx`、`python`）                     |\n| `args`   | 否   | 命令行参数                                                   |\n| `env`    | 否   | 环境变量（支持 `${VAR}` 扩展）                               |\n| `url`    | 否   | 远程服务器 URL                                               |\n| `headers`| 否   | 用于身份验证的 HTTP 头                                                       |\n\n#### 示例：JIRA 集成\n\n```json\n{\n  \"mcpServers\": {\n    \"jira\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@anthropic\u002Fmcp-jira\"],\n      \"env\": {\n        \"JIRA_HOST\": \"${JIRA_HOST}\",\n        \"JIRA_EMAIL\": \"${JIRA_EMAIL}\",\n        \"JIRA_API_TOKEN\": \"${JIRA_API_TOKEN}\"\n      }\n    }\n  }\n}\n```\n\n**启用的功能：**\n- 读取工单详情、验收标准和评论\n- 更新工单状态（待办 → 进行中 → 审核中）\n- 添加进度更新评论\n- 在开发过程中发现的 bug 创建新工单\n- 将 PR 与工单关联\n\n**使用 [`\u002Fticket` 命令](.claude\u002Fcommands\u002Fticket.md) 的示例工作流：**\n```\n您：\u002Fticket PROJ-123\n\nClaude：\n1. 从 JIRA 获取 PROJ-123...\n   “添加用户个人资料头像上传”\n\n2. 阅读验收标准...\n   - 个人资料页面上的上传按钮\n   - 支持 JPG\u002FPNG 格式，最大 5MB\n   - 显示加载状态\n\n3. 搜索代码库中相关文件...\n   找到：src\u002Fscreens\u002FProfile\u002FProfileScreen.tsx\n\n4. 创建分支：cw\u002FPROJ-123-avatar-upload\n\n5. [实现功能...]\n\n6. 将 JIRA 状态更新为“审核中”\n   添加评论：“PR #456 已准备好审核”\n\n7. 创建与 PROJ-123 关联的 PR...\n```\n\n#### 常见的 MCP 服务器配置\n\n**问题跟踪：**\n```json\n{\n  \"jira\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-jira\"],\n    \"env\": {\n      \"JIRA_HOST\": \"${JIRA_HOST}\",\n      \"JIRA_EMAIL\": \"${JIRA_EMAIL}\",\n      \"JIRA_API_TOKEN\": \"${JIRA_API_TOKEN}\"\n    }\n  },\n  \"linear\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-linear\"],\n    \"env\": { \"LINEAR_API_KEY\": \"${LINEAR_API_KEY}\" }\n  }\n}\n```\n\n**代码与 DevOps：**\n```json\n{\n  \"github\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-github\"],\n    \"env\": { \"GITHUB_TOKEN\": \"${GITHUB_TOKEN}\" }\n  },\n  \"sentry\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-sentry\"],\n    \"env\": {\n      \"SENTRY_AUTH_TOKEN\": \"${SENTRY_AUTH_TOKEN}\",\n      \"SENTRY_ORG\": \"${SENTRY_ORG}\"\n    }\n  }\n}\n```\n\n**沟通工具：**\n```json\n{\n  \"slack\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-slack\"],\n    \"env\": {\n      \"SLACK_BOT_TOKEN\": \"${SLACK_BOT_TOKEN}\",\n      \"SLACK_TEAM_ID\": \"${SLACK_TEAM_ID}\"\n    }\n  }\n}\n```\n\n**数据库：**\n```json\n{\n  \"postgres\": {\n    \"type\": \"stdio\",\n    \"command\": \"npx\",\n    \"args\": [\"-y\", \"@anthropic\u002Fmcp-postgres\"],\n    \"env\": { \"DATABASE_URL\": \"${DATABASE_URL}\" }\n  }\n}\n```\n\n#### 环境变量\n\nMCP 配置支持变量扩展：\n- `${VAR}` - 展开为环境变量（未设置则失败）\n- `${VAR:-default}` - 如果 VAR 未设置，则使用默认值\n\n请在您的 shell 配置文件或 `.env` 文件中设置这些变量（切勿提交敏感信息！）：\n```bash\nexport JIRA_HOST=\"https:\u002F\u002Fyourcompany.atlassian.net\"\nexport JIRA_EMAIL=\"you@company.com\"\nexport JIRA_API_TOKEN=\"your-api-token\"\n```\n\n#### MCP 相关设置\n\n在 `settings.json` 中，您可以自动批准所有 MCP 服务器：\n\n```json\n{\n  \"enableAllProjectMcpServers\": true\n}\n```\n\n或者仅批准特定的服务器：\n```json\n{\n  \"enabledMcpjsonServers\": [\"jira\", \"github\", \"slack\"]\n}\n```\n\n---\n\n### LSP 服务器 - 实时代码智能\n\nLSP（语言服务器协议）为 Claude 提供了对您代码的实时理解——包括类型信息、错误提示、代码补全和导航功能。与仅仅阅读文本不同，Claude 可以像您的 IDE 一样“看到”您的代码。\n\n**重要性：** 当您编辑 TypeScript 代码时，Claude 会立即检测到是否引入了类型错误。当您引用某个函数时，Claude 可以直接跳转到该函数的定义处。这极大地提升了代码生成的质量。\n\n#### 启用 LSP\n\nLSP 支持通过 `settings.json` 中的插件来启用：\n\n```json\n{\n  \"enabledPlugins\": {\n    \"typescript-lsp@claude-plugins-official\": true,\n    \"pyright-lsp@claude-plugins-official\": true\n  }\n}\n```\n\n#### Claude 从 LSP 获得的功能\n\n| 功能         | 描述                                                         |\n|--------------|--------------------------------------------------------------|\n| **诊断信息** | 每次编辑后实时显示错误和警告                                 |\n| **类型信息** | 鼠标悬停时显示函数签名、类型定义等                           |\n| **代码导航** | 跳转到定义、查找引用                                         |\n| **代码补全** | 根据上下文提供符号建议                                       |\n\n#### 可用的 LSP 插件\n\n| 插件           | 语言     | 是否需要先安装二进制文件 |\n|----------------|----------|--------------------------|\n| `typescript-lsp` | TypeScript\u002FJavaScript | 是                       |\n| `pyright-lsp`  | Python   | 是                       |\n| `rust-lsp`     | Rust     | 是                       |\n\n#### 自定义 LSP 配置\n\n对于高级设置，可以创建 `.lsp.json` 文件：\n\n```json\n{\n  \"typescript\": {\n    \"command\": \"typescript-language-server\",\n    \"args\": [\"--stdio\"],\n    \"extensionToLanguage\": {\n      \".ts\": \"typescript\",\n      \".tsx\": \"typescriptreact\"\n    },\n    \"initializationOptions\": {\n      \"preferences\": {\n        \"quotePreference\": \"single\"\n      }\n    }\n  }\n}\n```\n\n#### 故障排除\n\n如果 LSP 无法正常工作：\n\n1. **检查二进制文件是否已安装：**\n   ```bash\n   which typescript-language-server  # 应返回路径\n   ```\n\n2. **启用调试日志：**\n   ```bash\n   claude --enable-lsp-logging\n   ```\n\n3. **检查插件状态：**\n   ```bash\n   claude \u002Fplugin  # 查看“错误”选项卡\n   ```\n\n---\n\n### 技能评估钩子\n\n我们最强大的自动化功能之一是**技能评估系统**。它会在每次提交提示时运行，并智能地建议 Claude 应该激活哪些技能。\n\n**📄 文件：** [skill-eval.sh](.claude\u002Fhooks\u002Fskill-eval.sh) | [skill-eval.js](.claude\u002Fhooks\u002Fskill-eval.js) | [skill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json)\n\n#### 工作原理\n\n当你提交一个提示时，`UserPromptSubmit` 钩子会触发我们的技能评估引擎：\n\n1. **提示分析** - 引擎会分析你的提示，寻找：\n   - **关键词**：简单的单词匹配（`test`、`form`、`graphql`、`bug`）\n   - **模式**：正则表达式匹配（`\\btest(?:s|ing)?\\b`、`\\.stories\\.`）\n   - **文件路径**：提取提及的文件（`src\u002Fcomponents\u002FButton.tsx`）\n   - **意图**：检测你试图完成的操作（`create.*test`、`fix.*bug`）\n\n2. **目录映射** - 文件路径会被映射到相关的技能：\n   ```json\n   {\n     \"src\u002Fcomponents\u002Fcore\": \"core-components\",\n     \"src\u002Fgraphql\": \"graphql-schema\",\n     \".github\u002Fworkflows\": \"github-actions\",\n     \"src\u002Fhooks\": \"react-ui-patterns\"\n   }\n   ```\n\n3. **置信度评分** - 每种触发类型都有对应的分数：\n   ```json\n   {\n     \"keyword\": 2,\n     \"keywordPattern\": 3,\n     \"pathPattern\": 4,\n     \"directoryMatch\": 5,\n     \"intentPattern\": 4\n   }\n   ```\n\n4. **技能建议** - 置信度超过阈值的技能会被建议，并附上理由：\n   ```\n   需要激活的技能\n\n   检测到的文件路径：src\u002Fcomponents\u002FUserForm.tsx\n\n   匹配的技能（按相关性排序）：\n   1. formik-patterns（高置信度）\n      匹配：关键词“form”，路径“src\u002Fcomponents\u002FUserForm.tsx”\n   2. react-ui-patterns（中等置信度）\n      匹配：目录映射，关键词“component”\n   ```\n\n#### 配置\n\n技能定义在 [skill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json) 中：\n\n```json\n{\n  \"testing-patterns\": {\n    \"description\": \"Jest 测试模式和 TDD 工作流程\",\n    \"priority\": 9,\n    \"triggers\": {\n      \"keywords\": [\"test\", \"jest\", \"spec\", \"tdd\", \"mock\"],\n      \"keywordPatterns\": [\"\\\\btest(?:s|ing)?\\\\b\", \"\\\\bspec\\\\b\"],\n      \"pathPatterns\": [\"**\u002F*.test.ts\", \"**\u002F*.test.tsx\"],\n      \"intentPatterns\": [\n        \"(?:write|add|create|fix).*(?:test|spec)\",\n        \"(?:test|spec).*(?:for|of|the)\"\n      ]\n    },\n    \"excludePatterns\": [\"e2e\", \"maestro\", \"end-to-end\"]\n  }\n}\n```\n\n#### 添加到你的项目\n\n1. 将钩子复制到你的项目中：\n   ```bash\n   cp -r .claude\u002Fhooks\u002F your-project\u002F.claude\u002Fhooks\u002F\n   ```\n\n2. 在 `settings.json` 中添加钩子：\n   ```json\n   {\n     \"hooks\": {\n       \"UserPromptSubmit\": [\n         {\n           \"hooks\": [\n             {\n               \"type\": \"command\",\n               \"command\": \"\\\"$CLAUDE_PROJECT_DIR\\\"\u002F.claude\u002Fhooks\u002Fskill-eval.sh\",\n               \"timeout\": 5\n             }\n           ]\n         }\n       ]\n     }\n   }\n   ```\n\n3. 根据项目的技能和触发条件，自定义 [skill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json)。\n\n---\n\n### 技能 - 领域知识\n\n技能是以 Markdown 格式编写的文档，用于向 Claude 传授项目特定的模式和规范。\n\n**位置：** `.claude\u002Fskills\u002F{skill-name}\u002FSKILL.md`\n\n**📄 示例：**\n- [testing-patterns](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md) - TDD、工厂函数、模拟\n- [systematic-debugging](.claude\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md) - 四阶段调试方法\n- [react-ui-patterns](.claude\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md) - 加载状态、错误处理\n- [graphql-schema](.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md) - 查询、突变、代码生成\n- [core-components](.claude\u002Fskills\u002Fcore-components\u002FSKILL.md) - 设计系统、样式变量\n- [formik-patterns](.claude\u002Fskills\u002Fformik-patterns\u002FSKILL.md) - 表单处理、验证\n\n#### SKILL.md 的 Frontmatter 字段\n\n| 字段 | 必需 | 最大长度 | 描述 |\n|------|------|----------|------|\n| `name` | **是** | 64 个字符 | 只能包含小写字母、数字和连字符。应与目录名称一致。 |\n| `description` | **是** | 1024 个字符 | 技能的作用及适用场景。Claude 会根据此描述决定何时应用该技能。 |\n| `allowed-tools` | 否 | - | Claude 可以使用的工具列表，用逗号分隔（例如：`Read, Grep, Bash(npm:*)`）。 |\n| `model` | 否 | - | 特定的模型名称（例如：`claude-sonnet-4-20250514`）。 |\n\n#### SKILL.md 的格式\n\n```markdown\n---\nname: skill-name\ndescription: 此技能的作用及适用场景。请包含用户可能会提到的关键词。\nallowed-tools: Read, Grep, Glob\nmodel: claude-sonnet-4-20250514\n---\n\n# 技能标题\n\n## 适用场景\n- 触发条件 1\n- 触发条件 2\n\n## 核心模式\n\n### 模式名称\n```typescript\n\u002F\u002F 示例代码\n```\n\n## 反模式\n\n### 不应该这样做\n```typescript\n\u002F\u002F 不良示例\n```\n\n## 整合\n- 相关技能：`other-skill`\n```\n\n#### 编写技能的最佳实践\n\n1. **保持 SKILL.md 内容聚焦** - 控制在 500 行以内；详细文档可放在单独引用的文件中。\n2. **编写丰富的触发描述** - Claude 会通过语义匹配来判断何时应用这些技能。\n3. **包含示例** - 展示良好和不良模式的代码。\n4. **引用其他技能** - 展示技能之间的协作关系。\n5. **使用精确的文件名** - 必须为 `SKILL.md`（区分大小写）。\n\n---\n\n### 代理 - 专用助手\n\n代理是具有明确目标和专属提示的 AI 助手。\n\n**位置：** `.claude\u002Fagents\u002F{agent-name}.md`\n\n**📄 示例：**\n- [code-reviewer.md](.claude\u002Fagents\u002Fcode-reviewer.md) - 带检查清单的全面代码审查\n- [github-workflow.md](.claude\u002Fagents\u002Fgithub-workflow.md) - Git 提交、分支、PR\n\n#### 代理的格式\n\n```markdown\n---\nname: code-reviewer\ndescription: 审查代码的质量、安全性及规范性。在编写或修改代码后使用。\nmodel: opus\n---\n\n# 代理系统提示\n\n你是一位资深代码审查员……\n\n## 审查流程\n1. 运行 `git diff` 查看更改\n2. 应用审查清单\n3. 提供反馈\n\n## 审查清单\n- [ ] 无 TypeScript `any`\n- [ ] 存在错误处理\n- [ ] 包含测试\n```\n\n#### 代理配置字段\n\n| 字段 | 必需 | 描述 |\n|------|------|------|\n| `name` | 是 | 小写加连字符 |\n| `description` | 是 | 使用时机及原因（最多 1024 字符） |\n| `model` | 否 | `sonnet`、`opus` 或 `haiku` |\n| `tools` | 否 | 用逗号分隔的工具列表 |\n\n---\n\n### 命令 - 斜杠命令\n\n通过 `\u002F命令名` 调用的自定义命令。\n\n**位置：** `.claude\u002Fcommands\u002F{命令名}.md`\n\n**📄 示例：**\n- [onboard.md](.claude\u002Fcommands\u002Fonboard.md) - 深入任务探索\n- [pr-review.md](.claude\u002Fcommands\u002Fpr-review.md) - PR 审查流程\n- [pr-summary.md](.claude\u002Fcommands\u002Fpr-summary.md) - 生成 PR 描述\n- [code-quality.md](.claude\u002Fcommands\u002Fcode-quality.md) - 质量检查\n- [docs-sync.md](.claude\u002Fcommands\u002Fdocs-sync.md) - 文档同步\n\n#### 命令的格式\n\n```markdown\n---\ndescription: 命令列表中显示的简要说明\nallowed-tools: Bash(git:*), Read, Grep\n---\n\n# 命令说明\n\n你的任务是：$ARGUMENTS\n\n## 步骤\n1. 先做这个\n2. 然后做这个\n```\n\n#### 变量\n\n- `$ARGUMENTS` - 所有参数作为一个字符串\n- `$1`, `$2`, `$3` - 单个位置参数\n\n#### 内联 Bash\n\n```markdown\n当前分支：!`git branch --show-current`\n最近的提交：!`git log --oneline -5`\n```\n\n---\n\n## GitHub Actions 工作流\n\n使用 Claude Code 自动化代码审查、质量检查和维护。\n\n**📄 示例：**\n- [pr-claude-code-review.yml](.github\u002Fworkflows\u002Fpr-claude-code-review.yml) - 自动 PR 审查\n- [scheduled-claude-code-docs-sync.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) - 每月文档同步\n- [scheduled-claude-code-quality.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) - 每周质量审查\n- [scheduled-claude-code-dependency-audit.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) - 每两周依赖更新\n\n### PR 代码审查\n\n自动审查 PR 并响应 `@claude` 的提及。\n\n```yaml\nname: PR - Claude Code 审查\non:\n  pull_request:\n    types: [opened, synchronize, reopened]\n  issue_comment:\n    types: [created]\n\njobs:\n  review:\n    if: |\n      github.event_name == 'pull_request' ||\n      (github.event_name == 'issue_comment' &&\n       github.event.issue.pull_request &&\n       contains(github.event.comment.body, '@claude'))\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n        with:\n          fetch-depth: 0\n\n      - uses: anthropics\u002Fclaude-code-action@beta\n        with:\n          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}\n          model: claude-opus-4-5-20251101\n          prompt: |\n            使用 .claude\u002Fagents\u002Fcode-reviewer.md 标准审查此 PR。\n            运行 `git diff origin\u002Fmain...HEAD` 查看更改。\n```\n\n### 定期工作流\n\n| 工作流 | 时间表 | 目的 |\n|----------|----------|---------|\n| [代码质量](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) | 每周（星期日） | 审查随机目录，自动修复问题 |\n| [文档同步](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) | 每月（1号） | 确保文档与代码变更一致 |\n| [依赖审计](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) | 每两周（1号和15号） | 在测试后安全地更新依赖 |\n\n### 必需设置\n\n将 `ANTHROPIC_API_KEY` 添加到你的仓库密钥中：\n- 设置 → 密钥和变量 → 操作 → 新建仓库密钥\n\n### 成本估算\n\n| 工作流 | 频率 | 估计成本 |\n|----------|-----------|-----------|\n| PR 审查 | 每个 PR | ~$0.05 - $0.50 |\n| 文档同步 | 每月 | ~$0.50 - $2.00 |\n| 反依赖审计 | 每两周 | ~$0.20 - $1.00 |\n| 代码质量 | 每周 | ~$1.00 - $5.00 |\n\n**预计每月总计：** ~$10 - $50（取决于 PR 数量）\n\n---\n\n## 最佳实践\n\n### 1. 从 CLAUDE.md 开始\n\n你的 `CLAUDE.md` 是基础。包括：\n- 技术栈概述\n- 关键命令\n- 重要规则\n- 目录结构\n\n### 2. 逐步构建技能\n\n不要试图一次性记录所有内容：\n1. 从最常见的模式开始\n2. 随着痛点出现逐步添加技能\n3. 保持每项技能专注于一个领域\n\n### 3. 使用钩子进行自动化\n\n让钩子处理重复性任务：\n- 保存时自动格式化\n- 测试文件更改时运行测试\n- 模式更改时重新生成类型\n- 阻止对保护分支的编辑\n\n### 4. 为复杂流程创建代理\n\n代理非常适合：\n- 代码审查（结合团队检查清单）\n- PR 创建和管理\n- 调试流程\n- 任务入职\n\n### 5. 利用 GitHub Actions\n\n自动化维护：\n- 每个 PR 上的 PR 审查\n- 每周的质量扫描\n- 每月的文档对齐\n- 依赖更新\n\n### 6. 对配置进行版本控制\n\n提交所有内容，除了：\n- `settings.local.json`（个人偏好）\n- `CLAUDE.local.md`（个人笔记）\n- 用户特定的凭据\n\n---\n\n## 本仓库中的示例\n\n| 文件 | 描述 |\n|------|-------------|\n| [CLAUDE.md](CLAUDE.md) | 示例项目记忆文件 |\n| [.claude\u002Fsettings.json](.claude\u002Fsettings.json) | 完整的钩子配置 |\n| [.claude\u002Fsettings.md](.claude\u002Fsettings.md) | 易于理解的钩子文档 |\n| [.mcp.json](.mcp.json) | MCP 服务器配置（JIRA、GitHub、Slack 等） |\n| **代理** | |\n| [.claude\u002Fagents\u002Fcode-reviewer.md](.claude\u002Fagents\u002Fcode-reviewer.md) | 综合代码审查代理 |\n| [.claude\u002Fagents\u002Fgithub-workflow.md](.claude\u002Fagents\u002Fgithub-workflow.md) | Git 工作流代理 |\n| **命令** | |\n| [.claude\u002Fcommands\u002Fonboard.md](.claude\u002Fcommands\u002Fonboard.md) | 深入探索任务 |\n| [.claude\u002Fcommands\u002Fticket.md](.claude\u002Fcommands\u002Fticket.md) | **JIRA\u002FLinear 工单流程（阅读 → 实施 → 更新）** |\n| [.claude\u002Fcommands\u002Fpr-review.md](.claude\u002Fcommands\u002Fpr-review.md) | PR 审查流程 |\n| [.claude\u002Fcommands\u002Fpr-summary.md](.claude\u002Fcommands\u002Fpr-summary.md) | 生成 PR 摘要 |\n| [.claude\u002Fcommands\u002Fcode-quality.md](.claude\u002Fcommands\u002Fcode-quality.md) | 质量检查 |\n| [.claude\u002Fcommands\u002Fdocs-sync.md](.claude\u002Fcommands\u002Fdocs-sync.md) | 文档同步 |\n| **钩子** | |\n| [.claude\u002Fhooks\u002Fskill-eval.sh](.claude\u002Fhooks\u002Fskill-eval.sh) | 技能评估封装脚本 |\n| [.claude\u002Fhooks\u002Fskill-eval.js](.claude\u002Fhooks\u002Fskill-eval.js) | Node.js 技能匹配引擎 |\n| [.claude\u002Fhooks\u002Fskill-rules.json](.claude\u002Fhooks\u002Fskill-rules.json) | 模式匹配规则 |\n| **技能** | |\n| [.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md](.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md) | TDD、工厂函数、模拟 |\n| [.claude\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md](.claude\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md) | 四阶段调试 |\n| [.claude\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md](.claude\u002Fskills\u002Freact-ui-patterns\u002FSKILL.md) | 加载\u002F错误\u002F空状态 |\n| [.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md](.claude\u002Fskills\u002Fgraphql-schema\u002FSKILL.md) | 查询、突变、代码生成 |\n| [.claude\u002Fskills\u002Fcore-components\u002FSKILL.md](.claude\u002Fskills\u002Fcore-components\u002FSKILL.md) | 设计系统、样式变量 |\n| [.claude\u002Fskills\u002Fformik-patterns\u002FSKILL.md](.claude\u002Fskills\u002Fformik-patterns\u002FSKILL.md) | 表单处理、验证 |\n| **GitHub 工作流** | |\n| [.github\u002Fworkflows\u002Fpr-claude-code-review.yml](.github\u002Fworkflows\u002Fpr-claude-code-review.yml) | 自动 PR 审查 |\n| [.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-docs-sync.yml) | 每月文档同步 |\n| [.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-quality.yml) | 每周质量审查 |\n| [.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml](.github\u002Fworkflows\u002Fscheduled-claude-code-dependency-audit.yml) | 每两周依赖审计 |\n\n---\n\n## 了解更多\n\n- [Claude Code 文档](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code)\n- [Claude Code Action](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fclaude-code-action) - GitHub Action\n- [Anthropic API](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fapi)\n\n---\n\n## 许可证\n\nMIT - 将此作为你自己的项目的模板使用。","# Claude Code Showcase 快速上手指南\n\n本指南帮助中国开发者快速配置 `claude-code-showcase`，将 Claude Code 打造为符合团队规范、具备自动化能力的超级队友。\n\n## 环境准备\n\n在开始之前，请确保满足以下系统要求和前置依赖：\n\n*   **操作系统**: macOS, Linux 或 Windows (WSL2 推荐)\n*   **运行时环境**:\n    *   Node.js (v18+) - 用于运行 MCP 服务器和钩子脚本\n    *   npm 或 yarn\n*   **核心工具**:\n    *   已安装并配置好 **Claude Code** CLI 工具\n    *   Git (已初始化仓库)\n*   **可选集成**:\n    *   若需对接 JIRA\u002FLinear，需准备相应的 API Token 和环境变量\n    *   若需对接 GitHub Actions，需拥有仓库写入权限\n\n## 安装步骤\n\n### 1. 创建目录结构\n在项目根目录下执行以下命令，生成标准的 `.claude` 配置目录：\n\n```bash\nmkdir -p .claude\u002F{agents,commands,hooks,skills,rules}\n```\n\n### 2. 初始化项目记忆 (CLAUDE.md)\n在项目根目录创建 `CLAUDE.md` 文件。这是 Claude 的“长期记忆”，启动时会自动加载。\n\n```markdown\n# 项目名称\n\n## 快速事实\n- **技术栈**: React, TypeScript, Node.js\n- **测试命令**: `npm run test`\n- **Lint 命令**: `npm run lint`\n\n## 关键目录\n- `src\u002Fcomponents\u002F` - React 组件\n- `src\u002Fapi\u002F` - API 层\n- `tests\u002F` - 测试文件\n\n## 代码风格\n- 启用 TypeScript strict mode\n- 优先使用 interfaces 而非 types\n- 禁止使用 `any`，请使用 `unknown`\n```\n\n### 3. 配置钩子与环境 (settings.json)\n创建 `.claude\u002Fsettings.json` 以定义自动化钩子（如：禁止在主分支直接编辑、自动格式化等）。\n\n```json\n{\n  \"hooks\": {\n    \"PreToolUse\": [\n      {\n        \"matcher\": \"Edit|Write\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"[ \\\"$(git branch --show-current)\\\" != \\\"main\\\" ] || { echo '{\\\"block\\\": true, \\\"message\\\": \\\"Cannot edit on main branch\\\"}' >&2; exit 2; }\",\n            \"timeout\": 5\n          }\n        ]\n      }\n    ],\n    \"PostToolUse\": [\n      {\n        \"matcher\": \"Edit|Write\",\n        \"hooks\": [\n          {\n            \"type\": \"command\",\n            \"command\": \"npm run lint -- --fix\",\n            \"timeout\": 30\n          }\n        ]\n      }\n    ]\n  }\n}\n```\n\n### 4. 添加领域技能 (Skills)\n创建第一个技能文件，让 Claude 学会团队的特定模式（例如测试规范）。\n创建文件 `.claude\u002Fskills\u002Ftesting-patterns\u002FSKILL.md`：\n\n```markdown\n---\nname: testing-patterns\ndescription: 本项目专用的 Jest 测试模式。当编写测试、创建 mock 或遵循 TDD 流程时使用。\n---\n\n# 测试模式规范\n\n## 测试结构\n- 使用 `describe` 块进行分组\n- 使用 `it` 编写单个测试用例\n- 遵循 AAA 模式：Arrange (准备), Act (执行), Assert (断言)\n\n## Mock 规范\n- 使用工厂函数：`getMockUser(overrides)`\n- 仅 Mock 外部依赖，不要 Mock 内部模块\n```\n\n> **提示**: `description` 字段至关重要，Claude 会根据其中的关键词自动判断何时激活该技能。\n\n### 5. (可选) 配置外部集成 (MCP)\n若需连接 JIRA 或 GitHub，在项目根目录创建 `.mcp.json`：\n\n```json\n{\n  \"mcpServers\": {\n    \"jira\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@anthropic\u002Fmcp-jira\"],\n      \"env\": {\n        \"JIRA_HOST\": \"${JIRA_HOST}\",\n        \"JIRA_EMAIL\": \"${JIRA_EMAIL}\",\n        \"JIRA_API_TOKEN\": \"${JIRA_API_TOKEN}\"\n      }\n    }\n  }\n}\n```\n*注：请确保在终端环境中导出对应的环境变量。*\n\n## 基本使用\n\n配置完成后，重启 Claude Code 会话即可生效。\n\n### 场景 1：自动生成符合规范的代码\n直接让 Claude 编写功能，它会自动读取 `CLAUDE.md` 和 `skills` 中的规范。\n\n```bash\nclaude\n```\n*(在交互中输入)*\n```text\n为用户个人资料页面创建一个上传头像的 React 组件，并编写相应的测试用例。\n```\n> **结果**: Claude 将自动生成符合 TypeScript 严格模式、使用指定工厂函数进行 Mock 的代码和测试文件。\n\n### 2. 场景 2：使用自定义命令处理工单\n如果配置了 MCP 和 `\u002Fticket` 命令，可以直接关联需求管理系统。\n\n```text\n\u002Fticket PROJ-123\n```\n> **结果**:\n> 1. Claude 自动从 JIRA 拉取 `PROJ-123` 的详情和验收标准。\n> 2. 分析代码库现状。\n> 3. 生成实现方案并开始编码。\n> 4. 完成后更新工单状态并关联 PR。\n\n### 3. 场景 3：触发自动化审查\n提交代码后，Claude 可根据配置的 `PostToolUse` 钩子自动运行 Lint 修复，或通过 GitHub Action 触发深度代码审查 Agent。\n\n```text\n请对刚才的修改进行代码审查，重点检查错误处理和加载状态。\n```\n> **结果**: 调用 `.claude\u002Fagents\u002Fcode-reviewer.md` 中定义的审查清单，输出详细报告。","某中型电商团队的后端工程师正在紧急开发一个新的支付网关功能，需要严格遵循内部复杂的代码规范并同步更新 JIRA 任务状态。\n\n### 没有 claude-code-showcase 时\n- 工程师需手动查阅分散的文档来确认 GraphQL 结构化和错误处理标准，编码风格常与团队惯例不一致，导致代码审查（Code Review）反复被打回。\n- 每次提交前必须人工运行格式化、类型检查和单元测试，容易因疏忽遗漏步骤，导致主分支被不稳定的代码污染。\n- 开发完成后，工程师要手动切换上下文去 JIRA 更新任务进度、关联 PR 链接，甚至忘记将发现的衍生 Bug 创建为新工单。\n- 项目文档往往滞后于代码变更，缺乏自动机制确保技术文档与最新提交保持同步，新人上手成本极高。\n- 缺乏智能上下文感知，通用 AI 助手无法自动识别当前文件所属领域，经常给出偏离项目特定架构的建议。\n\n### 使用 claude-code-showcase 后\n- 内置的“技能库”让 claude-code-showcase 自动加载团队的 GraphQL 模式和测试规范，生成的代码开箱即用，完全符合内部最佳实践。\n- 通过预配置的 Hooks，代码保存时自动触发格式化、类型校验和测试运行，并在推送到主分支前自动拦截不合规的编辑，筑牢质量防线。\n- 借助 MCP 服务器集成和 `\u002Fticket` 命令，claude-code-showcase 能直接读取 JIRA 需求、实现功能后自动更新任务状态并创建关联的子任务，实现闭环管理。\n- 部署定时 GitHub Actions 代理，每周自动审查代码库并修复问题，每月同步文档，确保持续维护工作无需人工干预。\n- 智能技能评估钩子会根据文件路径和意图自动激活专属领域知识（如支付模块特有逻辑），使 AI 建议精准度大幅提升。\n\nclaude-code-showcase 将原本琐碎的规范遵守、质量门禁和流程协同工作转化为自动化流，让开发者能像拥有了一位精通团队所有潜规则的超级队友般高效产出。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FChrisWiles_claude-code-showcase_909f484e.png","ChrisWiles","Christopher Wiles","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FChrisWiles_001a7b5f.jpg","I'm a full-stack dev who works mostly in the React and Node ecosystem. AGI coming soon",null,"Austin, TX","chriswiles87@gmail.com","www.linkedin.com\u002Fin\u002Fchristopherwiles512","https:\u002F\u002Fgithub.com\u002FChrisWiles",[82,86],{"name":83,"color":84,"percentage":85},"JavaScript","#f1e05a",92.3,{"name":87,"color":88,"percentage":89},"Shell","#89e051",7.7,5779,522,"2026-04-13T04:30:12","Linux, macOS, Windows","未说明",{"notes":96,"python":94,"dependencies":97},"该工具是 Claude Code 的配置展示项目，而非独立的 AI 模型。运行环境主要依赖 Node.js 环境以执行 MCP 服务器（如通过 npx 运行 @anthropic\u002Fmcp-jira）。需要安装 Git 以使用分支保护等钩子功能。需配置 JIRA、GitHub 等外部服务的 API 密钥环境变量。核心功能是作为代理连接现有代码库与外部工具，不涉及本地大模型推理所需的 GPU 或显存需求。",[98,99,100,101],"Node.js","npx","@anthropic\u002Fmcp-server-jira","git",[35,13],"2026-03-27T02:49:30.150509","2026-04-13T17:41:36.148064",[],[]]