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

> Explore Garden Skills, portable prompt bundles that inject domain expertise into AI coding assistants. Enhance Claude Code, Cursor, and Codex with executable SKILL.md files for consistent, high-quality results. Learn more now!

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: deep-dive
- Published: 2026-08-30

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)** – The executable system prompt that defines the workflow, constraints, and domain logic
- **[`README.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) file. Located at paths like [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) or [`skills/gpt-image-2/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/aesop.md)—a concrete palette and typography reference—while the beautiful-article skill contains [`theme-profiles/tufte.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/references/ui-mockups/product-card-overlay.md) for prompt templates without bloating the initial context.
*   **Cross-Agent Compatibility** – The [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/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:

```bash

# 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:

```bash
npx skills add ConardLi/garden-skills --global

```

### Manual Installation

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

```bash
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`](https://github.com/ConardLi/garden-skills/blob/main/skills/gpt-image-2/scripts/generate.js):

```javascript
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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/tufte.md) for scholarly layouts.

Each skill maintains its own [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) and [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/README.md) provides human-readable documentation including overviews, quick-start instructions, and asset galleries. While the agent reads [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) to determine behavior, developers read [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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.