How Many Style Recipes Are Included in the Web‑Design‑Engineer Skill?

The web‑design‑engineer skill in the ConardLi/garden‑skills repository contains exactly 25 distinct style‑recipe files.

The garden‑skills project provides curated design system references for AI agents and human developers. Within the web‑design‑engineer skill, style recipes serve as anchored design patterns that encapsulate specific visual languages like Apple HIG, Linear, or Aesop, allowing consistent design generation and reference.

Where Style Recipes Are Stored

The 25 style recipes reside in the dedicated references directory:

skills/web-design-engineer/references/style-recipes/

According to the INDEX.md catalog file located in this directory, the collection holds “25 named, anchored design recipes.” Each recipe exists as an individual Markdown file, excluding the INDEX.md file itself from the count.

Notable recipe files include:

• apple-hig.md — Apple Human Interface Guidelines
• linear.md — Linear‑style design system
• aesop.md — Aesop brand aesthetic

Verifying the Recipe Count Programmatically

You can confirm the exact count of style recipes using a simple Node.js script that reads the directory and filters for Markdown files while excluding the index.

import fs from 'fs';
import path from 'path';

const recipesDir = path.resolve(
  process.cwd(),
  'skills/web-design-engineer/references/style-recipes'
);

// Read the directory, filter out the index file
const recipeFiles = fs
  .readdirSync(recipesDir)
  .filter((f) => f.endsWith('.md') && f !== 'INDEX.md');

console.log(`Number of style recipes: ${recipeFiles.length}`);
console.log('Recipe files:', recipeFiles);

Running this script outputs Number of style recipes: 25 followed by the complete list of recipe filenames.

Loading Individual Recipe Content

When consuming the skill, you can load specific recipes on demand without parsing the entire catalog. The INDEX.md recommends this targeted approach for performance.

Here is a Python example that loads the linear.md recipe:

import pathlib

recipes_path = pathlib.Path(
    "skills/web-design-engineer/references/style-recipes"
)

# Example: load the "linear" recipe

linear_md = recipes_path / "linear.md"
content = linear_md.read_text(encoding="utf-8")
print(content.splitlines()[0])          # → "# linear — Linear‑style"

print("\n".join(content.splitlines()[1:5]))  # show a few details

This approach reads only the requested recipe file, avoiding unnecessary memory overhead from loading the full collection.

Key Files in the Skill Structure

The web‑design‑engineer skill organizes metadata and documentation across several critical files:

Purpose	File Path
Skill manifest (metadata)	skills/web-design-engineer/manifest.json
Catalog index of all style recipes	skills/web-design-engineer/references/style-recipes/INDEX.md
Example recipe file (one of 25)	skills/web-design-engineer/references/style-recipes/linear.md
Skill description & usage guide	skills/web-design-engineer/SKILL.md
Skill README (overview)	skills/web-design-engineer/README.md

Summary

• The web‑design‑engineer skill contains 25 distinct style‑recipe files according to the official INDEX.md catalog.
• Recipes are stored in skills/web-design-engineer/references/style-recipes/ as individual Markdown files.
• The collection includes established design systems like Apple HIG, Linear, and Aesop.
• Consumers can programmatically verify the count using Node.js filesystem operations or load individual recipes via Python for efficient, targeted access.

Frequently Asked Questions

What file format are the style recipes in?

Each style recipe is stored as a Markdown (.md) file with structured headers describing the design system. For example, linear.md begins with the header # linear — Linear‑style, followed by detailed design specifications and usage guidelines.

How can I programmatically list all available style recipes?

Use Node.js fs.readdirSync to read the skills/web-design-engineer/references/style-recipes/ directory, then filter for files ending in .md while excluding INDEX.md. This returns exactly 25 filenames representing the available style recipes.

What is the difference between INDEX.md and individual recipe files?

INDEX.md serves as the catalog index that documents all 25 recipes and provides metadata about the collection, while individual files like apple-hig.md or aesop.md contain the actual design system specifications and implementation details for that specific style.

Where is the authoritative count of 25 recipes documented?

The count is explicitly stated in the INDEX.md file located at skills/web-design-engineer/references/style-recipes/INDEX.md, which describes the directory as containing “25 named, anchored design recipes.” This is the single source of truth for the catalog size.

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