{ "markdown": "
\n\n# Garden Skills\n\n**A curated collection of production-ready [Agent Skills](https://support.claude.com/en/articles/12512176-what-are-skills) for Claude Code, Cursor, Codex, and other AI coding agents.**\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\"Web\n
web-video-presentation\n
Web video / presentation\n		\n\"Web\n
web-design-engineer\n
Design / frontend\n
\n\"GPT\n
gpt-image-2\n
Image generation / prompting\n		\n\"Beautiful\n
beautiful-article\n
Any source → beautiful article\n
\n\n[![License: MIT](https://img.shields.io/github/license/ConardLi/garden-skills?style=flat-square&color=blue)](./LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/ConardLi/garden-skills?style=flat-square)](https://github.com/ConardLi/garden-skills/stargazers)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](#contributing)\n[![Skills count](https://img.shields.io/badge/skills-5-orange?style=flat-square)](#skills-gallery)\n[![Spec](https://img.shields.io/badge/spec-SKILL.md-black?style=flat-square)](https://agentskills.io)\n\n[English](./README.md) · [中文文档](./README.zh-CN.md) · [日本語](./README.ja-JP.md)\n\n
\n\n---\n\n## Table of contents\n\n| Install | Use | Contribute |\n|---|---|---|\n| [Install](#install)
[`skills` CLI (npx)](#option-a--skills-cli-npx)
[Claude Code plugin marketplace](#option-b--claude-code-plugin-marketplace)
[Pinned `.zip` from Releases](#option-c--pinned-zip-from-releases)
[Manual copy](#option-d--manual-copy-into-your-project)
[Git submodule](#option-e--git-submodule) | [Compatibility](#compatibility)
[What is a Skill?](#what-is-a-skill) | [Contributing](#contributing)
[Acknowledgments](#acknowledgments)
[License](#license) |\n\n---\n\n### [`web-video-presentation`](./skills/web-video-presentation)\n\n![Web Video Presentation Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video-presentation-skill.webp)\n\n**Category:** Web Video / Presentation Engineering \n**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.\n\n`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.\n\nHighlights:\n\n- Fixed 1920×1080 stage that scales to the viewport for stable screen recording\n- Click / keyboard driven `(chapter, step)` cursor, with one narration beat per visual step\n- Hard collaboration checkpoints for script, theme, outline, implementation mode, and optional audio\n- Hidden hover-only progress controls so the stage stays clean while recording\n- Theme-token architecture with **23 built-in themes**, each with its own design signature — editorial, terminal, engineering, Swiss International, and more\n- **Pluggable TTS** — provider-agnostic audio runner; ships **two built-in providers** (MiniMax `mmx-cli` + OpenAI TTS via curl) plus a contract + ready-to-paste snippets for ElevenLabs / edge-tts / Azure / Google Cloud / macOS `say`\n- Scaffolded Vite + React + TypeScript project with reusable stage primitives and recording guidance\n\n\n\n\n\n\n\n\n
\"creative-voltage
creative-voltage
creative talks		\"blueprint
blueprint
tech architecture		\"swiss-ikb
swiss-ikb
data reports		\"chalk-garden
chalk-garden
popular science
\n\n\"Theme\n\n↑ All 23 themes at a glance — open the full gallery for live 16:9 previews, design signatures, and best-for tags.\n\nLinks: [README](./skills/web-video-presentation/README.md) · [SKILL.md](./skills/web-video-presentation/SKILL.md) · [Download v1.2.2 .zip](https://github.com/ConardLi/garden-skills/releases/download/web-video-presentation-v1.2.2/web-video-presentation-1.2.2.zip)\n\n---\n\n### [`web-design-engineer`](./skills/web-design-engineer)\n\n![Web Design Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design-skill.webp)\n\n**Category:** Design / Frontend \n**Best for:** web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animations, UI mockups, data visualizations, and design-system explorations.\n\n`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.\n\nHighlights:\n\n- Converts the brief into a five-dial Design Read covering variance, motion, density, asset dependence, and brand fidelity\n- Distinguishes extension, preserve, and overhaul redesign modes before changing an existing product\n- Runs executable browser acceptance only when the user explicitly requests acceptance, QA, or browser testing\n- Pushes beyond generic AI UI patterns with an anti-cliché blocklist and stronger visual judgment\n- Ships a **Design Direction Advisor (six differentiated schools) + 25 anchored style recipes** (Linear / Aesop / Pentagram / Bloomberg / Stripe Press / Mid-Century, etc.) — each recipe carries concrete palette, typography, signature moves, and anti-patterns ready to paste into the design-system declaration\n- Covers HTML / CSS / JavaScript / React prototypes, with guidance for responsive layout, motion, and interaction polish\n- Includes practical implementation rules for inline React + Babel, CSS tokens, `oklch()` color work, container queries, and reduced-motion handling\n- Ships an advanced patterns reference for device frames, slide engines, animation timelines, dashboards, and other reusable web artifacts\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"aesop
aesop
apothecary pages		\"muji-kenya-hara
muji-kenya-hara
object catalogues		\"monocle-magazine
monocle-magazine
magazine contents		\"stripe-press
stripe-press
book detail
\"bloomberg-terminal
bloomberg-terminal
trading dashboards		\"linear
linear
dev tool landing		\"vercel-mesh
vercel-mesh
deploy hero		\"tufte-dataink
tufte-dataink
data narratives
\"mid-century-modern
mid-century-modern
poster homage		\"y2k-retrofuturism
y2k-retrofuturism
Y2K portal		\"bloomberg-businessweek-turley
businessweek-turley
editorial covers		\"active-theory
active-theory
cinematic launch
\n\n↑ 12 of 25 anchored recipes — open the full gallery for all 25 working artefacts (apothecary pages, trading workstations, magazine covers, Y2K portals, mid-century posters …) with signature moves and best-for tags.\n\nLinks: [README](./skills/web-design-engineer/README.md) · [SKILL.md](./skills/web-design-engineer/SKILL.md) · [Website](./website/web-design-website) · [Demo](./demo/web-design-demo) · [Download v1.3.0 .zip](https://github.com/ConardLi/garden-skills/releases/download/web-design-engineer-v1.3.0/web-design-engineer-1.3.0.zip)\n\n---\n\n### [`gpt-image-2`](./skills/gpt-image-2)\n\n![GPT Image 2 Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/gpt-image-2-skill.webp)\n\n**Category:** Image Generation / Prompt Engineering \n**Best for:** posters, UI mockups, product visuals, infographics, academic figures, technical diagrams, comics, avatars, storyboards, branding boards, and image-editing workflows.\n\n`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.\n\nHighlights:\n\n- Supports three runtime modes: **Mode A Garden local**, **Mode B host-native delegation**, and **Mode C advisor-only prompt writing**\n- Starts every task with mode detection so the skill does not silently choose the wrong execution path\n- Provides 18 visual categories and 79 structured prompt templates under `references/`\n- Covers both image generation and image editing through dedicated workflows and scripts\n- Saves prompts and generated images under `garden-gpt-image-2/` in Garden mode for reuse, review, and versioning\n\n#### Selected live cases\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \"Background
\n background-replacement
\n Portrait edit with Times Square relighting.\n 		\n \"AI
\n chat-interface-scene
\n Claude-style assistant product screenshot.\n 		\n \"Live
\n live-commerce-ui
\n Celebrity livestream commerce interface.\n 		\n \"Product
\n product-card-overlay
\n Skincare landing-page hero.\n
\n \"Bento
\n bento-grid-infographic
\n High-density iPhone 16 Pro explainer.\n 		\n \"System
\n system-architecture
\n Multi-tenant AI SaaS production diagram.\n 		\n \"Dense
\n dense-explainer-slides
\n AI Agent mechanism in one page.\n 		\n \"Food
\n food-map
\n City-walk editorial food guide.\n
\n \"Exploded
\n exploded-view-poster
\n Vision Pro 2 optical and compute teardown.\n 		\n \"Neural
\n neural-network-architecture
\n ViT-B/16 model figure for papers.\n 		\n \"Cosmetic
\n cosmetic-packaging
\n Premium skincare gift-box composition.\n 		\n \"Anime
\n anime-key-visual
\n Game-launch key art with crop-safe layout.\n
\n\n↑ 12 selected cases from the 160+ public case library — open the skill gallery for more templates, or browse the live website.\n\nLinks: [README](./skills/gpt-image-2/README.md) · [SKILL.md](./skills/gpt-image-2/SKILL.md) · [Website](./website/gpt-image2-website) · [Download v1.0.4 .zip](https://github.com/ConardLi/garden-skills/releases/download/gpt-image-2-v1.0.4/gpt-image-2-1.0.4.zip)\n\n---\n\n### [`kb-retriever`](./skills/kb-retriever)\n\n![Kb Retriever Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/kb-retriever-skill.webp)\n\n**Category:** Retrieval / Local Knowledge Base \n**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.\n\n`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.\n\nHighlights:\n\n- Uses layered `data_structure.md` files to navigate the knowledge base before searching content\n- Enforces a **learn-before-process** rule for PDF and Excel files, using the included reference docs before extraction or analysis\n- Combines precise keyword search, local windowed reads, synonyms, and iterative refinement\n- Bounds retrieval to at most 5 search rounds so exploration stays controlled\n- Includes workflows for `grep`, `pdftotext`, `pdfplumber`, and `pandas`, with source-aware answer formatting\n\nLinks: [README](./skills/kb-retriever/README.md) · [SKILL.md](./skills/kb-retriever/SKILL.md) · [Download v1.0.1 .zip](https://github.com/ConardLi/garden-skills/releases/download/kb-retriever-v1.0.1/kb-retriever-1.0.1.zip)\n\n---\n\n### [`beautiful-article`](./skills/beautiful-article)\n\n![Beautiful Article Skill](https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/article/banner.webp)\n\n**Category:** Editorial · Any source → beautiful article \n**Best for:** turning URLs, PDFs, DOCX, Markdown, plain text, screenshots, and pasted notes into a **polished, share-ready article** — long-form, briefings, explainers, tutorials, post-mortems, visual essays, dialogue transcripts.\n\n`beautiful-article` is an editorial harness skill: it does not just \"make a webpage\", it edits and designs the source material into a polished article that is easier to read, share, and archive than the original. The skill flows through a small `source → plan → double-confirmation → build → final review → repair` loop and pauses at three hard checkpoints so the user keeps editorial control over article type, theme, layout, image strategy, cover, and delivery format.\n\nHighlights:\n\n- **Article first** — the focus is the *article*: better reading, better pacing, better aesthetics. Delivery is a self-contained file (HTML, optional PDF), but that's a delivery detail, not the goal\n- **Reacticle component protocol** — prose-first semantic components (Hero / Lead / Section / Quote / Callout / Image / Formula / CodeBlock / Table…) plus a theme-token-only `Raw` free layer; the underlying React library lives at [`ConardLi/reacticle`](https://github.com/ConardLi/reacticle)\n- **10 article types with bundled retention ratios** — `longform · ~100%` / `tutorial · ~90%` / `full-report · ~80%` / `explainer · ~80%` / `dialogue · ~80%` / `review · ~70%` / `essay · ~70%` / `briefing · ~50%` / `visual-essay · ~40%` / `interactive-explainer · ~25% excerpt + 75% AI-rebuild`\n- **11 authoring theme profiles** (`tufte`, `press`, `bayer`, `bodoni`, `vignelli`, `sottsass`, `freddie`, `andy`, `fuller`, `knuth`, `shannon`) — each is a Markdown contract for the agent rather than a CSS file\n- **Hard collaboration checkpoints** with item-by-item decision capture (no silent defaults), plus a 3:4 book-style cover, default-on TOC, and language-aware translation step\n- **Per-node quality protocol** — main-agent inline checks for plan, sub-agent reviewers for first spread / sections / final review, repair as minimal slices\n\n#### Theme gallery\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"tufte\"
tufte		\"press\"
press		\"bayer\"
bayer		\"bodoni\"
bodoni
\"vignelli\"
vignelli		\"sottsass\"
sottsass		\"freddie\"
freddie		\"andy\"
andy
\n\nLinks: [README](./skills/beautiful-article/README.md) · [SKILL.md](./skills/beautiful-article/SKILL.md) · [Download v0.1.0 .zip](https://github.com/ConardLi/garden-skills/releases/download/beautiful-article-v0.1.0/beautiful-article-0.1.0.zip)\n\n---\n\n## Install\n\nThere are five supported install paths. Pick the one that fits your stack:\n\n| # | Method | Best for | Pinned version? |\n|---|---|---|---|\n| A | [`skills` CLI (`npx skills add`)](#option-a--skills-cli-npx) | Any agent, one-line install, pick & choose skills | ✅ via tag URL |\n| B | [Claude Code plugin marketplace](#option-b--claude-code-plugin-marketplace) | Claude Code users who want to subscribe to plugin packs | ✅ via marketplace version |\n| C | [Pinned `.zip` from GitHub Releases](#option-c--pinned-zip-from-releases) | CI / air-gapped envs / reproducible installs | ✅ ✅ (immutable) |\n| D | [Manual copy after `git clone`](#option-d--manual-copy-into-your-project) | Local hacking on the skill itself | ❌ (tracks `main`) |\n| E | [Git submodule](#option-e--git-submodule) | Vendored into a larger project, want upstream updates | ✅ via submodule SHA |\n\n> Each skill section above also has a **`Download v .zip`** link in\n> its \"Links:\" row that points at the current pinned release artifact. Those\n> URLs are auto-rewritten by [`scripts/release/update-readme.mjs`](./scripts/release/update-readme.mjs)\n> on every release, so they always advertise the latest immutable version.\n\n### Option A · `skills` CLI (npx)\n\nThe fastest agent-agnostic path. Uses the standard [`npx skills` CLI](https://www.npmjs.com/package/skills),\nwhich auto-detects your agent (Claude Code, Cursor, Codex, etc.) and drops the\nskill into the right directory.\n\n```bash\n# Install all four skills (latest)\nnpx skills add ConardLi/garden-skills\n\n# Install just one skill (latest)\nnpx skills add ConardLi/garden-skills -s web-design-engineer\n\n# Install globally (~/.skills) instead of per-project (./.skills)\nnpx skills add ConardLi/garden-skills -s gpt-image-2 --global\n\n# Target a specific agent\nnpx skills add ConardLi/garden-skills -s kb-retriever -a claude-code\n```\n\n> **Defaults to the latest commit on `main`.** That's what you want 95% of the\n> time — the CLI tracks each skill's most recent published `SKILL.md` straight\n> from the source tree.\n\n**Want a pinned version? (CI / production)** Use a tag-scoped `tree/` URL —\nthis points at the exact commit a release was cut from:\n\n```bash\n# Pin one skill to a specific release\nnpx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer\n```\n\nFor each skill, the current pinned `.zip` URL is also shown inline in its\n\"Links:\" row above (the `Download v .zip` link).\n\nUseful sub-commands:\n\n```bash\nnpx skills list # what's installed\nnpx skills find web-design # search registries\nnpx skills update # bump everything\nnpx skills remove kb-retriever # uninstall\n```\n\n### Option B · Claude Code plugin marketplace\n\nIf you use [Claude Code](https://docs.anthropic.com/en/docs/claude-code), you\ncan subscribe to the marketplace and install plugin packs that bundle one or\nmore skills together:\n\n```bash\n/plugin marketplace add ConardLi/garden-skills\n/plugin install presentation-skills@garden-skills\n/plugin install web-design-skills@garden-skills\n/plugin install knowledge-base-skills@garden-skills\n/plugin install image-generation-skills@garden-skills\n```\n\nPlugin packs are declared in [`.claude-plugin/marketplace.json`](./.claude-plugin/marketplace.json):\n\n| Plugin pack | Skills included |\n|---|---|\n| `presentation-skills` | `web-video-presentation` |\n| `web-design-skills` | `web-design-engineer` |\n| `knowledge-base-skills` | `kb-retriever` |\n| `image-generation-skills` | `gpt-image-2` |\n\n### Option C · Pinned `.zip` from Releases\n\nEvery formal release publishes an immutable `.zip` (with a SHA-256 checksum) to\n[GitHub Releases](https://github.com/ConardLi/garden-skills/releases). Pin to\nthis from CI, Dockerfiles, or air-gapped installers when you need the exact\nbytes to never move under you.\n\n```bash\n# Replace and with the version you want.\nSKILL=web-design-engineer\nVERSION=1.0.0\n\ncurl -fsSL -o \"${SKILL}.zip\" \\\n \"https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip\"\n\n# Verify the checksum (highly recommended for unattended installs)\ncurl -fsSL -o \"${SKILL}.zip.sha256\" \\\n \"https://github.com/ConardLi/garden-skills/releases/download/${SKILL}-v${VERSION}/${SKILL}-${VERSION}.zip.sha256\"\nshasum -a 256 -c \"${SKILL}.zip.sha256\"\n\n# Drop the folder into the agent's skills directory\nunzip -q \"${SKILL}.zip\" -d .claude/skills/ # or .agents/skills/, .codex/skills/, ...\n```\n\nA floating \"always-latest\" URL is also available — useful for one-off installs:\n\n```bash\nhttps://github.com/ConardLi/garden-skills/releases/latest/download/-.zip\n```\n\n> **Pinned URLs for every skill are listed inline in this README** — see the\n> \"Download\" line under each skill's \"Links\" entry above. They are kept in sync\n> automatically by the release pipeline.\n\n### Option D · Manual copy into your project\n\nClone the repo and copy the skill folder you want — handy if you want to fork\nor hack on the skill itself.\n\n```bash\ngit clone https://github.com/ConardLi/garden-skills.git\ncp -r garden-skills/skills/web-design-engineer your-project/.claude/skills/\n# Cursor / generic agent:\ncp -r garden-skills/skills/web-design-engineer your-project/.agents/skills/\n```\n\nThe agent discovers the skill the next time it scans the workspace.\n\n### Option E · Git submodule\n\nFor vendoring into a larger project where you want to track upstream updates:\n\n```bash\ngit submodule add https://github.com/ConardLi/garden-skills.git vendor/garden-skills\nln -s ../../vendor/garden-skills/skills/web-design-engineer .claude/skills/web-design-engineer\n```\n\nPin to a release tag for reproducibility:\n\n```bash\ncd vendor/garden-skills\ngit checkout web-design-engineer-v1.0.0\n```\n\n---\n\n## Compatibility\n\n| Agent / Runtime | Skill location | Status |\n|---|---|---|\n| **Claude Code** | `.claude/skills//` or via plugin marketplace | ✅ Tested |\n| **Claude.ai** (web) | Settings → Capabilities → Skills | ✅ Tested |\n| **Cursor** | `.agents/skills//` | ✅ Tested |\n| **Codex CLI** | `.codex/skills//` | ✅ Tested |\n| **Gemini CLI** | extension manifest | ✅ Tested |\n| **OpenCode** | `.opencode/skills//` | ✅ Tested |\n\n> 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.\n\n---\n\n## What is a Skill?\n\nA **Skill** is a self-contained folder the agent can load on-demand. It's\njust a `SKILL.md` (YAML frontmatter + instructions), optionally accompanied\nby reference docs, scripts, and assets:\n\n```text\n/\n├── SKILL.md ← required: when to use it + how to do it\n├── README.md ← human-facing docs\n├── references/ ← optional: extended docs the agent loads on demand\n├── scripts/ ← optional: deterministic executable helpers\n└── assets/ ← optional: templates, fonts, icons\n```\n\nThe agent decides whether to activate the skill from the `description` line\nin the frontmatter — so the description is the contract between you and the\nagent. For the full spec, see [agentskills.io](https://agentskills.io) and\n[Anthropic's reference repository](https://github.com/anthropics/skills).\n\n---\n\n## Contributing\n\nBug reports, new skills, and tooling improvements are all welcome.\n\nThe maintainer-facing docs — repository layout, release process, version\nrules, CI workflow, troubleshooting — live in\n[**`CONTRIBUTING.md`**](./CONTRIBUTING.md) ([中文](./CONTRIBUTING.zh-CN.md)).\nRead that first if you want to add a skill or cut a release.\n\nQuick orientation:\n\n```bash\ngit clone https://github.com/ConardLi/garden-skills.git\ncd garden-skills\nnpm run list # show all skills + manifest status\nnpm run validate # the same check CI runs on every PR\n```\n\n---\n\n## Acknowledgments\n\nThis collection stands on the shoulders of:\n\n- **[Anthropic](https://www.anthropic.com)** for the [Agent Skills spec](https://agentskills.io) and the [`anthropics/skills`](https://github.com/anthropics/skills) reference repository.\n- **[Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs)** — the system prompt that inspired `web-design-engineer`. The original is preserved in [`dist/prompt/claude-design-system-prompt.md`](./dist/prompt/claude-design-system-prompt.md) for reference.\n- The broader OSS skill community — see [`travisvn/awesome-claude-skills`](https://github.com/travisvn/awesome-claude-skills) and [`obra/superpowers`](https://github.com/obra/superpowers) for further discovery.\n\n---\n\n## Connect\n\n| 平台 | 账号名称 | 链接 |\n| --- | --- | --- |\n| X/Twitter | code秘密花园 | https://x.com/GardenConardLi |\n| B 站 | code秘密花园 | https://space.bilibili.com/474921808 |\n| 抖音 | code秘密花园 | https://v.douyin.com/i5b33Xfv/ |\n| YouTube | code秘密花园 | https://www.youtube.com/@garden-conard |\n| 小红书 | code秘密花园 | https://www.xiaohongshu.com/user/profile/5af45e78f7e8b903d6e04618 |\n| 公众号 | code秘密花园 | https://cdn.jsdelivr.net/gh/ConardLi/easy-dataset@main/public/imgs/weichat.jpg |\n| GitHub | ConardLi | https://github.com/ConardLi |\n| 个人网站 | Easy AI | https://mmh1.top |\n\n---\n\n\n## License\n\n[MIT](./LICENSE) © [ConardLi](https://github.com/ConardLi)\n", "bytes": 34569, "sha": "874317a6d0f192bf487e4beac78477cb5a7b7a9439c661c1ceb8497169a69a31", "repo_slug": "conardli/garden-skills", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/skl_conardli_garden_skills_gpt_image_2_8c0a6316/readme" }