# garden-skills | ConardLi | Knowledge Base | Instagit

ConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.

GitHub Stars: 11.4k

Repository: https://github.com/ConardLi/garden-skills

---

## Articles

### [What Is the beautiful-article Skill? Purpose and Workflow Explained](/ConardLi/garden-skills/purpose-of-beautiful-article-skills)

Discover the purpose of the beautiful-article skill. Transform raw content like URLs and PDFs into polished HTML articles with optional PDF output using a structured workflow.

- Tags: deep-dive
- Published: 2026-09-02

### [How to Use the kb-retriever Skill for Knowledge Retrieval in AI Agents](/ConardLi/garden-skills/how-to-use-kb-retriever-skill)

Learn to use the kb-retriever skill for efficient knowledge retrieval in AI agents. Explore hierarchical indexes, documentation, and progressive grep for optimized token use in ConardLi/garden-skills.

- Tags: how-to-guide
- Published: 2026-09-02

### [Complete Guide to gpt-image-2 Prompt Template Categories in Garden Skills](/ConardLi/garden-skills/gpt-image-2-prompt-template-categories)

Explore the 18 gpt-image-2 prompt template categories within Garden Skills, from UI Mockups to Technical Diagrams. Find inspiration and enhance your image generation.

- Tags: how-to-guide
- Published: 2026-09-02

### [How Many Template Categories Are Available in gpt-image-2?](/ConardLi/garden-skills/gpt-image-2-template-categories)

Discover the 18 visual template categories available in gpt-image-2. Learn how they are declared and verified in the skill's manifest and metadata.

- Tags: how-to-guide
- Published: 2026-09-02

### [What Is Mode C in the gpt-image-2 Skill? The Complete Guide to Prompt-Advisor Fallback](/ConardLi/garden-skills/gpt-image-2-skill-mode-c-advisor)

Discover Mode C in gpt-image-2 skill. Learn how this advisor fallback mode generates high-quality image prompts, even without image generation capabilities.

- Tags: deep-dive
- Published: 2026-09-02

### [How to Enable Local Image Generation for the gpt-image-2 Skill](/ConardLi/garden-skills/enable-local-imagegen-gpt-image-2)

Enable local image generation for gpt-image-2 skill by setting ENABLE_GARDEN_IMAGEGEN=1 and providing your OPENAI_API_KEY. Learn how to create PNG files locally.

- Tags: how-to-guide
- Published: 2026-09-02

### [What Anti-Patterns Are Blocked by the Web-Design-Engineer Skill? Complete Catalog of Blocked Failure Patterns](/ConardLi/garden-skills/web-design-engineer-anti-patterns)

Discover the 24 anti-patterns the web-design-engineer skill blocks. Learn how this skill automatically repairs designs, ensuring a higher quality user experience across key web design areas.

- Tags: best-practices
- Published: 2026-09-02

### [What Are the Style Recipes in Web-Design-Engineer? A Complete Guide to the 25-Recipe Catalog](/ConardLi/garden-skills/web-design-engineer-style-recipe-examples)

Explore 25 style recipes in Web-Design-Engineer. Discover design tokens for popular brands like Apple HIG and Linear in this comprehensive guide.

- Tags: how-to-guide
- Published: 2026-09-02

### [How Many Style Recipes Are Included in the Web‑Design‑Engineer Skill?](/ConardLi/garden-skills/web-design-engineer-style-recipe-count)

Discover the exact number of style recipes within the web-design-engineer skill. Learn how many style recipe files are included in the ConardLi/garden-skills repository.

- Tags: how-to-guide
- Published: 2026-09-02

### [What Are the Five Dials of the Design Read System in web-design-engineer?](/ConardLi/garden-skills/web-design-engineer-design-read-dials)

Discover the five dials of the Design Read system: Variance, Motion, Density, Asset Dependence, and Brand Fidelity. Learn how to translate design briefs into actionable specifications.

- Tags: deep-dive
- Published: 2026-09-02

### [What Is CHAPTER-CRAFT.md in the Web Video Presentation Skill? A Developer's Guide](/ConardLi/garden-skills/chapter-craft-md-web-video-presentation-skill)

Understand CHAPTER-CRAFT.md's role as the architectural contract for web video presentations. Learn how it enables theme-aware, video-first content creation for developers.

- Tags: developer-guide
- Published: 2026-09-02

### [How to Configure OpenAI TTS for the Web-Video-Presentation Skill](/ConardLi/garden-skills/configure-openai-tts-web-video-presentation)

Configure OpenAI TTS for web video presentation skills. Set OPENAI_API_KEY, make openai.sh executable, and run with --tts-provider openai for seamless integration.

- Tags: how-to-guide
- Published: 2026-09-02

### [How Themes Are Selected in the web-video-presentation Skill: A Technical Deep Dive](/ConardLi/garden-skills/web-video-presentation-skill-theme-selection)

Discover how the web-video-presentation skill selects themes by validating user input against a theme catalogue or defaulting to a random selection. Learn the technical process.

- Tags: deep-dive
- Published: 2026-09-02

### [Web-Video-Presentation Skill: Complete Guide to All 23 Built-In Themes](/ConardLi/garden-skills/web-video-presentation-skill-theme-count)

Explore 23 built-in themes for the web-video-presentation skill. Customize your presentations with pre-configured design tokens and CSS variables. Get the complete guide now.

- Tags: tutorial
- Published: 2026-09-02

### [How the Web-Video-Presentation Skill Converts Articles into Interactive Presentations](/ConardLi/garden-skills/web-video-presentation-skill-workflow)

Discover how the web-video-presentation skill converts markdown articles into interactive presentations. Learn how it generates scripts, builds code, and produces engaging click-driven content.

- Tags: how-to-guide
- Published: 2026-09-02

### [Garden Skills Plugin Packs: The 5 Available Collections Explained](/ConardLi/garden-skills/garden-skills-plugin-packs)

Explore the 5 Garden Skills plugin packs presentation-skills web-design-skills knowledge-base-skills image-generation-skills and beautiful-article-skills Install them via the Claude Code marketplace or skills CLI

- Tags: overview
- Published: 2026-09-02

### [How the Description Field in SKILL.md Drives Skill Activation in Garden-Skills](/ConardLi/garden-skills/garden-skills-skill-activation-description-field)

Understand how the description field in SKILL.md activates skills in Garden-Skills. Learn how it matches user intent to the right skill for seamless automation.

- Tags: internals
- Published: 2026-09-02

### [Standard Directory Structure for a Garden Skills Skill: Complete Guide](/ConardLi/garden-skills/garden-skills-skill-directory-structure)

Learn the standard directory structure for a Garden Skills skill. Organize your skill with manifest.json, SKILL.md, scripts, references, and assets for portability and scale.

- Tags: how-to-guide
- Published: 2026-09-02

### [Web-Design-Engineer Step 0: Verify Facts First Requirement Explained](/ConardLi/garden-skills/what-is-step-0-verify-facts-first-requirement-for-web-design-engineer)

Learn the essential Step 0 Verify Facts First requirement for web-design-engineer roles. Ensure accuracy before starting any design work to avoid critical errors. Boost your skills now.

- Tags: how-to-guide
- Published: 2026-09-01

### [Understanding the Anti-Pattern System in the Garden Skills Web-Design-Engineer](/ConardLi/garden-skills/what-is-anti-pattern-system-in-web-design-engineer-skill)

Learn about the anti-pattern system in the Web-Design-Engineer skill. Detect, block, and repair AI clichés with this structured collection of design-rule checks.

- Tags: deep-dive
- Published: 2026-09-01

### [How the Five-Dial Design Read System Works in Web Design Engineer](/ConardLi/garden-skills/how-does-five-dial-design-read-system-work-in-web-design-engineer)

Discover how the Five Dial Design Read system transforms design briefs into clear specifications. Learn to quantify visual decisions across five key scales for web design engineer.

- Tags: deep-dive
- Published: 2026-09-01

### [What Is the Web-Design-Engineer Skill? A Complete Guide to AI Design Engineering](/ConardLi/garden-skills/what-is-purpose-of-web-design-engineer-skill)

Discover the web-design-engineer skill. Transform AI web artifacts into production-ready interfaces with a disciplined design-first workflow. Learn more today.

- Tags: getting-started
- Published: 2026-09-01

### [Web-Video-Presentation Skill Working Directory Structure Explained](/ConardLi/garden-skills/what-is-working-directory-structure-for-web-video-presentation-skill)

Explore the web-video-presentation skill working directory structure in ConardLi/garden-skills. Understand metadata, scripts, Vite+React template, and themes for cinematic web presentations.

- Tags: architecture
- Published: 2026-09-01

### [What TTS Providers Are Supported by the web-video-presentation Skill?](/ConardLi/garden-skills/what-tts-providers-are-supported-by-web-video-presentation-skill)

Discover the TTS providers supported by the web-video-presentation skill. Explore options like MiniMax, OpenAI, ElevenLabs, and more, plus custom provider integration.

- Tags: api-reference
- Published: 2026-09-01

### [How the Theme Architecture Works in web-video-presentation: A Design-Token Deep Dive](/ConardLi/garden-skills/how-does-theme-architecture-work-in-web-video-presentation-skill)

Explore the theme architecture in web-video-presentation. Learn how CSS custom properties and design tokens enable seamless visual identity switching without altering component code.

- Tags: deep-dive
- Published: 2026-09-01

### [Web-Video-Presentation Skill Workflow: A 4-Phase Guide to Interactive Web Videos](/ConardLi/garden-skills/what-is-workflow-for-web-video-presentation-skill)

Master the web-video-presentation skill workflow. Our 4-phase guide transforms articles into interactive web videos with clear checkpoints for script, visuals, and audio alignment.

- Tags: how-to-guide
- Published: 2026-09-01

### [How Download Links for Skill Artifacts Are Managed in the garden-skills README](/ConardLi/garden-skills/how-are-download-links-for-skill-artifacts-managed-in-readme)

Discover how the garden-skills README automatically manages skill artifact download links using HTML comments and a script for the latest GitHub Releases.

- Tags: how-to-guide
- Published: 2026-09-01

### [What Does the release-skill.yml Workflow Do? Automating Tag-Driven Skill Releases](/ConardLi/garden-skills/what-does-release-skill.yml-workflow-do)

Discover how the release-skill.yml GitHub Actions workflow automates semantic versioned releases for individual skills based on tag pushes in the Garden-Skills repo. Learn more now!

- Tags: how-to-guide
- Published: 2026-09-01

### [How the Garden Skills Release Pipeline Works: End-to-End Automation](/ConardLi/garden-skills/how-does-release-pipeline-work-in-garden-skills)

Discover how the Garden Skills release pipeline automates workflows. Learn about tag-driven GitHub Actions, manifest validation, artifact packaging, and release generation for seamless updates.

- Tags: internals
- Published: 2026-09-01

### [SemVer Bumping Rules for Garden Skills: The Complete Contributor Guide](/ConardLi/garden-skills/what-are-rules-for-semver-bumps-for-garden-skills)

Learn SemVer bumping rules for Garden Skills. Discover when to use patch, minor, or major version bumps for typo fixes, workflow changes, and breaking updates in this contributor guide.

- Tags: best-practices
- Published: 2026-09-01

### [SKILL.md Frontmatter in Garden Skills: The Agent Contract Specification](/ConardLi/garden-skills/what-is-purpose-of-skill.md-frontmatter-in-garden-skills)

Understand the SKILL.md frontmatter in Garden Skills. This YAML metadata acts as a contract for AI agents, defining when and how to invoke skills. Learn more about this essential specification.

- Tags: api-reference
- Published: 2026-09-01

### [How the manifest.json Name Field Relates to the Folder Name and SKILL.md in Garden-Skills](/ConardLi/garden-skills/how-does-manifest.json-name-relate-to-folder-name-and-skill.md)

Understand how the manifest.json name field connects to your folder name and SKILL.md in Garden-Skills for seamless skill discovery and documentation.

- Tags: deep-dive
- Published: 2026-09-01

### [Garden Skills manifest.json Schema: Complete Field Reference](/ConardLi/garden-skills/what-is-schema-for-manifest.json-in-garden-skills)

Explore the manifest.json schema for Garden Skills. Understand the six essential fields name version category description homepage and compat for skill metadata and compatibility.

- Tags: api-reference
- Published: 2026-09-01

### [Where to Find the SKILL.md Contract for a Skill in garden-skills](/ConardLi/garden-skills/where-to-find-skill.md-contract)

Locate the SKILL.md contract within the ConardLi garden-skills repository at skills/<skill-name>/SKILL.md. Find the exact path for any skill contract quickly and easily.

- Tags: how-to-guide
- Published: 2026-09-01

### [Anatomy of a Skill in Garden Skills: File Structure and Runtime Components](/ConardLi/garden-skills/what-is-anatomy-of-a-single-skill-in-garden-skills)

Explore the anatomy of a skill in Garden Skills. Discover its file structure including SKILL.md, manifest.json, scripts, and references. Understand its runtime components for efficient AI development.

- Tags: internals
- Published: 2026-09-01

### [How to Use Node.js ESM with Garden Skills Without npm install](/ConardLi/garden-skills/how-to-use-nodejs-esm-with-garden-skills-without-npm-install)

Learn to run Node.js ESM with Garden Skills without npm install. Clone the repo and import skills directly using native ESM syntax for a streamlined workflow.

- Tags: how-to-guide
- Published: 2026-09-01

### [What Are the Runtime Dependencies for Garden Skills? A Complete Package Analysis](/ConardLi/garden-skills/what-are-runtime-dependencies-for-garden-skills)

Understand Garden Skills runtime dependencies. Discover how libraries are distributed across skill packages and demo apps for efficient production builds.

- Tags: deep-dive
- Published: 2026-09-01

### [Garden Skills Repository Structure: A Complete Guide to the Modular AI Skill Collection](/ConardLi/garden-skills/how-is-garden-skills-repository-structured)

Explore the modular structure of the Garden Skills repository. Learn how AI skills are organized with standardized internal files and dedicated directories for presentation and automation.

- Tags: architecture
- Published: 2026-09-01

### [What Are Agent Skills in Garden Skills? A Modular Framework for Specialized AI Agents](/ConardLi/garden-skills/what-are-agent-skills-in-garden-skills)

Discover agent skills in Garden Skills. Learn how these modular skill packs specialize AI agents with structured prompts, workflows, and reference materials. Transform your AI today.

- Tags: getting-started
- Published: 2026-09-01

### [Garden Skills Installation Methods: 5 Ways to Add AI Coding Skills to Your Agent](/ConardLi/garden-skills/installation-methods-garden-skills)

Explore 5 Garden Skills installation methods for AI coding agents like Claude Code and Cursor. Integrate AI coding skills easily via npx commands or Git submodules.

- Tags: how-to-guide
- Published: 2026-08-31

### [How Authoring Theme Profiles Work in the beautiful-article Skill: Visual Design Meets AI Guidance](/ConardLi/garden-skills/authoring-theme-profiles-beautiful-article)

Discover how authoring theme profiles in the beautiful-article skill work. Learn how structured markdown and JSON indexing blend visual design with AI guidance for aesthetic intent.

- Tags: how-to-guide
- Published: 2026-08-31

### [Understanding the Reacticle Component Protocol in Beautiful‑Article](/ConardLi/garden-skills/reacticle-component-protocol-beautiful-article)

Discover the Reacticle component protocol in beautiful-article. This React-based interface delegates UI rendering to prose-first components, ensuring theme consistency with a unified token system. Learn more!

- Tags: deep-dive
- Published: 2026-08-31

### [How to Transform Various Content Types into Polished HTML Articles with Garden Skills](/ConardLi/garden-skills/transform-content-to-html-articles-beautiful-article)

Transform URLs, PDFs, DOCX, Markdown, and images into polished HTML articles with the beautiful article skill in garden skills. Create themed content easily.

- Tags: how-to-guide
- Published: 2026-08-31

### [Understanding the Retrieval Layers and Rules in kb-retriever](/ConardLi/garden-skills/retrieval-layers-rules-kb-retriever)

Explore the four retrieval layers and hard-coded safety rules in kb-retriever for efficient, deterministic knowledge extraction from local repositories. Prevent full-file loading and optimize token usage.

- Tags: deep-dive
- Published: 2026-08-31

### [How Hierarchical Index Navigation Works in kb-retriever: A Deep Dive](/ConardLi/garden-skills/hierarchical-index-navigation-kb-retriever)

Discover how kb-retriever navigates vast knowledge bases using hierarchical index navigation. Learn to traverse, score, and descend into relevant branches efficiently to save tokens.

- Tags: deep-dive
- Published: 2026-08-31

### [How to Answer Questions from a Local Knowledge Base Using kb-retriever](/ConardLi/garden-skills/answer-questions-local-knowledge-base-kb-retriever)

Learn how to answer questions from a local knowledge base using kb-retriever. This skill efficiently retrieves information from multi-format documents without overwhelming your LLM.

- Tags: how-to-guide
- Published: 2026-08-31

### [How Automatic Prompt/Image Versioning Works in gpt-image-2: A Complete Technical Guide](/ConardLi/garden-skills/automatic-prompt-image-versioning-gpt-image-2)

Discover how gpt-image-2's automatic prompt image versioning uses URL-friendly slugs, timestamps, and mode-aware logic for precise, version-controlled storage. Learn the technical details.

- Tags: deep-dive
- Published: 2026-08-31

### [Runtime Modes for the gpt-image-2 Skill: A Complete Technical Guide](/ConardLi/garden-skills/runtime-modes-gpt-image-2-skill)

Explore the three gpt-image-2 skill runtime modes: local generation, host-native delegation, and advisor. Discover how the mode detector selects the optimal mode for your environment.

- Tags: deep-dive
- Published: 2026-08-31

### [How to Use the gpt-image-2 Skill for Image Generation and Editing](/ConardLi/garden-skills/how-to-use-gpt-image-2-skill)

Master image generation and editing with the gpt-image-2 skill. Learn how this versatile tool leverages OpenAI APIs for local execution, host delegation, or prompt advising.

- Tags: how-to-guide
- Published: 2026-08-31

### [What Is the Design Direction Advisor in Web-Design-Engineer?](/ConardLi/garden-skills/design-direction-advisor-web-design-engineer)

Discover the Design Direction Advisor in web-design-engineer. Turn vague design ideas into clear visual directions with curated style recipes and schools.

- Tags: deep-dive
- Published: 2026-08-31

### [How the Anti‑Cliché Blocklist Works in Web‑Design‑Engineer](/ConardLi/garden-skills/anti-cliche-blocklist-web-design-engineer)

Learn how the Anti-cliché blocklist in web-design-engineer stops AI from creating generic designs. Discover its three-layer system for unique, effective web aesthetics.

- Tags: how-to-guide
- Published: 2026-08-31

### [Design Calibration System and Style Recipes in Web-Design-Engineer: A Complete Technical Guide](/ConardLi/garden-skills/design-calibration-style-recipes-web-design-engineer)

Master the design calibration system and style recipes in web-design-engineer. Transform briefs into auditable UI specs with this technical guide.

- Tags: deep-dive
- Published: 2026-08-31

### [Web Presentation Workflow Phases: A 4-Step Pipeline for Creating Click-Driven 16:9 Demos](/ConardLi/garden-skills/workflow-phases-web-presentations)

Master web presentation workflow phases with a 4-step pipeline. Transform articles into click-driven 16:9 demos using a fixed stage and theme-driven architecture for engaging content.

- Tags: how-to-guide
- Published: 2026-08-31

### [How to Scaffold Vite + React + TypeScript Projects for Presentations](/ConardLi/garden-skills/scaffold-vite-react-typescript-projects-presentations)

Learn to scaffold Vite React TypeScript projects for presentations using the ConardLi/garden-skills starter. Enjoy instant HMR and arrow-key navigation.

- Tags: tutorial
- Published: 2026-08-31

### [How to Create Web Presentations from Articles Using Garden Skills](/ConardLi/garden-skills/how-to-create-web-presentations-from-articles)

Learn how to create web presentations from articles using Garden Skills. This Vite React TypeScript pipeline converts text into cinematic 16:9 videos effortlessly.

- Tags: how-to-guide
- Published: 2026-08-31

### [How SKILL.md Frontmatter Works in Garden Skills: Validation Rules and Examples](/ConardLi/garden-skills/how-skill-md-frontmatter-works)

Learn how SKILL.md frontmatter in Garden Skills works. Understand validation rules and see examples for consistent skill metadata. Validate your skill structure now.

- Tags: how-to-guide
- Published: 2026-08-31

### [Understanding the Anatomy of a Garden Skill: File Structure and Components](/ConardLi/garden-skills/anatomy-of-garden-skill)

Explore the anatomy of a Garden Skill. Learn how manifest.json and SKILL.md files enable AI agents to discover and execute tasks safely and deterministically.

- Tags: deep-dive
- Published: 2026-08-31

### [Understanding the Repository Structure of Garden Skills: A Complete Monorepo Guide](/ConardLi/garden-skills/repository-structure-garden-skills)

Explore the Garden Skills repository structure, a comprehensive monorepo guide. Understand how skills, websites, and tooling are organized in this design-focused project. Learn more now.

- Tags: architecture
- Published: 2026-08-31

### [How to Add a Specific Garden Skill to an Agent: Complete Setup Guide](/ConardLi/garden-skills/how-to-add-specific-garden-skill-to-agent)

Learn how to add a specific Garden Skill to your agent with this complete setup guide. Follow simple steps to integrate new skills into your agent's functionality.

- Tags: how-to-guide
- Published: 2026-08-31

### [How to Install Garden Skills for AI Agents: 5 Methods Explained](/ConardLi/garden-skills/how-to-install-garden-skills-for-ai-agents)

Easily install Garden Skills for AI agents using five methods: CLI, Claude Code Marketplace, ZIP, Git clone, or submodule. Integrate skills seamlessly and enhance your agent's capabilities today.

- Tags: how-to-guide
- Published: 2026-08-31

### [How to Integrate Custom TTS Providers in Garden Skills: A Complete Developer Guide](/ConardLi/garden-skills/how-can-i-integrate-custom-providers-for-tts-synthesis-in-garden-skills)

Learn to integrate custom TTS providers in Garden Skills. This guide shows how to dynamically load TTS implementations for seamless text to audio conversion in your projects.

- Tags: how-to-guide
- Published: 2026-08-30

### [Anti-AI Cliché Rules Enforced by the web-design-engineer Skill: A Complete Guide](/ConardLi/garden-skills/what-are-the-anti-ai-cliche-rules-enforced-by-the-web-design-engineer-skill)

Discover anti-AI cliché rules in web design. Learn how the web-design-engineer skill blocks generic LLM designs like gradient clichés and default fonts.

- Tags: how-to-guide
- Published: 2026-08-30

### [Style Recipes in the web-design-engineer Skill: 8 Real-World Examples from Garden-Skills](/ConardLi/garden-skills/what-are-some-examples-of-style-recipes-available-in-the-web-design-engineer-skill)

Explore 8 real-world style recipe examples from the web-design-engineer skill for instant brand-specific visual language application. Learn how to use aesop and linear styles.

- Tags: examples
- Published: 2026-08-30

### [How to Use the Style Recipe System in the Web‑Design‑Engineer Skill](/ConardLi/garden-skills/how-can-i-use-the-style-recipe-system-in-the-web-design-engineer-skill)

Master the style recipe system in the Web-Design-Engineer skill to generate brand consistent web pages. Leverage design recipes for palette typography spacing and motion tokens.

- Tags: how-to-guide
- Published: 2026-08-30

### [Design Schools and Their Characteristics: The 6 Philosophies Behind the Garden Skills Design Direction Advisor](/ConardLi/garden-skills/what-are-the-different-design-schools-and-their-characteristics-offered-by-the-advisor)

Explore 6 design schools like Brutalist and Warm Humanist offered by the Garden Skills Design Direction Advisor. Transform creative briefs into concrete aesthetic directions.

- Tags: deep-dive
- Published: 2026-08-30

### [Web-Design-Engineer Skill: Key Files and Architecture in Garden Skills](/ConardLi/garden-skills/what-are-the-key-files-and-references-for-the-web-design-engineer-skill)

Discover essential web-design-engineer skill files and architecture in the ConardLi/garden-skills repository. Learn how raw code becomes brand-aware experiences via SKILL.md and design tokens.

- Tags: architecture
- Published: 2026-08-30

### [What Is a Design Read in the Web-Design-Engineer Skill?](/ConardLi/garden-skills/what-is-a-design-read-and-how-is-it-used-in-the-web-design-engineer-skill)

Understand what a Design Read is and its role in the web-design-engineer skill. Learn how this 5-element spec transforms briefs into clear design choices.

- Tags: deep-dive
- Published: 2026-08-30

### [Web-Design-Engineer Skill Seven-Step Workflow: From Brief to Polished UI](/ConardLi/garden-skills/what-is-the-seven-step-workflow-for-the-web-design-engineer-skill)

Master the seven-step web-design-engineer workflow. Transform briefs into polished UIs with this systematic design-first approach for production-ready front-end artifacts.

- Tags: how-to-guide
- Published: 2026-08-30

### [How to Build or Redesign Browser-Rendered Visual Artifacts with the web-design-engineer Skill](/ConardLi/garden-skills/how-can-i-build-or-redesign-browser-rendered-visual-artifacts-with-the-web-design-engineer-skill)

Learn how to build and redesign browser-rendered visual artifacts using the web-design-engineer skill. Transform HTML CSS JS into polished web designs with a structured workflow.

- Tags: how-to-guide
- Published: 2026-08-30

### [How to Synthesize Audio Using Custom TTS Providers for the Web-Video-Presentation Skill](/ConardLi/garden-skills/how-to-synthesize-audio-using-custom-tts-providers-for-the-web-video-presentation-skill)

Synthesize audio with custom TTS providers for your web-video-presentation skill. Learn to implement shell scripts and generate MP3s from narration text. Easy integration for better presentations.

- Tags: how-to-guide
- Published: 2026-08-30

### [How the Theme System Works in the Web-Video-Presentation Skill](/ConardLi/garden-skills/how-does-the-theme-system-work-in-the-web-video-presentation-skill)

Explore how the web-video-presentation skill's theme system uses a file-based architecture to separate theme metadata and design tokens for automatic discovery and runtime CSS injection.

- Tags: internals
- Published: 2026-08-30

### [Web-Video-Presentation Skill Development Modes: Live Development vs. Production Recording](/ConardLi/garden-skills/what-are-the-different-development-modes-available-for-the-web-video-presentation-skill)

Explore web video presentation skill development modes. Learn live development for rapid iteration and production recording for optimized static builds. Master both with ease.

- Tags: deep-dive
- Published: 2026-08-30

### [How the Fixed 1920x1080 Stage Works in the web-video-presentation Skill](/ConardLi/garden-skills/how-does-the-fixed-1920x1080-stage-work-in-the-web-video-presentation-skill)

Discover how the fixed 1920x1080 stage in the web-video-presentation skill scales dynamically for perfect 16:9 aspect ratio across viewports.

- Tags: internals
- Published: 2026-08-30

### [Architecture Principles Behind the Web-Video-Presentation Skill: Cinematic Design for AI Decks](/ConardLi/garden-skills/what-are-the-architecture-principles-behind-the-web-video-presentation-skill)

Explore the method-driven architecture of the web-video-presentation skill. Learn how cinematic design principles ensure deterministic, high-fidelity AI decks.

- Tags: architecture
- Published: 2026-08-30

### [Key Files and References for the Web-Video-Presentation Skill in Garden](/ConardLi/garden-skills/what-are-the-key-files-and-references-for-the-web-video-presentation-skill)

Explore key files and references for the web-video-presentation skill, a Vite React TypeScript scaffold for creating cinematic web presentations. Learn how to convert scripts to video.

- Tags: how-to-guide
- Published: 2026-08-30

### [How the One-Shot Alignment Checkpoint Works in Web-Video-Presentation](/ConardLi/garden-skills/how-does-the-one-shot-alignment-checkpoint-work-in-the-web-video-presentation-skill)

Learn how the one-shot alignment checkpoint in ConardLi/garden-skills works. This critical node enforces user confirmation of script, outline, theme, assets, and mode before generating your presentation.

- Tags: deep-dive
- Published: 2026-08-30

### [Workflow for the Web-Video-Presentation Skill: A Complete 4-Phase Guide](/ConardLi/garden-skills/what-is-the-workflow-for-the-web-video-presentation-skill)

Master the web-video-presentation skill with a complete 4-phase guide. Learn the workflow from content to final recording. Transform articles into engaging web videos efficiently.

- Tags: how-to-guide
- Published: 2026-08-30

### [How to Use the web-video-presentation Skill to Create Cinematic Web Presentations](/ConardLi/garden-skills/how-can-i-use-the-web-video-presentation-skill-to-create-web-presentations)

Learn how to use the web-video-presentation skill to transform scripts into cinematic, responsive web presentations with a React and TypeScript framework. Easily create engaging content.

- Tags: how-to-guide
- Published: 2026-08-30

### [Garden Skills Installation Methods: 3 Ways to Add AI Skills to Claude](/ConardLi/garden-skills/what-are-the-available-installation-methods-for-garden-skills)

Discover Garden Skills installation methods. Learn how to add AI skills to Claude via npm package, repository cloning, or direct GUI import from the Claude Marketplace.

- Tags: how-to-guide
- Published: 2026-08-30

### [How AI Agents Discover and Utilize Skills from the Garden Skills Repository](/ConardLi/garden-skills/how-do-ai-agents-discover-and-utilize-skills-from-the-garden-skills-repository)

Learn how AI agents discover and use skills from the Garden Skills repository by scanning manifest files and executing workflows defined in SKILL.md.

- Tags: how-to-guide
- Published: 2026-08-30

### [What Is the Purpose of the SKILL.md File in Garden Skills?](/ConardLi/garden-skills/what-is-the-purpose-of-the-skill-md-file-in-garden-skills)

Discover the purpose of the SKILL.md file in Garden Skills. This file acts as a human-readable blueprint and machine-parseable contract for reusable AI prompts.

- Tags: how-to-guide
- Published: 2026-08-30

### [How the Garden Skills Repository Is Structured for Each Agent Skill](/ConardLi/garden-skills/how-is-the-garden-skills-repository-structured-for-each-agent-skill)

Discover the structured layout of the Garden Skills repository. Learn how each agent skill directory includes manifest.json, SKILL.md, and dedicated subfolders for efficient organization.

- Tags: architecture
- Published: 2026-08-30

### [How Garden Skills Extend AI Coding Assistants: Portable Agent Workflows Explained](/ConardLi/garden-skills/what-are-garden-skills-and-how-do-they-extend-ai-coding-assistants)

Explore Garden Skills, portable prompt bundles that inject domain expertise into AI coding assistants. Enhance Claude Code, Cursor, and Codex with executable SKILL.md files for consistent, high-quality results. Learn more now!

- Tags: deep-dive
- Published: 2026-08-30

### [How to Use Garden Skills with Gemini CLI: Complete Setup and Integration Guide](/ConardLi/garden-skills/can-i-use-garden-skills-with-gemini-cli)

Integrate Garden Skills with Gemini CLI effortlessly using its native extension manifest system. Get the complete setup guide and unlock powerful new capabilities for your projects.

- Tags: how-to-guide
- Published: 2026-08-29

### [Supported Agents for Garden Skills: Claude Code, Cursor, Codex, and Generic Agents](/ConardLi/garden-skills/what-are-the-supported-agents-for-garden-skills)

Discover supported agents for Garden Skills including Claude Code, Cursor, Codex, and generic agents. Learn how to integrate your own agents with SKILL.md.

- Tags: supported-agents
- Published: 2026-08-29

### [How to Use the Web Design Engineer Skill in the Garden-Skills Repository](/ConardLi/garden-skills/how-to-use-the-web-design-engineer-skill)

Learn to use the Web Design Engineer skill from ConardLi/garden-skills to generate full web design projects from prompts. Discover this LLM powered tool today.

- Tags: how-to-guide
- Published: 2026-08-29

### [Garden Skills Outline Format Specification: A Complete Guide to Video-Style Web Presentations](/ConardLi/garden-skills/what-is-the-outline-format-specification-for-garden-skills)

Learn the Garden Skills outline format specification using Markdown. Structure video presentations with chapter segmentation and timing. Get the complete guide.

- Tags: api-reference
- Published: 2026-08-29

### [How to Convert Articles to Narration Scripts with Garden Skills: A Complete Guide](/ConardLi/garden-skills/how-to-convert-articles-to-narration-scripts-with-garden-skills)

Learn how to convert articles to narration scripts using Garden Skills. This guide details the `web-video-presentation` skill for efficient content transformation and validation.

- Tags: how-to-guide
- Published: 2026-08-29

### [What Is the Purpose of the CHAPTER-CRAFT.md File? A Video-First Development Guide](/ConardLi/garden-skills/what-is-the-purpose-of-the-chapter-craft-md-file)

Discover the purpose of CHAPTER-CRAFT.md in ConardLi/garden-skills. This video-first development guide transforms articles into dynamic visual experiences with React and CSS animations.

- Tags: how-to-guide
- Published: 2026-08-29

### [How to Use Sequential Confirmation Mode for Chapters in Garden Skills](/ConardLi/garden-skills/how-to-use-the-sequential-confirmation-mode-for-chapters)

Learn how to use sequential confirmation mode in Garden Skills. Set confirmationMode sequential to pause and confirm each step, ensuring controlled execution. Get started now!

- Tags: how-to-guide
- Published: 2026-08-29

### [Development Modes for Chapters in the Presentation Skill: A, B, and C Modes Explained](/ConardLi/garden-skills/what-are-the-different-development-modes-for-chapters-in-the-presentation-skill)

Explore presentation skill development modes A B and C in ConardLi/garden-skills. Learn about per-chapter review sequential batch processing and parallel sub-agent execution for effective chapter development.

- Tags: deep-dive
- Published: 2026-08-29

### [How to Extend the TTS Architecture with New Providers in Garden-Skills](/ConardLi/garden-skills/how-to-extend-the-tts-architecture-with-new-providers)

Learn how to extend the TTS architecture with new providers in Garden-Skills. Implement the TtsProvider interface, register your class, and update the config file.

- Tags: how-to-guide
- Published: 2026-08-29

### [How to Configure OpenAI TTS for Garden Skills: Complete Setup Guide](/ConardLi/garden-skills/how-to-configure-openai-tts-for-garden-skills)

Learn how to configure OpenAI TTS for Garden Skills with our complete setup guide. Export your API key, set the TTS provider, and start synthesizing audio effortlessly.

- Tags: how-to-guide
- Published: 2026-08-29

### [Built-in TTS Providers for Garden Skills: MiniMax and OpenAI Guide](/ConardLi/garden-skills/what-are-the-built-in-tts-providers-for-garden-skills)

Explore Garden Skills' built-in TTS providers, MiniMax and OpenAI. Learn how they integrate with the Web Video Presentation skill for seamless audio output. Get started today!

- Tags: how-to-guide
- Published: 2026-08-29

### [How to Implement Full-Screen Steps in the Presentation Skill](/ConardLi/garden-skills/how-to-implement-full-screen-steps-in-the-presentation-skill)

Learn to implement full-screen steps in presentation skills. This guide details how to update the stepper hook and conditionally apply CSS for a seamless full-screen experience.

- Tags: how-to-guide
- Published: 2026-08-29

### [How the Global Step Counter Works in the Presentation Skill](/ConardLi/garden-skills/how-does-the-global-step-counter-work-in-the-presentation-skill)

Learn how the global step counter flattens presentation structure for linear navigation and progress tracking. Understand its role in the ConardLi garden skills.

- Tags: internals
- Published: 2026-08-29

### [Web Video Presentation Skill: Core Principles for Cinematic React Presentations](/ConardLi/garden-skills/what-are-the-fundamental-principles-of-the-web-video-presentation-skill)

Master web video presentation skill principles to create cinematic React presentations. Learn to transform scripts into engaging 16:9 videos using Vite, React, and TypeScript for motion-first design.

- Tags: deep-dive
- Published: 2026-08-29

### [How to Scaffold a Presentation with the Blueprint Theme Using garden-skills](/ConardLi/garden-skills/how-to-scaffold-a-presentation-with-the-blueprint-theme)

Scaffold a Vite React TypeScript presentation using the Blueprint theme with garden-skills. Execute scaffold.sh with theme blueprint for pre-configured design tokens.

- Tags: how-to-guide
- Published: 2026-08-29

### [How to List Available Themes for the Web Video Presentation Skill](/ConardLi/garden-skills/how-to-list-available-themes-for-web-video-presentation-skill)

Discover how to list available themes for the Web Video Presentation skill. Explore the THEMES.md file, scan directories, or query programmatically for seamless theme management.

- Tags: how-to-guide
- Published: 2026-08-29

### [How to Scaffold a New Presentation with Garden Skills: Complete Guide](/ConardLi/garden-skills/how-to-scaffold-a-new-presentation-with-garden-skills)

Learn how to scaffold a new presentation with garden skills using the web-video-presentation script. Generate a Vite React TypeScript project with themed styling and audio pipelines quickly.

- Tags: how-to-guide
- Published: 2026-08-29

### [How to Use the Web Video Presentation Skill in Garden-Skills](/ConardLi/garden-skills/how-to-use-the-web-video-presentation-skill)

Learn how to use the web video presentation skill in Garden-Skills to convert articles into cinematic 1080p videos with Vite, React, and TypeScript. Create high-quality video presentations easily.

- Tags: how-to-guide
- Published: 2026-08-29

### [Understanding the SKILL.md File Structure in Garden-Skills](/ConardLi/garden-skills/how-does-the-skill-md-file-structure-work)

Learn the SKILL.md file structure for Garden-Skills. Define agent skills with YAML front-matter, markdown behavior, and checklists for validation. Understand this declarative, machine-readable specification.

- Tags: internals
- Published: 2026-08-29

### [What Is the Agent Skills Spec? A Technical Guide to the ConardLi Garden-Skills Contract](/ConardLi/garden-skills/what-is-the-agent-skills-spec)

Understand the Agent Skills spec a lightweight JSON based contract allowing AI agents to discover and invoke reusable functionality. Learn more in this technical guide.

- Tags: deep-dive
- Published: 2026-08-29

### [How to Activate a Skill in Claude.ai: The Complete Setup Guide](/ConardLi/garden-skills/how-to-activate-a-skill-in-claude-ai)

Learn how to activate a skill in Claude.ai with this complete setup guide. Discover easy installation methods for skills and enhance your Claude agent functionality today.

- Tags: how-to-guide
- Published: 2026-08-29

### [Where Are Garden Skills Located for Cursor Agent: Complete File Structure Guide](/ConardLi/garden-skills/where-are-garden-skills-located-for-cursor-agent)

Locate garden skills for the Cursor agent within the skills/ directory of the ConardLi/garden-skills repository. Discover SKILL.md system prompts and manifest.json metadata.

- Tags: how-to-guide
- Published: 2026-08-29

### [How the Agent Decides Which Skill Pack to Use in Garden Skills](/ConardLi/garden-skills/how-agent-decides-skill-pack-to-use)

Discover how the Garden Skills agent selects skill packs. Learn the two-step process of registering plugins and matching user intent to skill descriptions for efficient tool utilization.

- Tags: internals
- Published: 2026-08-28

### [Purpose of the Reference Directory in a Skill: Modular Content Management in Garden Skills](/ConardLi/garden-skills/purpose-of-reference-directory-in-a-skill)

Discover the purpose of the reference directory in Garden Skills. Learn how it stores reusable assets like templates and examples for dynamic prompt population and content generation.

- Tags: internals
- Published: 2026-08-28

### [How to Activate Specific Skills in Garden-Skills: A Complete Guide for AI Agents](/ConardLi/garden-skills/how-agents-are-instructed-to-activate-skills)

Learn how to activate specific skills in Garden-Skills. This guide explains the exact process agents use to request and execute skills via manifest-driven lookup for seamless AI agent functionality.

- Tags: how-to-guide
- Published: 2026-08-28

### [Garden Skills Dependencies: Complete Guide to Runtime and Package Requirements](/ConardLi/garden-skills/dependencies-for-running-garden-skills)

Discover Garden Skills dependencies. Learn about Node.js 20+ requirements and specific npm packages for web design demos and GPT-Image-2 gallery including Sharp for image processing.

- Tags: how-to-guide
- Published: 2026-08-28

### [How to Contribute a New Skill to Garden Skills: Complete Developer Guide](/ConardLi/garden-skills/how-to-contribute-new-skill-to-garden-skills)

Learn how to contribute a new skill to Garden Skills with this complete developer guide. Follow simple steps to add your skill and enhance the project.

- Tags: how-to-guide
- Published: 2026-08-28

### [How to Customize Skills in the Garden Skills Repository: Complete Guide](/ConardLi/garden-skills/can-i-customize-garden-skills-repository)

Customize skills in the ConardLi/garden-skills repository by editing skill folders containing manifests, theme tokens, and reference materials. Learn how to tailor your skills today.

- Tags: how-to-guide
- Published: 2026-08-28

### [How the Source Reviewer SubAgent Works in beautiful-article: A Technical Deep Dive](/ConardLi/garden-skills/how-source-reviewer-subagent-works-in-beautiful-article)

Discover how the Source Reviewer SubAgent in beautiful-article audits source files, generating a review report for complex content. Learn the technical details.

- Tags: deep-dive
- Published: 2026-08-28

### [Quality Assurance Strategy for the Beautiful-Article Skill: A Complete Technical Guide](/ConardLi/garden-skills/qa-strategy-for-beautiful-article-skill)

Discover the quality assurance strategy for the beautiful-article skill. Learn how this technical guide details a rigorous pipeline combining agent self-checks and SubAgent reviews for exceptional article quality.

- Tags: how-to-guide
- Published: 2026-08-28

### [How Theme Profiles Are Defined for the beautiful-article Skill: A Complete Guide](/ConardLi/garden-skills/how-theme-profiles-are-defined-for-beautiful-article)

Discover how theme profiles define beautiful-article skill styles. Learn about the metadata catalogue and markdown guidance for AI agent article scaffolding.

- Tags: how-to-guide
- Published: 2026-08-28

### [Authoring Theme Profiles for the Beautiful-Article Skill: Complete Guide](/ConardLi/garden-skills/available-theme-profiles-for-beautiful-article)

Explore 12 authoring theme profiles for the beautiful-article skill like Tufte Press Shannon and Vignelli Configure visual styling for AI content via JSON in the ConardLi garden-skills repository.

- Tags: guide
- Published: 2026-08-28

### [How to Use the Raw Component in Reacticle for Custom HTML, CSS, and JavaScript](/ConardLi/garden-skills/how-to-use-raw-component-in-reacticle)

Learn how to use the Raw component in reacticle to embed custom HTML CSS and JavaScript directly into your articles using dangerouslySetInnerHTML for powerful customization.

- Tags: how-to-guide
- Published: 2026-08-28

### [What Semantic Components Are Available in the Reacticle Protocol? A Complete Reference](/ConardLi/garden-skills/what-semantic-components-are-in-reacticle-protocol)

Explore 16 semantic React components in the Reacticle protocol, like Article, Hero, and CodeBlock. Enforce strict theme-driven styling for beautiful UIs.

- Tags: api-reference
- Published: 2026-08-28

### [Reacticle Component Protocol in beautiful-article: A Prose-First Publishing System](/ConardLi/garden-skills/what-is-reacticle-component-protocol)

Explore the Reacticle component protocol, a semantic React library for beautiful-article. Discover how it enforces prose-first authoring and eliminates raw markup with theme-driven components and a token-based design system.

- Tags: api-reference
- Published: 2026-08-28

### [How the Plan Checkpoint Works in the Beautiful-Article Skill: Complete Technical Guide](/ConardLi/garden-skills/how-beautiful-article-plan-checkpoint-works)

Discover how the Plan Checkpoint in the beautiful-article skill works. This guide details Phase 3, explaining how user decisions shape content generation before scaffolding begins.

- Tags: deep-dive
- Published: 2026-08-28

### [Hard Collaboration Checkpoints in Garden Skills: Enforcing Mandatory User Approval Gates](/ConardLi/garden-skills/what-are-hard-collaboration-checkpoints-in-garden-skills)

Learn about hard collaboration checkpoints in Garden Skills. These mandatory approval gates prevent silent defaults and bundled approvals by requiring user confirmation before LLM agents proceed.

- Tags: deep-dive
- Published: 2026-08-28

### [How Skills Are Bundled into Plugin Packs for Claude Code: A Complete Technical Guide](/ConardLi/garden-skills/how-skills-are-bundled-into-plugin-packs)

Learn how skills bundle into plugin packs for Claude Code using the ConardLi/garden-skills repository. Discover structured SKILL.md system prompts for reusable AI capabilities.

- Tags: deep-dive
- Published: 2026-08-28

### [What Is the Role of SKILL.md in Activating a Garden Skill?](/ConardLi/garden-skills/role-of-skill-md-in-activating-garden-skill)

Discover how SKILL.md activates Garden Skills by defining structured metadata and deterministic workflows for the Instagit runtime. Learn its essential role.

- Tags: internals
- Published: 2026-08-28

### [How the beautiful-article skill transforms URLs and documents into HTML articles](/ConardLi/garden-skills/how-beautiful-article-skill-transforms-urls-to-html)

Learn how to transform URLs and documents into HTML articles with this standard implementation. Discover content fetching, parsing, sanitization, and semantic HTML generation.

- Tags: how-to-guide
- Published: 2026-08-28

### [What Types of Local Files Can the kb-Retriever Skill Process?](/ConardLi/garden-skills/what-local-files-can-kb-retriever-process)

Discover the local file types the kb-retriever skill processes, including Markdown, PDF, and Excel. Learn how its efficient architecture retrieves relevant data.

- Tags: how-to-guide
- Published: 2026-08-28

### [How to Use the gpt-image-2 Skill for Image Generation and Editing in Garden](/ConardLi/garden-skills/how-to-use-gpt-image-2-skill-for-image-generation)

Master gpt-image-2 skill for AI image generation and editing. Learn to use Garden's generate js and edit js for text-to-image and image manipulation with OpenAI APIs.

- Tags: how-to-guide
- Published: 2026-08-28

### [Can the Web-Design-Engineer Skill Create Design Systems? A Complete Technical Analysis](/ConardLi/garden-skills/can-web-design-engineer-skill-create-design-systems)

Discover if the web-design-engineer skill can create design systems. This technical analysis reveals how its workflow enforces design tokens for robust system generation. Learn more.

- Tags: deep-dive
- Published: 2026-08-28

### [How the Web-Video-Presentation Skill Converts Scripts into Web Presentations](/ConardLi/garden-skills/how-web-video-presentation-skill-converts-scripts)

Learn how the web-video-presentation skill transforms scripts into dynamic web presentations. Discover beat parsing, React chapters, Vite projects, and AI audio integration.

- Tags: internals
- Published: 2026-08-28

### [Garden Skill Structure and SKILL.md Components: A Complete Guide](/ConardLi/garden-skills/what-is-the-structure-of-a-garden-skill)

Explore the structure of a Garden Skill and its SKILL.md components. Understand how these self-contained packages deliver reusable AI capabilities within the Garden framework.

- Tags: deep-dive
- Published: 2026-08-28

### [How to Integrate Garden Skills with AI Coding Assistants Like Claude Code and Cursor](/ConardLi/garden-skills/how-to-integrate-garden-skills-with-ai-coding-assistants)

Learn to integrate Garden Skills with AI coding assistants like Claude Code and Cursor. Leverage the universal Skill spec and CLI for seamless integration. Boost your coding workflow today.

- Tags: how-to-guide
- Published: 2026-08-28