Garden Skills – Curated Agent Skills for AI Coding

TL;DR

TL;DR: Garden Skills bundles four production-ready Agent Skills for Claude Code, Cursor, and Codex: a web design engineer, a GPT Image 2 prompt gallery, a local knowledge retrieval system, and a video presentation builder. Install via npx, plugin marketplace, or manual copy.

Source and Accuracy Notes

• Repository: ConardLi/garden-skills (6,950+ stars, MIT license)
• Spec: agentskills.io — follows the community SKILL.md spec
• Docs: English, 中文, 日本語 READMEs included

What Is Garden Skills?

Garden Skills is a curated collection of four Agent Skills that extend AI coding agents with domain-specific capabilities. Instead of a monolithic framework, it provides pluggable skill directories — each a self-contained folder with a SKILL.md spec that the agent reads at inference time.

The four bundled skills cover common gaps in AI coding workflows:

• web-design-engineer: Turns sketches, screenshots, or descriptions into production React + TypeScript + Tailwind pages. Supports 30 component libraries including shadcn/ui, Ant Design, and MUI.
• web-video-presentation: Converts scripts and articles into record-ready 16:9 web presentations with 23 built-in themes and pluggable TTS.
• gpt-image-2: A prompt gallery and skill for OpenAI’s GPT Image 2 model, covering text-to-image, image editing, reference images, research figures, and brand-consistent outputs.
• kb-retriever: Local Markdown knowledge base with file list querying, semantic search, and automated referencing, built on Pagefind.

Repo-Specific Setup Workflow

Step 1: Install via npx (Recommended)

npx @anthropic/skills install ConardLi/garden-skills

Or install individual skills:

npx @anthropic/skills install ConardLi/garden-skills/skills/web-design-engineer
npx @anthropic/skills install ConardLi/garden-skills/skills/gpt-image-2
npx @anthropic/skills install ConardLi/garden-skills/skills/kb-retriever
npx @anthropic/skills install ConardLi/garden-skills/skills/web-video-presentation

Step 2: Install via Claude Code Plugin Marketplace

In Claude Code, open /plugin and search for garden-skills to install from the marketplace directly.

Step 3: Manual Copy

Copy the skills/ subdirectory into your project’s .claude/skills/, .cursor/skills/, or .codex/skills/ folder. Each skill activates automatically when the agent encounters relevant context.

Step 4: Use a Skill

Once installed, the agent reads the skill’s SKILL.md at inference time. For example, when you ask Claude Code to “design a landing page with shadcn/ui”, the web-design-engineer skill activates and guides the generation with component library references, design system rules, and a color palette workflow.

Deeper Analysis

Garden Skills follows the community skill spec from agentskills.io. Each skill is a standalone folder with a SKILL.md markdown file — no plugin runtime, no config files, no dependencies beyond what the agent already has. The agent reads the skill at inference time and applies its instructions, constraints, and tool references inline.

The web-design-engineer skill uses a multi-phase workflow: theme selection (30 built-in palettes), layout mapping, component generation, and polish pass. It references official component library docs rather than guessing APIs, which reduces hallucination in generated UI code.

The gpt-image-2 skill maintains a JSON catalog of over 80 prompt templates organized by category — research figures, UI mockups, brand assets, and more. The agent matches user intent to a template and fills in parameters.

kb-retriever uses Pagefind for local search indexing. When added to a docs folder, it builds a static search index (no server needed) and gives the agent a /kb:search <query> interface and a /kb:file-list command for structured browsing.

Practical Evaluation Checklist

• [ ] Skills install cleanly via npx — no global dependencies
• [ ] web-design-engineer works with 30 component libraries, not just Tailwind
• [ ] gpt-image-2 prompt catalog covers research figures, editing, and brand consistency
• [ ] kb-retriever indexes without a server — static Pagefind build
• [ ] web-video-presentation handles 23 themes and pluggable TTS providers
• [ ] MIT license — no restrictions on commercial use

Security Notes

Skills are Markdown files with instructions — no executable code runs from the skill itself. The agent reads them and decides what tools to call. The main risk is prompt injection: if a skill instructs the agent to write files or execute commands, the agent will do so with its normal permissions. Review skill contents before installing from untrusted sources. Garden Skills is open source and auditable — you can read every SKILL.md before installation.

FAQ

Q: How is this different from MCP servers? A: Skills are Markdown files that guide the agent’s behavior through text instructions. MCP servers are running processes that expose tools via a protocol. Skills are simpler — no server, no runtime, just a .md file the agent reads.

Q: Can I use these skills with Cursor? A: Yes. Copy the skill folders into .cursor/skills/ and they activate when relevant. The spec is agent-agnostic.

Q: How do I create my own skill? A: Follow the spec at agentskills.io. Create a folder with a SKILL.md file containing YAML frontmatter and usage instructions. The agent reads it at inference time.

Q: Does gpt-image-2 require an OpenAI API key? A: Yes — the skill provides prompts and guidance, but the actual image generation needs a valid OPENAI_API_KEY in your environment.

Q: What’s the difference between the four included skills? A: web-design-engineer builds pages, web-video-presentation creates recorded presentations, gpt-image-2 generates images, and kb-retriever searches local docs. Each targets a different gap in agent capabilities.

When the agent reads a SKILL.md, it doesn’t “execute” the skill — it incorporates the instructions into its context window. The skill defines what tools the agent should use, what constraints apply, and what output format is expected. For example, the web-design-engineer skill instructs the agent to avoid inventing component APIs and instead reference official documentation, significantly reducing UI hallucination. The skill architecture means there’s zero runtime overhead — no process to manage, no API to call, no dependency to update.

The web-video-presentation skill deserves special attention for its TTS pluggability. Rather than locking into one provider, it ships with MiniMax CLI and OpenAI TTS providers and provides a provider contract interface. You can plug in ElevenLabs, edge-tts, Azure, Google Cloud, or even macOS say with a snippet. The presentation scaffold is a Vite + React + TypeScript project with reusable stage primitives — chapter/step cursor navigation, hidden hover-only controls, and a fixed 1920×1080 stage that scales for clean screen recording. Collaboration checkpoints are hard-gated: the skill requires explicit approval at script, theme, and outline stages before generating any code.

Conclusion

Garden Skills is a practical, low-friction way to add domain expertise to AI coding agents. The four skills cover real gaps — UI generation, image prompting, local search, and presentation building — without adding runtime complexity. For teams already using Claude Code, Cursor, or Codex, the npx install takes seconds and immediately surfaces new capabilities in the agent’s tool palette.