content-collections

Transforms markdown and content files into type-safe TypeScript collections with Zod schema validation.

Updated Feb 23, 2026
One-click install
npx skills add https://github.com/jherr/kdh-templates --skill content-collections-jherr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: content-collections
Source: https://github.com/jherr/kdh-templates/tree/main/starters/calculator/.claude/skills/content-collections
Command: npx skills add https://github.com/jherr/kdh-templates --skill content-collections-jherr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @content-collections/core, @content-collections/vite, @content-collections/markdown, zod.

What problem does it solve? Managing markdown-based content in TypeScript projects often means writing ad-hoc parsing code with no type safety or validation. This Skill guides you through setting up Content Collections so your blog posts, docs, and other content files become fully typed, validated data collections. ## Core Features & Use Cases - Type-Safe Collections: Define collections with Zod schemas and get full TypeScript inference for every document, including frontmatter fields and metadata. - Markdown Transformation: Compile markdown to HTML with remark/rehype plugins, and add computed fields like reading time or slugs during transformation. - Multiple & Joined Collections: Manage posts, docs, and authors as separate collections and join related documents (e.g., resolving an author reference inside a post). - Use Case: Build a blog in TanStack Start where each markdown post is validated at build time, sorted by date in a route loader, and rendered as HTML on individual post pages. ## Quick Start Set up Content Collections in my TanStack Start project with a posts collection that validates title, published date, and tags from markdown frontmatter.

Frequently Asked Questions about content-collections

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

FAQPage Schema
How do I create a type-safe markdown blog in TypeScript?▼

Define a collection with defineCollection, point it at your markdown directory, and declare frontmatter fields with a Zod schema. Content Collections generates typed arrays like allPosts that you import directly into routes or components.

How to render markdown content as HTML with Content Collections?▼

Install @content-collections/markdown and call compileMarkdown inside the collection's transform function. You can pass remarkPlugins and rehypePlugins such as remark-gfm and rehype-highlight for extended markdown support.

Does Content Collections work with TanStack Start and Vite?▼

Yes, Content Collections provides a dedicated Vite plugin from @content-collections/vite. Add it to the vite plugins array in your TanStack Start app.config.ts, and content changes hot-reload during development.

Can I join data across multiple content collections?▼

Yes, inside a collection's transform function you can access other collections through context.documents and look up related entries. For example, a post can resolve its authorId against an authors collection to embed author details.

What happens when markdown frontmatter fails schema validation?▼

Content Collections uses Zod for validation, so invalid content fails the build with an error identifying the file and the missing or invalid field. This prevents malformed content from reaching production.