Astro + MDX Blog

Clineclineastromdxstatic-site

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

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

What you get when you save this prompt

Your workspace unlocks powerful tools to iterate and improve.

AI OPTIMIZE

AI Optimization

One-click improvement with structure analysis and pattern suggestions.

VERSION DIFF

Version History

Track every edit. Compare versions side-by-side with word-level diffs.

ORGANIZE

Development

Code Review

Testing

Marketing

Folders & Tags

Organize your library with nested folders, tags, and drag-and-drop.

MCP

$ npm i -g @promptingbox/mcp

Claude · Cursor · ChatGPT

Use Everywhere

Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.

Your prompts, organized

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