How Garden Skills Extend AI Coding Assistants: Portable Agent Workflows Explained

Garden Skills are portable, self-contained prompt bundles that inject domain-specific expertise into AI coding assistants through executable SKILL.md files, enabling consistent, high-quality outputs across Claude Code, Cursor, Codex, and other agents.

Garden Skills is a curated repository of Agent Skills developed by ConardLi that transforms generic LLMs into specialized coding assistants. By packaging sophisticated system prompts, design vocabularies, and deterministic workflows into reusable assets, these skills allow AI agents to deliver production-ready artifacts across web design, video presentations, image generation, and knowledge retrieval tasks.

---

What Are Garden Skills?

Garden Skills is a collection of Agent Skills—portable, self-contained directories that can be dropped into any AI coding assistant environment. Each skill functions as a standalone module containing an executable system prompt that activates when the agent detects a matching request.

According to the ConardLi/garden-skills source code, every skill follows a consistent directory structure:

• SKILL.md – The executable system prompt that defines the workflow, constraints, and domain logic
• README.md – Human-friendly documentation with quick-start guides and galleries
• Optional reference assets – Style recipes, component templates, color tokens, or helper scripts

When an agent receives a request matching a skill's description, it performs an on-demand load of the SKILL.md file and executes the encoded workflow step-by-step.

---

Architecture of a Garden Skill

The SKILL.md Executable System Prompt

The core of every Garden Skill resides in its SKILL.md file. Located at paths like skills/web-design-engineer/SKILL.md or skills/gpt-image-2/SKILL.md, this file contains the machine-readable instructions that override the base model behavior.

For example, the web-design-engineer skill's SKILL.md defines a calibrated workflow: requirements → design declaration → v0 draft → full build → verification. This structured pipeline reduces hallucinations by forcing the model to validate each phase before proceeding.

Documentation and Reference Assets

Alongside the executable prompt, skills include rich documentation and lazy-loaded libraries. The web-design-engineer skill includes references/style-recipes/aesop.md—a concrete palette and typography reference—while the beautiful-article skill contains theme-profiles/tufte.md defining editorial theme contracts for agents.

These assets remain dormant until the skill activates, keeping prompt sizes small while offering extensive design vocabularies on demand.

---

How Garden Skills Extend AI Coding Assistants

Garden Skills augment AI agents through four key mechanisms:

• Domain-Specific Expertise – The web-design-engineer skill injects a full design system with anti-cliché rules and performs a "Design Read" before emitting any HTML/CSS/JS, preventing generic bootstrap-style outputs.
• Structured, Repeatable Processes – Each skill enforces a calibrated workflow that the model follows sequentially. The beautiful-article skill implements an editorial pipeline (plan → build → review) ensuring consistent article quality.
• Extensible Libraries – Style-recipe catalogs, component templates, and color-token systems are lazily loaded on demand. The gpt-image-2 skill references references/ui-mockups/product-card-overlay.md for prompt templates without bloating the initial context.
• Cross-Agent Compatibility – The SKILL.md format is agent-agnostic. As long as the host scans a *.skills/ directory, the same skill works in Claude Code, Cursor, Codex CLI, Gemini extensions, or OpenCode.

---

Installing and Using Garden Skills

CLI Installation via npx

The fastest way to add a skill to your project uses the skills CLI distributed via npx:

# Install only the web-design-engineer skill (latest main)

npx skills add ConardLi/garden-skills -s web-design-engineer

To install all available skills globally for system-wide access:

npx skills add ConardLi/garden-skills --global

Manual Installation

For customization or offline use, clone the repository and copy specific skill directories:

git clone https://github.com/ConardLi/garden-skills.git
cp -r garden-skills/skills/web-design-engineer ./my-project/.agents/skills/

Programmatic Integration

Skills expose JavaScript APIs for scripted execution. The gpt-image-2 skill includes a generate script at skills/gpt-image-2/scripts/generate.js:

import { generate } from "./skills/gpt-image-2/scripts/generate.js";

await generate({
  category: "posters",
  template: "exploded-view-poster",
  prompt: "A futuristic tech-product poster with neon outlines",
});

---

Core Garden Skills in the Repository

The ConardLi/garden-skills repository includes several production-ready skills:

• web-design-engineer – Forces design-system compliance and anti-cliché rules before code generation.
• web-video-presentation – Provides Vite + React scaffolding with theme galleries defined in themes/creative-voltage/theme.json.
• gpt-image-2 – Handles mode detection and prompt templates for image generation workflows.
• kb-retriever – Implements hierarchical knowledge-base search protocols with PDF handling guides.
• beautiful-article – Enforces editorial pipelines with theme profiles like tufte.md for scholarly layouts.

Each skill maintains its own SKILL.md and README.md at the root of its respective folder under skills/.

---

Summary

• Garden Skills are self-contained prompt bundles that transform generic LLMs into domain-specific coding assistants through executable SKILL.md files.
• Each skill provides structured workflows (requirements → declaration → draft → build → verification) that reduce hallucinations and improve output consistency.
• The architecture supports lazy-loaded reference assets, keeping prompt sizes minimal while offering rich design vocabularies like references/style-recipes/aesop.md.
• Cross-agent compatibility ensures skills work across Claude Code, Cursor, Codex, Gemini, and OpenCode without modification.
• Installation methods include npx CLI commands, global installation, or manual copying to .agents/skills/ directories.

---

Frequently Asked Questions

What is the difference between SKILL.md and README.md in Garden Skills?

SKILL.md serves as the machine-executable system prompt that defines the workflow, constraints, and step-by-step logic the AI agent must follow. In contrast, README.md provides human-readable documentation including overviews, quick-start instructions, and asset galleries. While the agent reads SKILL.md to determine behavior, developers read README.md to understand how to invoke and customize the skill.

Can Garden Skills work with any AI coding assistant?

Yes, Garden Skills are agent-agnostic by design. As long as the host application scans a *.skills/ directory and can parse the SKILL.md format, the same skill package works interchangeably across Claude Code, Cursor, Codex CLI, Gemini extensions, and OpenCode. This portability stems from the standardized directory structure and prompt format used throughout the repository.

How does the web-design-engineer skill improve AI-generated designs?

The web-design-engineer skill in skills/web-design-engineer/SKILL.md injects a comprehensive design system that mandates a "Design Read" phase before any code generation. It enforces anti-cliché rules that prevent generic bootstrap-style outputs and requires the agent to verify design declarations against reference assets like references/style-recipes/aesop.md before building HTML/CSS/JS.

How are Garden Skills installed in a project?

You can install Garden Skills via three methods: using the npx CLI with npx skills add ConardLi/garden-skills -s <skill-name> for specific skills, adding the --global flag for system-wide availability, or manually cloning the repository and copying skill folders (such as skills/kb-retriever/ or skills/beautiful-article/) into your project's .agents/skills/ directory.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}