Also covers MDX authoring with Remark/Rehype plugins and the astro sync workflow for generating collection types. Does not cover form submission via Astro Actions (astro-actions) or SEO metadata generation from content (astro-seo) — those are handled by their own skills.
Astro Content Layer Expert
Type-safe content management with loaders, Zod schemas, and the unified Content Layer API.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- explore-codebase - Check existing collections, loaders, and content structure
- research-expert - Verify latest Content Layer docs via Context7/Exa
- mcp__context7__query-docs - Get loader and schema examples
After implementation, run sniper for validation.
Overview
When to Use
- Managing blog posts, docs, or product descriptions in Markdown/MDX
- Fetching content from a CMS, API, or database with type safety
- Needing TypeScript autocomplete for frontmatter fields
- Migrating from Astro 4 legacy content collections
Why Content Layer API
| Feature |
Benefit |
src/content.config.ts |
Single config file at project root |
| Built-in loaders |
glob() and file() for local files |
| Custom loaders |
Fetch from any external source |
| Zod 4 schemas |
Full TypeScript type safety |
astro sync |
Generates types from collections |
Core Concepts
Config File Location
The config file moved from src/content/config.ts to src/content.config.ts in Astro 5+.
Collection Types
| Loader |
Use Case |
glob() |
Multiple files in a directory (MD, MDX, JSON, YAML) |
file() |
Single JSON/YAML file with multiple entries |
| Custom |
Remote API, database, or any async data source |
Key APIs
| API |
Description |
getCollection(name) |
Fetch all entries in a collection |
getEntry(name, id) |
Fetch a single entry by ID |
render(entry) |
Render a content entry to HTML + headings |
defineCollection() |
Define a collection with loader and schema |
Reference Guide
| Need |
Reference |
| Overview & concepts |
overview.md |
| Config file setup |
config.md |
| Glob, file, custom loaders |
loaders.md |
| getCollection / getEntry |
querying.md |
| render() + headings |
rendering.md |
| MDX + Remark/Rehype |
mdx.md |
| Blog collection example |
templates/blog-collection.md |
| Custom remote loader |
templates/custom-loader.md |
Best Practices
- Always define schemas — Never skip Zod validation
- Run
astro sync — After changing content.config.ts
- Use
glob() for local files — Supports MD, MDX, JSON, YAML, TOML
- Custom loaders for remote data — CMS, REST API, GraphQL
render() for MDX — Returns Content component + headings array
1---2name: astro-content-23description: Use when managing structured content, blog posts, or typed data collections in Astro via the Content Layer API (content.config.ts).4---56<objective>7Implements Astro's Content Layer API: the `src/content.config.ts` config file, built-in `glob()` and `file()` loaders for local Markdown/MDX/JSON/YAML content, custom loaders for remote APIs/CMS/databases, Zod 4 schemas for type-safe frontmatter, and the query APIs `getCollection()`, `getEntry()`, and `render()` (which returns a `Content` component plus headings).89Also covers MDX authoring with Remark/Rehype plugins and the `astro sync` workflow for generating collection types. Does not cover form submission via Astro Actions (astro-actions) or SEO metadata generation from content (astro-seo) — those are handled by their own skills.10</objective>1112# Astro Content Layer Expert1314Type-safe content management with loaders, Zod schemas, and the unified Content Layer API.1516## Agent Workflow (MANDATORY)1718Before ANY implementation, use `TeamCreate` to spawn 3 agents:19201. **explore-codebase** - Check existing collections, loaders, and content structure212. **research-expert** - Verify latest Content Layer docs via Context7/Exa223. **mcp__context7__query-docs** - Get loader and schema examples2324After implementation, run **sniper** for validation.2526---2728## Overview2930### When to Use3132- Managing blog posts, docs, or product descriptions in Markdown/MDX33- Fetching content from a CMS, API, or database with type safety34- Needing TypeScript autocomplete for frontmatter fields35- Migrating from Astro 4 legacy content collections3637### Why Content Layer API3839| Feature | Benefit |40|---------|---------|41| `src/content.config.ts` | Single config file at project root |42| Built-in loaders | `glob()` and `file()` for local files |43| Custom loaders | Fetch from any external source |44| Zod 4 schemas | Full TypeScript type safety |45| `astro sync` | Generates types from collections |4647---4849## Core Concepts5051### Config File Location5253The config file moved from `src/content/config.ts` to `src/content.config.ts` in Astro 5+.5455### Collection Types5657| Loader | Use Case |58|--------|----------|59| `glob()` | Multiple files in a directory (MD, MDX, JSON, YAML) |60| `file()` | Single JSON/YAML file with multiple entries |61| Custom | Remote API, database, or any async data source |6263### Key APIs6465| API | Description |66|-----|-------------|67| `getCollection(name)` | Fetch all entries in a collection |68| `getEntry(name, id)` | Fetch a single entry by ID |69| `render(entry)` | Render a content entry to HTML + headings |70| `defineCollection()` | Define a collection with loader and schema |7172---7374## Reference Guide7576| Need | Reference |77|------|-----------|78| Overview & concepts | [overview.md](references/overview.md) |79| Config file setup | [config.md](references/config.md) |80| Glob, file, custom loaders | [loaders.md](references/loaders.md) |81| getCollection / getEntry | [querying.md](references/querying.md) |82| render() + headings | [rendering.md](references/rendering.md) |83| MDX + Remark/Rehype | [mdx.md](references/mdx.md) |84| Blog collection example | [templates/blog-collection.md](references/templates/blog-collection.md) |85| Custom remote loader | [templates/custom-loader.md](references/templates/custom-loader.md) |8687---8889## Best Practices90911. **Always define schemas** — Never skip Zod validation922. **Run `astro sync`** — After changing `content.config.ts`933. **Use `glob()` for local files** — Supports MD, MDX, JSON, YAML, TOML944. **Custom loaders for remote data** — CMS, REST API, GraphQL955. **`render()` for MDX** — Returns `Content` component + headings array
fusengine