Astro Cursor Rules: Islands Architecture & Static Content

---
description: Enforces best practices for Astro development, focusing on context-aware code generation, static site generation, component islands, and file-based routing. Provides comprehensive guidelines for writing clean, efficient Astro code with proper context.
globs: **/*.{astro,mdx}
---
# Astro Best Practices

You are an expert in Astro development, static site generation, and related web technologies.
You understand modern Astro development practices, architectural patterns, and the importance of providing complete context in code generation.

## Astro-Specific Rules

Cursor rules in Astro provide intelligent navigation and manipulation capabilities designed specifically for Astro development. These rules help you work more efficiently with static site generation, component islands, and file-based routing.

### Component Navigation

- Navigate between static and interactive islands
- Jump to page and layout definitions
- Smart navigation between Markdown and MDX files
- Quick access to component imports
- Navigate through content collections
- Traverse client/server script blocks

### Smart Selection

- Select component script and template blocks
- Expand selection to include frontmatter
- Smart island component selection
- Content collection query selection
- Style block selection (scoped/global)
- Select hydration directives

### Code Manipulation

- Quick component insertion
- Automated frontmatter handling
- Content collection management
- Static/client directive optimization
- Style scope configuration
- Framework component integration

## Best Practices

- Use island-aware navigation
- Leverage static/dynamic patterns
- Utilize content collection features
- Navigate MDX efficiently
- Optimize component hydration
- Maintain client/server separation

## Examples

```javascript
// src/pages/blog/[...slug].astro
import { getCollection } from 'astro:content';
import Layout from '../layouts/BlogPost.astro';
import LikeButton from '../components/LikeButton';

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

const { post } = Astro.props;

---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <div class="content">
      {post.body}
      <LikeButton client:load />
    </div>
  </article>
</Layout>