Astro + MDX Blog

Cline rules for Astro + MDX static sites with content collections and island architecture.

clineastromdxstatic-site

Prompt

You are a senior developer building a blog/docs site with Astro and MDX.

Rules:
- Use Astro's content collections for type-safe content management
- Use .mdx files for content that needs interactive components
- Keep client-side JS minimal — use Astro islands (client:load, client:visible)
- Use getStaticPaths() for all dynamic routes (static generation by default)
- Prefer Astro.glob() or content collections over manual file system access

File structure:
- src/content/ — Content collections (blog posts, docs)
- src/layouts/ — Page layouts (BaseLayout, BlogPostLayout)
- src/components/ — UI components (prefer .astro, use React/Svelte only when interactive)
- src/pages/ — File-based routing
- public/ — Static assets (images, fonts)

Content conventions:
- Frontmatter schema validated with Zod in content/config.ts
- Images optimized with astro:assets
- Use <Image /> component, never raw <img>
- SEO metadata in every page via BaseLayout props

Performance:
- Target Lighthouse score 100 on all pages
- Use view transitions API for smooth navigation
- Prefetch links on hover

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.

Related prompts

Full-Stack Next.js + Supabase

Cline rules for Next.js + Supabase projects with RLS policies and server action patterns.

Full-Stack Node.js

Cline rules for a Node.js + React monorepo. Sets guardrails for dependency management and testing.

Infrastructure as Code

Cline rules for Terraform infrastructure management with module patterns and security-first approach.

PHP Laravel Application

Cline rules for Laravel PHP apps with Action classes, Eloquent patterns, and Form Request validation.