Web-Design-Engineer Skill: Key Files and Architecture in Garden Skills

The web-design-engineer skill is a self-contained package within the ConardLi/garden-skills repository that transforms raw HTML/CSS/JS output into polished, brand-aware web experiences through a structured workflow defined in SKILL.md and a lazy-loaded reference library of design tokens.

The web-design-engineer skill provides AI agents with a comprehensive framework for generating production-ready frontend interfaces. Located in the ConardLi/garden-skills repository, this skill employs a layered architecture that separates metadata, procedural logic, and design references to deliver consistent, high-quality web artifacts across multiple agent platforms.

Core Architecture and Entry Points

The skill follows a modular structure where configuration files define identity, workflow, and public interfaces.

Metadata and Package Identity

The manifest.json file at skills/web-design-engineer/manifest.json declares the skill's identity, version 1.3.0, and compatible agents including Claude Code, Cursor, Gemini CLI, and Opencode. This file serves as the discovery mechanism for the skill registry and advertises the skill's capabilities to agent systems.

Workflow Specification

SKILL.md contains the procedural backbone of the skill. It defines a seven-step checkpoint workflow that guides agents from initial fact verification through final delivery and self-critique. The file specifies asset-protocol rules and design-system philosophy that drive agent behavior.

Public Documentation

The README.md file provides user-facing documentation, showcasing the style-recipe gallery and linking to live demos. This file serves as the primary entry point for developers discovering the skill and includes the Chinese localization counterpart for broader accessibility.

Agent Configuration

The agents/openai.yaml file supplies the default system prompt that instructs LLMs to invoke the skill for design requests. This configuration ensures consistent behavior across different AI agent implementations by establishing the skill's invocation patterns and context requirements.

Design Reference Library

The references/ directory contains a curated collection of markdown files that the skill reads on-demand to maintain focused context windows and prevent token bloat.

Style Recipe Catalog

The references/style-recipes/INDEX.md file indexes 25 anchored design recipes, including specific implementations like aesop.md and linear.md. Each recipe provides concrete design tokens, color palettes, typography specifications, and motion parameters that agents load lazily based on project requirements.

Calibration and Protocols

references/design-calibration.md defines five "dial" parameters—visual-variance, motion-intensity, and three additional axes—that shape every output's aesthetic characteristics. The references/redesign-protocol.md file distinguishes between extension work and full overhauls, ensuring existing UI contracts remain intact during modifications.

Quality Control Mechanisms

To avoid AI clichés and ensure production quality, the skill references failure-patterns.md and critique-guide.md. These files enable self-auditing capabilities that validate final deliverables against established design standards and identify common AI-generated anti-patterns.

Implementation and Usage

The skill supports both programmatic integration and command-line installation.

CLI Installation

Add the skill to any project using the Garden Skills CLI:

# Install the latest version

npx skills add ConardLi/garden-skills -s web-design-engineer

# Or pin a specific tag

npx skills add ConardLi/garden-skills/tree/web-design-engineer-v1.0.0/skills/web-design-engineer

Manifest Structure

The manifest.json requires specific fields to declare compatibility:

{
  "name": "web-design-engineer",
  "version": "1.3.0",
  "category": "Design / Frontend",
  "description": "Build and redesign high‑quality visual Web artifacts …",
  "homepage": "https://github.com/ConardLi/garden-skills/tree/main/skills/web-design-engineer",
  "compat": ["claude-code","claude-ai","cursor","codex-cli","gemini-cli","opencode"]
}

Lazy Loading Pattern

The skill employs on-demand reference loading to maintain concise prompt contexts. When executing a design task, the agent loads only the specific recipe required for the current anchor:

// Load the "linear" recipe before declaring the design system
const recipe = await readFile(
  "skills/web-design-engineer/references/style-recipes/linear.md"
);
// Paste its palette & typography into the Design Decisions block

Workflow Checkpoints

The SKILL.md defines a structured seven-step process:

## Workflow

- Step 0: Verify facts (search before assuming)
- Step 1‑2: Gather design context & declare design system
- Step 3: Show a v0 draft early
- Step 4‑5: Full build & verification
- Step 6‑7: Self‑critique and delivery

Summary

• The web-design-engineer skill resides in ConardLi/garden-skills and provides a complete design engine for AI agents building web interfaces.
• Key entry points include manifest.json for metadata, SKILL.md for workflow logic, and README.md for public documentation.
• The reference library uses lazy loading to pull specific design tokens from files like references/style-recipes/linear.md and calibration guides.
• Quality control relies on failure-patterns.md and critique-guide.md to prevent common AI design clichés and validate output.
• Installation occurs via npx skills add with support for version pinning and compatibility with Claude, Cursor, Gemini, and other major agent platforms.

Frequently Asked Questions

What is the primary purpose of the web-design-engineer skill?

The skill transforms raw HTML, CSS, and JavaScript output into polished, brand-aware web experiences by providing AI agents with structured workflows, design tokens, and quality-control mechanisms. It acts as a self-contained design engine that ensures consistent, production-ready frontend artifacts without requiring manual design specification.

How does the skill manage different design styles?

The skill manages styles through the references/style-recipes/ directory, which contains 25 anchored recipes including aesop.md and linear.md. Each recipe defines specific color palettes, typography scales, and motion parameters that agents load on-demand based on project requirements, keeping the active context window focused and efficient.

What are the five calibration dials mentioned in design-calibration.md?

The references/design-calibration.md file defines five parameters that shape visual output: visual-variance, motion-intensity, and three additional dials controlling density, warmth, and structural complexity. These parameters allow fine-tuning of the design system without modifying core code or creating new recipe files.

Which AI agents are compatible with this skill?

According to the manifest.json compatibility list, the skill supports Claude Code, Claude AI, Cursor, Codex CLI, Gemini CLI, and Opencode. The agents/openai.yaml file provides the default system prompt configuration that enables consistent invocation patterns across these different agent implementations.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}