Enable AI coding agents to handle design, video, and document search
Even when using AI coding tools like Claude Code or Cursor, tasks such as design refinement, video editing, and complex document search often still require manual effort. This repository provides a set of instructions and scripts that allow agents to independently refine web designs, render short videos, and perform precise searches on local documents. Each skill is designed to be automatically loaded and executed by the agent based on the situation, enabling developers to produce professional outputs without writing code directly.
Skill structure for autonomous agent decision-making
Each skill in this repository is a folder containing a SKILL.md file, reference documents, and scripts. The agent reads the description in this file and determines on its own whether the skill is needed for the current task. If it determines that the skill is necessary, the agent proceeds with the work following the instructions included in the skill, executing scripts or loading reference materials as needed. This structure allows users to guide the agent to perform work of consistent quality without separate prompt engineering. It follows a standardized format to work identically across various AI coding agents such as Claude Code, Cursor, and Codex.
Skill composition by field, from design to video
The repository includes skills for six main areas: web design, video production, image generation, and knowledge retrieval.
- Web Design Engineer Refines AI-generated web pages from simple functional implementation to visually polished designs. It includes design system declaration, initial prototype review, and final verification stages.
- Motion Showreel Supports the production of short videos rendered by code. It outputs videos of various lengths, from 5 seconds to 20 minutes, such as typography, logo sequences, and product films, as MP4 files and editable sources.
- Web Video Presentation Converts scripts or text into click-based 16:9 web presentations. It is designed to allow saving as cinematic videos through screen recording.
- GPT Image 2 Provides prompt templates and workflows for generating and editing images for various purposes, such as posters, UI mockups, and infographics.
- KB Retriever Precisely searches for necessary information from documents in various formats stored locally, such as PDF, Excel, and Markdown, and answers with explicit sources.
Installation methods and compatibility
The fastest installation method is to use the npx skills add ConardLi/garden-skills command. This command automatically detects the currently used agent and installs the necessary skills in the correct location. You can also install only specific skills or specify a particular agent for installation. If you are using Claude Code, you can install it in a subscription format through the plugin marketplace. In CI/CD pipelines or isolated environments, you can download and use the fixed version .zip file provided in GitHub Releases. All skills are released under the MIT license, allowing free modification and distribution.
Pre-use considerations
These skills require an AI coding agent to be installed to function. You must use one of the agents specified in the README, such as Claude Code, Cursor, Codex, Gemini CLI, or OpenCode. Since each skill is specialized for specific tasks, it is recommended to install only the skills needed for your project. In particular, video production and image generation skills may depend on external APIs or specific libraries, so you should ensure that the corresponding environment is prepared. Skill versions are updated frequently, so it is recommended to check for updates regularly to use the latest features.
