astro-content

Implements Astro Content Layer API collections with loaders, Zod schemas, and typed queries.

1|Updated Jul 29, 2026
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill astro-content-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-content
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/astro-expert/skills/astro-content
Command: npx skills add https://github.com/fusengine/kimi-code --skill astro-content-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Managing blog posts, docs, or CMS data in Astro without type safety leads to runtime errors and untyped frontmatter. This Skill sets up the Astro Content Layer API so every collection is validated by Zod schemas and fully typed in TypeScript. ## Core Features & Use Cases - Collection Configuration: Define collections in src/content.config.ts using the built-in glob() and file() loaders for local Markdown, MDX, JSON, YAML, and TOML files. - Custom Loaders: Fetch content from remote CMSs, REST APIs, or databases with custom loader functions that populate the content store. - Typed Querying & Rendering: Use getCollection(), getEntry(), and render() to query entries, filter drafts, generate static paths, and render MDX with a Content component plus headings. - Use Case: Build a blog where posts live as Markdown files with typed frontmatter (title, pubDate, tags, draft flag), generate a sorted listing page, and render each post with an automatic table of contents. ## Quick Start Set up an Astro blog content collection with a Zod schema for Markdown posts and generate the listing and post pages.

Frequently Asked Questions about astro-content

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up content collections in Astro 5?▼

Create src/content.config.ts and define collections with defineCollection, a loader such as glob() or file(), and a Zod schema. Run astro sync to generate TypeScript types, then query entries with getCollection() or getEntry() in your .astro pages.

How do I fetch content from a CMS or API in Astro?▼

Write a custom loader implementing the Loader interface with an async load function that fetches remote data and populates the store via store.set(). Register it in defineCollection inside src/content.config.ts, optionally passing API keys through import.meta.env.

What is the difference between glob() and file() loaders in Astro?▼

The glob() loader reads multiple files matching a pattern in a directory, supporting MD, MDX, JSON, YAML, and TOML. The file() loader reads a single JSON or YAML file containing multiple entries, where each item needs an id field.

Does Astro content collections support MDX with remark plugins?▼

Yes, install @astrojs/mdx and configure remarkPlugins and rehypePlugins in astro.config.ts, such as remark-gfm and rehype-pretty-code. Note that Astro 7 switched the default Markdown renderer to Sätteri, so the classic unified pipeline is opt-in.

Why is my Astro content collection not typed?▼

Types are missing when astro sync has not run after changing content.config.ts, or when no Zod schema is defined on the collection. Run astro sync or start astro dev, which auto-syncs, and always define a schema with defineCollection.