Agent Skills 学习工坊

吃透 Agent Skills 这一个开放标准 —— 从 SKILL.md 到渐进式披露

一个系统学习 Agent Skills 开放标准的交互式知识工坊，基于 agentskills.io 官方文档整理而成。

✨ 特色

• 📚 55+ 个核心知识点：覆盖 SKILL.md 结构、YAML 前置字段、三层渐进式披露、触发机制、评估闭环、脚本集成到客户端接入的全景知识
• 🗂️ 9 大主题分类：基础概念 · 规范与字段 · 渐进式披露 · Quickstart 实战 · 最佳实践 · 优化 description · 评估输出质量 · 脚本集成 · 客户端实现
• 🎴 多种学习方式：渐进学习 / 闪卡复习 / 概念索引 / 学习进度
• 📱 PWA 支持：可安装到桌面，离线可用
• 🎨 极简美学：紫色主题 + 现代简洁，聚焦官方规范

🚀 在线访问

• Vercel: https://learn-agent-skills.vercel.app
• EdgeOne: https://learn-agent-skills.edgeone.run

📚 官方来源

• agentskills.io/home - Overview
• agentskills.io/specification - 完整规范
• agentskills.io/skill-creation/quickstart - 快速入门
• agentskills.io/skill-creation/best-practices - 最佳实践
• agentskills.io/skill-creation/optimizing-descriptions - 优化 description
• agentskills.io/skill-creation/evaluating-skills - 输出质量评估
• agentskills.io/skill-creation/using-scripts - 脚本集成
• agentskills.io/client-implementation/adding-skills-support - 客户端实现

🏗️ 技术栈

• 纯静态 HTML + CSS + JavaScript（零构建、零依赖）
• PWA（manifest.json + Service Worker）
• localStorage 进度持久化

📂 项目结构

learn-agent-skills/
├── index.html           # 首页
├── learn.html           # 渐进学习
├── flashcard.html       # 闪卡复习
├── roots.html           # 主题索引
├── root-detail.html     # 主题详情
├── progress.html        # 学习进度
├── js/
│   ├── wordData.js      # 55+ 个知识点数据
│   ├── siteConfig.js    # 站点配置
│   └── storage.js       # localStorage 封装
├── css/minimal.css      # 样式
├── manifest.json        # PWA 配置
└── sw.js                # Service Worker

🛠️ 本地运行

# 任意静态服务器都行
npx serve .
# 或
python3 -m http.server 8080

访问 http://localhost:8080 即可。

📜 许可

MIT © dimayip