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,684+ 技能在这里
|
|
│ │
|
|
│ ├── 📁 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,684+ 技能 │
|
|
└────────────┬────────────┘
|
|
│
|
|
┌────────────────────────┼────────────────────────┐
|
|
│ │ │
|
|
┌────▼────┐ ┌──────▼──────┐ ┌──────▼──────┐
|
|
│ 产品 │ │ 开发 │ │ 安全 │
|
|
│ & 用户体验│ │ & 测试 │ │ & 可靠性 │
|
|
└────┬────┘ └──────┬──────┘ └──────┬──────┘
|
|
│ │ │
|
|
• 头脑风暴 • 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) - 如何贡献
|
|
|
|
**准备好贡献了吗？**您可以做到！💪
|