content-collections

Name: content-collections
Author: jackspace

15stars7forks

How to install content-collections?

jackspace/claudeskillz/content-collections

$npx -y skills add jackspace/ClaudeSkillz --skill content-collections

Installs into the current project.

Summary

Production-tested setup for Content Collections - a TypeScript-first build tool that transforms local content files (Markdown/MDX) into type-safe data collections with automatic validation. Use when: building blogs, documentation sites, or content-heavy applications with Vite + R

Files · 1

View on GitHub

SKILL.md

1	# Content Collections
2
3	Status: Production Ready ✅
4	Last Updated: 2025-11-07
5	Dependencies: None
6	Latest Versions: @content-collections/core@0.12.0, @content-collections/vite@0.2.7, zod@3.23.8
7
8	---
9
10	## What is Content Collections?
11
12	Content Collections transforms local content files (Markdown/MDX) into type-safe TypeScript data with automatic validation at build time.
13
14	Problem it solves: Manual content parsing, lack of type safety, runtime errors from invalid frontmatter.
15
16	How it works:
17	1. Define collections in `content-collections.ts` (name, directory, Zod schema)
18	2. CLI/plugin scans filesystem, parses frontmatter, validates against schema
19	3. Generates TypeScript modules in `.content-collections/generated/`
20	4. Import collections: `import { allPosts } from "content-collections"`
21
22	Perfect for: Blogs, documentation sites, content-heavy apps with Cloudflare Workers, Vite, Next.js.
23
24	---
25
26	## Quick Start (5 Minutes)
27
28	### 1. Install Dependencies
29
30	```bash
31	pnpm add -D @content-collections/core @content-collections/vite zod
32	```
33
34	### 2. Configure TypeScript Path Alias
35
36	Add to `tsconfig.json`:
37
38	```json
39	{
40	"compilerOptions": {
41	"paths": {
42	"content-collections": ["./.content-collections/generated"]
43	}
44	}
45	}
46	```
47
48	###
49
50	3. Configure Vite Plugin
51
52	Add to `vite.config.ts`:
53
54	```typescript
55	import { defineConfig } from "vite";
56	import react from "@vitejs/plugin-react";
57	import contentCollections from "@content-collections/vite";
58
59	export default defineConfig({
60	plugins: [
61	react(),
62	contentCollections(), // MUST come after react()
63	],
64	});
65	```
66
67	### 4. Update .gitignore
68
69	```
70	.content-collections/
71	```
72
73	### 5. Create Collection Config
74
75	Create `content-collections.ts` in project root:
76
77	```typescript
78	import { defineCollection, defineConfig } from "@content-collections/core";
79	import { z } from "zod";
80
81	const posts = defineCollection({
82	name: "posts",
83	directory: "content/posts",
84	include: "*.md",
85	schema: z.object({
86	title: z.string(),
87	date: z.string(),
88	description: z.string(),
89	content: z.string(),
90	}),
91	});
92
93	export default defineConfig({
94	collections: [posts],
95	});
96	```
97
98	### 6. Create Content Directory
99
100	```bash
101	mkdir -p content/posts
102	```
103
104	Create `content/posts/first-post.md`:
105
106	```markdown
107	---
108	title: My First Post
109	date: 2025-11-07
110	description: Introduction to Content Collections
111	---
112
113	# My First Post
114
115	Content goes here...
116	```
117
118	### 7. Import and Use
119
120	```typescript
121	import { allPosts } from "content-collections";
122
123	console.log(allPosts); // Fully typed!
124	```
125
126	Result: Type-safe content with autocomplete, validation, and HMR.
127
128	---
129
130	## Critical Rules
131
132	### ✅ Always Do:
133
134	1. Add path alias to tsconfig.json - Required for imports to work
135	2. Add .content-collections to .gitignore - Generated files shouldn't be committed
136	3. Use Standard Schema validators - Zod, Valibot, ArkType supported
137	4. Include `content` field in schema - Required for frontmatter parsing
138	5. Await compileMDX in transforms - MDX compilation is async
139	6. Put contentCollections() after react() in Vite - Plugin order matters
140
141	### ❌ Never Do:
142
143	1. Commit .content-collections directory - Always generated, never committed
144	2. Use non-standard validators - Must support StandardSchema spec
145	3. Forget to restart dev server after config changes - Required for new collections
146	4. Use sync transforms with async operations - Transform must be async
147	5. Double-wrap path alias - Use `content-collections` not `./c

People who liked this also viewed

6 picks

Type

content-collections

15stars7forks

View on GitHub

How to install content-collections?

jackspace/claudeskillz/content-collections

$npx -y skills add jackspace/ClaudeSkillz --skill content-collections

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Content Collections
2
3	Status: Production Ready ✅
4	Last Updated: 2025-11-07
5	Dependencies: None
6	Latest Versions: @content-collections/core@0.12.0, @content-collections/vite@0.2.7, zod@3.23.8
7
8	---
9
10	## What is Content Collections?
11
12	Content Collections transforms local content files (Markdown/MDX) into type-safe TypeScript data with automatic validation at build time.
13
14	Problem it solves: Manual content parsing, lack of type safety, runtime errors from invalid frontmatter.
15
16	How it works:
17	1. Define collections in `content-collections.ts` (name, directory, Zod schema)
18	2. CLI/plugin scans filesystem, parses frontmatter, validates against schema
19	3. Generates TypeScript modules in `.content-collections/generated/`
20	4. Import collections: `import { allPosts } from "content-collections"`
21
22	Perfect for: Blogs, documentation sites, content-heavy apps with Cloudflare Workers, Vite, Next.js.
23
24	---
25
26	## Quick Start (5 Minutes)
27
28	### 1. Install Dependencies
29
30	```bash
31	pnpm add -D @content-collections/core @content-collections/vite zod
32	```
33
34	### 2. Configure TypeScript Path Alias
35
36	Add to `tsconfig.json`:
37
38	```json
39	{
40	"compilerOptions": {
41	"paths": {
42	"content-collections": ["./.content-collections/generated"]
43	}
44	}
45	}
46	```
47
48	###
49
50	3. Configure Vite Plugin
51
52	Add to `vite.config.ts`:
53
54	```typescript
55	import { defineConfig } from "vite";
56	import react from "@vitejs/plugin-react";
57	import contentCollections from "@content-collections/vite";
58
59	export default defineConfig({
60	plugins: [
61	react(),
62	contentCollections(), // MUST come after react()
63	],
64	});
65	```
66
67	### 4. Update .gitignore
68
69	```
70	.content-collections/
71	```
72
73	### 5. Create Collection Config
74
75	Create `content-collections.ts` in project root:
76
77	```typescript
78	import { defineCollection, defineConfig } from "@content-collections/core";
79	import { z } from "zod";
80
81	const posts = defineCollection({
82	name: "posts",
83	directory: "content/posts",
84	include: "*.md",
85	schema: z.object({
86	title: z.string(),
87	date: z.string(),
88	description: z.string(),
89	content: z.string(),
90	}),
91	});
92
93	export default defineConfig({
94	collections: [posts],
95	});
96	```
97
98	### 6. Create Content Directory
99
100	```bash
101	mkdir -p content/posts
102	```
103
104	Create `content/posts/first-post.md`:
105
106	```markdown
107	---
108	title: My First Post
109	date: 2025-11-07
110	description: Introduction to Content Collections
111	---
112
113	# My First Post
114
115	Content goes here...
116	```
117
118	### 7. Import and Use
119
120	```typescript
121	import { allPosts } from "content-collections";
122
123	console.log(allPosts); // Fully typed!
124	```
125
126	Result: Type-safe content with autocomplete, validation, and HMR.
127
128	---
129
130	## Critical Rules
131
132	### ✅ Always Do:
133
134	1. Add path alias to tsconfig.json - Required for imports to work
135	2. Add .content-collections to .gitignore - Generated files shouldn't be committed
136	3. Use Standard Schema validators - Zod, Valibot, ArkType supported
137	4. Include `content` field in schema - Required for frontmatter parsing
138	5. Await compileMDX in transforms - MDX compilation is async
139	6. Put contentCollections() after react() in Vite - Plugin order matters
140
141	### ❌ Never Do:
142
143	1. Commit .content-collections directory - Always generated, never committed
144	2. Use non-standard validators - Must support StandardSchema spec
145	3. Forget to restart dev server after config changes - Required for new collections
146	4. Use sync transforms with async operations - Transform must be async
147	5. Double-wrap path alias - Use `content-collections` not `./c

People who liked this also viewed

6 picks

Type