ConardLi/garden-skills
Garden Skills 是 ConardLi 维护的 MIT 仓库，提供 4 个生产可用 Agent Skills：web-video-presentation、web-design-engineer、gpt-image-2、kb-retriever，适配 Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode，支持 npx skills、Claude Code marketplace、Release zip、手动复制和 Git submodule 安装。
Garden Skills
一组精选的、可用于生产环境的 Agent Skills，适用于 Claude Code、Cursor、Codex 以及其他 AI coding agents。
English · 中文文档
目录
| 安装 | 使用 | 贡献 |
|---|---|---|
安装skills CLI (npx)Claude Code plugin marketplace来自 Releases 的固定 .zip手动复制Git submodule |
兼容性什么是 Skill？ | 贡献致谢许可证 |
web-video-presentation
Web Video Presentation Skill
类别： Web 视频 / 演示工程
最适合： 将脚本、文章、课程、产品 demo 和演讲转换为点击驱动的 16:9 Web 演示，可通过屏幕录制生成具有视频感的内容。
web-video-presentation 构建可直接录制的 Vite + React + TypeScript 演示，使其表现得像视频制作画布。该工作流会把原始文章转成旁白脚本，将脚本节拍映射到全屏场景，在必要检查点暂停，并可在视觉大纲获批后选择性合成旁白音频。
亮点：
- 固定 1920×1080 舞台，并按视口缩放，保证屏幕录制稳定
- 点击 / 键盘驱动的
(chapter, step)光标，每个视觉步骤对应一个旁白节拍 - 在脚本、主题、大纲、实现模式和可选音频环节设置严格协作检查点
- 仅悬停显示的隐藏进度控件，使录制时舞台保持干净
- 基于主题 token 的架构，支持从
paper-press到terminal-green的多种视觉语言 - 脚手架化的 Vite + React + TypeScript 项目，包含可复用的舞台 primitives 和录制指南
链接：README · SKILL.md · 下载 v1.1.3 .zip
web-design-engineer
Web Design Skill
类别： 设计 / 前端
最适合： Web 页面、landing pages、dashboards、交互原型、HTML slide decks、动画、UI mockups、数据可视化，以及 design-system 探索。
web-design-engineer 将 AI 生成的 Web artifacts 从“仅能运行”提升为打磨充分、有明确设计意图且具有视觉记忆点的前端作品。它把 agent 视为设计工程师：先理解产品上下文，再声明 design system，展示早期 v0，构建完整体验，并验证结果。
亮点：
- 定义六步设计工作流：需求 → 上下文 → design system → v0 → 完整构建 → 验证
- 通过反套路 blocklist 和更强的视觉判断，避免落入通用 AI UI 模式
- 覆盖 HTML / CSS / JavaScript / React 原型，并提供 responsive layout、motion 和交互打磨指南
- 包含 inline React + Babel、CSS tokens、
oklch()色彩处理、container queries 和 reduced-motion 处理的实用实现规则 - 附带高级 patterns 参考，涵盖设备框、slide engines、动画时间线、dashboards 以及其他可复用 Web artifacts
链接：README · SKILL.md · 网站 · Demo · 下载 v1.0.0 .zip
gpt-image-2
GPT Image 2 Skill
类别： 图像生成 / Prompt Engineering
最适合： 海报、UI mockups、产品视觉、信息图、学术图、技术图、漫画、头像、storyboards、品牌板，以及图像编辑工作流。
gpt-image-2 是面向 GPT Image 2 和 OpenAI-compatible image APIs 的专注图像生成 skill。它设计为可在不同 agent 环境中工作：完全本地的 Garden 生成、委托给宿主原生图像工具，或在没有图像工具时进入仅 prompt 顾问模式。
亮点：
- 支持三种运行模式：Mode A Garden local、Mode B host-native delegation 和 Mode C advisor-only prompt writing
- 每个任务都从模式检测开始，避免 skill 静默选择错误执行路径
- 在
references/下提供 18 个视觉类别和 80+ 个结构化 prompt 模板 - 通过专用工作流和脚本同时覆盖图像生成与图像编辑
- 在 Garden 模式下将 prompts 和生成图像保存到
garden-gpt-image-2/，便于复用、审阅和版本管理
链接：README · SKILL.md · 网站 · 下载 v1.0.3 .zip
kb-retriever
Kb Retriever Skill
类别： 检索 / 本地知识库
最适合： 从本地 knowledge/ 目录回答问题，搜索结构化文档，并在不占满 agent context 的情况下从 Markdown、文本、PDF 和 Excel 文件中提取证据。
kb-retriever 是一个围绕谨慎、渐进式搜索构建的本地知识库 retriever。它不会加载整个文件，而是导航分层索引文件，缩小候选集，正确处理复杂文件类型，并附带来源回答。
亮点：
- 在搜索内容前，使用分层
data_structure.md文件导航知识库 - 对 PDF 和 Excel 文件强制执行 learn-before-process 规则：在提取或分析前先使用随附参考文档
- 结合精确关键词搜索、本地窗口读取、同义词和迭代优化
- 将检索限制在最多 5 轮搜索，使探索保持可控
- 包含面向
grep、pdftotext、pdfplumber和pandas的工作流，并提供带来源意识的答案格式
链接：README · SKILL.md · 下载 v1.0.0 .zip
安装
支持五种安装路径。选择与你的技术栈匹配的一种：
| # | 方法 | 最适合 | 固定版本？ |
|---|---|---|---|
| A | skills CLI (npx skills add) |
任意 agent，一行安装，按需选择 skills | ✅ 通过 tag URL |
| B | Claude Code plugin marketplace | 希望订阅 plugin packs 的 Claude Code 用户 | ✅ 通过 marketplace version |
| C | 来自 GitHub Releases 的固定 .zip |
CI / air-gapped envs / 可复现安装 | ✅ ✅（不可变） |
| D | git clone 后手动复制 |
本地修改 skill 本身 | ❌（跟踪 main） |
| E | Git submodule | Vendored 到更大的项目中，并希望跟踪上游更新 | ✅ 通过 submodule SHA |
上面的每个 skill 区块在其“链接：”行中也有一个
Download v<version> .zip链接， 指向当前固定的 release artifact。这些 URL 会在每次 release 时由scripts/release/update-readme.mjs自动重写，因此始终展示最新的不可变版本。
Option A · skills CLI (npx)
最快的、与 agent 无关的路径。使用标准 npx skills CLI，
它会自动检测你的 agent（Claude Code、Cursor、Codex 等），并将
skill 放入正确目录。
# Install all four skills (latest)
npx skills add ConardLi/garden-skills
# Install just one skill (latest)
npx skills add ConardLi/garden-skills -s web-design-engineer
# Install globally (~/.skills) instead of per-project (./.skills)
npx skills add ConardLi/garden-skills -s gpt-image-2 --global
# Target a specific agent
npx skills add ConardLi/garden-skills -s kb-retriever -a claude-code
默认使用
main上的最新 commit。 这正是 95% 场景下你需要的行为 — CLI 会直接从源码树跟踪每个 skill 最近发布的SKILL.md。
需要固定版本？（CI / 生产环境） 使用带 tag 范围的 tree/ URL —
它指向某个 release 切出时的精确 commit：
# Pin one skill to a specific release
npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer
对于每个 skill，当前固定的 .zip URL 也会在上方对应
“链接：”行中内联展示（Download v<version> .zip 链接）。
常用子命令：
npx skills list # what's installed
npx skills find web-design # search registries
npx skills update # bump everything
npx skills remove kb-retriever # uninstall
Option B · Claude Code plugin marketplace
如果你使用 Claude Code，可以 订阅 marketplace，并安装将一个或多个 skills 打包在一起的 plugin packs：
/plugin marketplace add ConardLi/garden-skills
/plugin install presentation-skills@garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skills
Plugin packs 在 .claude-plugin/marketplace.json 中声明：
| Plugin pack | 包含的 skills |
|---|---|
presentation-skills |
web-video-presentation |
web-design-skills |
web-design-engineer |
knowledge-base-skills |
kb-retriever |
image-generation-skills |
gpt-image-2 |
Option C · 来自 Releases 的固定 .zip
每个正式 release 都会向
GitHub Releases 发布一个不可变 .zip（带 SHA-256 checksum）。
当你需要确保字节内容完全不变时，可在 CI、Dockerfiles 或 air-gapped installers 中固定到它。
# Replace <skill> and <version> with the version you want.
SKILL=web-design-engineer
VERSION=1.0.0
curl -fsSL -o "${SKILL}.zip" \
"https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip"
# Verify the checksum (highly recommended for unattended installs)
curl -fsSL -o "${SKILL}.zip.sha256" \
"https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256"
shasum -a 256 -c "${SKILL}.zip.sha256"
# Drop the folder into the agent's skills directory
unzip -q "${SKILL}.zip" -d .claude/skills/ # or .agents/skills/, .codex/skills/, ...
也提供浮动的“始终最新”URL，适合一次性安装：
https://github.com/ConardLi/garden-skills/releases/latest/download/<skill>-<version>.zip
每个 skill 的固定 URL 都在此 README 中内联列出 — 见上方每个 skill 的“链接”条目下的 “Download”行。release pipeline 会自动保持它们同步。
Option D · 手动复制到你的项目
Clone 仓库并复制你需要的 skill 文件夹 — 如果你想 fork 或修改 skill 本身，这种方式很方便。
git clone https://github.com/ConardLi/garden-skills.git
cp -r garden-skills/skills/web-design-engineer your-project/.claude/skills/
# Cursor / generic agent:
cp -r garden-skills/skills/web-design-engineer your-project/.agents/skills/
agent 下次扫描 workspace 时会发现该 skill。
Option E · Git submodule
适用于 vendoring 到更大项目中，并希望跟踪上游更新的场景：
git submodule add https://github.com/ConardLi/garden-skills.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer
为可复现性固定到某个 release tag：
cd vendor/garden-skills
git checkout web-design-engineer-v1.0.0
兼容性
| Agent / Runtime | Skill 位置 | 状态 |
|---|---|---|
| Claude Code | .claude/skills/<name>/ 或通过 plugin marketplace |
✅ 已测试 |
| Claude.ai (web) | Settings → Capabilities → Skills | ✅ 已测试 |
| Cursor | .agents/skills/<name>/ |
✅ 已测试 |
| Codex CLI | .codex/skills/<name>/ |
✅ 已测试 |
| Gemini CLI | extension manifest | ✅ 已测试 |
| OpenCode | .opencode/skills/<name>/ |
✅ 已测试 |
SKILL.md格式在设计上就是可移植的 — 如果你的 agent 支持 skills，将文件夹复制到它会扫描的目录中，应该就能工作。欢迎通过 PR 扩展此矩阵。
什么是 Skill？
Skill 是一个可由 agent 按需加载的自包含文件夹。它
只是一个 SKILL.md（YAML frontmatter + instructions），也可以选择性附带
参考文档、脚本和资源：
<skill-name>/
├── SKILL.md ← required: when to use it + how to do it
├── README.md ← human-facing docs
├── references/ ← optional: extended docs the agent loads on demand
├── scripts/ ← optional: deterministic executable helpers
└── assets/ ← optional: templates, fonts, icons
agent 会根据 frontmatter 中的 description 行决定是否激活该 skill —
因此 description 是你和 agent 之间的契约。完整规范请见 agentskills.io 和
Anthropic 的参考仓库。
贡献
欢迎提交 bug reports、新 skills 和 tooling 改进。
面向维护者的文档 — 仓库结构、release 流程、版本规则、CI workflow、troubleshooting — 位于
CONTRIBUTING.md（中文）。
如果你想添加 skill 或发布 release，请先阅读它。
快速了解：
git clone https://github.com/ConardLi/garden-skills.git
cd garden-skills
npm run list # show all skills + manifest status
npm run validate # the same check CI runs on every PR
致谢
这个集合建立在以下工作之上：
- Anthropic，感谢其提供 Agent Skills spec 和
anthropics/skills参考仓库。 - Claude Design — 启发
web-design-engineer的 system prompt。原文保存在dist/prompt/claude-design-system-prompt.md以供参考。 - 更广泛的 OSS skill 社区 — 可查看
travisvn/awesome-claude-skills和obra/superpowers进一步探索。
许可证
MIT © ConardLi