RAG Frameworks · ConardLi

garden-skills

Garden Skills is an MIT-licensed open-source collection of reusable AI agent skills (Claude Code plugins) for web design, video presentations, image generation, and knowledge retrieval. It provides five production-ready skills with themes, workflows, and scaffolded projects designed to integrate with Claude, Cursor, Codex, and similar AI coding agents.

Talk to DEV.co Discuss Implementation

Source: GitHub — github.com/ConardLi/garden-skills

9.3k

GitHub stars

1.2k

Forks

CSS

Primary language

MIT

License (OSI-approved)

Key facts

Objective fields from the source. Values we can't verify are shown as “Unknown” rather than guessed.

Field	Value
Repository	ConardLi/garden-skills
Owner	ConardLi
Primary language	CSS
License	MIT — OSI-approved
Stars	9.3k
Forks	1.2k
Open issues	12
Latest release	kb-retriever-v1.0.1 (2026-06-09)
Last updated	2026-06-10
Source	https://github.com/ConardLi/garden-skills

What garden-skills is

A CSS-primary monorepo containing modular Agent Skills packaged as Vite + React + TypeScript projects, with pluggable architectures (e.g., TTS provider abstraction, theme token systems). Skills include web-video-presentation (23 themes, click-driven staging), web-design-engineer (25 style recipes, design workflow), gpt-image-2 (image generation prompting), beautiful-article (content transformation), and kb-retriever (knowledge retrieval). Latest release kb-retriever-v1.0.1 pushed 2026-06-10.

Quickstart

Get the garden-skills source

Clone the repository and explore it locally.

terminalbash

1git clone https://github.com/ConardLi/garden-skills.git2cd garden-skills3# follow the project's README for install & configuration

Need it deployed, integrated, or customized instead? DEV.co ships production installs.

Best use cases

AI-Assisted Web & Presentation Creation

Teams using Claude Code or Cursor for rapid prototyping can drop in web-video-presentation or web-design-engineer skills to scaffold themed, production-ready outputs without manual design iteration. Particularly valuable for converting scripts/articles into 16:9 presentations or styled landing pages.

Design-Driven Agent Workflows

Design teams embedding AI agents into their pipeline can use web-design-engineer (25 style recipes, design-direction advisor) to push agent outputs beyond generic UI patterns and enforce a branded visual language with concrete palette/typography rules.

Content Transformation & Knowledge Systems

Knowledge management or technical writing workflows can leverage beautiful-article (any-source-to-article conversion) and kb-retriever (v1.0.1 released recently) to automate content formatting and retrieval without building custom integrations.

Implementation considerations

Each skill is a separate Vite + React + TypeScript project; plan for Node.js 16+ and npm/pnpm package management.
Five installation paths offered (npx skills CLI, Claude Code marketplace, .zip pinned releases, manual copy, git submodule); choose submodule for version-locked team deployments or npx CLI for ephemeral agent runs.
web-video-presentation's TTS is pluggable; MiniMax and OpenAI curl-based providers ship built-in; additional providers (ElevenLabs, Azure, Google Cloud, macOS say) require custom integration following documented contract.
web-design-engineer includes 25 style recipes and a design-direction advisor (six schools); these are guidance templates, not auto-applied—agent must understand and choose appropriately.
kb-retriever (latest v1.0.1, 2026-06-10) is recent; field-test in a staging environment before enterprise deployment to confirm RAG reliability and knowledge base indexing performance.

When to avoid it — and what to weigh

Standalone Non-Agent Use — These skills are tightly coupled to AI agent platforms (Claude Code, Cursor, Codex). Attempting to use them outside an agent context will require significant refactoring and is not the intended design.
Production Audio/Video Infrastructure — web-video-presentation includes pluggable TTS and ships two built-in providers (MiniMax, OpenAI TTS via curl), but audio synthesis is delegated to external services. If you require self-hosted, on-device audio generation, integration overhead is substantial.
Zero-Configuration Deployments — Each skill is a scaffolded Vite + React + TypeScript project. Deploying to production (hosting, CI/CD, environment setup) requires standard Node.js toolchain knowledge and is not turnkey—suitable for engineering teams, not marketing departments expecting a plugin.
Enterprise Single Sign-On or Compliance Frameworks — No documented SAML, OAuth, or audit/compliance integrations are mentioned. Organizations requiring formal access control, PII handling, or regulatory reporting should review security posture and data flows before adoption.

License & commercial use

MIT License. Permissive OSI-approved license permitting commercial use, modification, and distribution with no proprietary restrictions. Copyright notice and license text must be retained in derivative works.

MIT license permits commercial use without special permission or royalties. You may use, modify, and redistribute these skills in commercial products, SaaS platforms, and client work. Ensure LICENSE file is retained in distributions. No special commercial terms or support agreements are documented; verify your legal team's assessment if licensing conditions change or if you modify the code substantially.

DEV.co evaluation signals

Editorial assessment — not user reviews. Directional, with an explicit confidence level.

Signal	Assessment
Maintenance	Active
Documentation	Strong
License clarity	Clear
Deployment complexity	Moderate
DEV.co fit	Good
Assessment confidence	High

Security considerations

No documented security audit, vulnerability disclosure process, or threat model. TTS providers (MiniMax, OpenAI) are external; verify their credential handling and privacy policies. web-design-engineer generates HTML/CSS/JavaScript; review output sanitization if rendering untrusted agent suggestions. kb-retriever indexes knowledge bases; assess whether your knowledge base contains sensitive data and whether retrieval outputs need redaction. No built-in access control or authentication; skills assume agent context is trusted. Requires review of data flows and credential management before handling regulated information.

Alternatives to consider

Vercel v0 / Cursor Composer

Both are AI-driven UI generation tools with built-in design systems and instant deployment. Suitable if you want less configuration and faster landing-page prototyping; garden-skills offers more thematic control and design-school guidance.

Framer / Webflow AI

No-code / low-code design platforms with AI-assisted layout and asset generation. Better if your team avoids code entirely; garden-skills assumes developer involvement and Vite + React familiarity.

Software development agency

Build on garden-skills with DEV.co software developers

Integrate Garden Skills into your Claude Code or Cursor workflow. Install via npx, marketplace, or git submodule. MIT-licensed, production-ready, and actively maintained.

Talk to DEV.co

Related open-source tools

Surfaced by semantic similarity across the DEV.co open-source index.

hivemind web-quality-skills generative-ai

Related on DEV.co

Explore the category and the services that help you build with it.

RAG Frameworks AI Application Development Web App Development API Development Talk to DEV.co

garden-skills FAQ

Can I use Garden Skills outside of Claude Code / Cursor?

Skills are architected for Agent Skills specification (agentskills.io) and compatible with Claude Code, Cursor, Codex, and similar platforms. Using them standalone (e.g., as a React library in a web app) requires decoupling from the agent context, which is not the intended design. Possible but not supported.

What does 'production-ready' mean here?

Skills ship with scaffolded projects, documented workflows, and tested theme/style libraries. They are intended to produce usable output (presentations, designs, articles) without custom development. 'Production-ready' refers to output quality, not to SLA or support guarantees.

Do I own the code/designs generated by these skills?

Skills are templates and workflows; your agent uses them to produce output. Copyright of generated output depends on your agent's terms (e.g., Claude Code's usage policy). The skill templates themselves are MIT-licensed; derivative skills must retain the license notice.

How do I add a new theme to web-video-presentation or web-design-engineer?

Both skills use token-based architecture (theme tokens for web-video, style recipes for web-design). The README and SKILL.md specs outline the token schema and recipe structure. Contributing new themes requires a pull request following the project's contribution guidelines (linked in README).

Work with a software development agency

Adopting garden-skills is usually one piece of a larger software development effort. As a software development agency, DEV.co provides software development services and web development expertise — pairing senior software developers and web developers with your team to design, build, and operate rag frameworks software in production.

Ready to accelerate your AI-assisted design & development?

Integrate Garden Skills into your Claude Code or Cursor workflow. Install via npx, marketplace, or git submodule. MIT-licensed, production-ready, and actively maintained.

Talk to DEV.co Schedule a Consultation