Claude Code with Astro Content Collections Workflow

Astro’s Content Collections provide a powerful, type-safe way to manage structured content in your projects. When combined with Claude Code’s skill system, you can create intelligent workflows that automate content management, validate schemas, and streamline the entire authoring experience. This guide explores how to use Claude Code skills to enhance your Astro content collections workflow.

Understanding Content Collections

Content Collections in Astro allow you to organize Markdown, MDX, and JSON content with built-in type safety through Zod schemas. The system validates your content at build time, catching errors before deployment. Claude Code can help you define schemas, generate content, and maintain consistency across your collections.

Setting Up Your First Collection

Create a content collection by defining its schema in a configuration file:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishDate: z.date(),
    author: z.string(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = {
  'blog': blogCollection,
};

This schema ensures every blog post has required fields with correct types. Claude Code can help you generate these configurations and validate your content against them.

Creating Claude Skills for Content Management

A well-designed Claude Code skill can automate repetitive content tasks. Here’s a skill that helps manage blog posts:

---
name: astro-content
description: "Manage Astro content collections with schema validation and content generation"
---

# Astro Content Collection Helper

You help manage Astro content collections by:
1. Creating new content entries with proper front matter
2. Validating existing content against collection schemas
3. Generating content outlines and structures

## Creating New Content

When asked to create content:
1. Determine the collection type (blog, docs, etc.)
2. Generate appropriate front matter using the collection schema
3. Create the file in src/content/{collection}/
4. Validate the content structure

## Validating Content

Use Astro's content collection API to validate:
- Front matter matches the schema
- Required fields are present
- Field types are correct

Example validation check:
```typescript
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
// TypeScript automatically validates each post

Best Practices

Always use schema validation for content consistency
Keep front matter minimal—only include what’s needed for routing and display
Use descriptive slugs that reflect the content topic
Include draft status for work-in-progress content

Example Workflow

When creating a new blog post:

Ask for the title, description, and main topics
Generate the front matter with today’s date
Create an outline with suggested sections
Save to the appropriate collection directory

Claude Code can guide you through each step, ensuring your content follows Astro best practices while maintaining your project’s conventions.

## Practical Examples with Claude Code

### Generating Content Skeletons

When starting a new article, you can ask Claude Code to generate a content skeleton:

```typescript
// Example: Generating article structure
const articleTemplate = {
  title: "Your Title Here",
  description: "A brief description of your article",
  publishDate: new Date(),
  author: "your-name",
  tags: ["topic-1", "topic-2"],
  draft: true,
};

Claude Code can adapt this template based on your collection schema and project requirements.

Querying Collections

Astro’s content collection API provides powerful querying capabilities:

// Get all published blog posts, sorted by date
import { getCollection } from 'astro:content';

const posts = await getCollection('blog', ({ data }) => {
  return !data.draft && data.publishDate < new Date();
});

const sortedPosts = posts.sort(
  (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf()
);

Claude Code can help you write these queries and integrate them into your Astro components.

Dynamic Routing with Collections

Create dynamic routes for your content:

---
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<article>
  <h1>{post.data.title}</h1>
  <time>{post.data.publishDate.toLocaleDateString()}</time>
  <Content />
</article>

Advanced Workflow Patterns

Cross-Collection References

Link related content across collections:

const docsCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    relatedGuides: z.array(z.reference('blog')).optional(),
  }),
});

Content Validation Scripts

Create automated validation in your build pipeline:

// scripts/validate-content.ts
import { getCollection } from 'astro:content';
import { glob } from 'astro/loaders';

async function validateCollections() {
  const errors: string[] = [];
  
  for (const collectionName of ['blog', 'docs']) {
    const entries = await getCollection(collectionName);
    
    for (const entry of entries) {
      const result = entry.data;
      // Custom validation logic
      if (!result.title || result.title.length < 5) {
        errors.push(`${entry.id}: Title too short`);
      }
    }
  }
  
  if (errors.length > 0) {
    console.error('Content validation failed:', errors);
    process.exit(1);
  }
}

validateCollections();

Integrating with Markdown Tools

Combine Astro content collections with Markdown processing:

import { getCollection } from 'astro:content';
import { remark } from 'remark';
import html from 'remark-html';

export async function markdownToHtml(markdown: string) {
  const result = await remark().use(html).process(markdown);
  return result.toString();
}

Conclusion

Astro Content Collections combined with Claude Code skills create a powerful content management system. The type-safe schemas catch errors early, while Claude Code automates repetitive tasks and guides you through best practices. Start with simple collections and gradually adopt advanced patterns as your content needs grow.

The key is integrating Claude Code as an active collaborator—let it handle schema generation, content validation, and structural consistency while you focus on writing quality content.

Built by theluckystrike — More at zovo.one