a1ef780467
* add Chinese docs * docs: Add missing Chinese translations and update README.zh-CN.md links - Add 4 new Chinese translation files: - contributors/examples.md: Real-world examples of using skills - maintainers/audit.md: Repository coherence and correctness audit guide - maintainers/ci-drift-fix.md: CI drift fix guide - users/visual-guide.md: Visual quick start guide with diagrams - Update README.zh-CN.md to replace docs/ links with docs_zh-CN/ links for: - Navigation section - Documentation table - Contributing section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
510 lines
26 KiB
Markdown
510 lines
26 KiB
Markdown
# 可视化快速入门指南
|
||
|
||
**通过视觉学习！**本指南使用图表和可视化示例来帮助您理解技能。
|
||
|
||
---
|
||
|
||
## 大局观
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 您（开发者） │
|
||
│ ↓ │
|
||
│ "帮我构建一个支付系统" │
|
||
│ ↓ │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ AI 助手 │
|
||
│ ↓ │
|
||
│ 加载 @stripe-integration 技能 │
|
||
│ ↓ │
|
||
│ 成为 Stripe 支付专家 │
|
||
│ ↓ │
|
||
│ 提供带有代码示例的专业帮助 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📦 仓库结构（可视化）
|
||
|
||
```
|
||
antigravity-awesome-skills/
|
||
│
|
||
├── 📄 README.md ← 概述和快速入门
|
||
├── 📄 CONTRIBUTING.md ← 贡献者工作流程
|
||
├── 📄 CATALOG.md ← 完整生成的目录
|
||
│
|
||
├── 📁 skills/ ← 1,204+ 技能在这里
|
||
│ │
|
||
│ ├── 📁 brainstorming/
|
||
│ │ └── 📄 SKILL.md ← 技能定义
|
||
│ │
|
||
│ ├── 📁 stripe-integration/
|
||
│ │ ├── 📄 SKILL.md
|
||
│ │ └── 📁 examples/ ← 可选的额外内容
|
||
│ │
|
||
│ ├── 📁 game-development/
|
||
│ │ └── 📁 2d-games/
|
||
│ │ └── 📄 SKILL.md ← 也支持嵌套技能
|
||
│ │
|
||
│ └── ... (1,200+ 总计)
|
||
│
|
||
├── 📁 apps/
|
||
│ └── 📁 web-app/ ← 交互式浏览器
|
||
│
|
||
├── 📁 tools/
|
||
│ ├── 📁 scripts/ ← 验证器和生成器
|
||
│ ├── 📁 lib/ ← 共享辅助工具
|
||
│ └── 📁 bin/ ← 安装程序入口点
|
||
│
|
||
└── 📁 docs/
|
||
├── 📁 users/ ← 入门指南、包、工作流程
|
||
├── 📁 contributors/ ← 模板、解剖、质量标准
|
||
├── 📁 maintainers/ ← 发布和维护文档
|
||
└── 📁 sources/ ← 归属和许可证
|
||
```
|
||
|
||
---
|
||
|
||
## 技能如何工作（流程图）
|
||
|
||
```
|
||
┌──────────────┐
|
||
│ 1. 安装 │ 将技能复制到 .agent/skills/
|
||
└──────┬───────┘
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 2. 调用 │ 在 AI 聊天中输入：@skill-name
|
||
└──────┬───────┘
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 3. 加载 │ AI 读取 SKILL.md 文件
|
||
└──────┬───────┘
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 4. 执行 │ AI 遵循技能指令
|
||
└──────┬───────┘
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 5. 结果 │ 您获得专业帮助！
|
||
└──────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 技能类别（可视化地图）
|
||
|
||
```
|
||
┌─────────────────────────┐
|
||
│ 1,204+ 技能 │
|
||
└────────────┬────────────┘
|
||
│
|
||
┌────────────────────────┼────────────────────────┐
|
||
│ │ │
|
||
┌────▼────┐ ┌──────▼──────┐ ┌──────▼──────┐
|
||
│ 产品 │ │ 开发 │ │ 安全 │
|
||
│ & 用户体验│ │ & 测试 │ │ & 可靠性 │
|
||
└────┬────┘ └──────┬──────┘ └──────┬──────┘
|
||
│ │ │
|
||
• 头脑风暴 • React / Next.js • 应用安全审查
|
||
• 设计系统 • TDD / 调试 • 渗透测试指南
|
||
• 文案撰写 • API / 后端 • 云加固
|
||
• 事件响应
|
||
│ │ │
|
||
└────────────────────────┼────────────────────────┘
|
||
│
|
||
┌────────────────────────┼────────────────────────┐
|
||
│ │ │
|
||
┌────▼────┐ ┌──────▼──────┐ ┌──────▼──────┐
|
||
│ AI │ │ 数据/运维 │ │ 文档/开源 │
|
||
│ 代理 │ │ & 云 │ │ 维护 │
|
||
└────┬────┘ └──────┬──────┘ └──────┬──────┘
|
||
│ │ │
|
||
• RAG 系统 • SQL / 分析 • 发布流程
|
||
• LangGraph • Docker / K8s • 更新日志
|
||
• 提示工程 • Terraform / AWS • PR / 审查
|
||
• 工具 / MCP • 可观测性 • 技能编写
|
||
```
|
||
|
||
---
|
||
|
||
## 技能文件解剖（可视化）
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ SKILL.md │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────┐ │
|
||
│ │ FRONTMATTER（元数据） │ │
|
||
│ │ ───────────────────────────────────────────── │ │
|
||
│ │ --- │ │
|
||
│ │ name: my-skill │ │
|
||
│ │ description: "What this skill does" │ │
|
||
│ │ --- │ │
|
||
│ └───────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌───────────────────────────────────────────────┐ │
|
||
│ │ 内容（指令） │ │
|
||
│ │ ───────────────────────────────────────────── │ │
|
||
│ │ │ │
|
||
│ │ # 技能标题 │ │
|
||
│ │ │ │
|
||
│ │ ## 概述 │ │
|
||
│ │ 这个技能的作用... │ │
|
||
│ │ │ │
|
||
│ │ ## 何时使用 │ │
|
||
│ │ - 在...时使用 │ │
|
||
│ │ │ │
|
||
│ │ ## 指令 │ │
|
||
│ │ 1. 第一步... │ │
|
||
│ │ 2. 第二步... │ │
|
||
│ │ │ │
|
||
│ │ ## 示例 │ │
|
||
│ │ ```javascript │ │
|
||
│ │ // 示例代码 │ │
|
||
│ │ ``` │ │
|
||
│ │ │ │
|
||
│ └───────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 安装（可视化步骤）
|
||
|
||
### 步骤 1：克隆仓库
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 终端 │
|
||
├─────────────────────────────────────────┤
|
||
│ $ git clone https://github.com/ │
|
||
│ sickn33/antigravity-awesome-skills │
|
||
│ .agent/skills │
|
||
│ │
|
||
│ ✓ 正在克隆到 '.agent/skills'... │
|
||
│ ✓ 完成！ │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 步骤 2：验证安装
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ 文件资源管理器 │
|
||
├─────────────────────────────────────────┤
|
||
│ 📁 .agent/ │
|
||
│ └── 📁 skills/ │
|
||
│ ├── 📁 brainstorming/ │
|
||
│ ├── 📁 stripe-integration/ │
|
||
│ ├── 📁 react-best-practices/ │
|
||
│ └── ... (1,200+ 总计) │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 步骤 3：使用技能
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ AI 助手聊天 │
|
||
├─────────────────────────────────────────┤
|
||
│ 您：@brainstorming 帮我设计 │
|
||
│ 一个待办事项应用 │
|
||
│ │
|
||
│ AI：太好了！让我帮您思考 │
|
||
│ 这个问题。首先，让我们 │
|
||
│ 了解您的需求... │
|
||
│ │
|
||
│ 主要用例是什么？ │
|
||
│ a) 个人任务管理 │
|
||
│ b) 团队协作 │
|
||
│ c) 项目规划 │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 示例：使用技能（分步骤）
|
||
|
||
### 场景：您想为应用添加 Stripe 支付
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 步骤 1：确定需求 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ "我需要为我的应用添加支付处理" │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 步骤 2：找到正确的技能 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 搜索："payment" 或 "stripe" │
|
||
│ 找到：@stripe-integration │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 步骤 3：调用技能 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ 您：@stripe-integration 帮我添加订阅计费 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 步骤 4：AI 加载技能知识 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ • Stripe API 模式 │
|
||
│ • Webhook 处理 │
|
||
│ • 订阅管理 │
|
||
│ • 最佳实践 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
↓
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 步骤 5：获得专业帮助 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ AI 提供： │
|
||
│ • 代码示例 │
|
||
│ • 设置说明 │
|
||
│ • 安全考虑 │
|
||
│ • 测试策略 │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 查找技能（可视化指南）
|
||
|
||
### 方法 1：按类别浏览
|
||
```
|
||
README.md → 滚动到"完整技能注册表" → 找到类别 → 选择技能
|
||
```
|
||
|
||
### 方法 2：按关键字搜索
|
||
```
|
||
终端 → ls skills/ | grep "keyword" → 查看匹配的技能
|
||
```
|
||
|
||
### 方法 3：使用索引
|
||
```
|
||
打开 skills_index.json → 搜索关键字 → 找到技能路径
|
||
```
|
||
|
||
---
|
||
|
||
## 创建您的第一个技能（可视化工作流程）
|
||
|
||
```
|
||
┌──────────────┐
|
||
│ 1. 想法 │ "我想分享我的 Docker 知识"
|
||
└──────┬───────┘
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 2. 创建 │ mkdir skills/docker-mastery
|
||
└──────┬───────┘ touch skills/docker-mastery/SKILL.md
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 3. 编写 │ 添加 frontmatter + 内容
|
||
└──────┬───────┘ (使用 docs/contributors/skill-template.md)
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 4. 测试 │ 复制到 .agent/skills/
|
||
└──────┬───────┘ 尝试：@docker-mastery
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 5. 验证 │ npm run validate
|
||
└──────┬───────┘
|
||
│
|
||
↓
|
||
┌──────────────┐
|
||
│ 6. 提交 │ git commit + push + Pull Request
|
||
└──────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 技能复杂度级别
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 技能复杂度 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 简单 标准 复杂 │
|
||
│ ────── ──────── ─────── │
|
||
│ │
|
||
│ • 1 个文件 • 1 个文件 • 多个 │
|
||
│ • 100-200 字 • 300-800 字 • 800-2000 │
|
||
│ • 基本结构 • 完整结构 • 脚本 │
|
||
│ • 无额外内容 • 示例 • 示例 │
|
||
│ • 最佳实践 • 模板 │
|
||
│ • 文档 │
|
||
│ 示例： 示例： 示例： │
|
||
│ git-pushing brainstorming loki-mode │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 贡献影响（可视化）
|
||
|
||
```
|
||
您的贡献
|
||
│
|
||
├─→ 改进文档
|
||
│ │
|
||
│ └─→ 帮助数千开发者理解
|
||
│
|
||
├─→ 创建新技能
|
||
│ │
|
||
│ └─→ 为所有人启用新功能
|
||
│
|
||
├─→ 修复错误/拼写错误
|
||
│ │
|
||
│ └─→ 防止未来用户困惑
|
||
│
|
||
└─→ 添加示例
|
||
│
|
||
└─→ 使初学者学习更容易
|
||
```
|
||
|
||
---
|
||
|
||
## 学习路径（可视化路线图）
|
||
|
||
```
|
||
从这里开始
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 阅读 │
|
||
│ GETTING_STARTED │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 在 AI 助手中 │
|
||
│ 尝试 2-3 个技能 │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 阅读 │
|
||
│ SKILL_ANATOMY │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 研究现有 │
|
||
│ 技能 │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 创建简单 │
|
||
│ 技能 │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 阅读 │
|
||
│ CONTRIBUTING │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
┌─────────────────┐
|
||
│ 提交 PR │
|
||
└────────┬────────┘
|
||
│
|
||
↓
|
||
贡献者！🎉
|
||
```
|
||
|
||
---
|
||
|
||
## 💡 快速提示（可视化速查表）
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 快速参考 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ 📥 安装 │
|
||
│ git clone [repo] .agent/skills │
|
||
│ │
|
||
│ 🎯 使用 │
|
||
│ @skill-name [您的请求] │
|
||
│ │
|
||
│ 🔍 查找 │
|
||
│ ls skills/ | grep "keyword" │
|
||
│ │
|
||
│ ✅ 验证 │
|
||
│ npm run validate │
|
||
│ │
|
||
│ 📝 创建 │
|
||
│ 1. mkdir skills/my-skill │
|
||
│ 2. 使用 frontmatter 创建 SKILL.md │
|
||
│ 3. 添加内容 │
|
||
│ 4. 测试和验证 │
|
||
│ 5. 提交 PR │
|
||
│ │
|
||
│ 🆘 帮助 │
|
||
│ • docs/users/getting-started.md │
|
||
│ • CONTRIBUTING.md │
|
||
│ • docs/contributors/skill-anatomy.md │
|
||
│ • GitHub Issues - 提问 │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 成功故事（可视化时间线）
|
||
|
||
```
|
||
第 1 天：安装技能
|
||
│
|
||
└─→ "哇，@brainstorming 帮我设计了应用！"
|
||
|
||
第 3 天：使用 5 个不同的技能
|
||
│
|
||
└─→ "这些技能为我节省了这么多时间！"
|
||
|
||
第 1 周：创建第一个技能
|
||
│
|
||
└─→ "我以技能的形式分享了我的专业知识！"
|
||
|
||
第 2 周：技能被合并
|
||
│
|
||
└─→ "我的技能正在帮助其他人！🎉"
|
||
|
||
第 1 个月：定期贡献者
|
||
│
|
||
└─→ "我已经贡献了 5 个技能并改进了文档！"
|
||
```
|
||
|
||
---
|
||
|
||
## 下一步
|
||
|
||
1. ✅ **理解**可视化结构
|
||
2. ✅ **安装**您的 AI 工具中的技能
|
||
3. ✅ **尝试**不同类别的 2-3 个技能
|
||
4. ✅ **阅读** CONTRIBUTING.md
|
||
5. ✅ **创建**您的第一个技能
|
||
6. ✅ **分享**给社区
|
||
|
||
---
|
||
|
||
**可视化学习者？**本指南应该有帮助！仍有问题？查看：
|
||
- [getting-started.md](getting-started.md) - 基于文本的介绍
|
||
- [skill-anatomy.md](../contributors/skill-anatomy.md) - 详细分解
|
||
- [CONTRIBUTING.md](../../CONTRIBUTING.md) - 如何贡献
|
||
|
||
**准备好贡献了吗？**您可以做到！💪
|