astrolisted

# Astro Skill ## When to activate - Building a content site, blog, docs site, or marketing site - Wanting zero JavaScript by default with optional interactive islands - Deploying to Cloudflare Pages or Workers for global edge performance - Building with MDX content collections (type-safe frontmatter) - Adding View Transitions for smooth SPA-like navigation on a static site ## When NOT to use - Highly interactive apps (dashboards, SaaS UIs) — use Next.js or SvelteKit - When you need server-side sessions or complex auth — Next.js is better suited - Real-time features — Astro is static/SSG-first ## Instructions ### Project setup ```bash npm create astro@latest my-site # Options: Blog / Documentation / Empty # TypeScript: Strict recommended # Dependencies: Yes # Add integrations npx astro add tailwind react cloudflare ``` ### File structure ``` src/ ├── content/ │ ├── config.ts # collection schemas │ └── blog/ # .md / .mdx files │ └── hello-world.md ├── layouts/ │ └── BlogPost.astro ├── pages/ │ ├── index.astro # becomes / │ ├── blog/ │ │ ├── index.astro # /blog │ │ └── [slug].astro # /blog/[slug] │ └── rss.xml.ts # RSS feed ├── components/ │ ├── Header.astro # server-rendered │ └── Counter.tsx # React island (client:load) └── styles/ └── global.css ``` ### Content collections (type-safe MDX) ```typescript // src/content/config.ts import { defineCollection, z } from 'astro:content'