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

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

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-09-02

---

**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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md) file itself from the count.

Notable recipe files include:

- [`apple-hig.md`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) — Apple Human Interface Guidelines
- [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) — Linear‑style design system
- [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/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.

```js
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`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md) recommends this targeted approach for performance.

Here is a Python example that loads the [`linear.md`](https://github.com/ConardLi/garden-skills/blob/main/linear.md) recipe:

```python
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`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/manifest.json) |
| Catalog index of all style recipes | [`skills/web-design-engineer/references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/INDEX.md) |
| Example recipe file (one of 25) | [`skills/web-design-engineer/references/style-recipes/linear.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/references/style-recipes/linear.md) |
| Skill description & usage guide | [`skills/web-design-engineer/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/SKILL.md) |
| Skill README (overview) | [`skills/web-design-engineer/README.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-design-engineer/README.md) |

## Summary

- The **web‑design‑engineer skill** contains **25 distinct style‑recipe files** according to the official [`INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/apple-hig.md) or [`aesop.md`](https://github.com/ConardLi/garden-skills/blob/main/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`](https://github.com/ConardLi/garden-skills/blob/main/INDEX.md) file located at [`skills/web-design-engineer/references/style-recipes/INDEX.md`](https://github.com/ConardLi/garden-skills/blob/main/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.