---

Table of contents

Install	Guide	Project	Meta
Install Claude Code plugin marketplace Manual copy Git submodule	Compatibility Anatomy of a Skill	Repository layout	Acknowledgments License

---

web-video-presentation

Category: Web Video / Presentation Engineering
Best for: turning scripts, articles, lessons, product demos, and talks into click-driven 16:9 web presentations that can be screen-recorded as cinematic videos.

web-video-presentation builds record-ready Vite + React + TypeScript presentations that behave like video production surfaces. The workflow turns raw articles into narration scripts, maps script beats to full-screen scenes, pauses at required checkpoints, and can optionally synthesize narration audio after the visual outline is approved.

Highlights:

• Fixed 1920×1080 stage that scales to the viewport for stable screen recording
• Click / keyboard driven (chapter, step) cursor, with one narration beat per visual step
• Hard collaboration checkpoints for script, theme, outline, implementation mode, and optional audio
• Hidden hover-only progress controls so the stage stays clean while recording
• Theme-token architecture with multiple visual languages, from paper-press to terminal-green
• Scaffolded Vite + React + TypeScript project with reusable stage primitives and recording guidance

Links: README · SKILL.md

---

web-design-engineer

Category: Design / Frontend
Best for: web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animations, UI mockups, data visualizations, and design-system explorations.

web-design-engineer turns AI-generated web artifacts from merely functional into polished, deliberate, and visually memorable front-end work. It treats the agent as a design engineer: first understanding product context, then declaring a design system, showing an early v0, building the full experience, and verifying the result.

Highlights:

• Defines a six-step design workflow: requirements → context → design system → v0 → full build → verification
• Pushes beyond generic AI UI patterns with an anti-cliché blocklist and stronger visual judgment
• Covers HTML / CSS / JavaScript / React prototypes, with guidance for responsive layout, motion, and interaction polish
• Includes practical implementation rules for inline React + Babel, CSS tokens, oklch() color work, container queries, and reduced-motion handling
• Ships an advanced patterns reference for device frames, slide engines, animation timelines, dashboards, and other reusable web artifacts

Links: README · SKILL.md · Website · Demo

---

gpt-image-2

Category: Image Generation / Prompt Engineering
Best for: posters, UI mockups, product visuals, infographics, academic figures, technical diagrams, comics, avatars, storyboards, branding boards, and image-editing workflows.

gpt-image-2 is a focused image-generation skill for GPT Image 2 and OpenAI-compatible image APIs. It is designed to work across different agent environments: fully local Garden generation, host-native image-tool delegation, or prompt-only advisor mode when no image tool is available.

Highlights:

• Supports three runtime modes: Mode A Garden local, Mode B host-native delegation, and Mode C advisor-only prompt writing
• Starts every task with mode detection so the skill does not silently choose the wrong execution path
• Provides 18 visual categories and 80+ structured prompt templates under references/
• Covers both image generation and image editing through dedicated workflows and scripts
• Saves prompts and generated images under garden-gpt-image-2/ in Garden mode for reuse, review, and versioning

Links: README · SKILL.md · Website

---

kb-retriever

Category: Retrieval / Local Knowledge Base
Best for: answering questions from a local knowledge/ directory, searching structured documentation, and extracting evidence from Markdown, text, PDF, and Excel files without flooding the agent context.

kb-retriever is a local knowledge-base retriever built around careful, progressive search. Instead of loading whole files, it navigates hierarchical index files, narrows the candidate set, processes complex file types correctly, and answers with sources.

Highlights:

• Uses layered data_structure.md files to navigate the knowledge base before searching content
• Enforces a learn-before-process rule for PDF and Excel files, using the included reference docs before extraction or analysis
• Combines precise keyword search, local windowed reads, synonyms, and iterative refinement
• Bounds retrieval to at most 5 search rounds so exploration stays controlled
• Includes workflows for grep, pdftotext, pdfplumber, and pandas, with source-aware answer formatting

Links: README · SKILL.md

---

Install

Option A · Claude Code plugin marketplace

The fastest path if you use Claude Code:

/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 are declared in .claude-plugin/marketplace.json:

Plugin pack	Skills included
presentation-skills	web-video-presentation
web-design-skills	web-design-engineer
knowledge-base-skills	kb-retriever
image-generation-skills	gpt-image-2

Option B · Manual copy into your project

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.

Option C · Git submodule

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

---

Compatibility

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.md format 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.

---

Anatomy of a Skill

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.

---

Repository layout

.
├── skills/                              ← all skills live here, one folder each
│   ├── web-video-presentation/
│   │   ├── SKILL.md
│   │   ├── README.md  /  README.zh-CN.md
│   │   ├── references/  (principles, outline, themes, audio, recording)
│   │   ├── scripts/scaffold.sh
│   │   ├── templates/
│   │   └── themes/
│   │
│   ├── web-design-engineer/
│   │   ├── SKILL.md
│   │   ├── README.md  /  README.zh-CN.md
│   │   └── references/advanced-patterns.md
│   │
│   ├── 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)
│   │
│   └── 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
│
├── .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/                                ← shared reference assets
│   ├── imgs/                            ← README skill posters
│   ├── prompt/
│   │   └── claude-design-system-prompt.md   (original Claude Design system prompt)
│
├── website/                             ← standalone showcase websites
│   ├── gpt-image2-website/              ← GPT Image 2 skill website
│   └── web-design-website/              ← web-design-engineer skill website
│
├── README.md  /  README.zh-CN.md        ← collection index (this file)
├── LICENSE
└── .gitignore

---

Acknowledgments

This collection stands on the shoulders of:

• Anthropic for the Agent Skills spec and the anthropics/skills reference repository.
• Claude Design — the system prompt that inspired web-design-engineer. The original is preserved in dist/prompt/claude-design-system-prompt.md for reference.
• The broader OSS skill community — see travisvn/awesome-claude-skills and obra/superpowers for further discovery.

---

License

MIT © ConardLi