Claude
Skills
Sign in
Back

frontmatter-schemas

Included with Lifetime
$97 forever

# Astro Frontmatter Schemas Skill

Web Dev

What this skill does

# Astro Frontmatter Schemas Skill

Common Zod schema patterns and frontmatter examples for Astro content collections.

## When to Use This Skill

- Designing content collection schemas
- Creating frontmatter for markdown files
- Validating content structure
- Setting up type-safe content

## Common Schema Patterns

### Blog Post Schema

```typescript
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
  schema: z.object({
    // Core Fields
    title: z.string().max(80),
    description: z.string().max(160),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),

    // Author
    author: z.string(),
    authorUrl: z.string().url().optional(),

    // Categorization
    tags: z.array(z.string()).default([]),
    category: z.enum(['tutorial', 'news', 'guide', 'review']).optional(),

    // Publishing
    draft: z.boolean().default(false),
    featured: z.boolean().default(false),

    // Media
    image: z.object({
      url: z.string(),
      alt: z.string()
    }).optional(),

    // SEO
    canonicalURL: z.string().url().optional(),

    // Metadata
    readingTime: z.number().optional(),
    relatedPosts: z.array(z.string()).default([])
  })
});
```

**Corresponding Frontmatter:**

```yaml
---
title: 'Getting Started with Astro'
description: 'Learn the fundamentals of building fast websites with Astro'
pubDate: 2024-01-15
updatedDate: 2024-01-20
author: 'John Doe'
authorUrl: 'https://example.com/john'
tags: ['astro', 'tutorial', 'web-dev']
category: 'tutorial'
draft: false
featured: true
image:
  url: './images/hero.jpg'
  alt: 'Astro logo with stars'
canonicalURL: 'https://example.com/blog/getting-started'
readingTime: 8
relatedPosts: ['advanced-astro', 'astro-tips']
---
```

### Documentation Schema

```typescript
const docs = defineCollection({
  loader: glob({ pattern: "**/*.mdx", base: "./src/content/docs" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),

    // Sidebar
    sidebar: z.object({
      order: z.number(),
      label: z.string().optional(),
      hidden: z.boolean().default(false),
      badge: z.string().optional()
    }).optional(),

    // Status
    lastUpdated: z.coerce.date().optional(),
    version: z.string().optional(),
    deprecated: z.boolean().default(false),

    // Contributors
    contributors: z.array(z.string()).default([]),

    // Navigation
    prev: z.object({
      text: z.string(),
      link: z.string()
    }).optional(),
    next: z.object({
      text: z.string(),
      link: z.string()
    }).optional(),

    // Table of Contents
    tableOfContents: z.boolean().default(true),
    tocDepth: z.number().min(1).max(6).default(3)
  })
});
```

**Corresponding Frontmatter:**

```yaml
---
title: 'API Reference'
description: 'Complete API documentation for the core library'
sidebar:
  order: 2
  label: 'API Docs'
  hidden: false
  badge: 'New'
lastUpdated: 2024-01-20
version: '2.1.0'
deprecated: false
contributors: ['john-doe', 'jane-smith']
prev:
  text: 'Installation'
  link: '/docs/installation'
next:
  text: 'Configuration'
  link: '/docs/configuration'
tableOfContents: true
tocDepth: 3
---
```

### Product Schema

```typescript
const products = defineCollection({
  loader: glob({ pattern: "**/*.json", base: "./src/content/products" }),
  schema: z.object({
    // Basic Info
    name: z.string(),
    description: z.string(),
    shortDescription: z.string().max(100).optional(),

    // Pricing
    price: z.number().positive(),
    currency: z.string().default('USD'),
    salePrice: z.number().positive().optional(),

    // Categorization
    category: z.enum(['software', 'hardware', 'service', 'digital']),
    tags: z.array(z.string()).default([]),

    // Inventory
    sku: z.string(),
    inStock: z.boolean().default(true),
    quantity: z.number().int().min(0).optional(),

    // Features
    features: z.array(z.string()),
    specifications: z.record(z.string()).optional(),

    // Media
    images: z.array(z.object({
      url: z.string(),
      alt: z.string(),
      primary: z.boolean().default(false)
    })),

    // Rating
    rating: z.number().min(0).max(5).optional(),
    reviewCount: z.number().int().min(0).default(0)
  })
});
```

**Corresponding JSON:**

```json
{
  "name": "Premium Web Hosting",
  "description": "Fast, reliable web hosting with 99.9% uptime",
  "shortDescription": "Premium hosting solution",
  "price": 29.99,
  "currency": "USD",
  "salePrice": 19.99,
  "category": "service",
  "tags": ["hosting", "cloud", "premium"],
  "sku": "HOST-001",
  "inStock": true,
  "quantity": 100,
  "features": [
    "99.9% uptime guarantee",
    "Free SSL certificate",
    "24/7 support"
  ],
  "specifications": {
    "storage": "100GB SSD",
    "bandwidth": "Unlimited",
    "domains": "1"
  },
  "images": [
    {
      "url": "/images/hosting-main.jpg",
      "alt": "Server rack",
      "primary": true
    }
  ],
  "rating": 4.5,
  "reviewCount": 127
}
```

### Team Member Schema

```typescript
const team = defineCollection({
  loader: glob({ pattern: "**/*.yml", base: "./src/content/team" }),
  schema: z.object({
    name: z.string(),
    role: z.string(),
    department: z.enum(['engineering', 'design', 'marketing', 'sales']).optional(),

    bio: z.string(),

    avatar: z.string(),

    social: z.object({
      twitter: z.string().url().optional(),
      github: z.string().url().optional(),
      linkedin: z.string().url().optional(),
      website: z.string().url().optional()
    }).optional(),

    startDate: z.coerce.date(),
    location: z.string().optional(),

    skills: z.array(z.string()).default([]),
    featured: z.boolean().default(false)
  })
});
```

**Corresponding YAML:**

```yaml
name: 'Jane Smith'
role: 'Senior Software Engineer'
department: 'engineering'
bio: 'Full-stack developer with 10 years experience building scalable web applications.'
avatar: '/images/team/jane.jpg'
social:
  twitter: 'https://twitter.com/janesmith'
  github: 'https://github.com/janesmith'
  linkedin: 'https://linkedin.com/in/janesmith'
  website: 'https://janesmith.dev'
startDate: 2020-03-15
location: 'San Francisco, CA'
skills: ['TypeScript', 'React', 'Node.js', 'AWS']
featured: true
```

### Project/Portfolio Schema

```typescript
const projects = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/projects" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),

    technologies: z.array(z.string()),

    liveUrl: z.string().url().optional(),
    githubUrl: z.string().url().optional(),
    demoUrl: z.string().url().optional(),

    thumbnail: z.string(),
    images: z.array(z.string()).default([]),

    date: z.coerce.date(),
    endDate: z.coerce.date().optional(),

    status: z.enum(['active', 'completed', 'archived']).default('active'),
    featured: z.boolean().default(false),

    client: z.string().optional(),
    team: z.array(z.string()).default([]),

    tags: z.array(z.string()).default([])
  })
});
```

**Corresponding Frontmatter:**

```yaml
---
title: 'E-commerce Platform Redesign'
description: 'Complete redesign and modernization of legacy e-commerce platform'
technologies: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'PostgreSQL']
liveUrl: 'https://shop.example.com'
githubUrl: 'https://github.com/example/shop'
thumbnail: './images/shop-thumb.jpg'
images:
  - './images/shop-1.jpg'
  - './images/shop-2.jpg'
  - './images/shop-3.jpg'
date: 2023-06-01
endDate: 2023-12-15
status: 'completed'
featured: true
client: 'Example Corp'
team: ['john-doe', 'jane-smith']
tags: ['web-dev', 'e-commerce', 'react']
---
```

## Zod Validation Patterns

### String Validation

```typescript
// Basic string
title: z.string()

// Length constraints
title: z.string().min(1).max(100)
description: z.string().max(500)

// Email validation
email: z.string().email()

/

Related in Web Dev