ConardLi/garden-skills: 6 Agent Skills
ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.
| Repository | ConardLi/garden-skills · website |
|---|---|
| GitHub stars | 13,190 |
| Skills | 6 · 5 with scripts |
| Category | Design and frontend |
| License | MIT |
| Last updated | Oct 11, 2026 |
| Install counts | ConardLi/garden-skills on skills.sh, Vercel's skills directory, which shows installs and security audits per skill |
Install ConardLi/garden-skills
| All skills, any agent | npx skills add ConardLi/garden-skills |
|---|---|
| One skill | npx skills add ConardLi/garden-skills --skill beautiful-article |
| Only for Claude Code | npx skills add ConardLi/garden-skills -a claude-code, or copy a skill folder to ~/.claude/skills/ (all projects) or .claude/skills/ (one project) |
npx skills is the open-source skills CLI; it asks which agents to install for. Skills can include scripts that your agent will run: read a skill before installing it, as you would any code.
Skills in ConardLi/garden-skills
| Skill | What it does |
|---|---|
| beautiful-article | 把用户提供的素材（网页 URL / PDF / DOCX / Markdown / 纯文本 / 截图 / 粘贴材料）编辑、设计成一篇美丽的、可离线打开和分享的**单文件 HTML 网页文章**。基于 reacticle 组件协议：不手写裸 HTML/CSS，而用语义组件 + 受主题约束的 Raw 自由层；按 source→规划→双确认→生成→终审→修复的小型 harness 流程推进，默认 100% 信息保留的长文。触发场景：把 URL/PDF/DOCX/文章做成网页文章 / 长文 / briefing / 解释文 / 视觉文章 / 教程 / 审阅复盘 / 方案分析，'render… has scriptsnpx skills add ConardLi/garden-skills --skill beautiful-article |
| gpt-image-2 | 面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。 has scriptsnpx skills add ConardLi/garden-skills --skill gpt-image-2 |
| kb-retriever | 面向本地知识库目录的检索和问答助手。核心流程：(1)分层索引导航 (2)遇到PDF/Excel时必须先读取references学习处理方法 (3)处理文件后再检索。按文件类型组合使用 grep、Read、pdfplumber、pandas 进行渐进式检索，避免整文件加载。用户问题涉及"从知识库目录回答问题/检索信息/查资料"时使用。 has scriptsnpx skills add ConardLi/garden-skills --skill kb-retriever |
| motion-showreel | 用代码制作以图形、文字或界面动画为主的短视频（常见 5–60 秒，纯音乐片最长约 2 分钟），输出 MP4 和可编辑源码：产品宣传短片、动效作品集、UI 动效演示、动态排版与金句卡点、Logo 演绎与片头、生成艺术循环、年代回顾短片。配乐可选：代码合成，或按用户提供的曲子卡点。用户想做这类短视频或动效时使用，例如「做个 15 秒动效视频」「做个 Logo 动画 / 片头」「做个产品宣传短片」「用代码做视频」。不用于：口播讲解类长视频、网页与交互原型、写实人物或实拍内容、剪辑已有视频。 has scriptsnpx skills add ConardLi/garden-skills --skill motion-showreel |
| web-design-engineer | Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance /…npx skills add ConardLi/garden-skills --skill web-design-engineer |
| web-video-presentation | 把一篇文章或口播稿，做成"看起来像视频"的点击驱动 16:9 网页演示，可选合成口播音频。流程：原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事（稿子 / outline / 主题 / 素材 / 开发模式）→ 网页开发（逐章 / 顺序 / 并行）→ 可选音频合成（provider-agnostic：内置 MiniMax mmx-cli + OpenAI TTS，可换 ElevenLabs / edge-tts / Azure / 自带 TTS）。**outline 只规划节奏与信息密度，不规划动画** —— 动画由章节开发时按… has scriptsnpx skills add ConardLi/garden-skills --skill web-video-presentation |
Names and descriptions come from each skill's SKILL.md and are written by the pack's authors.
More design and frontend skill packs
| # | Skill pack | Skills | GitHub stars | Updated |
|---|---|---|---|---|
| 1 |
nextlevelbuilder/ui-ux-pro-max-skill An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
|
7 | 139K | 2026-10-23 |
| 2 |
Leonxlnx/taste-skill Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
|
1 | 101K | 2026-10-20 |
| 3 |
tt-a1i/archify Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
|
5 | 88K | 2026-10-23 |
| 4 |
pbakaus/impeccable The design language that makes your AI harness better at design.
|
2 | 85.2K | 2026-10-23 |
| 5 |
cathrynlavery/diagram-design Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-con…
|
1 | 60.2K | 2026-10-21 |
| 6 |
openai/skills Skills Catalog for Codex
|
43 | 28.3K | 2026-09-08 |