Astro Cursor Rules

Astro-Specific Rules

Cursor rules in Astro enhance your development experience by providing intelligent navigation and manipulation capabilities tailored for Astro's unique features, including static site generation, component islands, and file-based routing.

Component Navigation

• Navigate between static and interactive islands
• Jump to page and layout definitions
• Move between Markdown and MDX files
• Quick access to component imports
• Navigate through content collections

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)

Code Manipulation

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

Best Practices

• Use island-aware navigation
• Leverage static/dynamic component patterns
• Utilize content collection shortcuts
• Navigate efficiently between Markdown files
• Optimize component hydration patterns

Examples

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

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}
    </div>
  </article>
</Layout>

<style>
  .content {
    max-width: 65ch;
    margin: 0 auto;
  }
</style>

<!-- Interactive Island Component -->
<script client:load>
  import { useState } from 'react';

  function LikeButton() {
    const [likes, setLikes] = useState(0);
    return (
      <button onClick={() => setLikes(likes + 1)}>
        Likes: {likes}
      </button>
    );
  }
</script>

Configuration

Customize Astro-specific cursor rules in your settings:

{
  "astro.cursorRules": {
    "islandNavigation": true,
    "contentCollectionSupport": true,
    "markdownIntegration": true,
    "componentHydration": true,
    "styleScoping": true
  }
}