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

> 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.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: architecture
- Published: 2026-08-30

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) file at [`skills/web-design-engineer/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/INDEX.md) file indexes **25 anchored design recipes**, including specific implementations like [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/aesop.md) and [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/failure-patterns.md) and [`critique-guide.md`](https://github.com/ConardLi/garden-skills/blob/main/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:

```bash

# 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`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) requires specific fields to declare compatibility:

```json
{
  "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:

```javascript
// 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`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) defines a structured seven-step process:

```yaml

## 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`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) for metadata, [`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md) for workflow logic, and [`README.md`](https://github.com/ConardLi/garden-skills/blob/main/README.md) for public documentation.
- The **reference library** uses lazy loading to pull specific design tokens from files like [`references/style-recipes/linear.md`](https://github.com/ConardLi/garden-skills/blob/main/references/style-recipes/linear.md) and calibration guides.
- **Quality control** relies on [`failure-patterns.md`](https://github.com/ConardLi/garden-skills/blob/main/failure-patterns.md) and [`critique-guide.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/aesop.md) and [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json) compatibility list, the skill supports Claude Code, Claude AI, Cursor, Codex CLI, Gemini CLI, and Opencode. The [`agents/openai.yaml`](https://github.com/ConardLi/garden-skills/blob/main/agents/openai.yaml) file provides the default system prompt configuration that enables consistent invocation patterns across these different agent implementations.