docs(readme): 更新 README 文档并移除 C4 模型技能

- 更新 README.md 添加项目徽章和详细介绍
- 重构项目介绍和核心特性部分
- 移除 C4 模型技能及相关引用
- 更新架构技能集合描述
- 优化文档结构和快速开始指南
- 调整插件和技能清单格式

.claude-plugin/marketplace.json

@@ -155,7 +155,7 @@
     },
     {
       "name": "architecture-skills",
-      "description": "架构技能集合（9个技能）：包含领域驱动设计（DDD）、DDD 微服务架构、DDD 事件驱动架构、DDD 六边形架构、DDD 整洁架构、COLA 架构等架构模式；C4 模型、PlantUML、Draw.io 架构图绘制工具。帮助 AI 助手掌握企业级架构设计、领域建模、架构图绘制等架构设计技能。",
+      "description": "架构技能集合（8个技能）：包含领域驱动设计（DDD）、DDD 微服务架构、DDD 事件驱动架构、DDD 六边形架构、DDD 整洁架构、COLA 架构等架构模式；PlantUML、Draw.io 架构图绘制工具。帮助 AI 助手掌握企业级架构设计、领域建模、架构图绘制等架构设计技能。",
       "source": "./",
       "strict": false,
       "skills": [
@@ -165,7 +165,6 @@
         "./skills/ddd-event-driven",
         "./skills/ddd-hexagonal-architecture",
         "./skills/ddd-clean-architecture",
-        "./skills/c4-model",
         "./skills/plantuml",
         "./skills/drawio-architecture"
       ]

AGENTS_PROMPT.md

@@ -346,7 +346,6 @@ assistant: "我将使用市场专员智能体来完成相关方案与文档。"<
 
 ### 可用Agent Skills
 - ddd-clean-architecture, ddd-microservices（DDD架构）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - api-doc-generator（API文档生成）
@@ -414,7 +413,6 @@ assistant: "我将使用技术研究工程师智能体来完成相关方案与
 
 ### 可用Agent Skills
 - ddd-cola, ddd-microservices, ddd-event-driven, ddd-hexagonal-architecture, ddd-clean-architecture（DDD架构）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - spring-boot, spring-cloud, spring-cloud-alibaba（Spring框架）
@@ -547,7 +545,6 @@ assistant: "我将使用需求分析师智能体来完成相关方案与文档
 
 ### 可用Agent Skills
 - ddd-clean-architecture（DDD架构）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - mysql, postgresql, oracle, mongodb, redis（数据库）
@@ -748,7 +745,6 @@ assistant: "我将使用UI设计师智能体来完成相关方案与文档。"</
 ### 可用Agent Skills
 - ddd-cola, ddd-microservices, ddd-event-driven, ddd-hexagonal-architecture, ddd-clean-architecture（DDD架构）
 - ddd4j-project-builder（DDD项目构建）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - api-doc-generator（API文档生成）

PLANNING_SKILL_CATEGORIES.md

@@ -162,7 +162,6 @@ Marketplace (full-stack-skills)
 ### 2.3 架构类（Architecture Skills）
 
 **架构设计**：
-- `ddd` - 领域驱动设计（DDD）指南
 - `ddd-cola` - COLA (Clean Object-Oriented and Layered Architecture) 架构指南
 - `ddd-microservices` - DDD 微服务架构指南
 - `ddd-event-driven` - DDD 事件驱动架构指南
@@ -170,7 +169,6 @@ Marketplace (full-stack-skills)
 - `ddd-clean-architecture` - DDD 整洁架构指南
 
 **架构工具**：
-- `c4-model` - C4 模型架构图绘制指南
 - `plantuml` - PlantUML 架构图绘制指南
 - `drawio-architecture` - Draw.io 架构图绘制指南
 
@@ -331,7 +329,6 @@ Marketplace (full-stack-skills)
       "skills": [
         "./skills/ddd",
         "./skills/ddd-cola",
-        "./skills/c4-model",
         "./skills/plantuml"
       ]
     },
@@ -540,7 +537,7 @@ skills/
    - `figma`、`figma-ai`、`midjourney`、`dalle`
 
 2. **架构类技能**：
-   - `ddd`、`ddd-cola`、`c4-model`
+   - `ddd`、`ddd-cola`
 
 3. **运维类技能**：
    - `docker`、`kubernetes`、`jenkins`

README.md

@@ -1,6 +1,19 @@
-# Full Stack Skills
+<div align="center">
 
-**Full-Stack-Skills** 是一个开源的 Agent Skills 集合，严格遵循 Agent Skills 规范，提供 **170 个技能集合**，按**技能种类**组织为 **13 个插件类别**，覆盖软件开发全生命周期。在 AI 时代，它赋能全栈独立开发者，通过 AI 助手掌握专业技能，实现**"一个人 = 一个公司"**的愿景，让独立开发者能够独立完成从产品设计、开发、测试到部署运维的全流程工作。
+# Full Stack Skills（Alpha）
+
+**基于 Agent Skills 规范的全栈技能集合**
+
+![Version](https://img.shields.io/badge/Version-2.0.0-blue)
+![License](https://img.shields.io/badge/License-Apache%202.0-green)
+![Skills](https://img.shields.io/badge/Skills-170-orange)
+![Plugins](https://img.shields.io/badge/Plugins-13-brightgreen)
+
+</div>
+
+## 📖 简介
+
+**Full-Stack-Skills** 是一个开源的 Agent Skills 集合，严格遵循 Agent Skills 规范，提供 **170 个技能集合**，按**技能种类**组织为 **13 个插件类别**，覆盖软件开发全生命周期。在 AI 时代，它赋能全栈独立开发者，通过 AI 助手掌握专业技能，实现**一个人 = 一个公司**的愿景，让独立开发者能够独立完成从产品设计、开发、测试到部署运维的全流程工作。
 
 > **说明：** 本仓库合并了 Anthropic 的示例技能和 Agent Skills 的技能集合，提供各种实用的 AI 技能，可以在 Claude Code、Claude.ai 和 API 中使用。关于 Agent Skills 标准，请参见 [agentskills.io](http://agentskills.io)。
 
@@ -18,15 +31,29 @@ Skills 是由说明、脚本和资源组成的文件夹，Claude 会按需动态
 
 ## 关于本仓库
 
-**full-stack-skills** 是一个面向**期望成为全栈技能人才的群体**的开源技能市场，严格遵循 [Agent Skills 规范](https://agentskills.io/)，按**技能种类**组织技能库，而非按岗位划分。
+**full-stack-skills** 是一个面向**期望成为全栈技能人才的群体**的开源技能集合，严格遵循 [Agent Skills 规范](https://agentskills.io/)，按**技能种类**组织技能库，而非按岗位划分。
 
-### 核心价值
+### ✨ 核心特性
 
-- **开源免费**：所有技能采用 Apache 2.0 许可证，完全开源
+#### 1. 开源免费
+- **Apache 2.0 许可证**：所有技能采用 Apache 2.0 许可证，完全开源
 - **规范标准**：严格遵循 Agent Skills 规范，确保技能质量和兼容性
-- **全栈覆盖**：170 个技能集合，覆盖前端、后端、移动端、数据库、测试、DevOps、云平台、设计等全栈开发领域
-- **按技能种类组织**：13 个插件类别，按技能种类而非岗位划分，便于灵活组合使用
-- **AI 赋能**：通过 AI 助手掌握专业技能，实现"一个人 = 一个公司"的愿景
+- **持续更新**：社区驱动，持续添加新技能和改进现有技能
+
+#### 2. 全栈覆盖
+- **170 个技能集合**：覆盖前端、后端、移动端、数据库、测试、DevOps、云平台、设计等全栈开发领域
+- **13 个插件类别**：按技能种类组织，而非按岗位划分，便于灵活组合使用
+- **跨平台支持**：支持 Claude Code、Claude.ai、Claude API 及其他 AI 平台
+
+#### 3. AI 赋能
+- **智能识别**：Claude 会根据技能描述自动判断何时使用该技能
+- **即插即用**：安装插件后，只需提到技能名称即可使用
+- **专业指导**：每个技能都包含详细的官方文档链接和使用示例
+
+#### 4. 灵活组织
+- **按技能种类组织**：13 个插件类别，可按需安装
+- **独立技能**：每个技能自包含，可单独使用
+- **跨平台适配**：提供适配器工具，支持多种 AI 平台
 
 ### 技能组织方式
 
@@ -46,11 +73,26 @@ Skills 是由说明、脚本和资源组成的文件夹，Claude 会按需动态
 
 本仓库中的许多技能是开源的（Apache 2.0）。我们还在 [`skills/docx`](skills/docx)、[`skills/pdf`](skills/pdf)、[`skills/pptx`](skills/pptx) 和 [`skills/xlsx`](skills/xlsx) 子目录中包含了用于支撑 [Claude 文档能力](https://www.anthropic.com/news/create-files) 的文档创建与编辑技能。这些技能是"可查看源码"的（source-available），但并非开源；我们希望将其作为更复杂技能的参考示例，因为它们已在生产级 AI 应用中实际使用。
 
+### 📦 项目定位
+
+**Full-Stack-Skills** 是面向**期望成为全栈技能人才的群体**的开源技能市场，旨在：
+
+- **统一技能库**：为全栈开发者提供统一的技能集合，降低学习成本
+- **规范标准**：严格遵循 Agent Skills 规范，确保技能质量和兼容性
+- **灵活组合**：按技能种类组织，可根据需求灵活组合使用
+- **技术栈统一**：覆盖主流技术栈，统一技能格式和文档结构
+
 ### 免责声明
 
 **这些技能仅用于演示与教育用途。** 虽然其中部分能力可能在 Claude 中可用，但你从 Claude 获得的实现与行为可能与这些技能所展示的不同。这些技能旨在展示模式与可能性。在依赖它们处理关键任务之前，请务必在你自己的环境中充分测试。
 
-## 如何使用
+## 📖 快速开始
+
+### 前置要求
+
+- **Claude Code** 或 **Claude.ai**（付费套餐）或 **Claude API**
+- **Git**（用于克隆仓库，可选）
+- **Python 3.7+**（用于跨平台适配器，可选）
 
 ### 在 Claude Code 中使用
 
@@ -72,6 +114,8 @@ Skills 是由说明、脚本和资源组成的文件夹，Claude 会按需动态
 
 ```
 /plugin marketplace add teachingai/full-stack-skills
+# 删除插件
+/plugin marketplace remove full-stack-skills
 ```
 
 #### 2. 安装插件
@@ -90,7 +134,7 @@ Skills 是由说明、脚本和资源组成的文件夹，Claude 会按需动态
 直接使用命令安装插件：
 
 ```
-# 按技能种类安装（15个插件类别）
+# 按技能种类安装（13个插件类别）
 /plugin install teaching-skills@full-stack-skills
 /plugin install document-skills@full-stack-skills
 /plugin install markdown-skills@full-stack-skills
@@ -139,1013 +183,361 @@ python convert_all.py ../skills ../adapters-output
 
 ## 可用插件和技能
 
-本仓库的技能按**技能种类**分为 **13 个插件类别**，共包含 **170 个技能**：
-
-### 技能分类统计
-
-- **development-skills**（全栈开发技能集合，76个技能）：包含前端开发（Vue 2/3、React、Angular、Svelte 等框架；Vite、Webpack、Rspack、Rollup、Parcel 等构建工具；Element Plus、Ant Design、Vant、uView、Bootstrap Vue、Layui Vue3 等 UI 组件库；Vue Router、Pinia、Vuex、Redux 等状态管理和路由方案；Electron、Tauri 等桌面应用框架）、后端开发（Spring Boot、Spring Cloud、Spring AI、Spring Security、Spring Data JPA 等 Java 生态框架；Express、NestJS、Koa、Fastify 等 Node.js 框架；Django、FastAPI、Flask 等 Python 框架；Gin、Gin-Gonic 等 Go 框架）、移动端开发（UniApp、UniApp-x 跨平台开发框架及项目创建器；React Native、Flutter 跨平台框架；Android Kotlin、iOS Swift 原生开发；Cocos2d-x 游戏引擎；uCharts、Lime EChart 图表组件；UniCloud 云开发、Uni-ad 广告变现等）。
-
-- **development-skills-utils**（开发工具技能集合，12个技能）：包含代码生成、测试编写、文档构建等基础工具；DDD 项目构建器（支持单体单模块、单体多模块、微服务架构）；项目文档生成（14种文档模板，覆盖产品到运维全生命周期）；MCP 构建器、Web 应用测试、前端设计、Web 工件构建器、主题工厂；Node.js 版本管理（nvm）、浏览器自动化等。
-
-- **design-skills**（设计技能集合，16个技能）：包含 Figma、Sketch、Adobe XD、Axure、墨刀、Framer 等专业设计工具；Midjourney、DALL-E、Stable Diffusion、Runway ML、Galileo AI、Uizard、Figma AI 等 AI 设计工具；算法艺术、品牌指南、画布设计等创意工具。
-
-- **document-skills**（文档处理技能集合，8个技能）：包含 Word（docx）、PowerPoint（pptx）、Excel（xlsx）、PDF 等办公文档的创建、编辑和处理；文档协作（多人协作编辑）；API 文档生成器；Draw.io 流程图绘制；ProcessOn 思维导图绘制。
-
-- **architecture-skills**（架构技能集合，9个技能）：包含领域驱动设计（DDD）、DDD 微服务架构、DDD 事件驱动架构、DDD 六边形架构、DDD 整洁架构、COLA 架构等架构模式；C4 模型、PlantUML、Draw.io 架构图绘制工具。
-
-- **testing-skills**（测试技能集合，9个技能）：包含 Jest、Vitest、PyTest、JUnit 等单元测试框架；Cypress、Playwright、Selenium 等 E2E 测试工具；Appium、Detox 等移动端测试工具。
-
-- **devops-skills**（运维技能集合，9个技能）：包含 Jenkins、GitLab CI、GitHub Actions 等 CI/CD 工具；Docker、Docker Compose、Kubernetes 等容器化和容器编排工具；Terraform、Ansible、CloudFormation 等基础设施即代码（IaC）工具。
-
-- **database-skills**（数据库技能集合，8个技能）：包含 MySQL、PostgreSQL、Oracle 等关系型数据库；MongoDB、Redis、Elasticsearch 等 NoSQL 数据库和搜索引擎；Navicat、DBeaver 等数据库管理工具。
-
-- **cloud-skills**（云平台技能集合，16个技能）：包含 AWS（EC2、S3、RDS、Lambda）、Azure（VM、Storage、SQL）、阿里云（ECS、OSS、RDS）、腾讯云（CVM、COS、CDB）、华为云（ECS、OBS、RDS）等主流云平台的核心服务。
-
-- **markdown-skills**（Markdown 技能集合，1个技能）：包含 Mermaid 图表绘制，支持 23 种图表类型（流程图、时序图、类图、状态图、甘特图、架构图、C4 图、思维导图等）。
-
-- **social-skills**（社交技能集合，2个技能）：包含内部沟通（状态报告、领导更新、公司通讯、FAQ 等内部文档编写）；Slack GIF 创建器（为 Slack 消息创建 GIF 动图）。
-
-- **teaching-skills**（教学技能集合，3个技能）：包含课程设计（课程大纲、学习目标、教学计划、评估方案）；学习评估（测验题目、评估标准、评分 rubric、学习分析）；教学资源生成（课件、练习题、教学案例、学习指南）。
-
-- **utility-skills**（工具技能集合，1个技能）：包含技能创建器，指导如何创建有效的 Agent Skills，扩展 Claude 的能力。
-
-## Skills 清单
-
-本仓库共包含 **170 个技能**，其中 **44 个已完成** ✅（有详细 examples/api 目录和丰富内容），**27 个部分完成** ⚠️（有基础内容），**95 个待完善** ❌（仅模板或内容简单），**4 个缺失** ❌。
-
-**完成标准：**
-- ✅ **已完成**：有 examples/api 目录（文件数>5）且内容详细（>5000字符）
-- ⚠️ **部分完成**：有基础内容或少量 examples/api 文件
-- ❌ **待完善**：仅模板或内容简单（<1000字符，无 examples/api 目录）
-
-### 完成状态统计
-
-| 插件类别 | 总技能数 | 已完成 ✅ | 部分完成 ⚠️ | 待完善 ❌ | 缺失 ❌ | 完成率 |
-|---------|---------|---------|-----------|---------|--------|--------|
-| development-skills | 76 | 37 | 10 | 26 | 3 | 48.7% ⚠️ |
-| development-skills-utils | 12 | 3 | 6 | 3 | 0 | 25.0% ⚠️ |
-| design-skills | 16 | 0 | 3 | 13 | 0 | 0.0% ❌ |
-| document-skills | 8 | 0 | 5 | 3 | 0 | 0.0% ⚠️ |
-| architecture-skills | 9 | 0 | 0 | 8 | 1 | 0.0% ❌ |
-| testing-skills | 9 | 3 | 0 | 6 | 0 | 33.3% ❌ |
-| devops-skills | 9 | 0 | 0 | 9 | 0 | 0.0% ❌ |
-| database-skills | 8 | 0 | 0 | 8 | 0 | 0.0% ❌ |
-| cloud-skills | 16 | 0 | 0 | 16 | 0 | 0.0% ❌ |
-| markdown-skills | 1 | 1 | 0 | 0 | 0 | 100.0% ✅ |
-| social-skills | 2 | 0 | 2 | 0 | 0 | 0.0% ⚠️ |
-| teaching-skills | 3 | 0 | 0 | 3 | 0 | 0.0% ❌ |
-| utility-skills | 1 | 0 | 1 | 0 | 0 | 0.0% ⚠️ |
-
-### 详细技能清单
-
-#### development-skills
-
-*全栈开发技能集合：前端、后端、移动端开发技能*
-
-**已完成技能（23个）：**
-
-- ✅ `avue-form` - 有examples目录（9个文件）; 有api目录（5个文件）; 内容详细（6674字符）
-- ✅ `electron-egg` - 有examples目录（9个文件）; 有api目录（5个文件）; 内容详细（7293字符）
-- ✅ `pinia` - 有examples目录（20个文件）; 有api目录（25个文件）; 内容详细（5534字符）
-- ✅ `rspack` - 有examples目录（136个文件）; 有api目录（5个文件）; 内容详细（9783字符）
-- ✅ `uview-pro-vue3` - 有examples目录（13个文件）; 有api目录（4个文件）; 内容详细（8902字符）
-- ✅ `vue-router-v4` - 有examples目录（26个文件）; 有api目录（10个文件）; 内容详细（12096字符）
-- ✅ `vue3` - 有examples目录（51个文件）; 有api目录（35个文件）; 内容详细（8606字符）
-- ✅ `vuex-vue2` - 有examples目录（10个文件）; 有api目录（5个文件）; 内容详细（7126字符）
-- ✅ `ant-design-mini` - 有examples目录（25个文件）; 有api目录（2个文件，较少）; 内容详细（7076字符）
-- ✅ `ant-design-mobile` - 有examples目录（50个文件）; 有api目录（2个文件，较少）; 内容详细（8137字符）
-- ✅ `ant-design-react` - 有examples目录（14个文件）; 有api目录（2个文件，较少）; 内容详细（7868字符）
-- ✅ `avue` - 有examples目录（9个文件）; 有api目录（2个文件，较少）; 内容详细（6045字符）
-- ✅ `avue-crud` - 有examples目录（12个文件）; 有api目录（2个文件，较少）; 内容详细（6058字符）
-- ✅ `bootstrap-vue3` - 有examples目录（8个文件）; 有api目录（1个文件，较少）; 内容详细（7203字符）
-- ✅ `electron` - 有examples目录（7个文件）; 有api目录（2个文件，较少）; 内容详细（7141字符）
-- ✅ `element-plus-vue3` - 有examples目录（15个文件）; 有api目录（3个文件，较少）; 内容详细（8777字符）
-- ✅ `uview-vue2` - 有examples目录（7个文件）; 有api目录（2个文件，较少）; 内容详细（7086字符）
-- ✅ `vant-vue3` - 有examples目录（9个文件）; 有api目录（2个文件，较少）; 内容详细（6828字符）
-- ✅ `vue-router-v3` - 有examples目录（17个文件）; 有api目录（7个文件）; 内容中等（3602字符）
-- ✅ `dart-sass` - 有examples目录（13个文件）; 有api目录（3个文件，较少）; 内容中等（4621字符）
-- ✅ `vite` - 有examples目录（33个文件）; 有api目录（3个文件，较少）; 内容中等（4258字符）
-- ✅ `nextjs` - 有examples目录（377个文件）
-- ✅ `tauri` - 有examples目录（2个文件，较少）; 内容详细（6506字符）
-
-**部分完成技能（1个）：**
-
-- ⚠️ `vue2` - 内容中等（4618字符）
-
-**待完善技能（10个）：**
-
-- ❌ `angular` - 内容过短（580字符）
-- ❌ `ant-design-vue` - 内容过短（561字符）
-- ❌ `parcel` - 内容过短（553字符）
-- ❌ `react` - 内容过短（577字符）
-- ❌ `react-hooks` - 内容过短（582字符）
-- ❌ `redux` - 内容过短（541字符）
-- ❌ `rollup` - 内容过短（542字符）
-- ❌ `svelte` - 内容过短（539字符）
-- ❌ `vue-router` - 内容过短（610字符）
-- ❌ `webpack` - 内容过短（568字符）
-
-**缺失技能（3个）：**
-
-- ❌ `element-plus` - 文件不存在
-- ❌ `layui-vue` - 文件不存在（已重命名为 layui-vue3）
-- ❌ `vuex` - 文件不存在
-
-**后端开发技能：**
-
-**已完成技能（1个）：**
-
-- ✅ `nestjs` - 有examples目录（85个文件）; 有api目录（1个文件，较少）; 内容详细（10392字符）
-
-**部分完成技能（5个）：**
-
-- ⚠️ `spring-ai` - 内容详细（8715字符）
-- ⚠️ `spring-ai-alibaba` - 内容详细（7013字符）
-- ⚠️ `spring-boot` - 内容详细（8100字符）
-- ⚠️ `spring-cloud` - 内容详细（8225字符）
-- ⚠️ `spring-cloud-alibaba` - 内容详细（7940字符）
-
-**待完善技能（10个）：**
-
-- ❌ `django` - 内容过短（545字符）
-- ❌ `express` - 内容过短（554字符）
-- ❌ `fastapi` - 内容过短（608字符）
-- ❌ `fastify` - 内容过短（559字符）
-- ❌ `flask` - 内容过短（547字符）
-- ❌ `gin` - 内容过短（530字符）
-- ❌ `gin-gonic` - 内容过短（507字符）
-- ❌ `koa` - 内容过短（536字符）
-- ❌ `spring-data-jpa` - 内容过短（566字符）
-- ❌ `spring-security` - 内容过短（581字符）
-
-**移动端开发技能：**
-
-**已完成技能（13个）：**
-
-- ✅ `lime-echart` - 有examples目录（21个文件）; 有api目录（4个文件）; 内容详细（6258字符）
-- ✅ `ucharts` - 有examples目录（20个文件）; 有api目录（5个文件）; 内容详细（7116字符）
-- ✅ `uniapp-ucharts` - 有examples目录（14个文件）; 有api目录（2个文件，较少）; 内容详细（6698字符）
-- ✅ `uniapp-uview` - 有examples目录（14个文件）; 有api目录（2个文件，较少）; 内容详细（6428字符）
-- ✅ `uniappx-uview-pro` - 有examples目录（14个文件）; 有api目录（2个文件，较少）; 内容详细（6973字符）
-- ✅ `cocos2d-x` - 有examples目录（12个文件）; 内容详细（6978字符）
-- ✅ `uniapp-ad` - 有examples目录（7个文件）; 有api目录（1个文件，较少）; 内容中等（2129字符）
-- ✅ `uniapp-cloud` - 有examples目录（14个文件）; 有api目录（1个文件，较少）; 内容中等（2681字符）
-- ✅ `uniapp-project` - 有examples目录（73个文件）; 内容详细（5795字符）
-- ✅ `uniapp-native-app` - 有examples目录（7个文件）; 内容中等（2034字符）
-- ✅ `uniapp-native-plugin` - 有examples目录（7个文件）; 内容中等（2065字符）
-- ✅ `uniapp-plugin` - 有examples目录（6个文件）; 内容中等（2293字符）
-- ✅ `uniappx-project` - 有examples目录（72个文件）; 内容中等（2581字符）
-
-**部分完成技能（4个）：**
-
-- ⚠️ `uniapp-project-creator` - 有examples目录（3个文件，较少）; 内容中等（3475字符）
-- ⚠️ `uniappx-project-creator` - 有examples目录（3个文件，较少）; 内容中等（3585字符）
-- ⚠️ `upgradeLink` - 有examples目录（2个文件，较少）; 内容中等（4179字符）
-- ⚠️ `uniapp-mini-guide` - 有examples目录（4个文件，较少）
-
-**待完善技能（6个）：**
-
-- ❌ `android-kotlin` - 内容过短（594字符）
-- ❌ `flutter` - 内容过短（568字符）
-- ❌ `flutter-project-creater` - 内容过短（560字符）
-- ❌ `ios-swift` - 内容过短（557字符）
-- ❌ `react-native` - 内容过短（601字符）
-- ❌ `react-native-project-creater` - 内容过短（585字符）
-
-#### development-skills-utils
-
-*开发工具技能集合，包括代码生成、测试编写、文档构建、项目文档生成、MCP 构建器、Web 开发、前端设计、Node.js 版本管理、浏览器自动化等*
-
-**已完成技能（3个）：**
-
-- ✅ `agent-browser` - 有examples目录（21个文件）; 有api目录（3个文件，较少）; 内容详细（7544字符）
-- ✅ `nvm` - 有examples目录（57个文件）; 有api目录（2个文件，较少）; 内容中等（3926字符）
-- ✅ `ddd4j-project-builder` - 有examples目录（4个文件，较少）; 内容详细（8757字符）
-
-**部分完成技能（6个）：**
-
-- ⚠️ `mcp-builder` - 内容详细（9038字符）
-- ⚠️ `frontend-design` - 内容中等（4439字符）
-- ⚠️ `full-stack-doc` - 内容中等（3057字符）
-- ⚠️ `theme-factory` - 内容中等（3123字符）
-- ⚠️ `web-artifacts-builder` - 内容中等（3073字符）
-- ⚠️ `webapp-testing` - 内容中等（3861字符）
-
-**待完善技能（3个）：**
-
-- ❌ `code-generator` - 仅基础模板
-- ❌ `documentation-builder` - 仅基础模板
-- ❌ `test-writer` - 仅基础模板
-
-#### design-skills
-
-*设计与创意技能集合：设计工具、AI 设计工具、原型工具等*
-
-**部分完成技能（3个）：**
-
-- ⚠️ `algorithmic-art` - 内容详细（19735字符）
-- ⚠️ `canvas-design` - 内容详细（11937字符）
-- ⚠️ `brand-guidelines` - 内容中等（2234字符）
-
-**待完善技能（13个）：**
-
-- ❌ `adobe-xd` - 内容过短（521字符）
-- ❌ `axure` - 内容过短（535字符）
-- ❌ `dalle` - 内容过短（529字符）
-- ❌ `figma` - 内容过短（545字符）
-- ❌ `figma-ai` - 内容过短（526字符）
-- ❌ `framer` - 内容过短（529字符）
-- ❌ `galileo-ai` - 内容过短（546字符）
-- ❌ `midjourney` - 内容过短（552字符）
-- ❌ `modao` - 内容过短（509字符）
-- ❌ `runway-ml` - 内容过短（521字符）
-- ❌ `sketch` - 内容过短（520字符）
-- ❌ `stable-diffusion` - 内容过短（566字符）
-- ❌ `uizard` - 内容过短（532字符）
-
-#### document-skills
-
-*文档处理技能集合，支持 Excel、Word、PowerPoint、PDF 等办公文档的创建、编辑和处理*
-
-**部分完成技能（5个）：**
-
-- ⚠️ `doc-coauthoring` - 内容详细（15814字符）
-- ⚠️ `docx` - 内容详细（10150字符）
-- ⚠️ `pdf` - 内容详细（7067字符）
-- ⚠️ `pptx` - 内容详细（25533字符）
-- ⚠️ `xlsx` - 内容详细（10628字符）
-
-**待完善技能（3个）：**
-
-- ❌ `api-doc-generator` - 内容过短（587字符）
-- ❌ `drawio-flowchart` - 内容过短（539字符）
-- ❌ `processon-mindmap` - 内容过短（538字符）
-
-#### architecture-skills
-
-*架构技能集合：DDD、微服务、事件驱动、六边形架构、整洁架构、COLA 等*
-
-**待完善技能（8个）：**
-
-- ❌ `c4-model` - 内容过短（559字符）
-- ❌ `ddd-clean-architecture` - 内容过短（576字符）
-- ❌ `ddd-cola` - 内容过短（708字符）
-- ❌ `ddd-event-driven` - 内容过短（545字符）
-- ❌ `ddd-hexagonal-architecture` - 内容过短（589字符）
-- ❌ `ddd-microservices` - 内容过短（580字符）
-- ❌ `drawio-architecture` - 内容过短（568字符）
-- ❌ `plantuml` - 内容过短（535字符）
-
-**缺失技能（1个）：**
-
-- ❌ `ddd` - 文件不存在
-
-#### testing-skills
-
-*测试技能集合：单元测试、集成测试、E2E 测试、移动端测试等*
-
-**已完成技能（3个）：**
-
-- ✅ `cypress` - 有examples目录（81个文件）; 有api目录（135个文件）; 内容详细（11513字符）
-- ✅ `jest` - 有examples目录（9个文件）; 有api目录（5个文件）; 内容详细（7144字符）
-- ✅ `vitest` - 有examples目录（14个文件）; 有api目录（4个文件）; 内容详细（6215字符）
-
-**待完善技能（6个）：**
-
-- ❌ `appium` - 内容过短（552字符）
-- ❌ `detox` - 内容过短（548字符）
-- ❌ `junit` - 内容过短（545字符）
-- ❌ `playwright` - 内容过短（553字符）
-- ❌ `pytest` - 内容过短（543字符）
-- ❌ `selenium` - 内容过短（540字符）
-
-#### devops-skills
-
-*运维技能集合：CI/CD、容器化、IaC 等*
-
-**待完善技能（9个）：**
-
-- ❌ `ansible` - 内容过短（525字符）
-- ❌ `cloudformation` - 内容过短（569字符）
-- ❌ `docker` - 内容过短（547字符）
-- ❌ `docker-compose` - 内容过短（584字符）
-- ❌ `github-actions` - 内容过短（549字符）
-- ❌ `gitlab-ci` - 内容过短（529字符）
-- ❌ `jenkins` - 内容过短（544字符）
-- ❌ `kubernetes` - 内容过短（552字符）
-- ❌ `terraform` - 内容过短（579字符）
-
-#### database-skills
-
-*数据库技能集合：关系型数据库、NoSQL 数据库、数据库工具等*
-
-**待完善技能（8个）：**
-
-- ❌ `dbeaver` - 内容过短（559字符）
-- ❌ `elasticsearch` - 内容过短（569字符）
-- ❌ `mongodb` - 内容过短（537字符）
-- ❌ `mysql` - 内容过短（571字符）
-- ❌ `navicat` - 内容过短（575字符）
-- ❌ `oracle` - 内容过短（521字符）
-- ❌ `postgresql` - 内容过短（576字符）
-- ❌ `redis` - 内容过短（545字符）
-
-#### cloud-skills
-
-*云平台技能集合：AWS、Azure、阿里云、腾讯云、华为云等*
-
-**待完善技能（16个）：**
-
-- ❌ `cloud-aliyun-ecs` - 内容过短（563字符）
-- ❌ `cloud-aliyun-oss` - 内容过短（560字符）
-- ❌ `cloud-aliyun-rds` - 内容过短（555字符）
-- ❌ `cloud-aws-ec2` - 内容过短（530字符）
-- ❌ `cloud-aws-lambda` - 内容过短（566字符）
-- ❌ `cloud-aws-rds` - 内容过短（522字符）
-- ❌ `cloud-aws-s3` - 内容过短（520字符）
-- ❌ `cloud-azure-sql` - 内容过短（558字符）
-- ❌ `cloud-azure-storage` - 内容过短（557字符）
-- ❌ `cloud-azure-vm` - 内容过短（549字符）
-- ❌ `cloud-huawei-ecs` - 内容过短（560字符）
-- ❌ `cloud-huawei-obs` - 内容过短（557字符）
-- ❌ `cloud-huawei-rds` - 内容过短（552字符）
-- ❌ `cloud-tencent-cdb` - 内容过短（556字符）
-- ❌ `cloud-tencent-cos` - 内容过短（561字符）
-- ❌ `cloud-tencent-cvm` - 内容过短（564字符）
-
-#### markdown-skills
-
-*Markdown 相关技能集合，包括 Mermaid 图表绘制等*
-
-**已完成技能（1个）：**
-
-- ✅ `mermaid` - 有examples目录（23个文件）; 内容详细（9690字符）
-
-#### social-skills
-
-*社交与协作技能集合，包括内部沟通、Slack GIF 创建等*
+本仓库的技能按**技能种类**分为 **13 个插件类别**，共包含 **170 个技能**。
 
-**部分完成技能（2个）：**
-
-- ⚠️ `slack-gif-creator` - 内容详细（7840字符）
-- ⚠️ `internal-comms` - 有examples目录（4个文件，较少）
-
-#### teaching-skills
-
-*教学与教育相关技能集合，包括课程设计、学习评估、教学资源生成等*
-
-**待完善技能（3个）：**
-
-- ❌ `course-designer` - 仅基础模板
-- ❌ `learning-assessor` - 仅基础模板
-- ❌ `teaching-resource-generator` - 仅基础模板
-
-#### utility-skills
-
-*工具与实用技能集合，包括技能创建器等*
-
-**部分完成技能（1个）：**
-
-- ⚠️ `skill-creator` - 内容详细（17700字符）
-
-### 详细技能列表
-
-### 1. teaching-skills（教学技能集合）
-
-教学与教育相关技能集合，包括课程设计、学习评估、教学资源生成等。
-
-#### course-designer（课程设计技能）
-
-帮助设计和规划课程内容，包括课程大纲、学习目标、教学计划和评估方案。
-
-**使用示例：**
-- "使用课程设计技能帮我设计一门 Python 编程课程"
-- "设计一个为期 8 周的机器学习入门课程"
-- "创建一个关于 Web 开发的课程大纲"
-
-#### learning-assessor（学习评估技能）
-
-帮助创建学习评估工具，包括测验题目、评估标准、评分 rubric 和学习分析。
-
-**使用示例：**
-- "使用学习评估技能为我的课程创建一套测验题目"
-- "设计一个评估学生学习效果的 rubric"
-- "生成一份学习分析报告"
-
-#### teaching-resource-generator（教学资源生成技能）
-
-帮助生成各种教学资源，包括课件、练习题、教学案例、学习指南等。
-
-**使用示例：**
-- "使用教学资源生成技能为我的课程创建一套课件"
-- "生成一些关于数据结构的练习题"
-- "创建一个教学案例用于讲解设计模式"
-
-### 2. document-skills（文档处理技能集合）
-
-文档处理技能集合，支持 Excel、Word、PowerPoint、PDF 等办公文档的创建、编辑和处理。
-
-#### docx（Word 文档处理）
-
-创建、编辑和处理 Microsoft Word 文档。
-
-**使用示例：**
-- "Use the DOCX skill to create a new Word document"
-- "Extract text from this Word document"
-- "Format this document with headings and styles"
-
-#### pptx（PowerPoint 演示文稿处理）
-
-创建、编辑和处理 Microsoft PowerPoint 演示文稿。
-
-**使用示例：**
-- "Use the PPTX skill to create a presentation"
-- "Add slides to this PowerPoint file"
-- "Apply a theme to this presentation"
-
-#### pdf（PDF 文档处理）
-
-处理 PDF 文档，包括提取文本、填写表单、合并拆分等。
-
-**使用示例：**
-- "Use the PDF skill to extract the form fields from `path/to/some-file.pdf`"
-- "Fill out this PDF form"
-- "Merge multiple PDF files"
-
-#### xlsx（Excel 表格处理）
-
-创建、编辑和处理 Microsoft Excel 电子表格。
-
-**使用示例：**
-- "Use the XLSX skill to create a spreadsheet"
-- "Analyze data in this Excel file"
-- "Generate charts from this spreadsheet"
-
-#### doc-coauthoring（文档协作）
-
-支持多人协作编辑文档的功能。
-
-**使用示例：**
-- "Use the doc-coauthoring skill to prepare this document for collaboration"
-- "Add comments and suggestions to this document"
-
-### 3. markdown-skills（Markdown 技能集合）
-
-Markdown 相关技能集合，包括 Mermaid 图表绘制等。
-
-#### mermaid（Mermaid 图表绘制）
-
-创建各种类型的 Mermaid 图表，支持 23 种图表类型，包括流程图、时序图、类图、状态图、甘特图、架构图等。
-
-**使用示例：**
-- "使用 Mermaid 创建一个流程图"
-- "绘制一个系统架构的 C4 图"
-- "生成一个项目时间线的甘特图"
-- "创建一个用户旅程图"
-- "绘制一个类图展示系统设计"
-- "生成一个甘特图展示项目进度"
-- "创建一个思维导图整理知识点"
-- "绘制一个时序图展示系统交互"
-
-**支持的图表类型（共 23 种）：**
-
-1. **流程图（Flowchart）** - 展示流程、决策和过程
-2. **时序图（Sequence Diagram）** - 展示对象之间的交互顺序
-3. **类图（Class Diagram）** - 展示类、接口和它们之间的关系
-4. **状态图（State Diagram）** - 展示对象的状态转换
-5. **实体关系图（ER Diagram）** - 展示数据库实体和关系
-6. **用户旅程图（User Journey）** - 展示用户体验流程
-7. **甘特图（Gantt Chart）** - 展示项目时间线和任务进度
-8. **饼图（Pie Chart）** - 展示数据比例分布
-9. **象限图（Quadrant Chart）** - 展示二维数据分类
-10. **Git 图（Git Graph）** - 展示 Git 分支和提交历史
-11. **C4 架构图（C4 Diagram）** - 展示系统架构（Context、Container、Component、Deployment）
-12. **思维导图（Mindmap）** - 展示层次化信息结构
-13. **时间线图（Timeline）** - 展示事件的时间顺序
-14. **桑基图（Sankey Diagram）** - 展示流量和流向
-15. **架构图（Architecture Diagram）** - 展示系统架构和服务关系
-16. **块图（Block Diagram）** - 展示系统组件和连接
-17. **看板图（Kanban）** - 展示任务看板和工作流
-18. **数据包图（Packet Diagram）** - 展示网络数据包结构
-19. **雷达图（Radar Chart）** - 展示多维度数据对比
-20. **需求图（Requirement Diagram）** - 展示系统需求和关系
-21. **树状图（Treemap）** - 展示层次化数据
-22. **XY 图表（XY Chart）** - 展示二维数据关系
-23. **ZenUML 图（ZenUML Diagram）** - 使用 ZenUML 语法绘制 UML 图
-
-### 4. development-skills（开发技能集合）
-
-开发技能集合，包括代码生成、测试编写、文档构建、MCP 构建器、Web 开发、前端设计等。
-
-#### code-generator（代码生成技能）
-
-帮助生成高质量的代码，支持多种编程语言，遵循最佳实践和设计模式。
-
-**使用示例：**
-- "使用代码生成技能生成一个用户认证的 Python 类"
-- "创建一个 RESTful API 的 Node.js 实现"
-- "生成一个符合 SOLID 原则的 Java 类"
-
-#### test-writer（测试编写技能）
-
-帮助编写单元测试、集成测试和端到端测试。
-
-**使用示例：**
-- "为这个函数编写单元测试"
-- "创建集成测试来验证 API 接口"
-- "生成端到端测试用例"
-
-#### documentation-builder（文档构建技能）
-
-帮助生成技术文档，包括 API 文档、用户手册、开发指南、README 等。
-
-**使用示例：**
-- "使用文档构建技能为我的项目生成 API 文档"
-- "创建一个用户使用手册"
-- "编写开发环境搭建指南"
-
-#### full-stack-doc（项目文档生成技能）
-
-基于标准模板快速生成项目文档，包括产品调研、需求分析、PRD、架构设计、技术文档等 14 种项目交付文档模板。适用于软件开发项目的全生命周期文档生成，基于 DDD（领域驱动设计）和 COLA 架构思想。
-
-**使用示例：**
-- "使用项目文档生成技能，帮我生成一个 PRD 文档"
-- "基于模板生成系统架构设计文档，项目名称是 TeachingAI 教学平台"
-- "为我的项目生成全套文档，包括 PRD、架构设计、技术文档"
-- "生成一个产品调研文档"
-- "创建需求分析文档"
-- "生成领域模型说明文档"
-
-**支持的文档模板（共 14 种）：**
-
-**产品阶段文档：**
-1. **产品调研模板** - 市场调研、用户调研、竞品分析
-2. **需求调研模板** - 需求收集、用户访谈、需求整理
-3. **技术调研模板** - 技术选型、技术可行性分析、技术对比
-4. **需求分析模板** - 需求拆解、优先级排序、需求评审
-
-**设计阶段文档：**
-5. **PRD文档模板** - 产品需求文档，包含功能需求、用户故事、验收标准
-6. **视觉与交互 DNA 规范模板** - 设计语言、交互规范、视觉规范
-7. **UI 设计说明模板** - UI设计规范、组件库、设计系统
-
-**技术设计文档：**
-8. **领域模型说明模板** - DDD领域模型、实体、值对象、聚合
-9. **系统架构设计模板** - 技术架构、系统架构、部署架构
-10. **技术细分模板** - 接口设计、数据库设计、技术实现细节
-
-**测试与交付文档：**
-11. **功能提测模板** - 提测清单、测试环境、测试范围
-12. **测试结果模板** - 测试报告、缺陷统计、测试结论
-13. **上线通知模板** - 上线计划、上线检查清单、回滚方案
-14. **项目运维模板** - 运维手册、监控告警、故障处理
-
-**特点：**
-- 标准化结构，统一的文档格式和结构
-- 基于 DDD 和 COLA 架构思想
-- 全生命周期覆盖，从产品调研到项目运维
-- 易于定制，使用占位符便于替换
-
-#### ddd4j-project-builder（DDD 项目构建器）
-
-DDD（领域驱动设计）项目初始化和目录规范检查技能。支持三种项目类型：单体单模块、单体多模块、单体微服务。可以识别项目结构类型并验证目录规范是否符合 DDD、六边形架构、整洁架构和 COLA V5 标准。
-
-**使用示例：**
-- "使用 ddd4j-project-builder 初始化一个单体单模块的 DDD 项目"
-- "创建一个单体多模块项目，包含 api、order、payment 三个业务模块"
-- "初始化一个微服务架构项目，包含 user-service、order-service、product-service"
-- "检查现有项目的 DDD 结构是否符合规范"
-- "验证这个项目的目录结构是否符合 COLA V5 架构"
-- "识别这个项目是单体单模块还是单体多模块结构"
-
-**支持的项目类型：**
-
-1. **单体单模块（Single-Module Monolith）**
-   - 适用场景：中小型应用，单个业务领域，团队规模 5-15 人
-   - 特点：单一 Maven 模块，所有层在同一模块内
-   - 示例：`"初始化一个单体单模块项目，groupId=io.ddd4j.base, artifactId=ddd4j-order"`
-
-2. **单体多模块（Multi-Module Monolith）**
-   - 适用场景：中大型应用，多个业务域，团队规模 15-50 人
-   - 特点：多个 Maven 模块，按业务域划分，共享 common 模块
-   - 示例：`"创建一个单体多模块项目，包含 api、order、payment 模块"`
-
-3. **单体微服务（Microservices）**
-   - 适用场景：大型电商平台，多个业务域，团队规模 50+ 人
-   - 特点：每个服务独立部署，服务间通过 RPC 和消息队列通信
-   - 示例：`"初始化微服务项目，包含 user-service、order-service、product-service"`
-
-**支持的架构模式：**
-
-1. **DDD 经典分层架构** - interfaces → application → domain ← infrastructure
-2. **六边形架构（Hexagonal）** - 端口和适配器模式
-3. **整洁架构（Clean Architecture）** - 实体、用例、接口适配器
-4. **COLA V5** - Adapter → App → Domain ← Infrastructure
-
-**功能特性：**
-
-- **新项目初始化**：
-  - 自动生成完整的 Maven 项目结构
-  - 创建所有必需的目录和文件（pom.xml、package-info.java、.gitignore、LICENSE 等）
-  - 支持自定义 groupId、artifactId、version、packageBase
-  - 自动生成符合 DDD 规范的包结构
-
-- **旧项目规范检查**：
-  - 自动识别项目类型（单体单模块/单体多模块/微服务）
-  - 识别架构模式（DDD Classic/Hexagonal/Clean/COLA V5）
-  - 验证目录结构合规性
-  - 检查包命名规范
-  - 验证层依赖关系
-  - 生成详细的验证报告
-
-**输出位置：**
-- 所有生成的项目文件直接保存在命令执行的同级目录下
-- 项目根目录名称使用 artifactId（例如：`ddd4j-order`、`ddd4j-douyin`）
-
-**参考文档：**
-- 技能内置了完整的架构文档（docs/ 目录）：
-  - DDD 经典分层架构目录结构
-  - 六边形架构详细目录结构参考
-  - 整洁架构详细目录结构参考
-  - COLA V5 架构详细目录结构参考
-
-#### mcp-builder（MCP 构建器）
+---
 
-帮助创建和配置 Model Context Protocol (MCP) 服务器。
+### 📦 development-skills（全栈开发技能集合）
 
-**使用示例：**
-- "使用 MCP 构建器创建一个新的 MCP 服务器"
-- "配置 MCP 服务器的工具和资源"
-- "生成 MCP 服务器的代码模板"
+**安装命令：** `/plugin install development-skills@full-stack-skills`
 
-#### webapp-testing（Web 应用测试）
+**技能数量：** 76 个技能
 
-帮助测试 Web 应用程序，包括功能测试、性能测试等。
+**描述：** 全栈开发技能集合，覆盖前端、后端、移动端、桌面应用全平台开发。帮助 AI 助手掌握全栈开发技能。
 
-**使用示例：**
-- "测试这个 Web 应用的功能"
-- "检查这个网站的响应时间"
-- "验证这个应用的跨浏览器兼容性"
+#### 前端框架与构建工具
+- **框架：** `vue2`、`vue3`、`react`、`react-hooks`、`nextjs`、`angular`、`svelte`
+- **构建工具：** `vite`、`webpack`、`rollup`、`parcel`、`rspack`
+- **状态管理：** `vue-router`、`vue-router-v3`、`vue-router-v4`、`pinia`、`vuex`、`vuex-vue2`、`redux`
+- **样式工具：** `dart-sass`
 
-#### frontend-design（前端设计）
+#### UI 组件库
+- **Vue 生态：** `element-plus`、`element-plus-vue3`、`ant-design-vue`、`bootstrap-vue3`、`vant-vue3`、`uview-vue2`、`uview-pro-vue3`、`layui-vue3`
+- **React 生态：** `ant-design-react`、`ant-design-mobile`、`ant-design-mini`
+- **其他：** `avue`、`avue-crud`、`avue-form`
 
-创建高质量的前端界面，避免通用的 AI 美学，生成具有独特设计感的代码。
+#### 桌面应用框架
+- `electron`、`electron-egg`、`tauri`
 
-**使用示例：**
-- "使用前端设计技能创建一个登录页面"
-- "设计一个现代化的仪表板界面"
-- "创建一个响应式的产品展示页面"
+#### 后端框架
+- **Java 生态：** `spring-boot`、`spring-cloud`、`spring-cloud-alibaba`、`spring-ai`、`spring-ai-alibaba`、`spring-security`、`spring-data-jpa`
+- **Node.js 生态：** `express`、`nestjs`、`koa`、`fastify`
+- **Python 生态：** `django`、`fastapi`、`flask`
+- **Go 生态：** `gin`、`gin-gonic`
 
-#### web-artifacts-builder（Web 工件构建器）
+#### 移动端开发
+- **跨平台框架：** `uniapp-project-creator`、`uniapp-project`、`uniappx-project-creator`、`uniappx-project`、`react-native`、`react-native-project-creater`、`flutter`、`flutter-project-creater`
+- **原生开发：** `android-kotlin`、`ios-swift`
+- **游戏引擎：** `cocos2d-x`
+- **UniApp 生态：** `uniapp-uview`、`uniappx-uview-pro`、`uniapp-ucharts`、`uniapp-ad`、`uniapp-cloud`、`uniapp-mini-guide`、`uniapp-native-app`、`uniapp-native-plugin`、`uniapp-plugin`
+- **图表组件：** `lime-echart`、`ucharts`、`upgradeLink`
 
-使用现代前端技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 HTML 工件。
+---
 
-**使用示例：**
-- "使用 Web 工件构建器创建一个交互式数据可视化工具"
-- "构建一个带有状态管理的单页应用"
-- "创建一个使用 shadcn/ui 组件的复杂界面"
+### 🛠️ development-skills-utils（开发工具技能集合）
 
-#### theme-factory（主题工厂）
+**安装命令：** `/plugin install development-skills-utils@full-stack-skills`
 
-为工件应用主题样式，包括 10 种预设主题，可以应用到幻灯片、文档、报告、HTML 落地页等。
+**技能数量：** 12 个技能
 
-**使用示例：**
-- "为这个演示文稿应用 Ocean Depths 主题"
-- "使用 Modern Minimalist 主题样式化这个文档"
-- "为这个网页应用 Golden Hour 主题"
+**描述：** 开发工具技能集合，包含代码生成、测试编写、文档构建等基础工具；DDD 项目构建器、项目文档生成、MCP 构建器等。帮助 AI 助手掌握开发工具链和工程化实践。
 
-### 5. design-skills（设计技能集合）
+**技能列表：**
+- `code-generator` - 代码生成器
+- `test-writer` - 测试编写工具
+- `ddd4j-project-builder` - DDD 项目构建器（支持单体单模块、单体多模块、微服务架构）
+- `documentation-builder` - 文档构建工具
+- `full-stack-doc` - 全栈文档生成（14种文档模板，覆盖产品到运维全生命周期）
+- `mcp-builder` - MCP 构建器
+- `webapp-testing` - Web 应用测试
+- `frontend-design` - 前端设计工具
+- `web-artifacts-builder` - Web 工件构建器
+- `theme-factory` - 主题工厂
+- `nvm` - Node.js 版本管理
+- `agent-browser` - 浏览器自动化
 
-设计与创意技能集合，包括算法艺术、品牌指南、画布设计等。
+---
 
-#### algorithmic-art（算法艺术）
+### 🎨 design-skills（设计技能集合）
 
-使用 p5.js 创建算法艺术，支持种子随机数和交互式参数探索。
+**安装命令：** `/plugin install design-skills@full-stack-skills`
 
-**使用示例：**
-- "使用算法艺术技能创建一个生成式艺术作品"
-- "生成一个基于粒子系统的可视化"
-- "创建一个流动场效果的艺术作品"
+**技能数量：** 16 个技能
 
-#### brand-guidelines（品牌指南）
+**描述：** 设计与创意技能集合，包含专业设计工具、AI 设计工具、创意工具等。帮助 AI 助手掌握 UI/UX 设计、原型设计、AI 绘图等设计技能。
 
-应用 Anthropic 官方品牌颜色和排版到任何工件。
+#### 专业设计工具
+- `figma`、`sketch`、`adobe-xd`、`axure`、`modao`、`framer`
 
-**使用示例：**
-- "使用品牌指南技能应用品牌样式到这个文档"
-- "为这个演示文稿应用品牌颜色"
-- "使用品牌字体格式化这个文档"
+#### AI 设计工具
+- `midjourney`、`dalle`、`stable-diffusion`、`runway-ml`、`galileo-ai`、`uizard`、`figma-ai`
 
-#### canvas-design（画布设计）
+#### 创意工具
+- `algorithmic-art`、`brand-guidelines`、`canvas-design`
 
-在 HTML Canvas 上创建高质量的设计和可视化。
+---
 
-**使用示例：**
-- "使用画布设计技能创建一个数据可视化图表"
-- "在 Canvas 上绘制一个交互式图形"
-- "创建一个 Canvas 动画效果"
+### 📄 document-skills（文档处理技能集合）
 
-### 6. social-skills（社交技能集合）
+**安装命令：** `/plugin install document-skills@full-stack-skills`
 
-社交与协作技能集合，包括内部沟通、Slack GIF 创建等。
+**技能数量：** 8 个技能
 
-#### internal-comms（内部沟通）
+**描述：** 文档处理技能集合，包含办公文档的创建、编辑和处理；文档协作；API 文档生成；流程图和思维导图绘制等。帮助 AI 助手掌握文档处理、图表绘制、文档协作等办公自动化技能。
 
-帮助编写各种内部沟通文档，包括状态报告、领导更新、3P 更新、公司通讯、FAQ 等。
+**技能列表：**
+- `docx` - Word 文档处理
+- `pptx` - PowerPoint 演示文稿处理
+- `pdf` - PDF 文档处理
+- `xlsx` - Excel 电子表格处理
+- `doc-coauthoring` - 文档协作（多人协作编辑）
+- `api-doc-generator` - API 文档生成器
+- `drawio-flowchart` - Draw.io 流程图绘制
+- `processon-mindmap` - ProcessOn 思维导图绘制
 
-**使用示例：**
-- "使用内部沟通技能编写一份项目状态报告"
-- "创建一个公司通讯稿"
-- "编写一份 FAQ 文档"
+---
 
-#### slack-gif-creator（Slack GIF 创建器）
+### 🏗️ architecture-skills（架构技能集合）
 
-创建用于 Slack 的 GIF 动图。
+**安装命令：** `/plugin install architecture-skills@full-stack-skills`
 
-**使用示例：**
-- "使用 Slack GIF 创建器创建一个欢迎动画"
-- "生成一个用于 Slack 消息的 GIF"
-- "创建一个通知动画 GIF"
+**技能数量：** 8 个技能
 
-### 7. utility-skills（工具技能集合）
+**描述：** 架构技能集合，包含领域驱动设计（DDD）、各种架构模式、架构图绘制工具等。帮助 AI 助手掌握企业级架构设计、领域建模、架构图绘制等架构设计技能。
 
-工具与实用技能集合，包括技能创建器等。
+#### 架构模式
+- `ddd` - 领域驱动设计
+- `ddd-cola` - COLA 架构
+- `ddd-microservices` - DDD 微服务架构
+- `ddd-event-driven` - DDD 事件驱动架构
+- `ddd-hexagonal-architecture` - DDD 六边形架构
+- `ddd-clean-architecture` - DDD 整洁架构
 
-#### skill-creator（技能创建器）
+#### 架构图工具
+- `plantuml` - PlantUML 架构图绘制
+- `drawio-architecture` - Draw.io 架构图绘制
 
-指导如何创建有效的技能，扩展 Claude 的能力。
+---
 
-**使用示例：**
-- "使用技能创建器帮助我创建一个新技能"
-- "如何设计一个技能的结构"
-- "创建一个技能的最佳实践是什么"
+### 🧪 testing-skills（测试技能集合）
 
+**安装命令：** `/plugin install testing-skills@full-stack-skills`
 
-## 项目结构
+**技能数量：** 9 个技能
 
-```
-.
-├── .claude-plugin/
-│   └── marketplace.json          # Marketplace 配置文件
-├── skills/                        # Skills 目录
-│   ├── teaching-skills/          # 教学技能
-│   │   ├── course-designer/
-│   │   ├── learning-assessor/
-│   │   └── teaching-resource-generator/
-│   ├── document-skills/          # 文档处理技能
-│   │   ├── docx/
-│   │   ├── pptx/
-│   │   ├── pdf/
-│   │   ├── xlsx/
-│   │   └── doc-coauthoring/
-│   ├── markdown-skills/          # Markdown 技能
-│   │   └── mermaid/
-│   ├── development-skills/       # 开发技能
-│   │   ├── code-generator/
-│   │   ├── test-writer/
-│   │   ├── documentation-builder/
-│   │   ├── full-stack-doc/
-│   │   ├── ddd4j-project-builder/
-│   │   ├── mcp-builder/
-│   │   ├── webapp-testing/
-│   │   ├── frontend-design/
-│   │   ├── web-artifacts-builder/
-│   │   └── theme-factory/
-│   ├── design-skills/            # 设计技能
-│   │   ├── algorithmic-art/
-│   │   ├── brand-guidelines/
-│   │   └── canvas-design/
-│   ├── social-skills/            # 社交技能
-│   │   ├── internal-comms/
-│   │   └── slack-gif-creator/
-│   ├── utility-skills/           # 工具技能
-│   │   └── skill-creator/
-├── spec/                          # Agent Skills 规范
-├── template/                      # 技能模板
-├── ROLE_DEFINITIONS.md            # IT行业全生命周期岗位职责定义（23个岗位）
-├── PLANNING_SKILL_CATEGORIES.md   # 全栈技能库规划文档（按技能种类组织）
-├── PLATFORM_GUIDE.md              # 跨平台使用指南
-└── README.md                      # 本文件
-```
+**描述：** 测试技能集合，包含单元测试框架、E2E 测试工具、移动端测试工具等。帮助 AI 助手掌握单元测试、集成测试、端到端测试、移动端测试等测试技能，提升代码质量和测试覆盖率。
 
-## 如何创建新技能
+#### 单元测试框架
+- `jest`、`vitest`、`pytest`、`junit`
 
-### 创建一个基础技能
+#### E2E 测试工具
+- `cypress`、`playwright`、`selenium`
 
-创建技能非常简单——只需要一个包含带 YAML frontmatter 的 `SKILL.md` 文件的文件夹即可。你可以使用本仓库中的 **template-skill** 作为起点：
+#### 移动端测试工具
+- `appium`、`detox`
 
-```markdown
----
-name: my-skill-name
-description: A clear description of what this skill does and when to use it
 ---
 
-# My Skill Name
+### 🚀 devops-skills（运维技能集合）
 
-[Add your instructions here that Claude will follow when this skill is active]
+**安装命令：** `/plugin install devops-skills@full-stack-skills`
 
-## Examples
-- Example usage 1
-- Example usage 2
+**技能数量：** 9 个技能
 
-## Guidelines
-- Guideline 1
-- Guideline 2
-```
+**描述：** 运维技能集合，包含 CI/CD 工具、容器化和容器编排工具、基础设施即代码（IaC）工具等。帮助 AI 助手掌握 DevOps 实践、自动化部署、容器化、基础设施管理等运维技能。
 
-frontmatter 只需要两个字段：
-- `name` - 你的技能的唯一标识符（小写，空格用连字符）
-- `description` - 对该技能做什么、何时使用的完整描述
+#### CI/CD 工具
+- `jenkins`、`gitlab-ci`、`github-actions`
 
-下面的 Markdown 内容包含了该技能激活时 Claude 要遵循的说明、示例和指南。更多细节请参见 [如何创建自定义技能](https://support.claude.com/en/articles/12512198-creating-custom-skills)。
+#### 容器化与编排
+- `docker`、`docker-compose`、`kubernetes`
 
-### 技能结构
+#### 基础设施即代码（IaC）
+- `terraform`、`ansible`、`cloudformation`
 
-每个技能包含：
-- `SKILL.md` - 给智能体的说明（必需）
-- `scripts/` - 自动化辅助脚本（可选）
-- `references/` - 支撑文档（可选）
-- `assets/` - 资源文件（可选）
+---
 
-### 添加新技能的步骤
+### 💾 database-skills（数据库技能集合）
 
-#### 1. 创建 Skill 目录
+**安装命令：** `/plugin install database-skills@full-stack-skills`
 
-在 `skills/` 目录下创建新的技能目录：
+**技能数量：** 8 个技能
 
-```bash
-mkdir -p skills/your-skill-name
-```
+**描述：** 数据库技能集合，包含关系型数据库、NoSQL 数据库、搜索引擎、数据库管理工具等。帮助 AI 助手掌握数据库设计、SQL 优化、数据存储、数据检索等数据库技能。
 
-#### 2. 创建 SKILL.md 文件
+#### 关系型数据库
+- `mysql`、`postgresql`、`oracle`
 
-每个技能必须包含一个 `SKILL.md` 文件，格式如上所示。
+#### NoSQL 数据库与搜索引擎
+- `mongodb`、`redis`、`elasticsearch`
 
-#### 3. 更新 marketplace.json
+#### 数据库管理工具
+- `navicat`、`dbeaver`
 
-在 `.claude-plugin/marketplace.json` 中添加新技能到相应的插件中：
+---
 
-```json
-{
-  "plugins": [
-    {
-      "name": "your-plugin-name",
-      "description": "插件描述",
-      "source": "./",
-      "strict": false,
-      "skills": [
-        "./skills/your-skill-name"
-      ]
-    }
-  ]
-}
-```
+### ☁️ cloud-skills（云平台技能集合）
 
-#### 4. 提交到 GitHub
+**安装命令：** `/plugin install cloud-skills@full-stack-skills`
 
-将更改提交并推送到 GitHub 仓库：
+**技能数量：** 16 个技能
 
-```bash
-git add .
-git commit -m "Add new skill: your-skill-name"
-git push
-```
+**描述：** 云平台技能集合，包含 AWS、Azure、阿里云、腾讯云、华为云等主流云平台的核心服务。帮助 AI 助手掌握云计算、云服务使用、云架构设计等云平台技能，支持多云部署和云原生应用开发。
 
-## Marketplace 配置文件说明
-
-`.claude-plugin/marketplace.json` 文件定义了 marketplace 的元数据和可用的插件：
-
-```json
-{
-  "name": "marketplace-name",        // Marketplace 名称
-  "owner": {                         // 所有者信息
-    "name": "Owner Name",
-    "email": "owner@example.com"
-  },
-  "metadata": {                      // 元数据
-    "description": "Marketplace 描述",
-    "version": "1.0.0"
-  },
-  "plugins": [                       // 插件列表
-    {
-      "name": "plugin-name",         // 插件名称
-      "description": "插件描述",
-      "source": "./",                // 源代码路径
-      "strict": false,               // 是否严格模式
-      "skills": [                    // 技能列表
-        "./skills/skill1",
-        "./skills/skill2"
-      ]
-    }
-  ]
-}
-```
+#### AWS
+- `cloud-aws-ec2`、`cloud-aws-s3`、`cloud-aws-rds`、`cloud-aws-lambda`
 
-## 工作原理
+#### Azure
+- `cloud-azure-vm`、`cloud-azure-storage`、`cloud-azure-sql`
 
-1. **Marketplace 注册**: 当您运行 `/plugin marketplace add https://github.com/teachingai/full-stack-skills.git` 时，Claude Code 会：
-   - 从 GitHub 仓库获取 `.claude-plugin/marketplace.json` 文件
-   - 解析 marketplace 配置
-   - 将 marketplace 添加到可用列表
+#### 阿里云
+- `cloud-aliyun-ecs`、`cloud-aliyun-oss`、`cloud-aliyun-rds`
 
-2. **插件安装**: 当您安装插件时，Claude Code 会：
-   - 下载插件中定义的所有 skills
-   - 将 skills 存储到本地
-   - 使 skills 可用于 Claude
+#### 腾讯云
+- `cloud-tencent-cvm`、`cloud-tencent-cos`、`cloud-tencent-cdb`
 
-3. **技能使用**: 当您使用技能时，Claude 会：
-   - 根据技能描述判断是否使用该技能
-   - 加载技能的 `SKILL.md` 文件
-   - 按照技能说明执行任务
+#### 华为云
+- `cloud-huawei-ecs`、`cloud-huawei-obs`、`cloud-huawei-rds`
 
-## 最佳实践
+---
 
-### Skill 设计
+### 📝 markdown-skills（Markdown 技能集合）
 
-- **清晰的描述**: `description` 字段应该清楚地说明何时使用该技能
-- **简洁的内容**: 保持 `SKILL.md` 简洁，避免不必要的冗长（建议控制在 500 行以内）
-- **结构化组织**: 使用清晰的章节和结构
-- **实用示例**: 提供实际可用的示例
-- **渐进式披露**: 将详细参考资料放在单独文件中，按需加载
+**安装命令：** `/plugin install markdown-skills@full-stack-skills`
 
-### Marketplace 组织
+**技能数量：** 1 个技能
 
-- **逻辑分组**: 将相关技能组织到同一个插件中
-- **清晰的命名**: 使用清晰、描述性的名称
-- **版本管理**: 在 `metadata` 中维护版本号
+**描述：** Markdown 相关技能集合，包含 Mermaid 图表绘制，支持 23 种图表类型（流程图、时序图、类图、状态图、甘特图、架构图、C4 图、思维导图等）。帮助 AI 助手掌握 Markdown 文档编写、技术图表绘制、架构图可视化等文档技能。
 
-## 许可证
+**技能列表：**
+- `mermaid` - Mermaid 图表绘制（支持 23 种图表类型）
 
-**本仓库完全开源**，采用 Apache 2.0 许可证。所有技能都可以自由使用、修改和分发。
+---
 
-文档处理技能（docx、pdf、pptx、xlsx）是"可查看源码"的（source-available），但并非开源；我们希望将其作为更复杂技能的参考示例，因为它们已在生产级 AI 应用中实际使用。
+### 👥 social-skills（社交技能集合）
 
-详见各技能目录中的 LICENSE 文件。
+**安装命令：** `/plugin install social-skills@full-stack-skills`
 
-## 贡献
+**技能数量：** 2 个技能
 
-欢迎贡献新的技能！请遵循以下步骤：
+**描述：** 社交与协作技能集合，包含内部沟通、Slack GIF 创建器等。帮助 AI 助手掌握团队协作、内部沟通、社交工具使用等协作技能。
 
-1. Fork 本仓库
-2. 创建新的技能或改进现有技能
-3. 提交 Pull Request
+**技能列表：**
+- `internal-comms` - 内部沟通（状态报告、领导更新、公司通讯、FAQ 等内部文档编写）
+- `slack-gif-creator` - Slack GIF 创建器（为 Slack 消息创建 GIF 动图）
 
-## 合作伙伴技能
+---
 
-技能是教会 Claude 更好使用特定软件的一种好方式。我们看到来自合作伙伴的优秀示例技能时，也可能会在这里进行展示：
+### 📚 teaching-skills（教学技能集合）
 
-- **Notion** - [Notion Skills for Claude](https://www.notion.so/notiondevs/Notion-Skills-for-Claude-28da4445d23180c7af1df7d8615723d0)
+**安装命令：** `/plugin install teaching-skills@full-stack-skills`
 
-## 跨平台适配
+**技能数量：** 3 个技能
 
-本仓库提供了将 skills 适配到其他平台的工具和示例：
+**描述：** 教学与教育相关技能集合，包含课程设计、学习评估、教学资源生成等。帮助 AI 助手掌握教学资源设计、课程规划、学习评估等教育技能。
 
-- **适配器工具**: `adapters/` 目录包含转换脚本
-- **平台支持**: Cursor、Trae、Qoder、CodeBuddy
-- **示例文件**: `adapters/examples/` 包含转换后的示例
+**技能列表：**
+- `course-designer` - 课程设计（课程大纲、学习目标、教学计划、评估方案）
+- `learning-assessor` - 学习评估（测验题目、评估标准、评分 rubric、学习分析）
+- `teaching-resource-generator` - 教学资源生成（课件、练习题、教学案例、学习指南）
 
-详细说明请参考：
-- [跨平台使用指南](PLATFORM_GUIDE.md)
-- [适配器工具文档](adaptersEADME.md)
-- [适配器示例](adaptersXAMPLES.md)
+---
 
-**快速转换：**
-```bash
-cd adapters
-python convert_all.py ../skills ../adapters-output
-```
+### 🔧 utility-skills（工具技能集合）
 
-## 项目愿景
+**安装命令：** `/plugin install utility-skills@full-stack-skills`
 
-**"一个人 = 一个公司"**
+**技能数量：** 1 个技能
 
-在 AI 时代，全栈独立开发者不再需要组建庞大的团队。通过 **full-stack-skills**，AI 助手可以：
+**描述：** 工具与实用技能集合，包含技能创建器，指导如何创建有效的 Agent Skills，扩展 Claude 的能力。帮助 AI 助手和开发者掌握技能设计、技能结构、最佳实践等技能创建技能，支持自定义技能开发。
 
-- **掌握全栈技能**：从产品设计到开发、测试、部署、运维的全流程能力
-- **灵活组合使用**：13 个插件类别，按技能种类组织，可根据项目需求灵活组合
-- **标准化流程**：基于 DDD 和 COLA 架构思想，确保项目质量和可维护性
-- **快速交付**：通过技能组合，快速完成从需求到上线的全流程工作
+**技能列表：**
+- `skill-creator` - 技能创建器（指导如何创建有效的 Agent Skills）
 
-**让 AI 成为你的全栈团队，让独立开发者实现"一个人 = 一个公司"的愿景。**
+## 🛠️ 技术栈
 
-## 参考资源
+### 核心规范
+- **Agent Skills 规范**：严格遵循 [Agent Skills 规范](https://agentskills.io/)，确保技能质量和兼容性
+- **Markdown 格式**：所有技能文档采用 Markdown 格式，便于阅读和维护
+- **YAML Frontmatter**：使用 YAML Frontmatter 定义技能元数据
 
-### 官方文档
+### 技能结构
+- **SKILL.md**：技能主文档，包含描述、使用说明、示例等
+- **examples/**：示例文件目录，包含各种使用场景的示例
+- **templates/**：模板文件目录，包含可复用的模板
+- **scripts/**：脚本文件目录，包含自动化脚本
+- **api/**：API 参考文档目录
+- **reference/**：参考文档目录
+
+### 跨平台支持
+- **Claude Code**：原生支持，通过插件市场安装
+- **Claude.ai**：支持上传自定义技能
+- **Claude API**：通过 API 使用技能
+- **其他平台**：提供适配器工具，支持 Cursor、Trae、Qoder、CodeBuddy、Windsurf 等
+
+## 📦 版本信息
+
+| 项目 | 当前版本 |
+|---|---|
+| full-stack-skills | 2.0.0 |
+| 技能总数 | 170 |
+| 插件类别 | 13 |
+| Agent Skills 规范 | 最新版本 |
+
+## 🔗 相关链接
+
+### 官方资源
+- **Agent Skills 规范**：[https://agentskills.io/](https://agentskills.io/)
+- **Claude Skills 文档**：[https://support.claude.com/en/articles/12512176-what-are-skills](https://support.claude.com/en/articles/12512176-what-are-skills)
+- **使用技能指南**：[https://support.claude.com/en/articles/12512180-using-skills-in-claude](https://support.claude.com/en/articles/12512180-using-skills-in-claude)
+- **创建自定义技能**：[https://support.claude.com/en/articles/12512198-creating-custom-skills](https://support.claude.com/en/articles/12512198-creating-custom-skills)
+- **Skills API 快速开始**：[https://docs.claude.com/en/api/skills-guide#creating-a-skill](https://docs.claude.com/en/api/skills-guide#creating-a-skill)
+
+### 项目资源
+- **跨平台使用指南**：[PLATFORM_GUIDE.md](PLATFORM_GUIDE.md)
+- **平台适配器工具**：[adapters/README.md](adapters/README.md)
+- **角色定义**：[ROLE_DEFINITIONS.md](ROLE_DEFINITIONS.md)
+- **智能体提示词**：[AGENTS_PROMPT.md](AGENTS_PROMPT.md)
+
+### 联系我们
+- **GitHub Issues**：提交问题或建议
+- **问题反馈**：通过 GitHub Issues 反馈
+
+## 🤝 贡献指南
+
+欢迎您为 Full-Stack-Skills 做出贡献！请遵循以下步骤：
+
+1. **Fork 本仓库**
+2. **创建特性分支** (`git checkout -b feature/AmazingFeature`)
+3. **提交更改** (`git commit -m 'Add some AmazingFeature'`)
+4. **推送到分支** (`git push origin feature/AmazingFeature`)
+5. **提交 Pull Request**
+
+### 贡献类型
+- **新增技能**：添加新的技能到相应类别
+- **改进现有技能**：完善技能文档、示例或模板
+- **修复问题**：修复技能中的错误或问题
+- **文档改进**：改进项目文档或使用指南
+
+### 技能创建规范
+- 严格遵循 [Agent Skills 规范](https://agentskills.io/)
+- 参考现有技能的结构和格式
+- 包含完整的官方文档链接
+- 提供清晰的使用示例
+
+## 📄 许可证
+
+本项目采用 [Apache License 2.0](LICENSE) 许可证。
+
+**注意**：本仓库中的许多技能是开源的（Apache 2.0）。我们还在 [`skills/docx`](skills/docx)、[`skills/pdf`](skills/pdf)、[`skills/pptx`](skills/pptx) 和 [`skills/xlsx`](skills/xlsx) 子目录中包含了用于支撑 [Claude 文档能力](https://www.anthropic.com/news/create-files) 的文档创建与编辑技能。这些技能是"可查看源码"的（source-available），但并非开源；我们希望将其作为更复杂技能的参考示例，因为它们已在生产级 AI 应用中实际使用。
+
+## 🙏 致谢
+
+感谢以下开源项目和社区：
+
+- [Anthropic](https://www.anthropic.com/) - Claude AI 和 Agent Skills 规范
+- [Agent Skills](https://agentskills.io/) - Agent Skills 规范制定
+- [Spring Boot](https://spring.io/projects/spring-boot) - Java 应用开发框架
+- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
+- [React](https://react.dev/) - 用于构建用户界面的 JavaScript 库
+- 以及所有贡献者和技能维护者
 
-- [Agent Skills 规范](https://agentskills.io/)
-- [Claude Skills 文档](https://support.claude.com/en/articles/12512176-what-are-skills)
-- [在 Claude 中使用技能](https://support.claude.com/en/articles/12512180-using-skills-in-claude)
-- [如何创建自定义技能](https://support.claude.com/en/articles/12512198-creating-custom-skills)
-- [用 Agent Skills 为现实世界装备智能体](https://anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills)
-- [Anthropic Skills 示例](https://github.com/anthropics/skills)
-- [Skills API Quickstart](https://docs.claude.com/en/api/skills-guide#creating-a-skill)
+---
 
-### 项目文档
+<div align="center">
 
-- [ROLE_DEFINITIONS.md](ROLE_DEFINITIONS.md) - IT行业全生命周期岗位职责定义（23个岗位，供参考）
-- [PLANNING_SKILL_CATEGORIES.md](PLANNING_SKILL_CATEGORIES.md) - 全栈技能库规划文档（按技能种类组织）
-- [PLATFORM_GUIDE.md](PLATFORM_GUIDE.md) - 跨平台使用指南
+**如果这个项目对你有帮助，请给我们一个 ⭐️**
 
-## 联系方式
+Made with ❤️ by TeachingAI Team
 
-如有问题或建议，请通过 GitHub Issues 联系我们。
+</div>

ROLE_DEFINITIONS.md

@@ -289,7 +289,6 @@
 
 **Agent Skills：**
 - ddd-clean-architecture, ddd-microservices（DDD架构）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - api-doc-generator（API文档生成）
@@ -345,7 +344,6 @@
 
 **Agent Skills：**
 - ddd-cola, ddd-microservices, ddd-event-driven, ddd-hexagonal-architecture, ddd-clean-architecture（DDD架构）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - spring-boot, spring-cloud, spring-cloud-alibaba（Spring框架）
@@ -453,7 +451,6 @@
 
 **Agent Skills：**
 - ddd-clean-architecture（DDD架构）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - mysql, postgresql, oracle, mongodb, redis（数据库）
@@ -626,7 +623,6 @@
 **Agent Skills：**
 - ddd-cola, ddd-microservices, ddd-event-driven, ddd-hexagonal-architecture, ddd-clean-architecture（DDD架构）
 - ddd4j-project-builder（DDD项目构建）
-- c4-model（C4模型）
 - plantuml（PlantUML）
 - drawio-architecture（架构图绘制）
 - api-doc-generator（API文档生成）
@@ -1097,7 +1093,6 @@
 - cloud-tencent-cvm, cloud-tencent-cos, cloud-tencent-cdb（腾讯云服务）
 - cloud-huawei-ecs, cloud-huawei-obs, cloud-huawei-rds（华为云服务）
 - ddd-clean-architecture, ddd-microservices（DDD架构）
-- c4-model（C4模型）
 - drawio-architecture（架构图绘制）
 - api-doc-generator（API文档生成）
 - documentation-builder（文档构建）
@@ -1227,7 +1222,6 @@
 - cloud-tencent-cvm, cloud-tencent-cos, cloud-tencent-cdb（腾讯云服务）
 - cloud-huawei-ecs, cloud-huawei-obs, cloud-huawei-rds（华为云服务）
 - ddd-clean-architecture, ddd-microservices（DDD架构）
-- c4-model（C4模型）
 - drawio-architecture（架构图绘制）
 - api-doc-generator（API文档生成）
 - documentation-builder（文档构建）

scripts/update-skill-descriptions.py

@@ -119,7 +119,6 @@ SKILL_DESCRIPTIONS = {
     "ddd-event-driven": "Provides comprehensive guidance for event-driven architecture including domain events, event sourcing, CQRS, and event patterns. Use when the user asks about event-driven architecture, needs to implement event-driven systems, or work with domain events.",
     "ddd-hexagonal-architecture": "Provides comprehensive guidance for hexagonal architecture including ports and adapters, domain isolation, and dependency inversion. Use when the user asks about hexagonal architecture, needs to implement ports and adapters pattern, or structure applications with hexagonal architecture.",
     "ddd-clean-architecture": "Provides comprehensive guidance for clean architecture including layer separation, dependency rules, and architectural patterns. Use when the user asks about clean architecture, needs to implement clean architecture principles, or structure applications with clean architecture.",
-    "c4-model": "Provides comprehensive guidance for C4 model including context diagrams, container diagrams, component diagrams, and code diagrams. Use when the user asks about C4 model, needs to create architecture diagrams, document system architecture, or visualize software architecture.",
     "plantuml": "Provides comprehensive guidance for PlantUML including diagram syntax, UML diagrams, sequence diagrams, and code generation. Use when the user asks about PlantUML, needs to create UML diagrams, generate diagrams from code, or document software design.",
     "drawio-architecture": "Provides comprehensive guidance for draw.io architecture diagrams including diagram creation, shapes, templates, and collaboration. Use when the user asks about draw.io architecture, needs to create architecture diagrams, design system diagrams, or collaborate on diagrams.",
     "drawio-flowchart": "Provides comprehensive guidance for draw.io flowcharts including flowchart creation, shapes, connectors, and diagramming. Use when the user asks about draw.io flowcharts, needs to create flowcharts, design process diagrams, or visualize workflows.",

skills/mermaid/SKILL.md

@@ -1,27 +1,62 @@
 ---
 name: mermaid
-description: Provides comprehensive guidance for creating Mermaid diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, and all other Mermaid diagram types. Use when the user requests to create, draw, or visualize any diagram, flowchart, or structured chart using Mermaid syntax.
+description: Provides comprehensive guidance for creating Mermaid diagrams. Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Mermaid is particularly well-suited for use in Markdown documents, GitHub, GitLab, wikis, blogs, and other Markdown-based platforms. Use when the user wants to draw, create, generate, make, build, or visualize any diagram, chart, graph, flowchart, architecture diagram, sequence diagram, class diagram, state diagram, Gantt chart, mindmap, timeline, or any other visual diagram in Markdown-friendly format. This skill covers all 23+ Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, quadrant charts, Git graphs, C4 diagrams, mindmaps, timelines, and more. Always use this skill when the user mentions Mermaid, needs diagrams for Markdown documentation, or wants quick diagrams that render directly in Markdown renderers.
 license: Complete terms in LICENSE.txt
 ---
 
 ## When to use this skill
 
-Use this skill whenever the user wants to:
-- Create any type of diagram or flowchart
-- Visualize processes, workflows, or system architectures
-- Draw sequence diagrams, class diagrams, or state diagrams
-- Create project timelines (Gantt charts)
-- Visualize data relationships (ER diagrams, entity relationships)
-- Create user journey maps
-- Generate pie charts, quadrant charts, or other data visualizations
-- Draw Git branching structures
-- Create mindmaps or hierarchical structures
-- Visualize system architectures (C4 diagrams)
-- Create timelines or event sequences
-- Generate any other diagram type supported by Mermaid
+**ALWAYS use this skill when the user mentions:**
+- Drawing, creating, generating, making, or building any diagram, chart, or graph
+- Visualizing processes, workflows, systems, architectures, or data
+- Any request to "画图" (draw diagram), "绘图" (draw chart), "生成图" (generate diagram), "创建图" (create diagram)
+- Flowcharts, sequence diagrams, class diagrams, state diagrams, or any diagram type
+- Architecture diagrams, system diagrams, or design diagrams
+- Data visualization, charts, or graphs
+- Process flows, workflows, or business processes
+- Project timelines, schedules, or Gantt charts
+- User journeys, mindmaps, or hierarchical structures
+- Database schemas, ER diagrams, or entity relationships
+- Git branching structures or version control diagrams
+- Any visual representation or diagrammatic content
+
+**Trigger phrases include:**
+- "画一个图" (draw a diagram), "画流程图" (draw flowchart), "画架构图" (draw architecture diagram)
+- "创建一个图表" (create a chart), "生成一个图" (generate a diagram)
+- "帮我画" (help me draw), "给我画" (draw for me), "画出来" (draw it out)
+- "用图表示" (represent with diagram), "可视化" (visualize), "画个图说明" (draw a diagram to explain)
+- "流程图" (flowchart), "时序图" (sequence diagram), "类图" (class diagram), "状态图" (state diagram)
+- "架构图" (architecture diagram), "系统图" (system diagram), "设计图" (design diagram)
+- "甘特图" (Gantt chart), "思维导图" (mindmap), "时间线" (timeline)
+- "用 Mermaid" (use Mermaid), "Mermaid 画图" (draw with Mermaid), "Mermaid 语法" (Mermaid syntax)
+- Any mention of "diagram", "chart", "graph", "flowchart", "visualization", "drawing", "Mermaid"
+
+**IMPORTANT: Mermaid vs PlantUML - Two Different Diagramming Tools:**
+
+Mermaid and PlantUML are two different diagramming tools with different purposes:
+
+- **Mermaid**: A JavaScript-based diagramming tool designed for Markdown documentation. It uses Markdown-inspired syntax and renders directly in Markdown renderers (GitHub, GitLab, wikis, blogs). Best for quick diagrams, Markdown documentation, and simple visualizations.
+
+- **PlantUML**: A component that allows you to create various UML diagrams through simple textual descriptions. It focuses on UML standards and complex system architecture. Best for UML diagrams, enterprise architecture, C4 models, and diagrams requiring precise UML notation.
+
+**When both PlantUML and Mermaid skills are matched:**
+- If the user explicitly mentions "Mermaid" or "Markdown diagram", use this skill (Mermaid)
+- If the user explicitly mentions "PlantUML" or "UML diagram", use the PlantUML skill instead
+- If the user mentions both or neither, **ALWAYS ask the user to choose**: "I can create this diagram using either Mermaid or PlantUML. Mermaid is a JavaScript-based tool designed for Markdown documentation and renders directly in GitHub/GitLab. PlantUML is focused on UML diagrams and enterprise architecture. Which would you prefer?"
 
 ## How to use this skill
 
+**CRITICAL: Mermaid is a Markdown-focused diagramming tool. This skill should be triggered when the user explicitly mentions "Mermaid", needs diagrams for Markdown documentation, or wants diagrams that render directly in Markdown renderers (GitHub, GitLab, wikis, blogs).**
+
+**Trigger this skill when you see:**
+- User says "用 Mermaid" (use Mermaid), "Mermaid 画图" (draw with Mermaid), "Markdown 图" (Markdown diagram)
+- User needs diagrams for Markdown documentation, GitHub, GitLab, wikis, or blogs
+- User wants quick diagrams that render directly in Markdown renderers
+- User mentions any diagram type for Markdown: flowchart, sequence diagram, class diagram, etc.
+- User wants to visualize, represent, or illustrate something with a diagram in Markdown format
+
+**When both PlantUML and Mermaid are matched, ALWAYS ask the user to choose the output format or tool, as they are two different diagramming tools with different purposes.**
+
 To create a Mermaid diagram:
 
 1. **Identify the diagram type** from the user's request:
@@ -179,6 +214,38 @@ If a beta diagram type is not supported, the example files provide flowchart alt
 6. **Organize files**: Save diagrams in appropriate directories (`docs/diagrams/` or `diagrams/`)
 7. **Use descriptive names**: Name diagram files clearly (e.g., `system-architecture.md`, `user-flow.md`)
 
+## Mermaid vs PlantUML - Key Differences
+
+**Mermaid (This Skill):**
+- **Purpose**: JavaScript-based diagramming tool designed for Markdown documentation
+- **Main Use Case**: Help documentation catch up with development
+- **Best For**: 
+  - Markdown documents, GitHub, GitLab, wikis, blogs
+  - Quick diagrams that render directly in Markdown renderers
+  - Simple flowcharts, sequence diagrams, basic charts
+  - Rapid prototyping and iteration
+  - When the user explicitly requests Mermaid or needs Markdown-compatible diagrams
+
+**PlantUML (Different Skill):**
+- **Purpose**: Component for creating various UML diagrams through textual descriptions
+- **Main Use Case**: UML-focused diagramming with emphasis on standard UML notation
+- **Best For**:
+  - Complex UML diagrams requiring precise notation (class, component, deployment diagrams)
+  - Enterprise architecture diagrams and C4 model diagrams
+  - Standard UML compliance requirements
+  - Diagrams requiring advanced customization, styling, or layout control
+  - When the user explicitly requests PlantUML or UML diagrams
+
+**When Both Skills Are Matched:**
+- **ALWAYS ask the user to choose**: "I can create this diagram using either Mermaid or PlantUML. Mermaid is a JavaScript-based tool designed for Markdown documentation and renders directly in GitHub/GitLab. PlantUML is focused on UML diagrams and enterprise architecture. Which would you prefer?"
+- These are two different diagramming tools with different purposes - do not automatically choose one
+- If the user explicitly mentions one tool, use that tool
+- If the user mentions both or neither, ask the user to choose based on their needs
+
 ## Keywords
 
-mermaid, diagram, flowchart, flow chart, sequence diagram, class diagram, state diagram, entity relationship, ER diagram, user journey, Gantt chart, pie chart, quadrant chart, requirement diagram, Git graph, C4 diagram, mindmap, timeline, ZenUML, Sankey diagram, XY chart, block diagram, packet diagram, Kanban, architecture diagram, radar chart, treemap, 流程图, 时序图, 类图, 状态图, 实体关系图, 用户旅程图, 甘特图, 饼图, 象限图, 需求图, Git图, C4图, 思维导图, 时间线图, 桑基图, XY图, 方块图, 数据包图, 看板图, 架构图, 雷达图, 树状图
+**English keywords:**
+mermaid, diagram, chart, graph, flowchart, flow chart, sequence diagram, class diagram, state diagram, entity relationship, ER diagram, user journey, Gantt chart, pie chart, quadrant chart, requirement diagram, Git graph, C4 diagram, mindmap, timeline, ZenUML, Sankey diagram, XY chart, block diagram, packet diagram, Kanban, architecture diagram, radar chart, treemap, draw, create, generate, make, build, visualize, visualization, drawing, plotting, mapping, schematics, blueprint, design diagram, system diagram, process flow, workflow, data visualization, visual representation
+
+**Chinese keywords (中文关键词):**
+流程图, 时序图, 类图, 状态图, 实体关系图, 用户旅程图, 甘特图, 饼图, 象限图, 需求图, Git图, C4图, 思维导图, 时间线图, 桑基图, XY图, 方块图, 数据包图, 看板图, 架构图, 雷达图, 树状图, 画图, 绘图, 生成图, 创建图, 制作图, 画流程图, 画架构图, 画时序图, 画类图, 画状态图, 画甘特图, 画思维导图, 画时间线, 可视化, 图表, 图形, 示意图, 设计图, 系统图, 流程图, 架构图, 时序图, 类图, 状态图, 甘特图, 思维导图, 时间线, 用图表示, 画出来, 给我画, 帮我画, 画一个, 创建一个图, 生成一个图, 画个图说明, 用图表展示, 可视化展示

skills/plantuml/SKILL.md

@@ -1,22 +1,261 @@
 ---
 name: plantuml
-description: Provides comprehensive guidance for PlantUML including diagram syntax, UML diagrams, sequence diagrams, and code generation. Use when the user asks about PlantUML, needs to create UML diagrams, generate diagrams from code, or document software design.
+description: Provides comprehensive guidance for creating PlantUML diagrams. PlantUML is a component that allows you to create various UML diagrams through simple textual descriptions. From sequence diagrams to deployment diagrams and beyond, PlantUML provides an easy way to create visual representations of complex systems. PlantUML is primarily focused on UML standards and is ideal for UML diagrams, enterprise architecture, C4 models, and diagrams requiring precise UML notation. Use when the user wants to draw, create, generate, make, build, or visualize any UML diagram, architecture diagram, or PlantUML-supported diagram type. This skill covers ALL PlantUML diagram types: UML Diagrams (sequence, use case, class, object, activity, component, deployment, state, timing diagrams), and Non-UML Diagrams (JSON/YAML data, EBNF, regex, network diagrams, Salt wireframes, Archimate, SDL, Ditaa, Gantt, chronology, mindmap, WBS, mathematical notations, ER diagrams, IE diagrams, ER Chen's notation, C4 model diagrams). Always use this skill when the user mentions PlantUML, UML diagrams, or complex architecture diagrams that require precise UML notation or C4 model support.
 license: Complete terms in LICENSE.txt
 ---
 
 ## When to use this skill
 
-Use this skill whenever the user wants to:
-- [待完善：根据具体工具添加使用场景]
+**ALWAYS use this skill when the user mentions:**
+- PlantUML, UML diagrams, or explicitly requests PlantUML syntax
+- Complex architecture diagrams, C4 model diagrams, or enterprise-level diagrams
+- Standard UML diagrams: class diagrams, sequence diagrams, component diagrams, deployment diagrams, state diagrams, activity diagrams, use case diagrams
+- Architecture documentation requiring precise UML notation
+- Diagrams that need advanced customization, styling, or layout control
+- Enterprise system architecture, microservices architecture, or distributed system diagrams
+- Any request to "用 PlantUML 画图" (draw with PlantUML), "用 UML 图" (use UML diagram), "画类图" (draw class diagram), "画组件图" (draw component diagram)
+
+**Trigger phrases include:**
+- "用 PlantUML" (use PlantUML), "用 PlantUML 画" (draw with PlantUML), "PlantUML 语法" (PlantUML syntax)
+- "UML 图" (UML diagram), "类图" (class diagram), "时序图" (sequence diagram), "组件图" (component diagram), "部署图" (deployment diagram)
+- "C4 模型" (C4 model), "架构图" (architecture diagram), "系统架构图" (system architecture diagram)
+- "活动图" (activity diagram), "状态图" (state diagram), "用例图" (use case diagram)
+- "画 UML" (draw UML), "UML 类图" (UML class diagram), "UML 时序图" (UML sequence diagram)
+- Any mention of "PlantUML", "UML", "class diagram", "sequence diagram", "component diagram", "deployment diagram", "C4 model"
+
+**IMPORTANT: PlantUML vs Mermaid - Two Different Diagramming Tools:**
+
+PlantUML and Mermaid are two different diagramming tools with different purposes:
+
+- **PlantUML**: A component that allows you to create various UML diagrams through simple textual descriptions. From sequence diagrams to deployment diagrams and beyond, PlantUML provides an easy way to create visual representations of complex systems. PlantUML is primarily focused on UML standards and is ideal for UML diagrams, enterprise architecture, C4 models, and diagrams requiring precise UML notation.
+
+- **Mermaid**: A JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions. The main purpose of Mermaid is to help documentation catch up with development. Mermaid is particularly well-suited for use in Markdown documents, GitHub, GitLab, wikis, and blogs.
+
+**When both PlantUML and Mermaid skills are matched:**
+- If the user explicitly mentions "PlantUML" or "UML diagram", use this skill (PlantUML)
+- If the user explicitly mentions "Mermaid" or "Markdown diagram", use the Mermaid skill instead
+- If the user mentions both or neither, **ALWAYS ask the user to choose**: "I can create this diagram using either PlantUML or Mermaid. PlantUML is focused on UML diagrams and enterprise architecture. Mermaid is a JavaScript-based tool designed for Markdown documentation and renders directly in GitHub/GitLab. Which would you prefer?"
 
 ## How to use this skill
 
-[待完善：根据具体工具添加使用指南]
+**CRITICAL: PlantUML is a UML-focused diagramming tool. This skill should be triggered when the user explicitly mentions PlantUML, UML diagrams, or needs complex architecture diagrams with precise UML notation.**
+
+**Trigger this skill when you see:**
+- User says "用 PlantUML" (use PlantUML), "PlantUML 画图" (draw with PlantUML), "UML 图" (UML diagram)
+- User mentions UML diagram types: class diagram, sequence diagram, component diagram, deployment diagram, etc.
+- User needs C4 model diagrams or enterprise architecture diagrams
+- User explicitly requests PlantUML syntax or mentions PlantUML
+- User needs diagrams with precise UML notation or standard UML compliance
+
+**When both PlantUML and Mermaid are matched, ALWAYS ask the user to choose the output format or tool, as they are two different diagramming tools with different purposes.**
+
+To create a PlantUML diagram:
+
+1. **Identify the diagram type** from the user's request:
+   
+   **UML Diagrams:**
+   - Sequence diagram/时序图 → `@startuml` ... `@enduml` with `participant` or `actor`
+   - Use case diagram/用例图 → `@startuml` ... `@enduml` with `actor`, `usecase`
+   - Class diagram/类图 → `@startuml` ... `@enduml` with `class`
+   - Object diagram/对象图 → `@startuml` ... `@enduml` with `object`
+   - Activity diagram/活动图 → `@startuml` ... `@enduml` with `start`, `stop`, `if`, `while`, etc.
+   - Component diagram/组件图 → `@startuml` ... `@enduml` with `component`, `interface`, `package`
+   - Deployment diagram/部署图 → `@startuml` ... `@enduml` with `node`, `database`, `cloud`
+   - State diagram/状态图 → `@startuml` ... `@enduml` with `state`, `[*]`
+   - Timing diagram/时序图 → `@startuml` ... `@enduml` with `concise` or `robust`
+   
+   **Non-UML Diagrams:**
+   - JSON data/JSON 数据图 → `@startjson` ... `@endjson`
+   - YAML data/YAML 数据图 → `@startyaml` ... `@endyaml`
+   - EBNF (Extended Backus-Naur Form)/EBNF 图 → `@startebnf` ... `@endebnf`
+   - Regex (Regular Expression)/正则表达式图 → `@startregex` ... `@endregex`
+   - Network diagram (nwdiag)/网络图 → `@startuml` ... `@enduml` with network elements
+   - Salt (Wireframe graphical interface)/线框图 → `@startsalt` ... `@endsalt`
+   - Archimate diagram/架构图 → `@startuml` ... `@enduml` with Archimate elements
+   - SDL (Specification and Description Language)/SDL 图 → `@startsdl` ... `@endsdl`
+   - Ditaa diagram/Ditaa 图 → `@startditaa` ... `@endditaa`
+   - Gantt diagram/甘特图 → `@startgantt` ... `@endgantt`
+   - Chronology diagram/时间线图 → `@startuml` ... `@enduml` with chronology syntax
+   - MindMap diagram/思维导图 → `@startmindmap` ... `@endmindmap`
+   - WBS (Work Breakdown Structure)/工作分解结构图 → `@startwbs` ... `@endwbs`
+   - Mathematical Notations (AsciiMath, JLaTeXMath)/数学公式图 → `@startmath` ... `@endmath` or `@startlatex` ... `@endlatex`
+   - Entity Relationship (ER) diagram/实体关系图 → `@startuml` ... `@enduml` with `entity`
+   - Information Engineering (IE) diagram/信息工程图 → `@startuml` ... `@enduml` with IE notation
+   - Entity Relationship (ER) diagram (Chen's notation)/ER 图（陈氏表示法） → `@startuml` ... `@enduml` with Chen's notation
+   - C4 diagram/C4 模型图 → `@startuml` ... `@enduml` with C4-PlantUML library
+
+2. **Load the appropriate example file** from the `examples/` directory:
+   
+   **UML Diagrams:**
+   - `examples/sequence.md` - For sequence diagrams showing interactions
+   - `examples/use-case.md` - For use case diagrams
+   - `examples/class.md` - For class diagrams and object-oriented designs
+   - `examples/object.md` - For object diagrams
+   - `examples/activity.md` - For activity diagrams and workflows
+   - `examples/component.md` - For component diagrams and system architecture
+   - `examples/deployment.md` - For deployment diagrams and infrastructure
+   - `examples/state.md` - For state diagrams and state machines
+   - `examples/timing.md` - For timing diagrams
+   
+   **Non-UML Diagrams:**
+   - `examples/json-yaml.md` - For JSON/YAML data visualization
+   - `examples/ebnf.md` - For EBNF grammar diagrams
+   - `examples/regex.md` - For regular expression diagrams
+   - `examples/network.md` - For network diagrams (nwdiag)
+   - `examples/salt.md` - For Salt wireframes and UI mockups
+   - `examples/archimate.md` - For Archimate architecture diagrams
+   - `examples/sdl.md` - For SDL (Specification and Description Language) diagrams
+   - `examples/ditaa.md` - For Ditaa ASCII art diagrams
+   - `examples/gantt.md` - For Gantt charts and project timelines
+   - `examples/chronology.md` - For chronology and timeline diagrams
+   - `examples/mindmap.md` - For mindmaps
+   - `examples/wbs.md` - For work breakdown structure diagrams
+   - `examples/math.md` - For mathematical notations (AsciiMath, LaTeX)
+   - `examples/er.md` - For Entity-Relationship diagrams
+   - `examples/ie.md` - For Information Engineering diagrams
+   - `examples/er-chen.md` - For ER diagrams using Chen's notation
+   - `examples/c4.md` - For C4 model architecture diagrams
+
+3. **Follow the specific instructions** in that example file for syntax, structure, and best practices
+
+   **Important Notes**:
+   - PlantUML requires Java runtime environment and Graphviz (or PlantUML server) for rendering
+   - All PlantUML diagrams must be wrapped in `@startuml` ... `@enduml` (or diagram-specific tags)
+   - Use `!include` directive to include external files or libraries (e.g., C4-PlantUML)
+   - Use `!define` and `!include` for reusable components and themes
+   - PlantUML supports extensive styling with `skinparam` directives
+   - For C4 diagrams, use `!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml`
+
+4. **Generate the PlantUML code** wrapped in a Markdown code block with proper syntax highlighting:
+   
+   **IMPORTANT**: Always wrap the PlantUML code in a Markdown code block with `plantuml` language tag. This ensures the format is preserved when users copy the content.
+   
+   **Example format** (use actual PlantUML syntax, not placeholders):
+   ```plantuml
+   @startuml
+   Alice -> Bob: Hello
+   Bob -> Alice: Hi
+   @enduml
+   ```
+   
+   **Output Format Requirements**:
+   - Always use triple backticks (```) with `plantuml` language tag
+   - Never output raw PlantUML code without code block markers
+   - The code block must be complete and properly formatted
+   - Use actual valid PlantUML syntax, not placeholders like `<diagram-type>` or `...diagram content...`
+   - Always include `@startuml` and `@enduml` tags (or diagram-specific start/end tags)
+   - This ensures users can copy the code without losing formatting
+
+5. **Include styling and configuration** when needed:
+   - Use `skinparam` directives for global styling
+   - Use `skinparam <element> { }` for element-specific styling
+   - Use `!theme` directive for predefined themes
+   - Use `!define` for custom colors and styles
+   - Use `!include` for external libraries and components
+
+6. **Validate the syntax**:
+   - Ensure all required elements are present
+   - Check that `@startuml` and `@enduml` tags are properly paired
+   - Verify relationships and connections are properly defined
+   - For class diagrams: Check visibility modifiers (`+`, `-`, `#`, `~`)
+   - For sequence diagrams: Verify participant declarations and message syntax
+   - For activity diagrams: Ensure proper control flow syntax
+   - For component diagrams: Verify component and interface definitions
+   - For C4 diagrams: Ensure C4-PlantUML library is included
+
+7. **Save the diagram to project directory**:
+   - **Default behavior**: When generating a PlantUML diagram, save it to the current project directory
+   - **Recommended locations**:
+     - `docs/diagrams/` - For documentation diagrams
+     - `docs/` - For general documentation
+     - `diagrams/` - For standalone diagram files
+     - Current directory (`.`) - If no specific directory structure exists
+   - **File naming**: Use descriptive names like `system-architecture.puml`, `user-flow.puml`, `database-schema.puml`, etc.
+   - **File format**: Save as `.puml` file (PlantUML standard extension)
+   - **Example**: If user requests a system architecture diagram, save it as `docs/diagrams/system-architecture.puml` or `diagrams/system-architecture.puml`
+   - **Ask if needed**: If the project structure is unclear, ask the user where they'd like the diagram saved, but default to creating a `docs/` or `diagrams/` directory if it doesn't exist
+
+**Output Format and File Saving**:
+
+When generating a diagram, follow this response structure:
+
+1. **Save the file first**: Create the diagram file in the project directory (e.g., `docs/diagrams/system-architecture.puml`)
+
+2. **Inform the user**: Tell them where the file was saved
+
+3. **Display the diagram**: Show the PlantUML code in a properly formatted Markdown code block with `plantuml` language tag
+
+**Example Response Structure**:
+- First line: "I've created the PlantUML diagram and saved it to `docs/diagrams/system-architecture.puml`."
+- Then show the diagram wrapped in a code block:
+  - Start with: three backticks + `plantuml` + newline
+  - Then the PlantUML code (with `@startuml` and `@enduml` tags)
+  - End with: three backticks + newline
+
+**Critical Requirements**:
+- The PlantUML code block MUST ALWAYS be properly formatted with triple backticks (```) and `plantuml` language tag
+- NEVER output raw PlantUML code without code block markers
+- The code block must be complete (opening and closing backticks)
+- Always include `@startuml` and `@enduml` tags (or diagram-specific start/end tags)
+- This ensures users can copy the code without losing formatting
+- Always save the diagram file to the current project directory (default: `docs/diagrams/` or `diagrams/`)
+- Use `.puml` file extension for PlantUML files
+
+If the diagram type doesn't match any existing example, refer to the PlantUML documentation (https://plantuml.com/zh/) or ask the user for clarification about the desired visualization.
+
+## PlantUML vs Mermaid - Key Differences
+
+**PlantUML (This Skill):**
+- **Purpose**: Component for creating various UML diagrams through simple textual descriptions
+- **Main Use Case**: From sequence diagrams to deployment diagrams and beyond, PlantUML provides an easy way to create visual representations of complex systems
+- **Focus**: Primarily focused on UML standards
+- **Best For**:
+  - Complex UML diagrams requiring precise notation (class, component, deployment diagrams)
+  - Enterprise architecture diagrams and C4 model diagrams
+  - Standard UML compliance requirements
+  - Diagrams requiring advanced customization, styling, or layout control
+  - When the user explicitly requests PlantUML or UML diagrams
+
+**Mermaid (Different Skill):**
+- **Purpose**: JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions
+- **Main Use Case**: Help documentation catch up with development
+- **Focus**: Markdown documentation and Markdown renderers
+- **Best For**:
+  - Markdown documents, GitHub, GitLab, wikis, blogs
+  - Quick diagrams that render directly in Markdown renderers
+  - Simple flowcharts, sequence diagrams, basic charts
+  - Rapid prototyping and iteration
+  - When the user explicitly requests Mermaid or needs Markdown-compatible diagrams
+
+**When Both Skills Are Matched:**
+- **ALWAYS ask the user to choose**: "I can create this diagram using either PlantUML or Mermaid. PlantUML is focused on UML diagrams and enterprise architecture. Mermaid is a JavaScript-based tool designed for Markdown documentation and renders directly in GitHub/GitLab. Which would you prefer?"
+- These are two different diagramming tools with different purposes - do not automatically choose one
+- If the user explicitly mentions one tool, use that tool
+- If the user mentions both or neither, ask the user to choose based on their needs
+
+## Resources
+
+- **Official Documentation**: https://plantuml.com/zh/
+- **GitHub Repository**: https://github.com/plantuml/plantuml
+- **C4-PlantUML Library**: https://github.com/plantuml-stdlib/C4-PlantUML
+- **PlantUML Guide**: https://plantuml.com/zh/guide
+- **PlantUML Language Reference**: https://plantuml.com/zh/guide
 
 ## Best Practices
 
-[待完善：根据具体工具添加最佳实践]
+1. **Always use code blocks**: Wrap all PlantUML code in Markdown code blocks with `plantuml` language tag
+2. **Include proper tags**: Always include `@startuml` and `@enduml` (or diagram-specific tags)
+3. **Use includes for libraries**: Use `!include` for C4-PlantUML and other standard libraries
+4. **Organize files**: Save diagrams in appropriate directories (`docs/diagrams/` or `diagrams/`)
+5. **Use descriptive names**: Name diagram files clearly (e.g., `system-architecture.puml`, `user-flow.puml`)
+6. **Leverage styling**: Use `skinparam` and themes for consistent styling
+7. **Validate syntax**: Check PlantUML syntax before saving to ensure proper rendering
+8. **Consider rendering**: Note that PlantUML requires Java and Graphviz (or PlantUML server) for rendering
 
 ## Keywords
 
-[待完善：根据具体工具添加关键词]
+**English keywords:**
+plantuml, UML, class diagram, sequence diagram, use case diagram, activity diagram, component diagram, state diagram, deployment diagram, object diagram, timing diagram, network diagram, Archimate diagram, Gantt chart, mindmap, WBS diagram, JSON diagram, YAML diagram, EBNF, regex, regular expression, Salt wireframe, SDL, Ditaa, chronology diagram, mathematical notation, AsciiMath, LaTeX, ER diagram, entity relationship diagram, IE diagram, information engineering diagram, Chen's notation, C4 model, C4 diagram, architecture diagram, system architecture, enterprise architecture, microservices architecture, draw, create, generate, make, build, visualize, visualization, drawing, UML notation, standard UML
+
+**Chinese keywords (中文关键词):**
+PlantUML, UML, 类图, 时序图, 用例图, 活动图, 组件图, 状态图, 部署图, 对象图, 时序图, 网络图, 架构图, 甘特图, 思维导图, 工作分解结构图, JSON 图, YAML 图, EBNF 图, 正则表达式图, 线框图, SDL 图, Ditaa 图, 时间线图, 数学公式图, 实体关系图, ER 图, 信息工程图, IE 图, 陈氏表示法, C4 模型, C4 图, 架构图, 系统架构图, 企业架构图, 微服务架构图, 画图, 绘图, 生成图, 创建图, 制作图, 画类图, 画时序图, 画组件图, 画部署图, 画活动图, 画状态图, 画用例图, 画对象图, 画网络图, 画线框图, 画 ER 图, 用 PlantUML, PlantUML 语法, UML 图, UML 类图, UML 时序图, 可视化, 图表, 图形, 示意图, 设计图, 系统图, 用图表示, 画出来, 给我画, 帮我画, 画一个, 创建一个图, 生成一个图, 画个图说明, 用图表展示, 可视化展示

skills/plantuml/examples/activity.md

@@ -0,0 +1,135 @@
+# Activity Diagram | 活动图
+
+**官方文档**: https://plantuml.com/zh/activity-diagram-legacy
+
+## Instructions
+
+Activity diagrams show workflows and business processes. They are useful for modeling the flow of control from activity to activity.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `start` and `stop` for start and end nodes
+- Use `:` for activities
+- Use `if`, `then`, `else`, `endif` for decisions
+- Use `while`, `endwhile` for loops
+- Use `fork`, `fork again`, `end fork` for parallel activities
+- Use `partition` to group activities
+- Use `note` for annotations
+
+## Example: Basic Activity Diagram
+
+```plantuml
+@startuml
+start
+:Login;
+if (Authentication successful?) then (yes)
+  :Show dashboard;
+else (no)
+  :Show error message;
+  stop
+endif
+stop
+@enduml
+```
+
+## Example: With Decisions and Loops
+
+```plantuml
+@startuml
+start
+:Initialize;
+while (More items?) is (yes)
+  :Process item;
+  if (Item valid?) then (yes)
+    :Save item;
+  else (no)
+    :Log error;
+  endif
+endwhile (no)
+:Finalize;
+stop
+@enduml
+```
+
+## Example: With Parallel Activities
+
+```plantuml
+@startuml
+start
+:Start process;
+fork
+  :Task 1;
+fork again
+  :Task 2;
+fork again
+  :Task 3;
+end fork
+:Combine results;
+stop
+@enduml
+```
+
+## Example: With Partitions
+
+```plantuml
+@startuml
+start
+partition "User" {
+  :Login;
+  :Enter data;
+}
+partition "System" {
+  :Validate data;
+  :Process data;
+  :Save data;
+}
+partition "User" {
+  :View results;
+}
+stop
+@enduml
+```
+
+## Example: Complex Workflow
+
+```plantuml
+@startuml
+start
+:Receive order;
+if (Order valid?) then (yes)
+  :Check inventory;
+  if (In stock?) then (yes)
+    :Reserve items;
+    :Process payment;
+    if (Payment successful?) then (yes)
+      :Ship order;
+      :Send confirmation;
+      stop
+    else (no)
+      :Release reservation;
+      :Notify customer;
+      stop
+    endif
+  else (no)
+    :Backorder;
+    :Notify customer;
+    stop
+  endif
+else (no)
+  :Reject order;
+  stop
+endif
+@enduml
+```
+
+## Key Points
+
+- Use `start` and `stop` for start and end nodes
+- Use `:` for activity labels
+- Use `if`, `then`, `else`, `endif` for decision nodes
+- Use `while`, `endwhile` for loops
+- Use `fork`, `fork again`, `end fork` for parallel execution
+- Use `partition` to group related activities
+- Use `note` for annotations
+- Activities are connected automatically in sequence

skills/plantuml/examples/archimate.md

@@ -0,0 +1,87 @@
+# Archimate Diagram | Archimate 架构图
+
+**官方文档**: https://plantuml.com/zh/archimate-diagram
+
+## Instructions
+
+Archimate diagrams model enterprise architecture using the ArchiMate standard. They are useful for enterprise architecture documentation.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use ArchiMate elements: Application, Business, Technology layers
+- Use relationships to show dependencies
+- Follow ArchiMate notation standards
+
+## Example: Basic Archimate Diagram
+
+```plantuml
+@startuml
+!include <archimate/Archimate>
+
+archimate #Application "Order Management System" as OMS
+archimate #Business "Order Process" as OP
+archimate #Technology "Database Server" as DB
+
+OP --> OMS
+OMS --> DB
+@enduml
+```
+
+## Example: Three-Layer Architecture
+
+```plantuml
+@startuml
+!include <archimate/Archimate>
+
+archimate #Business "Customer Service" as CS
+archimate #Business "Order Processing" as OP
+archimate #Application "CRM System" as CRM
+archimate #Application "Order System" as OS
+archimate #Technology "Application Server" as AS
+archimate #Technology "Database" as DB
+
+CS --> CRM
+OP --> OS
+CRM --> AS
+OS --> AS
+AS --> DB
+@enduml
+```
+
+## Example: Enterprise Architecture
+
+```plantuml
+@startuml
+!include <archimate/Archimate>
+
+package "Business Layer" {
+  archimate #Business "Customer Management" as CM
+  archimate #Business "Order Management" as OM
+}
+
+package "Application Layer" {
+  archimate #Application "CRM Application" as CRMA
+  archimate #Application "Order Application" as OA
+}
+
+package "Technology Layer" {
+  archimate #Technology "Web Server" as WS
+  archimate #Technology "Database" as DB
+}
+
+CM --> CRMA
+OM --> OA
+CRMA --> WS
+OA --> WS
+WS --> DB
+@enduml
+```
+
+## Key Points
+
+- Use `!include <archimate/Archimate>` to include ArchiMate library
+- Use `archimate` keyword for ArchiMate elements
+- Use color codes: `#Business`, `#Application`, `#Technology`
+- ArchiMate diagrams follow enterprise architecture standards
+- ArchiMate diagrams are ideal for enterprise architecture documentation

skills/plantuml/examples/c4.md

@@ -0,0 +1,121 @@
+# C4 Model Diagram | C4 模型图
+
+**官方文档**: https://plantuml.com/zh/c4
+
+## Instructions
+
+C4 model diagrams show software architecture at different levels of abstraction. They use the C4-PlantUML library to create Context, Container, Component, and Deployment diagrams.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Include C4-PlantUML library with `!include`
+- Use `Person`, `System`, `SystemDb`, `System_Ext`, `SystemDb_Ext` for Context diagrams
+- Use `Container`, `ContainerDb`, `Container_Ext`, `ContainerDb_Ext` for Container diagrams
+- Use `Component`, `ComponentDb`, `Component_Ext`, `ComponentDb_Ext` for Component diagrams
+- Use `Deployment_Node` for Deployment diagrams
+- Use `Rel` for relationships
+
+## Example: C4 Context Diagram
+
+```plantuml
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
+
+LAYOUT_WITH_LEGEND()
+
+Person(user, "User", "Uses the system")
+System(system, "E-Commerce System", "Handles online orders")
+System_Ext(payment, "Payment Gateway", "Processes payments")
+System_Ext(email, "Email System", "Sends notifications")
+
+Rel(user, system, "Places orders")
+Rel(system, payment, "Processes payments")
+Rel(system, email, "Sends order confirmations")
+@enduml
+```
+
+## Example: C4 Container Diagram
+
+```plantuml
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
+
+LAYOUT_WITH_LEGEND()
+
+Person(user, "User", "Uses the web application")
+System_Boundary(c1, "E-Commerce System") {
+    Container(web, "Web Application", "React", "Provides web interface")
+    Container(api, "API", "Spring Boot", "Handles business logic")
+    ContainerDb(db, "Database", "PostgreSQL", "Stores data")
+}
+
+System_Ext(email, "Email System", "Sends notifications")
+
+Rel(user, web, "Uses", "HTTPS")
+Rel(web, api, "Makes API calls", "HTTPS")
+Rel(api, db, "Reads from and writes to", "JDBC")
+Rel(api, email, "Sends emails", "SMTP")
+@enduml
+```
+
+## Example: C4 Component Diagram
+
+```plantuml
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
+
+LAYOUT_WITH_LEGEND()
+
+Container_Boundary(api, "API") {
+    Component(controller, "Order Controller", "Spring MVC", "Handles HTTP requests")
+    Component(service, "Order Service", "Spring", "Business logic")
+    Component(repository, "Order Repository", "Spring Data", "Data access")
+}
+
+ContainerDb(db, "Database", "PostgreSQL", "Stores orders")
+
+Rel(controller, service, "Uses")
+Rel(service, repository, "Uses")
+Rel(repository, db, "Reads from and writes to", "JDBC")
+@enduml
+```
+
+## Example: C4 Deployment Diagram
+
+```plantuml
+@startuml
+!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
+
+LAYOUT_WITH_LEGEND()
+
+Deployment_Node(aws, "AWS Cloud", "Cloud infrastructure") {
+    Deployment_Node(web_tier, "Web Tier", "EC2") {
+        Container(web, "Web Application", "React", "Serves web pages")
+    }
+    
+    Deployment_Node(app_tier, "Application Tier", "EC2") {
+        Container(api, "API", "Spring Boot", "Handles business logic")
+    }
+    
+    Deployment_Node(db_tier, "Database Tier", "RDS") {
+        ContainerDb(db, "Database", "PostgreSQL", "Stores data")
+    }
+}
+
+Rel(web, api, "HTTPS")
+Rel(api, db, "JDBC")
+@enduml
+```
+
+## Key Points
+
+- Always include the C4-PlantUML library with `!include`
+- Use `LAYOUT_WITH_LEGEND()` for better diagram layout
+- Use appropriate C4 elements for each diagram level
+- Use `Rel` to define relationships between elements
+- C4 diagrams are ideal for software architecture documentation
+- Context diagrams show the big picture
+- Container diagrams show the high-level structure
+- Component diagrams show the internal structure
+- Deployment diagrams show the infrastructure

skills/plantuml/examples/chronology.md

@@ -0,0 +1,61 @@
+# Chronology Diagram | 时间线图
+
+**官方文档**: https://plantuml.com/zh/chronology-diagram
+
+## Instructions
+
+Chronology diagrams show events and timelines. They are useful for documenting historical events, project timelines, and sequences of events.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use timeline syntax to define events
+- Show chronological order of events
+- Support date and time annotations
+
+## Example: Basic Chronology Diagram
+
+```plantuml
+@startuml
+chronology "Project Timeline" {
+  2024-01-01 : Project Start
+  2024-02-01 : Phase 1 Complete
+  2024-03-01 : Phase 2 Complete
+  2024-04-01 : Project Complete
+}
+@enduml
+```
+
+## Example: Event Timeline
+
+```plantuml
+@startuml
+chronology "System Events" {
+  2024-01-01 09:00 : System Startup
+  2024-01-01 10:30 : First User Login
+  2024-01-01 12:00 : Peak Usage
+  2024-01-01 18:00 : System Shutdown
+}
+@enduml
+```
+
+## Example: Project Milestones
+
+```plantuml
+@startuml
+chronology "Project Milestones" {
+  2024-01-15 : Requirements Complete
+  2024-02-15 : Design Complete
+  2024-03-15 : Development Complete
+  2024-04-15 : Testing Complete
+  2024-05-15 : Deployment Complete
+}
+@enduml
+```
+
+## Key Points
+
+- Use `chronology` keyword for chronology diagrams
+- Define events with dates and descriptions
+- Chronology diagrams show temporal sequences
+- Chronology diagrams are ideal for timelines and event sequences

skills/plantuml/examples/class.md

@@ -0,0 +1,178 @@
+# Class Diagram | 类图
+
+**官方文档**: https://plantuml.com/zh/class-diagram
+
+## Instructions
+
+Class diagrams show the structure of a system by modeling classes, their attributes, methods, and relationships. They are essential for object-oriented design and documentation.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Define classes with `class` keyword
+- Use visibility modifiers: `+` (public), `-` (private), `#` (protected), `~` (package)
+- Define relationships: `--`, `-->`, `<|--`, `*--`, `o--`, etc.
+- Use `abstract`, `interface`, `enum` for special class types
+- Use `package` to group related classes
+- Use `note` for annotations
+
+## Example: Basic Class Diagram
+
+```plantuml
+@startuml
+class Car {
+  - String brand
+  - String model
+  - int year
+  + start()
+  + stop()
+  + accelerate()
+}
+
+class Engine {
+  - int horsepower
+  + start()
+  + stop()
+}
+
+Car *-- Engine
+@enduml
+```
+
+## Example: With Relationships
+
+```plantuml
+@startuml
+class Animal {
+  + String name
+  + int age
+  + makeSound()
+}
+
+class Dog {
+  + String breed
+  + bark()
+}
+
+class Cat {
+  + String color
+  + meow()
+}
+
+Animal <|-- Dog
+Animal <|-- Cat
+@enduml
+```
+
+## Example: With Interfaces and Abstract Classes
+
+```plantuml
+@startuml
+abstract class Shape {
+  {abstract} + draw()
+  + getArea()
+}
+
+interface Drawable {
+  + draw()
+}
+
+class Circle {
+  - double radius
+  + draw()
+  + getArea()
+}
+
+class Rectangle {
+  - double width
+  - double height
+  + draw()
+  + getArea()
+}
+
+Shape <|-- Circle
+Shape <|-- Rectangle
+Drawable <|.. Circle
+Drawable <|.. Rectangle
+@enduml
+```
+
+## Example: With Packages
+
+```plantuml
+@startuml
+package "com.example.model" {
+  class User {
+    - String username
+    - String email
+    + login()
+    + logout()
+  }
+  
+  class Order {
+    - int orderId
+    - Date orderDate
+    + create()
+    + cancel()
+  }
+}
+
+package "com.example.service" {
+  class UserService {
+    + register(User)
+    + authenticate(String, String)
+  }
+  
+  class OrderService {
+    + createOrder(Order)
+    + processOrder(int)
+  }
+}
+
+UserService --> User
+OrderService --> Order
+User "1" --> "*" Order
+@enduml
+```
+
+## Example: With Enums
+
+```plantuml
+@startuml
+enum OrderStatus {
+  PENDING
+  PROCESSING
+  SHIPPED
+  DELIVERED
+  CANCELLED
+}
+
+class Order {
+  - int orderId
+  - OrderStatus status
+  + updateStatus(OrderStatus)
+}
+
+Order --> OrderStatus
+@enduml
+```
+
+## Relationship Types
+
+- `--` : Association
+- `-->` : Directed association
+- `<|--` : Inheritance (extends)
+- `*--` : Composition
+- `o--` : Aggregation
+- `..>` : Dependency
+- `<|..` : Implementation (implements)
+
+## Key Points
+
+- Use visibility modifiers: `+` (public), `-` (private), `#` (protected), `~` (package)
+- Use `abstract` for abstract classes, `interface` for interfaces
+- Use `{abstract}` for abstract methods
+- Use `package` to organize classes
+- Use relationship arrows to show class relationships
+- Use `note` for additional documentation
+- Use `enum` for enumeration types

skills/plantuml/examples/component.md

@@ -0,0 +1,143 @@
+# Component Diagram | 组件图
+
+**官方文档**: https://plantuml.com/zh/component-diagram
+
+## Instructions
+
+Component diagrams show the structure of a system by modeling components, interfaces, and their relationships. They are useful for system architecture documentation.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Define components with `component` keyword
+- Define interfaces with `interface` keyword
+- Use `package` to group components
+- Use relationships: `--`, `-->`, `<|--`, `..>`, etc.
+- Use `note` for annotations
+
+## Example: Basic Component Diagram
+
+```plantuml
+@startuml
+component [User Interface] as UI
+component [Business Logic] as BL
+component [Data Access] as DA
+component [Database] as DB
+
+UI --> BL
+BL --> DA
+DA --> DB
+@enduml
+```
+
+## Example: With Interfaces
+
+```plantuml
+@startuml
+interface IUserService
+interface IOrderService
+
+component [User Module] {
+  component [UserController]
+  component [UserService]
+}
+
+component [Order Module] {
+  component [OrderController]
+  component [OrderService]
+}
+
+component [Database] as DB
+
+UserController --> IUserService
+UserService ..|> IUserService
+UserService --> DB
+
+OrderController --> IOrderService
+OrderService ..|> IOrderService
+OrderService --> DB
+@enduml
+```
+
+## Example: With Packages
+
+```plantuml
+@startuml
+package "Presentation Layer" {
+  component [Web UI]
+  component [Mobile UI]
+}
+
+package "Business Layer" {
+  component [User Service]
+  component [Order Service]
+  component [Payment Service]
+}
+
+package "Data Layer" {
+  component [User Repository]
+  component [Order Repository]
+  database "Database"
+}
+
+[Web UI] --> [User Service]
+[Mobile UI] --> [User Service]
+[User Service] --> [User Repository]
+[Order Service] --> [Order Repository]
+[Payment Service] --> [Order Service]
+[User Repository] --> "Database"
+[Order Repository] --> "Database"
+@enduml
+```
+
+## Example: Microservices Architecture
+
+```plantuml
+@startuml
+component [API Gateway] as Gateway
+
+package "User Service" {
+  component [User API]
+  component [User Service]
+  database "User DB"
+}
+
+package "Order Service" {
+  component [Order API]
+  component [Order Service]
+  database "Order DB"
+}
+
+package "Payment Service" {
+  component [Payment API]
+  component [Payment Service]
+  database "Payment DB"
+}
+
+Gateway --> [User API]
+Gateway --> [Order API]
+Gateway --> [Payment API]
+
+[User API] --> [User Service]
+[Order API] --> [Order Service]
+[Payment API] --> [Payment Service]
+
+[User Service] --> "User DB"
+[Order Service] --> "Order DB"
+[Payment Service] --> "Payment DB"
+
+[Order Service] --> [User Service]
+[Order Service] --> [Payment Service]
+@enduml
+```
+
+## Key Points
+
+- Use `component` to define components
+- Use `interface` to define interfaces
+- Use `package` to group related components
+- Use `database` for database components
+- Use `-->` for dependencies
+- Use `..|>` for interface implementation
+- Use `note` for additional documentation
+- Component diagrams are ideal for system architecture documentation

skills/plantuml/examples/deployment.md

@@ -0,0 +1,105 @@
+# Deployment Diagram | 部署图
+
+**官方文档**: https://plantuml.com/zh/deployment-diagram
+
+## Instructions
+
+Deployment diagrams show the physical architecture of a system, including nodes, artifacts, and their relationships. They are useful for infrastructure documentation.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `node` to define deployment nodes
+- Use `database` for database nodes
+- Use `cloud` for cloud nodes
+- Use `package` to group nodes
+- Use relationships: `--`, `-->`, etc.
+- Use `note` for annotations
+
+## Example: Basic Deployment Diagram
+
+```plantuml
+@startuml
+node "Web Server" {
+  artifact "Web Application"
+}
+
+node "Application Server" {
+  artifact "API Service"
+}
+
+database "Database Server" {
+  database "PostgreSQL"
+}
+
+"Web Server" --> "Application Server"
+"Application Server" --> "Database Server"
+@enduml
+```
+
+## Example: Cloud Deployment
+
+```plantuml
+@startuml
+cloud "AWS" {
+  node "EC2 Instance 1" {
+    artifact "Web Application"
+  }
+  
+  node "EC2 Instance 2" {
+    artifact "API Service"
+  }
+  
+  database "RDS" {
+    database "PostgreSQL"
+  }
+}
+
+node "Load Balancer" as LB
+
+LB --> "EC2 Instance 1"
+LB --> "EC2 Instance 2"
+"EC2 Instance 1" --> "RDS"
+"EC2 Instance 2" --> "RDS"
+@enduml
+```
+
+## Example: Microservices Deployment
+
+```plantuml
+@startuml
+node "Kubernetes Cluster" {
+  node "User Service Pod" {
+    artifact "User Service"
+  }
+  
+  node "Order Service Pod" {
+    artifact "Order Service"
+  }
+  
+  node "Payment Service Pod" {
+    artifact "Payment Service"
+  }
+}
+
+database "PostgreSQL" {
+  database "User DB"
+  database "Order DB"
+  database "Payment DB"
+}
+
+"User Service Pod" --> "User DB"
+"Order Service Pod" --> "Order DB"
+"Payment Service Pod" --> "Payment DB"
+@enduml
+```
+
+## Key Points
+
+- Use `node` to define deployment nodes
+- Use `artifact` to define software artifacts
+- Use `database` for database nodes
+- Use `cloud` for cloud infrastructure
+- Use `package` to group related nodes
+- Use `-->` for dependencies between nodes
+- Deployment diagrams are ideal for infrastructure documentation

skills/plantuml/examples/ditaa.md

@@ -0,0 +1,75 @@
+# Ditaa Diagram | Ditaa 图
+
+**官方文档**: https://plantuml.com/zh/ditaa
+
+## Instructions
+
+Ditaa diagrams create ASCII art diagrams that are rendered as images. They are useful for creating simple diagrams with text-based syntax.
+
+## Key Concepts
+
+- Use `@startditaa` and `@endditaa` to wrap the diagram
+- Use ASCII characters to draw diagrams
+- Supports boxes, arrows, and text
+- Renders as image output
+
+## Example: Basic Ditaa Diagram
+
+```plantuml
+@startditaa
++--------+   +-------+   +--------+
+| Client |-->| Server |-->|Database|
++--------+   +-------+   +--------+
+@endditaa
+```
+
+## Example: Flowchart
+
+```plantuml
+@startditaa
+/--------\   yes    /--------\
+| Start  |--------->| Process |
+\--------/          \--------/
+    |                   |
+    | no                |
+    v                   v
+/--------\          /--------\
+|  End   |<--------|  Check  |
+\--------/          \--------/
+@endditaa
+```
+
+## Example: System Architecture
+
+```plantuml
+@startditaa
+        +----------+
+        |   Web    |
+        |  Browser |
+        +----------+
+             |
+             v
+    +----------------+
+    |  Load Balancer |
+    +----------------+
+         |        |
+         v        v
+    +--------+ +--------+
+    |Server 1| |Server 2|
+    +--------+ +--------+
+         |        |
+         +---+----+
+             |
+             v
+        +----------+
+        | Database |
+        +----------+
+@endditaa
+```
+
+## Key Points
+
+- Use `@startditaa` and `@endditaa` for Ditaa diagrams
+- Use ASCII characters to draw diagrams
+- Ditaa renders ASCII art as images
+- Ditaa diagrams are ideal for simple text-based diagrams

skills/plantuml/examples/ebnf.md

@@ -0,0 +1,63 @@
+# EBNF Diagram | EBNF 图
+
+**官方文档**: https://plantuml.com/zh/ebnf
+
+## Instructions
+
+EBNF (Extended Backus-Naur Form) diagrams visualize grammar rules and syntax definitions. They are useful for documenting programming languages, data formats, and protocols.
+
+## Key Concepts
+
+- Use `@startebnf` and `@endebnf` to wrap the diagram
+- Define grammar rules with `=` for definitions
+- Use `|` for alternatives
+- Use `*` for zero or more, `+` for one or more, `?` for optional
+
+## Example: Basic EBNF Diagram
+
+```plantuml
+@startebnf
+Expression = Term | Expression "+" Term | Expression "-" Term;
+Term = Factor | Term "*" Factor | Term "/" Factor;
+Factor = Number | "(" Expression ")";
+Number = Digit+;
+Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+@endebnf
+```
+
+## Example: JSON Grammar
+
+```plantuml
+@startebnf
+JSON = Value;
+Value = Object | Array | String | Number | Boolean | Null;
+Object = "{" [Pair ("," Pair)*] "}";
+Pair = String ":" Value;
+Array = "[" [Value ("," Value)*] "]";
+String = "\"" Character* "\"";
+Number = Integer [Fraction] [Exponent];
+Boolean = "true" | "false";
+Null = "null";
+@endebnf
+```
+
+## Example: SQL SELECT Statement
+
+```plantuml
+@startebnf
+SelectStatement = "SELECT" ColumnList "FROM" TableName [WhereClause];
+ColumnList = Column | ColumnList "," Column;
+Column = ColumnName | ColumnName "AS" Alias;
+WhereClause = "WHERE" Condition;
+Condition = ColumnName Operator Value | Condition "AND" Condition | Condition "OR" Condition;
+Operator = "=" | "!=" | "<" | ">" | "<=" | ">=";
+@endebnf
+```
+
+## Key Points
+
+- Use `@startebnf` and `@endebnf` for EBNF diagrams
+- Use `=` for rule definitions
+- Use `|` for alternatives
+- Use `*` for zero or more, `+` for one or more, `?` for optional
+- EBNF diagrams are ideal for documenting grammars and syntax

skills/plantuml/examples/er-chen.md

@@ -0,0 +1,84 @@
+# ER Diagram (Chen's Notation) | ER 图（陈氏表示法）
+
+**官方文档**: https://plantuml.com/zh/ie-diagram
+
+## Instructions
+
+ER diagrams using Chen's notation show entities, attributes, and relationships in a different visual style. They are useful for conceptual data modeling.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use Chen's notation style for entities and relationships
+- Entities are shown as rectangles
+- Relationships are shown as diamonds
+- Attributes are shown as ovals
+
+## Example: Basic Chen's Notation
+
+```plantuml
+@startuml
+entity "Student" {
+  * student_id
+  --
+  name
+  email
+}
+
+entity "Course" {
+  * course_id
+  --
+  title
+  credits
+}
+
+entity "Enrollment" as enrollment
+
+Student }o--|| enrollment
+enrollment }o--|| Course
+@enduml
+```
+
+## Example: Complex Chen's Notation
+
+```plantuml
+@startuml
+entity "Customer" {
+  * customer_id
+  --
+  name
+  email
+  phone
+}
+
+entity "Order" {
+  * order_id
+  --
+  order_date
+  total
+}
+
+entity "Product" {
+  * product_id
+  --
+  name
+  price
+}
+
+entity "Contains" as contains
+entity "Places" as places
+
+Customer }o--|| places
+places }o--|| Order
+Order }o--o{ contains
+contains }o--|| Product
+@enduml
+```
+
+## Key Points
+
+- Chen's notation uses different visual style
+- Entities are rectangles
+- Relationships are diamonds
+- Attributes are ovals
+- Chen's notation is ideal for conceptual modeling

skills/plantuml/examples/er.md

@@ -0,0 +1,120 @@
+# ER Diagram | 实体关系图
+
+**官方文档**: https://plantuml.com/zh/ie-diagram
+
+## Instructions
+
+ER (Entity-Relationship) diagrams show entities and their relationships. They are useful for database design and data modeling.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `entity` to define entities
+- Use relationships: `||--`, `}o--`, `}--`, etc.
+- Use `(`, `)` for cardinality notation
+
+## Example: Basic ER Diagram
+
+```plantuml
+@startuml
+entity "User" as user {
+  * id : INT <<PK>>
+  --
+  * username : VARCHAR
+  * email : VARCHAR
+}
+
+entity "Order" as order {
+  * id : INT <<PK>>
+  --
+  * user_id : INT <<FK>>
+  * total : DECIMAL
+  * date : DATE
+}
+
+user ||--o{ order
+@enduml
+```
+
+## Example: Complex ER Diagram
+
+```plantuml
+@startuml
+entity "Customer" as customer {
+  * customer_id : INT <<PK>>
+  --
+  * name : VARCHAR
+  * email : VARCHAR
+  phone : VARCHAR
+}
+
+entity "Order" as order {
+  * order_id : INT <<PK>>
+  --
+  * customer_id : INT <<FK>>
+  * order_date : DATE
+  * total_amount : DECIMAL
+}
+
+entity "Product" as product {
+  * product_id : INT <<PK>>
+  --
+  * name : VARCHAR
+  * price : DECIMAL
+  description : TEXT
+}
+
+entity "OrderItem" as order_item {
+  * order_id : INT <<PK>> <<FK>>
+  * product_id : INT <<PK>> <<FK>>
+  --
+  * quantity : INT
+  * price : DECIMAL
+}
+
+customer ||--o{ order
+order ||--o{ order_item
+product ||--o{ order_item
+@enduml
+```
+
+## Example: With Attributes
+
+```plantuml
+@startuml
+entity "Student" as student {
+  * student_id : INT <<PK>>
+  --
+  * name : VARCHAR
+  * email : VARCHAR
+  date_of_birth : DATE
+}
+
+entity "Course" as course {
+  * course_id : INT <<PK>>
+  --
+  * title : VARCHAR
+  * credits : INT
+  description : TEXT
+}
+
+entity "Enrollment" as enrollment {
+  * student_id : INT <<PK>> <<FK>>
+  * course_id : INT <<PK>> <<FK>>
+  --
+  * enrollment_date : DATE
+  grade : VARCHAR
+}
+
+student ||--o{ enrollment
+course ||--o{ enrollment
+@enduml
+```
+
+## Key Points
+
+- Use `entity` to define entities
+- Use `*` for primary keys, `--` for separator
+- Use `||--`, `}o--`, `}--` for relationships
+- Use `(`, `)` for cardinality notation
+- ER diagrams are ideal for database design

skills/plantuml/examples/gantt.md

@@ -0,0 +1,96 @@
+# Gantt Chart | 甘特图
+
+**官方文档**: https://plantuml.com/zh/gantt-diagram
+
+## Instructions
+
+Gantt charts show project schedules and timelines. They are useful for project management and planning.
+
+## Key Concepts
+
+- Use `@startgantt` and `@endgantt` to wrap the diagram
+- Use `project starts` to define project start date
+- Use `sprint` to define sprints
+- Use `[Task]` to define tasks
+- Use `--` for task dependencies
+- Use `starts`, `ends`, `happens` for date constraints
+- Use `colors` for styling
+
+## Example: Basic Gantt Chart
+
+```plantuml
+@startgantt
+project starts 2024-01-01
+[Task 1] lasts 5 days
+[Task 2] lasts 3 days
+[Task 3] lasts 4 days
+[Task 1] -> [Task 2]
+[Task 2] -> [Task 3]
+@endgantt
+```
+
+## Example: With Dates
+
+```plantuml
+@startgantt
+project starts 2024-01-01
+[Design] lasts 10 days
+[Development] lasts 20 days
+[Testing] lasts 5 days
+[Deployment] lasts 2 days
+
+[Design] -> [Development]
+[Development] -> [Testing]
+[Testing] -> [Deployment]
+@endgantt
+```
+
+## Example: With Sprints
+
+```plantuml
+@startgantt
+project starts 2024-01-01
+sprint starts 2024-01-01
+sprint ends 2024-01-14
+
+[User Stories] lasts 5 days
+[Development] lasts 8 days
+[Testing] lasts 3 days
+
+sprint starts 2024-01-15
+sprint ends 2024-01-28
+
+[More Development] lasts 10 days
+[More Testing] lasts 4 days
+
+[User Stories] -> [Development]
+[Development] -> [Testing]
+[Testing] -> [More Development]
+[More Development] -> [More Testing]
+@endgantt
+```
+
+## Example: With Colors
+
+```plantuml
+@startgantt
+project starts 2024-01-01
+[Design] lasts 10 days
+[Development] lasts 20 days
+[Testing] lasts 5 days
+
+[Design] is colored in LightBlue
+[Development] is colored in LightGreen
+[Testing] is colored in LightYellow
+@endgantt
+```
+
+## Key Points
+
+- Use `@startgantt` and `@endgantt` for Gantt charts
+- Use `project starts` to define project start date
+- Use `[Task]` to define tasks with durations
+- Use `->` for task dependencies
+- Use `sprint` to define sprints
+- Use `is colored in` for styling
+- Gantt charts are ideal for project management

skills/plantuml/examples/ie.md

@@ -0,0 +1,73 @@
+# IE Diagram | 信息工程图
+
+**官方文档**: https://plantuml.com/zh/ie-diagram
+
+## Instructions
+
+IE (Information Engineering) diagrams use Crow's Foot notation for entity relationships. They are useful for database design with standard IE notation.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `entity` to define entities
+- Use IE notation for relationships
+- Follow Information Engineering standards
+
+## Example: Basic IE Diagram
+
+```plantuml
+@startuml
+entity "User" {
+  * id : INT
+  --
+  * username : VARCHAR
+  * email : VARCHAR
+}
+
+entity "Order" {
+  * id : INT
+  --
+  * user_id : INT
+  * total : DECIMAL
+}
+
+User ||--o{ Order
+@enduml
+```
+
+## Example: With Cardinality
+
+```plantuml
+@startuml
+entity "Customer" {
+  * customer_id : INT
+  --
+  * name : VARCHAR
+  email : VARCHAR
+}
+
+entity "Order" {
+  * order_id : INT
+  --
+  * customer_id : INT
+  order_date : DATE
+}
+
+entity "Product" {
+  * product_id : INT
+  --
+  * name : VARCHAR
+  price : DECIMAL
+}
+
+Customer ||--o{ Order
+Order }o--|| Product
+@enduml
+```
+
+## Key Points
+
+- Use `entity` for entities
+- IE diagrams use Crow's Foot notation
+- Use `||--`, `}o--`, etc. for relationships
+- IE diagrams follow Information Engineering standards

skills/plantuml/examples/json-yaml.md

@@ -0,0 +1,88 @@
+# JSON/YAML Data Diagram | JSON/YAML 数据图
+
+**官方文档**: https://plantuml.com/zh/json
+
+## Instructions
+
+JSON and YAML diagrams visualize structured data in a tree format. They are useful for documenting data structures and configurations.
+
+## Key Concepts
+
+- Use `@startjson` and `@endjson` for JSON diagrams
+- Use `@startyaml` and `@endyaml` for YAML diagrams
+- Data is displayed in a hierarchical tree structure
+- Supports nested objects and arrays
+
+## Example: JSON Diagram
+
+```plantuml
+@startjson
+{
+  "name": "John Doe",
+  "age": 30,
+  "email": "john@example.com",
+  "address": {
+    "street": "123 Main St",
+    "city": "New York",
+    "zip": "10001"
+  },
+  "hobbies": ["reading", "coding", "traveling"]
+}
+@endjson
+```
+
+## Example: YAML Diagram
+
+```plantuml
+@startyaml
+name: John Doe
+age: 30
+email: john@example.com
+address:
+  street: 123 Main St
+  city: New York
+  zip: 10001
+hobbies:
+  - reading
+  - coding
+  - traveling
+@endyaml
+```
+
+## Example: Complex JSON Structure
+
+```plantuml
+@startjson
+{
+  "api": {
+    "version": "1.0",
+    "endpoints": [
+      {
+        "path": "/users",
+        "method": "GET",
+        "response": {
+          "status": 200,
+          "data": []
+        }
+      },
+      {
+        "path": "/users",
+        "method": "POST",
+        "request": {
+          "name": "string",
+          "email": "string"
+        }
+      }
+    ]
+  }
+}
+@endjson
+```
+
+## Key Points
+
+- Use `@startjson` and `@endjson` for JSON data
+- Use `@startyaml` and `@endyaml` for YAML data
+- Data is automatically formatted as a tree
+- Supports nested structures and arrays
+- JSON/YAML diagrams are ideal for documenting data structures

skills/plantuml/examples/math.md

@@ -0,0 +1,55 @@
+# Mathematical Notations | 数学公式图
+
+**官方文档**: https://plantuml.com/zh/ascii-math
+
+## Instructions
+
+Mathematical notation diagrams render mathematical formulas using AsciiMath or LaTeX syntax. They are useful for documenting mathematical concepts and equations.
+
+## Key Concepts
+
+- Use `@startmath` and `@endmath` for AsciiMath
+- Use `@startlatex` and `@endlatex` for LaTeX
+- Supports mathematical expressions and formulas
+- Renders as formatted mathematical notation
+
+## Example: AsciiMath
+
+```plantuml
+@startmath
+f(x) = sum_(i=0)^n x_i^2
+@endmath
+```
+
+## Example: LaTeX
+
+```plantuml
+@startlatex
+\[
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+\]
+@endlatex
+```
+
+## Example: Complex Formula
+
+```plantuml
+@startmath
+E = mc^2
+@endmath
+```
+
+## Example: Matrix
+
+```plantuml
+@startmath
+A = [[a, b], [c, d]]
+@endmath
+```
+
+## Key Points
+
+- Use `@startmath` and `@endmath` for AsciiMath notation
+- Use `@startlatex` and `@endlatex` for LaTeX notation
+- Mathematical notation diagrams render formulas
+- Mathematical notation diagrams are ideal for mathematical documentation

skills/plantuml/examples/mindmap.md

@@ -0,0 +1,72 @@
+# Mindmap | 思维导图
+
+**官方文档**: https://plantuml.com/zh/mindmap-diagram
+
+## Instructions
+
+Mindmaps show hierarchical information in a tree structure. They are useful for brainstorming, note-taking, and organizing ideas.
+
+## Key Concepts
+
+- Use `@startmindmap` and `@endmindmap` to wrap the diagram
+- Use `*` for root node
+- Use `**` for second level nodes
+- Use `***` for third level nodes, etc.
+- Use `+` for left side, `-` for right side (optional)
+- Use `:` for styling
+
+## Example: Basic Mindmap
+
+```plantuml
+@startmindmap
+* PlantUML
+** Sequence Diagram
+** Class Diagram
+** Activity Diagram
+** Component Diagram
+** State Diagram
+@endmindmap
+```
+
+## Example: With Multiple Levels
+
+```plantuml
+@startmindmap
+* Software Development
+** Frontend
+*** React
+*** Vue
+*** Angular
+** Backend
+*** Spring Boot
+*** Node.js
+*** Django
+** Database
+*** PostgreSQL
+*** MySQL
+*** MongoDB
+@endmindmap
+```
+
+## Example: With Styling
+
+```plantuml
+@startmindmap
+* PlantUML Diagrams
+** UML Diagrams
+*** Sequence
+*** Class
+*** Activity
+** Architecture
+*** Component
+*** Deployment
+*** C4 Model
+@endmindmap
+```
+
+## Key Points
+
+- Use `@startmindmap` and `@endmindmap` for mindmaps
+- Use `*` for root node
+- Use `**`, `***`, etc. for nested levels
+- Mindmaps are ideal for organizing hierarchical information

skills/plantuml/examples/network.md

@@ -0,0 +1,110 @@
+# Network Diagram | 网络图
+
+**官方文档**: https://plantuml.com/zh/nwdiag
+
+## Instructions
+
+Network diagrams show network topology and infrastructure. They are useful for documenting network architecture and configurations.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `network` to define networks
+- Use `group` to group network elements
+- Use `node` for network nodes
+- Use relationships to show connections
+
+## Example: Basic Network Diagram
+
+```plantuml
+@startuml
+network "Corporate Network" {
+  node "Web Server" as web
+  node "Database Server" as db
+  node "Application Server" as app
+}
+
+network "DMZ" {
+  node "Firewall" as fw
+}
+
+network "Internet" {
+  node "Client" as client
+}
+
+client --> fw
+fw --> web
+web --> app
+app --> db
+@enduml
+```
+
+## Example: Cloud Network Architecture
+
+```plantuml
+@startuml
+cloud "AWS" {
+  network "VPC" {
+    network "Public Subnet" {
+      node "Load Balancer" as lb
+      node "Web Server 1" as web1
+      node "Web Server 2" as web2
+    }
+    
+    network "Private Subnet" {
+      node "App Server 1" as app1
+      node "App Server 2" as app2
+      node "Database" as db
+    }
+  }
+}
+
+network "Internet" {
+  node "Users" as users
+}
+
+users --> lb
+lb --> web1
+lb --> web2
+web1 --> app1
+web2 --> app2
+app1 --> db
+app2 --> db
+@enduml
+```
+
+## Example: Multi-Site Network
+
+```plantuml
+@startuml
+network "Site A" {
+  node "Router A" as routerA
+  node "Switch A" as switchA
+  node "Server A" as serverA
+}
+
+network "Site B" {
+  node "Router B" as routerB
+  node "Switch B" as switchB
+  node "Server B" as serverB
+}
+
+network "WAN" {
+  routerA <--> routerB
+}
+
+routerA --> switchA
+switchA --> serverA
+
+routerB --> switchB
+switchB --> serverB
+@enduml
+```
+
+## Key Points
+
+- Use `network` to define network segments
+- Use `node` for network devices
+- Use `group` to organize network elements
+- Use `-->` and `<-->` for connections
+- Network diagrams are ideal for infrastructure documentation

skills/plantuml/examples/object.md

@@ -0,0 +1,91 @@
+# Object Diagram | 对象图
+
+**官方文档**: https://plantuml.com/zh/object-diagram
+
+## Instructions
+
+Object diagrams show instances of classes and their relationships at a specific point in time. They are useful for modeling the runtime structure of a system.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `object` to define objects
+- Use `map` for key-value pairs
+- Use relationships: `--`, `-->`, etc.
+- Use `note` for annotations
+
+## Example: Basic Object Diagram
+
+```plantuml
+@startuml
+object User1 {
+  name = "Alice"
+  age = 30
+}
+
+object Order1 {
+  orderId = 12345
+  total = 99.99
+}
+
+User1 --> Order1 : places
+@enduml
+```
+
+## Example: With Multiple Objects
+
+```plantuml
+@startuml
+object "Customer: Alice" as customer {
+  name = "Alice"
+  email = "alice@example.com"
+}
+
+object "Order: #12345" as order {
+  orderId = 12345
+  date = "2024-01-15"
+  total = 199.99
+}
+
+object "Product: Laptop" as product {
+  productId = "P001"
+  name = "Laptop"
+  price = 199.99
+}
+
+object "Product: Mouse" as product2 {
+  productId = "P002"
+  name = "Mouse"
+  price = 29.99
+}
+
+customer --> order : places
+order --> product : contains
+order --> product2 : contains
+@enduml
+```
+
+## Example: With Maps
+
+```plantuml
+@startuml
+map "User Preferences" as prefs {
+  theme => "dark"
+  language => "en"
+  notifications => true
+}
+
+object User {
+  name = "Bob"
+  preferences = prefs
+}
+@enduml
+```
+
+## Key Points
+
+- Use `object` to define object instances
+- Use `map` for key-value pairs
+- Object diagrams show runtime instances, not classes
+- Use relationships to show object connections
+- Object diagrams are ideal for modeling specific system states

skills/plantuml/examples/regex.md

@@ -0,0 +1,53 @@
+# Regex Diagram | 正则表达式图
+
+**官方文档**: https://plantuml.com/zh/regex
+
+## Instructions
+
+Regex diagrams visualize regular expressions as state machines. They are useful for understanding and documenting complex regular expressions.
+
+## Key Concepts
+
+- Use `@startregex` and `@endregex` to wrap the diagram
+- Regular expression syntax is automatically parsed
+- Shows state transitions and matching paths
+- Supports common regex patterns
+
+## Example: Basic Regex Diagram
+
+```plantuml
+@startregex
+^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
+@endregex
+```
+
+## Example: Phone Number Pattern
+
+```plantuml
+@startregex
+^(\+?1[-.\s]?)?\(?([0-9]{3})\)?[-.\s]?([0-9]{3})[-.\s]?([0-9]{4})$
+@endregex
+```
+
+## Example: URL Pattern
+
+```plantuml
+@startregex
+^https?://([\da-z\.-]+)\.([a-z\.]{2,6})([/\w \.-]*)*/?$
+@endregex
+```
+
+## Example: Date Pattern
+
+```plantuml
+@startregex
+^(0[1-9]|1[0-2])/(0[1-9]|[12][0-9]|3[01])/\d{4}$
+@endregex
+```
+
+## Key Points
+
+- Use `@startregex` and `@endregex` for regex diagrams
+- Regular expressions are automatically parsed and visualized
+- Shows state machine representation of regex patterns
+- Regex diagrams are ideal for understanding complex patterns

skills/plantuml/examples/salt.md

@@ -0,0 +1,98 @@
+# Salt Wireframe | Salt 线框图
+
+**官方文档**: https://plantuml.com/zh/salt
+
+## Instructions
+
+Salt diagrams create wireframe mockups of user interfaces. They are useful for UI/UX design and prototyping.
+
+## Key Concepts
+
+- Use `@startsalt` and `@endsalt` to wrap the diagram
+- Use UI elements: buttons, text fields, labels, etc.
+- Use layout commands for positioning
+- Supports common UI components
+
+## Example: Basic Login Form
+
+```plantuml
+@startsalt
+{
+  Login Form
+  [Username:        ]
+  [Password:        ]
+  [Login] [Cancel]
+}
+@endsalt
+```
+
+## Example: Web Page Layout
+
+```plantuml
+@startsalt
+{
+  {* Header
+    [Logo] | "Navigation" | [Search]
+  }
+  --
+  {
+    {* Sidebar
+      [Menu Item 1]
+      [Menu Item 2]
+      [Menu Item 3]
+    }
+    |
+    {* Main Content
+      "Article Title"
+      "Article content goes here..."
+      [Read More]
+    }
+  }
+  --
+  {* Footer
+    "Copyright 2024"
+  }
+}
+@endsalt
+```
+
+## Example: Dashboard
+
+```plantuml
+@startsalt
+{
+  {* Dashboard
+    [Statistics Card 1] | [Statistics Card 2] | [Statistics Card 3]
+    --
+    [Chart Area]
+    --
+    [Recent Activity] | [Notifications]
+  }
+}
+@endsalt
+```
+
+## Example: Mobile App Screen
+
+```plantuml
+@startsalt
+{
+  {* Mobile App
+    [Back] | "Screen Title" | [Menu]
+    --
+    [Content Area]
+    "Main content here..."
+    --
+    [Button 1] [Button 2]
+  }
+}
+@endsalt
+```
+
+## Key Points
+
+- Use `@startsalt` and `@endsalt` for wireframe diagrams
+- Use `{*` for sections and `}` for closing
+- Use `|` for horizontal layout, `--` for vertical layout
+- Use `[` and `]` for buttons and input fields
+- Salt diagrams are ideal for UI mockups and prototyping

skills/plantuml/examples/sdl.md

@@ -0,0 +1,51 @@
+# SDL Diagram | SDL 图
+
+**官方文档**: https://plantuml.com/zh/sdl
+
+## Instructions
+
+SDL (Specification and Description Language) diagrams model system behavior and state machines. They are useful for telecommunications and real-time systems.
+
+## Key Concepts
+
+- Use `@startsdl` and `@endsdl` to wrap the diagram
+- Use SDL syntax for state machines
+- Define states, transitions, and actions
+- Follow SDL notation standards
+
+## Example: Basic SDL Diagram
+
+```plantuml
+@startsdl
+state "Idle" as idle
+state "Processing" as processing
+state "Completed" as completed
+
+idle --> processing : start
+processing --> completed : finish
+completed --> idle : reset
+@endsdl
+```
+
+## Example: Communication Protocol
+
+```plantuml
+@startsdl
+state "Waiting" as waiting
+state "Sending" as sending
+state "Receiving" as receiving
+state "Acknowledged" as acknowledged
+
+waiting --> sending : send_request
+sending --> receiving : wait_response
+receiving --> acknowledged : receive_ack
+acknowledged --> waiting : reset
+@endsdl
+```
+
+## Key Points
+
+- Use `@startsdl` and `@endsdl` for SDL diagrams
+- SDL diagrams model system behavior and protocols
+- Use states and transitions to define behavior
+- SDL diagrams are ideal for telecommunications and real-time systems

skills/plantuml/examples/sequence.md

@@ -0,0 +1,112 @@
+# Sequence Diagram | 时序图
+
+**官方文档**: https://plantuml.com/zh/sequence-diagram
+
+## Instructions
+
+Sequence diagrams show interactions between objects or components over time. They are ideal for visualizing the flow of messages between actors, systems, or components.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Declare participants with `participant` or `actor`
+- Use arrows (`->`, `-->`, `->>`, `-->>`) to show messages
+- Use `activate` and `deactivate` to show activation boxes
+- Use `alt`, `opt`, `loop`, `par`, `break`, `critical`, `group` for control structures
+- Use `note` for annotations
+- Use `autonumber` for automatic message numbering
+
+## Example: Basic Sequence Diagram
+
+```plantuml
+@startuml
+Alice -> Bob: Authentication Request
+Bob --> Alice: Authentication Response
+
+Alice -> Bob: Another authentication Request
+Alice <-- Bob: Another authentication Response
+@enduml
+```
+
+## Example: With Participants
+
+```plantuml
+@startuml
+participant "First Actor" as A
+participant "Second Actor" as B
+participant "Last Actor" as C
+
+A -> B: DoWork
+activate B
+
+B -> C: CreateRequest
+activate C
+C --> B: RequestCreated
+deactivate C
+
+B --> A: WorkDone
+deactivate B
+@enduml
+```
+
+## Example: With Control Structures
+
+```plantuml
+@startuml
+Alice -> Bob: Do you love me?
+
+alt Yes
+    Bob -> Alice: Yes, I do!
+else No
+    Bob -> Alice: No, I don't.
+end
+
+opt Extra response
+    Bob -> Alice: But I like you!
+end
+@enduml
+```
+
+## Example: With Notes and Groups
+
+```plantuml
+@startuml
+autonumber
+Alice -> Bob: Hello
+note right: This is a note
+Bob -> Alice: Hi
+
+group Group 1
+    Alice -> Bob: Message 1
+    Bob -> Alice: Response 1
+end
+
+group Group 2
+    Alice -> Bob: Message 2
+    Bob -> Alice: Response 2
+end
+@enduml
+```
+
+## Example: With Loops
+
+```plantuml
+@startuml
+Alice -> Bob: Hello, how are you?
+loop Every minute
+    Alice -> Bob: Are you OK?
+    Bob -> Alice: Yes, I'm OK
+end
+@enduml
+```
+
+## Key Points
+
+- Use `participant` for regular participants, `actor` for actors
+- Use `->` for synchronous messages, `-->` for return messages
+- Use `->>` for asynchronous messages, `-->>` for asynchronous return
+- Use `activate` and `deactivate` to show activation boxes
+- Use control structures (`alt`, `opt`, `loop`, `par`, etc.) for complex flows
+- Use `autonumber` to automatically number messages
+- Use `note` for annotations on the left or right side
+- Use `group` to organize related messages

skills/plantuml/examples/state.md

@@ -0,0 +1,133 @@
+# State Diagram | 状态图
+
+**官方文档**: https://plantuml.com/zh/state-diagram
+
+## Instructions
+
+State diagrams show the states of an object and the transitions between states. They are useful for modeling state machines and object lifecycles.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `[*]` for start and end states
+- Use `state` to define states
+- Use `-->` for transitions
+- Use `:` for transition labels
+- Use `note` for annotations
+- Use nested states with `state` blocks
+
+## Example: Basic State Diagram
+
+```plantuml
+@startuml
+[*] --> Idle
+Idle --> Running : start
+Running --> Idle : stop
+Running --> [*]
+@enduml
+```
+
+## Example: With Multiple States
+
+```plantuml
+@startuml
+[*] --> Draft
+Draft --> Review : submit
+Review --> Approved : approve
+Review --> Rejected : reject
+Approved --> Published : publish
+Rejected --> Draft : revise
+Published --> [*]
+@enduml
+```
+
+## Example: With Nested States
+
+```plantuml
+@startuml
+[*] --> NotShooting
+
+state NotShooting {
+  [*] --> Idle
+  Idle --> Configuring : entry / startTimer
+  Configuring --> Idle : exit / stopTimer
+}
+
+NotShooting --> Shooting : pressHalfShutter
+
+state Shooting {
+  [*] --> Ready
+  Ready --> Capturing : pressFullShutter
+  Capturing --> Ready : releaseFullShutter
+}
+
+Shooting --> NotShooting : releaseHalfShutter
+@enduml
+```
+
+## Example: With Entry and Exit Actions
+
+```plantuml
+@startuml
+[*] --> State1
+
+state State1 {
+  state "SubState1" as SS1
+  state "SubState2" as SS2
+  [*] --> SS1
+  SS1 --> SS2
+  SS2 --> [*]
+}
+
+State1 --> State2 : transition1
+State2 --> [*] : transition2
+@enduml
+```
+
+## Example: Order State Machine
+
+```plantuml
+@startuml
+[*] --> Created : create order
+
+state Created {
+  [*]
+}
+
+Created --> Pending : submit
+state Pending {
+  [*]
+}
+
+Pending --> Processing : process
+state Processing {
+  [*]
+}
+
+Processing --> Shipped : ship
+state Shipped {
+  [*]
+}
+
+Shipped --> Delivered : deliver
+state Delivered {
+  [*]
+}
+
+Pending --> Cancelled : cancel
+Processing --> Cancelled : cancel
+Cancelled --> [*]
+
+Delivered --> [*]
+@enduml
+```
+
+## Key Points
+
+- Use `[*]` for start and end states
+- Use `state` to define states
+- Use `-->` for transitions with optional labels
+- Use nested `state` blocks for composite states
+- Use entry/exit actions with `/` syntax
+- Use `note` for annotations
+- State diagrams are ideal for modeling state machines and object lifecycles

skills/plantuml/examples/timing.md

@@ -0,0 +1,110 @@
+# Timing Diagram | 时序图
+
+**官方文档**: https://plantuml.com/zh/timing-diagram
+
+## Instructions
+
+Timing diagrams show the state of objects or interactions over time. They are useful for modeling real-time systems and timing constraints.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `concise` for concise timing diagrams
+- Use `robust` for robust timing diagrams
+- Define states and transitions
+- Show timing constraints
+
+## Example: Concise Timing Diagram
+
+```plantuml
+@startuml
+concise "User" as U
+0 is Idle
+100 is Active
+200 is Idle
+
+@U
+0 is Idle
+50 is Active
+150 is Idle
+200 is Active
+@enduml
+```
+
+## Example: Robust Timing Diagram
+
+```plantuml
+@startuml
+robust "Web Browser" as WB
+concise "Web Server" as WS
+
+WB is Idle
+WB is Processing
+WB is Idle
+
+WS is Waiting
+WS is Processing
+WS is Waiting
+
+@WB
+0 is Idle
+100 is Processing
+200 is Idle
+
+@WS
+0 is Waiting
+150 is Processing
+250 is Waiting
+@enduml
+```
+
+## Example: With Multiple Participants
+
+```plantuml
+@startuml
+robust "Client" as C
+robust "Server" as S
+robust "Database" as D
+
+C is Idle
+C is Requesting
+C is Waiting
+C is Processing
+
+S is Idle
+S is Processing
+S is Querying
+S is Responding
+
+D is Idle
+D is Processing
+D is Idle
+
+@C
+0 is Idle
+50 is Requesting
+100 is Waiting
+200 is Processing
+250 is Idle
+
+@S
+0 is Idle
+100 is Processing
+150 is Querying
+200 is Responding
+250 is Idle
+
+@D
+0 is Idle
+150 is Processing
+200 is Idle
+@enduml
+```
+
+## Key Points
+
+- Use `concise` for simple timing diagrams
+- Use `robust` for complex timing diagrams with multiple states
+- Timing diagrams show state changes over time
+- Use `@` to define state sequences for each participant
+- Timing diagrams are ideal for real-time system modeling

skills/plantuml/examples/use-case.md

@@ -0,0 +1,96 @@
+# Use Case Diagram | 用例图
+
+**官方文档**: https://plantuml.com/zh/use-case-diagram
+
+## Instructions
+
+Use case diagrams show the interactions between actors and the system. They are useful for requirements analysis and system design.
+
+## Key Concepts
+
+- Use `@startuml` and `@enduml` to wrap the diagram
+- Use `actor` to define actors
+- Use `usecase` or `(Use Case)` to define use cases
+- Use `package` to group use cases
+- Use relationships: `-->`, `<|--`, `..>`, etc.
+- Use `note` for annotations
+
+## Example: Basic Use Case Diagram
+
+```plantuml
+@startuml
+actor User
+actor Admin
+
+(User Login) as Login
+(User Registration) as Register
+(View Dashboard) as Dashboard
+(Manage Users) as Manage
+
+User --> Login
+User --> Register
+User --> Dashboard
+Admin --> Login
+Admin --> Dashboard
+Admin --> Manage
+@enduml
+```
+
+## Example: With Relationships
+
+```plantuml
+@startuml
+actor Customer
+actor "Sales Staff" as Sales
+
+(Create Order) as CreateOrder
+(Process Payment) as ProcessPayment
+(Generate Invoice) as GenerateInvoice
+(View Order Status) as ViewStatus
+
+Customer --> CreateOrder
+CreateOrder ..> ProcessPayment : <<include>>
+ProcessPayment ..> GenerateInvoice : <<include>>
+Customer --> ViewStatus
+Sales --> CreateOrder
+Sales --> ViewStatus
+@enduml
+```
+
+## Example: With Extends and Includes
+
+```plantuml
+@startuml
+actor User
+
+(Login) as Login
+(Logout) as Logout
+(View Profile) as ViewProfile
+(Edit Profile) as EditProfile
+(Change Password) as ChangePassword
+(Search) as Search
+(Advanced Search) as AdvancedSearch
+
+User --> Login
+User --> Logout
+User --> ViewProfile
+User --> EditProfile
+User --> Search
+
+EditProfile <|-- ChangePassword : <<extend>>
+Search <|-- AdvancedSearch : <<extend>>
+
+ViewProfile ..> Login : <<include>>
+EditProfile ..> Login : <<include>>
+@enduml
+```
+
+## Key Points
+
+- Use `actor` to define actors
+- Use `usecase` or `(Use Case)` to define use cases
+- Use `-->` for associations
+- Use `..>` for include relationships
+- Use `<|--` for extend relationships
+- Use `package` to group related use cases
+- Use `note` for additional documentation

skills/plantuml/examples/wbs.md

@@ -0,0 +1,83 @@
+# WBS Diagram | 工作分解结构图
+
+**官方文档**: https://plantuml.com/zh/wbs-diagram
+
+## Instructions
+
+WBS (Work Breakdown Structure) diagrams show hierarchical breakdown of work into smaller components. They are useful for project planning and management.
+
+## Key Concepts
+
+- Use `@startwbs` and `@endwbs` to wrap the diagram
+- Use `*` for root level
+- Use `**` for second level, `***` for third level, etc.
+- Shows hierarchical work structure
+
+## Example: Basic WBS Diagram
+
+```plantuml
+@startwbs
+* Project
+** Phase 1
+*** Task 1.1
+*** Task 1.2
+** Phase 2
+*** Task 2.1
+*** Task 2.2
+@endwbs
+```
+
+## Example: Software Development WBS
+
+```plantuml
+@startwbs
+* Software Development Project
+** Planning
+*** Requirements Gathering
+*** System Design
+** Development
+*** Frontend Development
+**** UI Components
+**** User Interface
+*** Backend Development
+**** API Development
+**** Database Design
+** Testing
+*** Unit Testing
+*** Integration Testing
+*** System Testing
+** Deployment
+*** Environment Setup
+*** Production Deployment
+@endwbs
+```
+
+## Example: Product Launch WBS
+
+```plantuml
+@startwbs
+* Product Launch
+** Market Research
+*** Competitor Analysis
+*** Customer Surveys
+** Product Development
+*** Design
+*** Development
+*** Testing
+** Marketing
+*** Advertising
+*** Social Media
+*** Press Release
+** Launch
+*** Beta Testing
+*** Official Launch
+@endwbs
+```
+
+## Key Points
+
+- Use `@startwbs` and `@endwbs` for WBS diagrams
+- Use `*` for root level
+- Use `**`, `***`, etc. for nested levels
+- WBS diagrams show work breakdown structure
+- WBS diagrams are ideal for project planning

tmp.md

@@ -0,0 +1,355 @@
+- nvm ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 nvm 的 skills，
+必须与 https://github.com/nvm-sh/nvm/blob/master/README.md 一一对应，内容清晰明了，可以指导 大模型基于此技能进行工作
+
+- plantuml ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 plantuml 的 skills，必须与
+- https://plantuml.com/zh/
+- https://github.com/plantuml/plantuml 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作，这里特别说明，plantuml 和 mermaid 都被匹配到的时候，交给用户自己选择使用哪个
+
+Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
+
+PlantUML is a component that allows you to create various UML diagrams through simple textual descriptions. From sequence diagrams to deployment diagrams and beyond, PlantUML provides an easy way to create visual representations of complex systems.
+
+
+两者是两个不一样的画图工具，  Mermaid 倾向于 Markdown中使用，PlantUML 是 以 uml 为主，遇到两个组件的都被激活的时候，需要用户选择输出格式 或者 使用哪个。对 Mermaid、PlantUML 两个技能的说明进行完善
+
+- vue3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vue3 的 skills ，必须与https://cn.vuejs.org/guide/introduction.html、https://cn.vuejs.org/api/  一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- vite ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vite 的 skills，必须与 https://cn.vitejs.dev/guide/、https://cn.vitejs.dev/config/、https://cn.vitejs.dev/plugins/  一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- vue-router-v3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vue-router-v3 的 skills，必须与 https://v3.router.vuejs.org/installation.html、https://v3.router.vuejs.org/guide/、https://v3.router.vuejs.org/api/ 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样维护清晰点的内容
+
+- vue-router-v4 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vue-router-v4 的 skills，必须与 https://router.vuejs.org/、https://router.vuejs.org/guide/、https://router.vuejs.org/api/ 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- nextjs ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 nextjs 的 skills，必须与 https://nextjs.org/docs  一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- nestjs ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 nestjs 的 skills，必须与 https://docs.nestjs.com/  一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- rspack ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 rspack 的 skills，必须与 https://rspack.rs/zh/guide/start/introduction、https://rspack.rs/zh/config/、https://rspack.rs/zh/plugins/、https://rspack.rs/zh/api/ 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- pinia ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 pinia 的 skills，必须与
+- Pinia of Vue 3.0
+    - 官方地址：https://pinia.vuejs.org/
+    - 使用指南：https://pinia.vuejs.org/core-concepts/
+    - API文档：https://pinia.vuejs.org/api/
+      https://pinia.vuejs.org/introduction.html、https://pinia.vuejs.org/api/、https://pinia.vuejs.org/api/ 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- cypress ✅
+
+Cypress 推荐用于 E2E 测试。也可以通过 Cypress 组件测试运行器来给 Vue 单文件组件作单文件组件测试。
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 cypress 的 skills，必须与 https://docs.cypress.io/app/get-started/why-cypress 和 https://docs.cypress.io/api/table-of-contents 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- vitest ✅
+
+Vitest 是一个追求更快运行速度的测试运行器，由 Vue / Vite 团队成员开发。主要针对基于 Vite 的应用设计，可以为组件提供即时响应的测试反馈。
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vitest 的 skills，必须与 https://vitest.dev/guide/、https://vitest.dev/api/、https://vitest.dev/config/ 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- jest ✅
+
+Jest 可以通过 vite-jest 配合 Vite 使用。不过只推荐在你已经有一套基于 Jest 的测试集、且想要迁移到基于 Vite 的开发配置时使用，因为 Vitest 也能够提供类似的功能，且后者与 Vite 的集成更方便高效。
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 jest 的 skills，必须与 https://jestjs.io/docs/getting-started、https://jestjs.io/docs/api 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+
+- layui-vue3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 layui-vue3 的 skills，必须与 https://www.layui-vue.com/zh-CN/index、https://www.layui-vue.com/zh-CN/guide/introduce、https://www.layui-vue.com/zh-CN/components 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- ant-design-react ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 ant-design-react 的 skills，必须与
+- 官方地址：https://4x-ant-design.antgroup.com/index-cn
+- 使用指南：https://4x-ant-design.antgroup.com/docs/react/introduce-cn
+- 组件文档：https://4x-ant-design.antgroup.com/components/overview-cn/
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- ant-design-mobile ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 ant-design-mobile 的 skills，必须与
+- 官方地址：https://ant-design-mobile.antgroup.com/zh/guide/quick-start
+- 组件文档：https://ant-design-mobile.antgroup.com/zh/components/button
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- ant-design-mini ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 ant-design-mini 的 skills，必须与
+- 官方地址：https://ant-design-mini.antgroup.com/guide/quick-start
+- 组件文档：https://ant-design-mini.antgroup.com/components/overview
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- bootstrap-vue3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 bootstrap-vue3 的 skills，必须与
+- Bootstrap of Vue 3.0
+    - 官方地址：https://bootstrap-vue.org
+    - 使用指南：https://bootstrap-vue.org/docs
+    - 组件文档：https://bootstrap-vue.org/docs/components
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- element-plus-vue3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 element-plus-vue3 的 skills，必须与
+- Element Plus of Vue 3.0
+    - 官方地址：https://element-plus.org/zh-CN/
+    - 使用指南：https://element-plus.org/en-US/guide/design
+    - 组件文档：https://element-plus.org/en-US/component/overview
+    - Github: https://github.com/element-plus/element-plus
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- uview-vue2  ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 uview-vue2 的 skills，必须与
+- 官方地址：https://www.uviewui.com/
+- 使用指南：https://www.uviewui.com/guide/demo.html
+- 组件文档：https://www.uviewui.com/components/intro.html
+- UniApp: https://ext.dcloud.net.cn/plugin?id=1593
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- uview-pro-vue3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 uview-pro-vue3 的 skills，必须与
+- uView Pro of Vue 3.0
+    - 官方地址：https://uviewpro.cn/
+    - 使用指南：https://uviewpro.cn/zh/guide/intro.html
+    - 组件文档：https://uviewpro.cn/zh/components/intro.html
+    - 工具文档：https://uviewpro.cn/zh/tools/intro.html
+    - 模板文档：https://uviewpro.cn/zh/layout/intro.html
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- vant-vue3 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vant-vue3 的 skills，必须与
+- Vant of Vue 3.0
+    - 官方地址：https://vant-ui.github.io/
+    - 使用指南：https://vant-ui.github.io/vant/#/zh-CN
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- electron ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 electron 的 skills，必须与
+- Electron
+    - 官方地址：https://www.electronjs.org/zh/
+    - 使用文档：https://www.electronjs.org/zh/docs/latest/
+    - API文档：https://www.electronjs.org/zh/docs/latest/api/app
+    - 其他工具：https://www.electronforge.io、https://www.electronjs.org/zh/fiddle
+    - Github: https://github.com/electron/electron
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- electron-egg ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 electron-egg 的 skills，必须与
+- Electron EGG
+    - 官方地址：https://www.kaka996.com/
+    - 使用文档：https://www.kaka996.com/pages/987b1c/
+    - API文档：https://www.kaka996.com/pages/a99b72/
+    - Gitee: https://gitee.com/dromara/electron-egg
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- upgradeLink ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 upgradeLink 的 skills，必须与
+- UpgradeLink
+    - 官方地址：https://www.toolsetlink.com/
+    - 使用文档：https://www.toolsetlink.com/upgrade/what-is-upgrade.html
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- avue ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 avue 的 skills，必须与
+- Avue
+    - 官方地址：https://avuejs.com/
+    - Github: https://github.com/avue/avue
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- avue-crud ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 avue-crud 的 skills，必须与
+- Avue-crud
+    - 表格组件：https://avuejs.com/crud/crud-doc.html
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- avue-form ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 avue-form 的 skills，必须与
+- Avue-form
+    - 表单组件：https://avuejs.com/form/form-doc.html
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- lime-echart ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 lime-echart 的 skills，必须与
+- Lime-eEhart
+    - lime-echart 为 UniApp 和 UniAppX 提供 ECharts 图表兼容支持, 使 ECharts 图表能在H5、小程序、App中运行
+    - UniApp: https://ext.dcloud.net.cn/plugin?id=4899
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- ucharts ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 ucharts 的 skills，必须与
+- uCharts
+    - https://www.ucharts.cn/v2/#/
+    - https://www.ucharts.cn/v2/#/guide/index
+    - https://www.ucharts.cn/v2/#/document/index
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- vuex-vue2 ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 vuex-vue2 的 skills，必须与
+- Vuex of Vue 2.0
+    - 官方地址：https://vuex.vuejs.org/zh/
+    - 使用指南：https://vuex.vuejs.org/zh/guide/
+    - API文档：https://vuex.vuejs.org/zh/api/
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- dart-sass ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 dart-sass 的 skills，必须与
+- Dart Sass
+    - 官方地址：https://sass-lang.com/dart-sass/
+    - 使用指南：https://sass-lang.com/install/
+    - API文档：https://sass-lang.com/documentation/
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- tauri ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 tauri 的 skills，必须与
+https://v2.tauri.org.cn/
+https://v2.tauri.org.cn/start/
+https://v2.tauri.org.cn/reference/cli/
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+
+- agent-browser ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 agent-browser 的 skills，必须与
+https://github.com/vercel-labs/agent-browser
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+- cocos2d-x ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 cocos2d-x 的 skills，必须与
+https://docs.cocos.com/cocos2d-x/v4/manual/zh/
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作
+
+
+
+
+
+
+
+agent-browser-guide 改名 agent-browser
+技能内容必须与 https://github.com/vercel-labs/agent-browser/blob/main/README.md 一一对应，可以指导 大模型基于此技能进行工作
+
+
+领域模型设计、系统架构设计、需求技术细分、测试用例编写、功能上线发布、项目运维方法，以及一系列所需的支撑技能
+
+Vue 2.0
+Vue 3.0
+组件选配，推荐
+项目结构初始化
+
+- UniApp + uView 2.0 of Vue 2.0
+- UniApp-x + uView Pro of Vue 3.0
+- UniApp-x + Vant of Vue 3.0
+
+独立的技术方案技能：把每种主流技术的文档，都做成 skills 。 如：
+
+
+- uniapp-skills  ✅
+
+Uni-App 项目开发 Skills，uni-app、uni-app-x、uniCloud、uni 小程序 sdk、App离线打包、原生插件开发、uni-ad广告集成、插件市场检索、插件自动安装
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，基于官方文档，完善对应的 Skills
+
+1、基于 https://uniapp.dcloud.net.cn/quickstart-cli.html 创建/更新一个 uniapp-project-creator 的 Skills ，实现一句话创建 uni-app 项目
+2、基于 https://uniapp.dcloud.net.cn/component/、https://uniapp.dcloud.net.cn/api/ 创建/更新一个 uniapp-project 集成 uni-app 所有的组件和 api 的技能，每个组件和 API 都使用独立的示例文件，要有原文档地址，具备官网全部的示例
+3、基于 https://uniapp.dcloud.net.cn/quickstart-cli.html 创建/更新一个 uniappx-project-creator 的 Skills ，实现一句话创建 uni-app-x 项目
+4、基于 https://doc.dcloud.net.cn/uni-app-x/component/、https://doc.dcloud.net.cn/uni-app-x/api/ 创建/更新一个 uniappx-project  的 Skills ，集成 uni-app 所有的组件和 api 的技能，每个组件和 API 都使用独立的示例文件，要有原文档地址，具备官网全部的示例
+5、基于 https://doc.dcloud.net.cn/uniCloud/  创建/更新一个 uniapp-cloud , 实现 uni-app 云开发。
+6、https://nativesupport.dcloud.net.cn/  创建/更新一个 uniapp-mini,  uni小程序
+7、https://nativesupport.dcloud.net.cn/AppDocs/  创建/更新一个 uniapp-native-app , App离线打包
+8、https://nativesupport.dcloud.net.cn/NativePlugin/  创建/更新一个 uniapp-native-plugin , 原生插件开发
+9、https://uniapp.dcloud.net.cn/uni-ad/  创建/更新一个 uniapp-ad , uni-ad 广告变现
+10、基于 https://ext.dcloud.net.cn/ 创建/更新一个 uniapp-plugin , 插件市场实现插件自动安装
+
+这些 Skills， 更关注 uni-app 开发生态，技能内容需要与官方文档 一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，必须与官方文档一一对应，可以指导 大模型基于此技能进行工作
+
+
+- uniapp-uview ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 uniapp-uview 的 skills，必须与
+- UniApp + uview: https://ext.dcloud.net.cn/plugin?id=1593
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作, 这里更关注 UniApp 与 uview 的整合，不需要 uview 官方文档的技能
+
+- uniappx-uview-pro ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 uniappx-uview-pro 的 skills，必须与
+- UniApp: https://ext.dcloud.net.cn/plugin?id=24633
+一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作, 这里更关注 UniApp-x 与 uview-pro 的整合，不需要 uview-pro 官方文档的技能
+
+- uniapp-ucharts ✅
+
+遵循 Agent skills 规范：https://support.claude.com/zh-CN/articles/12512198-%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89-skills 和 https://agentskills.io/what-are-skills
+参考 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid，创建一个名称为 uniapp-ucharts 的 skills，必须与
+- uCharts
+    - UniApp: https://ext.dcloud.net.cn/plugin?id=271
+      一一对应，如同 /Users/wandl/workspaces/workspace-teachingai/full-stack-skills/skills/mermaid 那样，内容清晰明了，一一对应，可以指导 大模型基于此技能进行工作, 这里更关注 UniApp 与 uCharts 的整合，不需要 ucharts 官方文档的技能