A curated collection of production-ready Agent Skills for Claude Code, Cursor, Codex, and other AI coding agents.
| Skill | Category | Highlights | Docs |
|---|---|---|---|
|
Design / Frontend |
Turns AI-generated web pages from "functional" into "stunning."
|
||
|
Image Gen / Prompting |
A focused image-gen skill for GPT Image 2 (and OpenAI-compatible image APIs).
|
||
|
|
Retrieval / Docs |
A local knowledge-base retriever that never loads whole files into context.
|
The fastest path if you use Claude Code:
/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills
/plugin install knowledge-base-skills@garden-skills
/plugin install image-generation-skills@garden-skillsPlugin packs are declared in .claude-plugin/marketplace.json:
| Plugin pack | Skills included |
|---|---|
web-design-skills |
web-design-engineer |
knowledge-base-skills |
rag-skill |
image-generation-skills |
gpt-image-2 |
Each skill folder is self-contained — copy the one(s) you want into your project's skills directory:
# Claude Code / Claude.ai
cp -r skills/web-design-engineer your-project/.claude/skills/
# Cursor / generic agent
cp -r skills/web-design-engineer your-project/.agents/skills/The agent will discover the skill the next time it scans the workspace.
If you want to track upstream updates inside a larger project:
git submodule add https://github.com/ConardLi/web-design-skill.git vendor/garden-skills
ln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer| Agent / Runtime | Skill location | Status |
|---|---|---|
| Claude Code | .claude/skills/<name>/ or via plugin marketplace |
✅ Tested |
| Claude.ai (web) | Settings → Capabilities → Skills | ✅ Tested |
| Cursor | .agents/skills/<name>/ |
✅ Tested |
| Codex CLI | .codex/skills/<name>/ |
✅ Tested |
| Gemini CLI | extension manifest | ✅ Tested |
| OpenCode | .opencode/skills/<name>/ |
✅ Tested |
The
SKILL.mdformat is portable by design — if your agent supports skills, copy the folder into the directory it scans, and it should work. PRs welcome to extend this matrix.
Every skill in this repo follows the same minimal shape:
<skill-name>/
├── SKILL.md ← required: YAML frontmatter + instructions for the agent
├── README.md ← English docs for humans (this is what GitHub renders)
├── README.zh-CN.md ← Chinese docs for humans
├── references/ ← optional: docs the agent loads on-demand
├── scripts/ ← optional: deterministic executable code
└── assets/ ← optional: templates, fonts, icons used in outputs
Frontmatter is the contract that tells the agent when to use the skill:
---
name: my-skill
description: A clear sentence about what this skill does and when to use it.
The agent uses this to decide whether to load the skill.
---
# My Skill
Detailed instructions, examples, and constraints go here.For the full spec, see agentskills.io and the official examples from Anthropic.
.
├── skills/ ← all skills live here, one folder each
│ ├── web-design-engineer/
│ │ ├── SKILL.md
│ │ ├── README.md / README.zh-CN.md
│ │ └── references/advanced-patterns.md
│ │
│ ├── rag-skill/ ← frontmatter name: kb-retriever
│ │ ├── SKILL.md
│ │ ├── README.md / README.zh-CN.md
│ │ ├── references/ (pdf_reading.md, excel_reading.md, excel_analysis.md)
│ │ └── scripts/convert_pdf_to_images.py
│ │
│ └── gpt-image-2/
│ ├── SKILL.md
│ ├── README.md / README.zh-CN.md
│ ├── references/ (18 categories, 70+ prompt templates)
│ └── scripts/ (check-mode.js, generate.js, edit.js, shared.js)
│
├── .claude-plugin/
│ └── marketplace.json ← Claude Code plugin marketplace manifest
│
├── demo/ ← live, openable demos
│ └── web-design-demo/
│ └── demo2/ ← side-by-side viewer for web-design-engineer
│ ├── index.html
│ ├── demo1.html / demo1-with-skill.html
│ └── demo2-with-skill.html
│
├── dist/ ← reference assets and showcase site
│ ├── prompt/
│ │ └── claude-design-system-prompt.md (original Claude Design system prompt)
│ └── web/ (Vite + React showcase site, optional)
│
├── README.md / README.zh-CN.md ← collection index (this file)
├── LICENSE
└── .gitignore
This collection stands on the shoulders of:
- Anthropic for the Agent Skills spec and the
anthropics/skillsreference repository. - Claude Design — the system prompt that inspired
web-design-engineer. The original is preserved indist/prompt/claude-design-system-prompt.mdfor reference. - The broader OSS skill community — see
travisvn/awesome-claude-skillsandobra/superpowersfor further discovery.