---
title: "garden-skills"
type: "tool"
slug: "conardli-garden-skills"
canonical_url: "https://www.graphcanon.com/tools/conardli-garden-skills"
github_url: "https://github.com/ConardLi/garden-skills"
homepage_url: "https://github.com/ConardLi/garden-skills"
stars: 9236
forks: 1238
primary_language: "CSS"
license: "MIT"
categories: ["ai-agents"]
tags: ["gpt-image-2", "rag", "skills", "claude", "web-design", "agent"]
updated_at: "2026-07-07T18:35:33.350198+00:00"
---

# garden-skills

> ConardLi's open-source collection of production-ready Skills for AI coding agents

A repository hosting skills for AI coding assistants, focusing on areas such as web design, knowledge retrieval, and image generation.

## Facts

- Repository: https://github.com/ConardLi/garden-skills
- Homepage: https://github.com/ConardLi/garden-skills
- Stars: 9,236 · Forks: 1,238 · Open issues: 12 · Watchers: 48
- Primary language: CSS
- License: MIT
- Last pushed: 2026-06-10T13:43:52+00:00

## Categories

- [AI Agents](/categories/ai-agents.md)

## Tags

gpt-image-2, rag, skills, claude, web-design, agent

## Related tools

- [ECC](/tools/affaan-m-ecc.md) - The agent harness performance optimization system (★ 226,962)
- [hermes-agent](/tools/nousresearch-hermes-agent.md) - The self-improving AI agent built by Nous Research (★ 210,880)
- [AutoGPT](/tools/significant-gravitas-autogpt.md) - AutoGPT: Build, Deploy, and Run AI Agents (★ 185,417)
- [ollama](/tools/ollama-ollama.md) - Get up and running with Kimi-K2.6, GLM-5.1, MiniMax, DeepSeek, gpt-oss, Qwen, Gemma and other models. (★ 175,659)
- [langflow](/tools/langflow-ai-langflow.md) - Langflow is a powerful platform for building and deploying AI-powered agents and workflows. (★ 151,298)
- [dify](/tools/langgenius-dify.md) - Production-ready platform for agentic workflow development (★ 148,070)
- [firecrawl](/tools/firecrawl-firecrawl.md) - The API to search, scrape, and interact with the web at scale. (★ 147,117)
- [langchain](/tools/langchain-ai-langchain.md) - The agent engineering platform. (★ 141,211)

## README (excerpt)

```text
<div align="center">

# Garden Skills

**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.**

<a id="skills-gallery"></a>

<table>
<tr>
<td width="50%" valign="top">
<a href="#web-video-presentation"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video-presentation-skill.webp" alt="Web Video Presentation Skill" width="100%"></a>
<br/><a href="#web-video-presentation"><strong>web-video-presentation</strong></a>
<br/><sub>Web video / presentation</sub>
</td>
<td width="50%" valign="top">
<a href="#web-design-engineer"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-design-skill.webp" alt="Web Design Skill" width="100%"></a>
<br/><a href="#web-design-engineer"><strong>web-design-engineer</strong></a>
<br/><sub>Design / frontend</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<a href="#gpt-image-2"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/gpt-image-2-skill.webp" alt="GPT Image 2 Skill" width="100%"></a>
<br/><a href="#gpt-image-2"><strong>gpt-image-2</strong></a>
<br/><sub>Image generation / prompting</sub>
</td>
<td width="50%" valign="top">
<a href="#beautiful-article"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/article/banner.webp" alt="Beautiful Article Skill" width="100%"></a>
<br/><a href="#beautiful-article"><strong>beautiful-article</strong></a>
<br/><sub>Any source → beautiful article</sub>
</td>
</tr>
</table>







[English](./README.md) · [中文文档](./README.zh-CN.md) · [日本語](./README.ja-JP.md)

</div>

---

## Table of contents

| Install | Use | Contribute |
|---|---|---|
| [Install](#install)<br>[`skills` CLI (npx)](#option-a--skills-cli-npx)<br>[Claude Code plugin marketplace](#option-b--claude-code-plugin-marketplace)<br>[Pinned `.zip` from Releases](#option-c--pinned-zip-from-releases)<br>[Manual copy](#option-d--manual-copy-into-your-project)<br>[Git submodule](#option-e--git-submodule) | [Compatibility](#compatibility)<br>[What is a Skill?](#what-is-a-skill) | [Contributing](#contributing)<br>[Acknowledgments](#acknowledgments)<br>[License](#license) |

---

### [`web-video-presentation`](./skills/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 **23 built-in themes**, each with its own design signature — editorial, terminal, engineering, Swiss International, and more
- **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`
- Scaffolded Vite + React + TypeScript project with reusable stage primitives and recording guidance

<table>
<tr>
<td align="center" width="25%"><a href="./skills/web-video-presentation/README.md#theme-gallery"><img src="https://cdn.jsdelivr.net/gh/ConardLi/assets@main/imgs/web-video/creative-voltage.webp" alt="creative-voltage preview" /></a><br /><sub><code>creative-voltage</code><br
```

---

**Machine-readable endpoints**

- JSON: [`/api/graphcanon/tools/conardli-garden-skills`](/api/graphcanon/tools/conardli-garden-skills)
- LLM index: [/llms.txt](/llms.txt)
- Full corpus: [/llms-full.txt](/llms-full.txt)

_GraphCanon - The knowledge graph for AI development. https://www.graphcanon.com/_