Skill 学习篇（十一）| 面向 Java 全栈工程师的个人 ECC 构建指南（V3）

Slow菜鸟2026-05-09 18:59

Skill 学习篇（十一）| 面向 Java 全栈工程师的个人 ECC 构建指南（V3）

    • 一、通用核心层（必装）
      • [1.1 需求分析 & 规划](#1.1 需求分析 & 规划)
      • [1.2 UI/UX 设计](#1.2 UI/UX 设计)
      • [1.3 设计系统 & 组件规范](#1.3 设计系统 & 组件规范)
      • [1.4 架构、API & 数据库](#1.4 架构、API & 数据库)
      • [1.5 开发执行 & 测试验证](#1.5 开发执行 & 测试验证)
      • [1.6 代码审查 & 安全审计](#1.6 代码审查 & 安全审计)
      • [1.7 性能、SEO & 上线监测](#1.7 性能、SEO & 上线监测)
      • [1.8 文档工程 & 开发规范](#1.8 文档工程 & 开发规范)
      • [1.9 技能运维 & 运行时治理](#1.9 技能运维 & 运行时治理)
    • 二、技术栈增强层（按需选装）
      • [2.1 Java / Spring Boot](#2.1 Java / Spring Boot)
      • [2.2 React / Next.js / TypeScript](#2.2 React / Next.js / TypeScript)
      • [2.3 Vue / Vite / Pinia](#2.3 Vue / Vite / Pinia)
      • [2.4 uni-app / 小程序](#2.4 uni-app / 小程序)
      • [2.5 Docker / GitHub / CI](#2.5 Docker / GitHub / CI)
    • [三、MCP 配套推荐](#三、MCP 配套推荐)
    • 四、特殊领域层（特定场景按需选装）
      • [4.1 行为规范类](#4.1 行为规范类)
      • [4.2 研发提效类](#4.2 研发提效类)
      • [4.3 设计还原类](#4.3 设计还原类)
      • [4.4 浏览器自动化类](#4.4 浏览器自动化类)
    • 五、一个项目从零到一的流程示例
    • 六、维护

本文档是直接可用的安装清单。按项目全生命周期（需求→设计→架构→开发→测试→安全→上线→文档→运维）整理。

触发方式：

  • 自动 --- AI 检测到相关场景时自动触发，不能手动调用
  • 命令 --- 必须手动输入命令或提示语才能触发
  • 自动、命令 --- AI 自动触发，也可手动使用

数据来源： GitHub⭐ 和 skills.sh 安装量均于 2026-05-07 抓取验证。

一、通用核心层（必装）

无论项目大小，以下技能默认常驻。

1.1 需求分析 & 规划

技能 作用 仓库 GitHub⭐ skills.sh 触发
brainstorming 通过提问澄清模糊需求，输出需求规格 obra/superpowers 181K 140.5K 自动、命令
writing-plans 将需求规格拆解为可执行的任务步骤 obra/superpowers 181K 82.9K 自动、命令

说明：brainstorming + writing-plans + executing-plans 组成"开发三剑客"。提需求时自动触发，也可说"先做一轮 brainstorming"或"帮我拆任务"手动使用。

bash 复制代码 
npx skills add obra/superpowers --skill brainstorming --skill writing-plans

1.2 UI/UX 设计

技能 作用 仓库 GitHub⭐ skills.sh 触发
taste-skill（7 子技能包） 输出多种设计风格方案 leonxlnx/taste-skill 15.9K 38~45K 自动、命令
impeccable（10+ 子技能包） 对已有设计做审查、打磨、提升 pbakaus/impeccable 25.6K 82~83K 命令
web-design-guidelines 提供 Web 设计规范和最佳实践 vercel-labs/agent-skills 26.2K 300.7K 自动、命令
accessibility-compliance 确保页面符合无障碍标准 wshobson/agents 34.9K 8.2K 自动、命令
sleek-design-mobile-apps 移动端应用界面设计 sleekdotdesign/agent-skills 395 90.9K 自动、命令

说明：taste-skill 自动出方案，也可手动指定风格。impeccable 只能用 /impeccable audit、/impeccable polish 等子命令手动触发。web-design-guidelines 在你说"审查我的 UI"时自动触发。

bash 复制代码 
npx skills add https://github.com/leonxlnx/taste-skill
npx skills add pbakaus/impeccable
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
npx skills add wshobson/agents --skill accessibility-compliance
npx skills add sleekdotdesign/agent-skills --skill sleek-design-mobile-apps

1.3 设计系统 & 组件规范

技能 作用 仓库 GitHub⭐ skills.sh 触发
tailwind-design-system 基于 Tailwind CSS 搭建设计系统 wshobson/agents 34.9K 39.3K 自动、命令
shadcn 用 shadcn/ui 构建一致 UI shadcn/ui 114K 127.7K 自动（不支持手动）
extract-design-system 从现有项目提取设计规范 arvindrk/extract-design-system 30 87.6K 命令

说明：shadcn 设置了 user-invocable: false，只能 AI 自动触发。extract-design-system 需说"提取设计系统"。注意该 GitHub⭐ 仅 30 但 skills.sh 87.6K，比例异常。

bash 复制代码 
npx skills add wshobson/agents --skill tailwind-design-system
npx skills add shadcn/ui --skill shadcn
npx skills add arvindrk/extract-design-system --skill extract-design-system

1.4 架构、API & 数据库

技能 作用 仓库 GitHub⭐ skills.sh 触发
api-design-principles API 设计原则和规范指导 wshobson/agents 34.9K --- 自动、命令
openapi-spec-generation 生成 OpenAPI 契约文档 wshobson/agents 34.9K 10.1K 自动、命令
database-migration 数据库迁移脚本管理 wshobson/agents 34.9K 10.9K 自动、命令
architecture-decision-records 架构决策记录（ADR）和评审 wshobson/agents 34.9K 7.8K 命令

说明：architecture-decision-records 需说"记录这个架构决策"。

bash 复制代码 
npx skills add wshobson/agents --skill api-design-principles --skill openapi-spec-generation --skill database-migration --skill architecture-decision-records

1.5 开发执行 & 测试验证

技能 作用 仓库 GitHub⭐ skills.sh 触发
executing-plans 按计划分步执行任务，每批验证 obra/superpowers 181K 67.3K 自动、命令
test-driven-development RED-GREEN-REFACTOR 测试驱动 obra/superpowers 181K 72.4K 自动、命令
webapp-testing Web 应用功能测试 anthropics/skills 129K 62.2K 自动、命令
e2e-testing-patterns 端到端测试模式和最佳实践 wshobson/agents 34.9K 14.8K 自动、命令
browser-qa 浏览器端质量验证 affaan-m/everything-claude-code 175K 2.1K 命令
verification-loop 完成前循环验证，确保质量 affaan-m/everything-claude-code 175K 3.4K 自动、命令

说明：TDD 自动应用于核心逻辑，原型和 CRUD 可跳过。browser-qa 需说"做浏览器 QA"。

bash 复制代码 
npx skills add obra/superpowers --skill executing-plans --skill test-driven-development
npx skills add anthropics/skills --skill webapp-testing
npx skills add wshobson/agents --skill e2e-testing-patterns
npx skills add affaan-m/everything-claude-code --skill browser-qa --skill verification-loop

1.6 代码审查 & 安全审计

技能 作用 仓库 GitHub⭐ skills.sh 触发
/review（内置） Claude Code 内置代码审查 Anthropic 官方 --- --- 命令 （输入 /review）
code-review-excellence 系统性代码审查 wshobson/agents 34.9K 15.8K 自动、命令
differential-review 安全差异审查，爆炸半径分析 trailofbits/skills 5K 2.7K 命令

说明：/review 是内置斜杠命令。differential-review 需说"做安全审查"。如需多代理并行审查，可装插件：

复制代码 
/plugin install code-review@claude-plugins-official
bash 复制代码 
npx skills add wshobson/agents --skill code-review-excellence
npx skills add trailofbits/skills --skill differential-review

1.7 性能、SEO & 上线监测

技能 作用 仓库 GitHub⭐ skills.sh 触发
performance Web 性能优化分析和建议 addyosmani/web-quality-skills 1.9K 11.5K 自动、命令
seo SEO 优化分析和建议 addyosmani/web-quality-skills 1.9K 20.4K 自动、命令
canary-watch 上线监测、灰度发布和回滚检查 affaan-m/everything-claude-code 175K 1.9K 命令

说明：performance/seo 在你说"优化性能""做 SEO"时自动触发。canary-watch 需说"检查上线状态"。

bash 复制代码 
npx skills add addyosmani/web-quality-skills --skill performance --skill seo
npx skills add affaan-m/everything-claude-code --skill canary-watch

1.8 文档工程 & 开发规范

技能 作用 仓库 GitHub⭐ skills.sh 触发
documentation-lookup 实时查询框架/库最新官方文档 affaan-m/everything-claude-code 175K 2.6K 自动、命令
documentation-writer 按 Diátaxis 框架生成项目文档 github/awesome-copilot 32.3K 16.8K 命令
git-commit 分析 diff 生成 Conventional Commits 规范提交 github/awesome-copilot 32.3K 28.9K 命令

说明：查文档 → 写文档 → 规范提交，覆盖文档工程全链路。documentation-lookup 在你问任何框架/库用法时自动触发。documentation-writer 需说"生成文档"。git-commit 需说"提交代码"。

bash 复制代码 
npx skills add affaan-m/everything-claude-code --skill documentation-lookup
npx skills add github/awesome-copilot --skill documentation-writer --skill git-commit

1.9 技能运维 & 运行时治理

技能 作用 仓库 GitHub⭐ skills.sh 触发
find-skills 搜索发现社区技能 vercel-labs/skills 17.2K 1.4M 命令
skill-creator 创建自定义技能，含 Create→Eval→Improve→Benchmark 评测闭环 anthropics/skills 129K --- 命令
agent-sort 技能分级（DAILY vs LIBRARY），精简安装 affaan-m/everything-claude-code 175K 1.5K 自动
terminal-ops 终端执行行为约束，先检查再操作 affaan-m/everything-claude-code 175K 1.5K 自动
context-budget 审计上下文窗口消耗，输出 token 削减建议 affaan-m/everything-claude-code 175K 2.5K 自动

说明：发现 → 创建 → 分级 → 执行约束 → 资源审计，完整 ECC 运维闭环。find-skills 在终端执行 npx skills search <关键词>。skill-creator 需说"创建技能"。agent-sort、terminal-ops、context-budget 后台自动运行。

bash 复制代码 
npx skills add vercel-labs/skills --skill find-skills
npx skills add anthropics/skills --skill skill-creator
npx skills add affaan-m/everything-claude-code --skill agent-sort --skill terminal-ops --skill context-budget

二、技术栈增强层（按需选装）

2.1 Java / Spring Boot

技能 作用 仓库 GitHub⭐ skills.sh 触发
java-springboot Spring Boot 开发规范和实践 github/awesome-copilot 32.3K 13.7K 自动、命令
spring-boot-engineer Spring Boot 工程师级指导 jeffallan/claude-skills 8.8K 5.5K 自动、命令
java-junit JUnit 单元测试规范 github/awesome-copilot 32.3K 9.5K 自动、命令
java-coding-standards Java 编码规范 affaan-m/everything-claude-code 175K 4.2K 自动、命令
springboot-patterns Spring Boot 设计模式 affaan-m/everything-claude-code 175K 5.2K 自动、命令
springboot-security Spring Security 安全配置 affaan-m/everything-claude-code 175K 4.1K 自动、命令
springboot-tdd Spring Boot TDD 指导 affaan-m/everything-claude-code 175K 3.9K 自动、命令
springboot-verification Spring Boot 验证流程 affaan-m/everything-claude-code 175K 3.3K 自动、命令
jpa-patterns JPA/Hibernate 最佳实践 affaan-m/everything-claude-code 175K 3.7K 自动、命令
mysql MySQL 数据库设计和管理 planetscale/database-skills 410 3.4K 自动、命令
redis-development Redis 缓存开发 redis/agent-skills 49 2.5K 自动、命令

说明：写 Java 代码时 AI 自动应用规范，也可说"帮我按 Spring Boot 最佳实践优化"。

bash 复制代码 
npx skills add github/awesome-copilot --skill java-springboot --skill java-junit
npx skills add jeffallan/claude-skills --skill spring-boot-engineer
npx skills add affaan-m/everything-claude-code --skill java-coding-standards --skill springboot-patterns --skill springboot-security --skill springboot-tdd --skill springboot-verification --skill jpa-patterns
npx skills add planetscale/database-skills --skill mysql
npx skills add redis/agent-skills --skill redis-development

2.2 React / Next.js / TypeScript

技能 作用 仓库 GitHub⭐ skills.sh 触发
vercel-react-best-practices React 最佳实践 vercel-labs/agent-skills 26.2K 377.2K 自动、命令
next-best-practices Next.js 开发最佳实践 vercel-labs/next-skills 855 80K 自动、命令
next-cache-components Next.js 缓存策略和优化 vercel-labs/next-skills 855 26.2K 自动、命令
typescript-advanced-types TypeScript 高级类型指导 wshobson/agents 34.9K 38.9K 自动、命令
bash 复制代码 
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
npx skills add vercel-labs/next-skills --skill next-best-practices --skill next-cache-components
npx skills add wshobson/agents --skill typescript-advanced-types

2.3 Vue / Vite / Pinia

技能 作用 仓库 GitHub⭐ skills.sh 触发
vue-best-practices Vue 3 开发最佳实践 hyf0/vue-skills 2.4K 20.9K 自动、命令
vue-router-best-practices Vue Router 路由设计规范 antfu/skills 4.8K 12.1K 自动、命令
pinia Pinia 状态管理最佳实践 antfu/skills 4.8K 10.5K 自动、命令
vue-testing-best-practices Vue 组件测试规范 antfu/skills 4.8K 10.7K 自动、命令
vite Vite 构建工具配置和优化 antfu/skills 4.8K 20.8K 自动、命令
bash 复制代码 
npx skills add hyf0/vue-skills --skill vue-best-practices
npx skills add antfu/skills --skill vue-router-best-practices --skill pinia --skill vue-testing-best-practices --skill vite

2.4 uni-app / 小程序

技能 作用 仓库 GitHub⭐ skills.sh 触发
uni-app uni-app 跨平台开发规范 uni-helper/skills 61 990 自动、命令
uniapp-project uni-app 项目结构和管理 teachingai/full-stack-skills 361 737 自动、命令
miniprogram-development 微信小程序开发规范 tencentcloudbase/skills 54 2.7K 自动、命令
auth-wechat-miniprogram 微信小程序登录/授权 tencentcloudbase/skills 54 1.6K 自动、命令
bash 复制代码 
npx skills add uni-helper/skills --skill uni-app
npx skills add teachingai/full-stack-skills --skill uniapp-project
npx skills add tencentcloudbase/skills --skill miniprogram-development --skill auth-wechat-miniprogram

2.5 Docker / GitHub / CI

技能 作用 仓库 GitHub⭐ skills.sh 触发
docker-expert Docker 容器化开发和部署 sickn33/antigravity-awesome-skills 36.7K 14.5K 自动、命令
multi-stage-dockerfile 多阶段 Dockerfile 构建优化 github/awesome-copilot 32.3K 12.6K 自动、命令
gh-cli GitHub CLI 操作（PR、Issue） github/awesome-copilot 32.3K 20.5K 自动、命令
deployment-pipeline-design CI/CD 部署流水线设计 wshobson/agents 34.9K 7.2K 自动、命令
git-advanced-workflows Git 高级工作流 wshobson/agents 34.9K 9.1K 自动、命令
bash 复制代码 
npx skills add sickn33/antigravity-awesome-skills --skill docker-expert
npx skills add github/awesome-copilot --skill multi-stage-dockerfile --skill gh-cli
npx skills add wshobson/agents --skill deployment-pipeline-design --skill git-advanced-workflows

三、MCP 配套推荐

MCP 用途 触发
Context7 查最新官方文档 自动
GitHub MCP PR、Issue、仓库操作 自动
Playwright / Browser MCP 浏览器测试、UI 验收 自动
Database MCP 数据库检查、迁移验证 自动
Sentry MCP 上线后异常定位 自动

四、特殊领域层（特定场景按需选装）

本章技能按场景维度分类，有清晰的适用边界，不影响通用核心层和技术栈增强层的正常工作。需要对应场景时再装，即装即用。

4.1 行为规范类

不直接产出代码，在后台约束 AI 的行为方式，减少过度设计和臆测。

技能 作用 仓库 skills.sh 触发
karpathy-guidelines 减少 LLM 常见编码错误，避免过度复杂化 forrestchang/andrej-karpathy-skills 9.4K 自动
bash 复制代码 
npx skills add forrestchang/andrej-karpathy-skills --skill karpathy-guidelines

4.2 研发提效类

辅助开发流程但不属于日常必用。

技能 作用 仓库 skills.sh 触发
search-first 编码前搜索现有方案，避免重复造轮 affaan-m/everything-claude-code 3.3K 自动、命令
codebase-onboarding 接手老项目时快速理解代码结构 affaan-m/everything-claude-code --- 自动、命令
neat-freak 干完活后一键同步 CLAUDE.md、文档、记忆系统 kkkkhazix/khazix-skills 491 命令 （/neat）
bash 复制代码 
npx skills add affaan-m/everything-claude-code --skill search-first
npx skills add affaan-m/everything-claude-code --skill codebase-onboarding
npx skills add kkkkhazix/khazix-skills --skill neat-freak

4.3 设计还原类

把已有设计或网站转化为代码。

技能 作用 仓库 skills.sh 触发
clone-website 像素级克隆网站，多代理并行构建 julianromli/ai-skills 763 命令
bash 复制代码 
npx skills add julianromli/ai-skills --skill clone-website

clone-website 的 SKILL.md 约 475 行，上下文较重，建议只在需要时临时装，用完移除。

4.4 浏览器自动化类

专用浏览器操作工具，与通用核心层的 webapp-testing（测试脚本）和 browser-qa（QA 流程）场景不同，三者不冲突。

技能 作用 仓库 skills.sh 触发
agent-browser CLI 驱动的浏览器自动化，持久会话 vercel-labs/agent-browser 243.7K 自动、命令
bash 复制代码 
npx skills add vercel-labs/agent-browser --skill agent-browser
npm install -g agent-browser       # 额外安装 CLI（Rust 引擎）
agent-browser install              # 安装/检测浏览器环境
agent-browser doctor               # 做环境诊断

agent-browser 是 skill + CLI 的双组件体系。skill 教 AI 怎么用，CLI 负责真正执行。SKILL.md 设了 Prefer agent-browser over any built-in browser automation 优先权指令，同时装有 Playwright MCP 时 AI 会优先调用 agent-browser。

五、一个项目从零到一的流程示例

阶段 1 --- 启动 & 需求

复制代码 
请根据我的想法，先输出需求分析和任务计划。不要先写代码。

→ brainstorming（自动） → writing-plans（自动）

阶段 2 --- 设计 & 原型

复制代码 
请根据需求设计页面结构和视觉风格。

→ taste-skill（自动） → /impeccable audit（手动） → web-design-guidelines（自动）

阶段 3 --- 架构 & 实现

复制代码 
请先输出 API 设计和数据模型，确认后再实现。

→ api-design-principles（自动） → openapi-spec-generation（自动） → database-migration（自动）

阶段 4 --- 测试 & 验收

复制代码 
功能完成后跑测试、浏览器验证和安全审查。

→ test-driven-development（自动） → webapp-testing（自动） → /review（手动） → "做安全审查"（手动）

阶段 5 --- 上线 & 复盘

复制代码 
部署后监控性能，输出上线的数据分析。

→ performance（自动） → "检查上线状态"（手动） → seo（自动）

六、维护

bash 复制代码 
npx skills ls -g          # 查看已安装
npx skills update -g      # 更新所有
npx skills search <关键词> # 查找新技能

通用核心层：33 个技能 | 含技术栈增强：约 62 个技能 | 约为 ECC 的 1/4

相关推荐
weixin_4045512410 小时前
使用implementation-verificator Skill来harness plan和code的一致性
ai·代码复审·code·skill·plan
逆境不可逃1 天前
Claude Skills 完全使用指南：从入门到自定义开发
人工智能·skill·claudecode·skills
fundroid1 天前
分享几个 Claude Code 自动化开发的 Skill
ai·自动化·agent·skill
Slow菜鸟1 天前
Skill 学习篇（一）| Anthropic 官方单技能
skills
Slow菜鸟1 天前
Skill 学习篇（七）| 编排框架 · Spec Kit 专篇
skill
G皮T2 天前
【人工智能】小镇AI助手诞生记（一文记住40+新兴技术名词）
人工智能·ai·agent·多模态·具身智能·skill·openclaw
Slow菜鸟2 天前
Skill 学习篇（二）| 社区独立单技能
skill
强殖装甲凯普3 天前
我把「3小时播客变成可搜索文本」做成了 Claude Code 的一条命令
llm·skill·播客·claude code
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03零基础教你claude code 接入 deepseek V404要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法05CC-Switch & Claude 基于 Linux 服务器安装使用指南06Dirtyfrag漏洞：我花了一下午搞清楚这个Linux内核提权漏洞到底在搞什么07Windows端Codex接入第三方模型（DeekSeek，BaiLian)08【AI】2026 年具身智能模型和世界模型总结09裂开！ChatGPT 居然开始要手机号验证，附详细解决方法10Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南