astro

ACTIVATE when creating Astro components, layouts, pages, or setting up Astro project structure. ACTIVATE for 'Astro component', 'slot', 'layout', 'Astro.props', 'class:list'. Covers: component anatomy (frontmatter/template/style/script), layout pattern with slot, props patterns, scoped vs global styles, script patterns (build-time vs client-side), path aliases. DO NOT use for: content collections (see astro-content-collections), routing (see astro-routing), React islands (see astro-react).

ACTIVATE when working with Astro content collections, markdown/MDX files, YAML frontmatter, Zod schemas for content, or content-driven pages. ACTIVATE for 'getCollection', 'getEntry', 'defineCollection', 'content collection', 'config.ts'. Covers: collection schema definition with Zod, querying/filtering collections, dynamic routes with getStaticPaths, YAML meta files, MDX with components, collection references. DO NOT use for: routing logic (see astro-routing), general Astro components (see astro-basics).

ACTIVATE when working with environment variables, feature flags, or runtime configuration in Astro. ACTIVATE for 'import.meta.env', '.env', 'PUBLIC_', 'feature flag', 'TRAINING_ENABLED'. Covers: server vs client variables (PUBLIC_ prefix), feature flags pattern with centralized config, TypeScript env declarations, build-time vs runtime variables, Netlify/Vercel deployment vars. DO NOT use for: general Astro setup, content configuration.

ACTIVATE when implementing multilingual Astro sites, language switching, translated routes, or translation patterns. ACTIVATE for 'i18n', 'multilingual', 'language switch', 'hreflang', 'translate route', 'getLang'. Covers: prefix-based routing (fr default, /en prefix), route mapping between languages, translation dictionary without external library, multilingual content collections, hreflang SEO tags, language switcher component. DO NOT use for: Astro routing basics (see astro-routing), SEO tags (see astro-seo).

ACTIVATE when integrating third-party scripts (Google Analytics, GTM, Facebook Pixel) in Astro via Partytown web worker. ACTIVATE for 'analytics', 'Partytown', 'GA4', 'GTM', 'tracking script', 'text/partytown'. Covers: Partytown setup, GA4/GTM/Facebook Pixel integration, forward configuration, custom events, conditional loading (prod only), cookie consent integration, debug mode. DO NOT use for: general script handling in Astro, SEO configuration.

ACTIVATE when integrating React components in Astro, choosing client directives, or implementing interactive islands. ACTIVATE for 'client:load', 'client:visible', 'client:idle', 'client:only', 'React island', 'nanostores'. Covers: client directive selection (load/idle/visible/media/only), props passing, MDX integration, cross-island state sharing with nanostores. DO NOT use for: pure Astro components (see astro-basics), general React patterns.

ACTIVATE when creating dynamic routes, catch-all routes, pagination, API endpoints, or static path generation in Astro. ACTIVATE for 'getStaticPaths', '[slug]', '[...slug]', 'paginate', 'API route', 'redirect'. Covers: file-based routing, single/multiple/nested dynamic parameters, catch-all routes with priority, built-in pagination, API routes (JSON/RSS), URL utilities, redirects. DO NOT use for: content collection queries (see astro-content-collections), i18n routes (see astro-i18n).

ACTIVATE when implementing SEO meta tags, Open Graph, Twitter cards, JSON-LD structured data, or canonical URLs in Astro. ACTIVATE for 'SEO', 'meta tags', 'og:image', 'structured data', 'JSON-LD', 'canonical'. Covers: reusable SEO component, Open Graph/Twitter card meta, JSON-LD structured data (Organization, Person, BlogPosting, Breadcrumbs), multilingual SEO with hreflang, blog post SEO. DO NOT use for: sitemap configuration (see astro-sitemap), general HTML head management.

ACTIVATE when configuring XML sitemaps, robots.txt, or page indexing in Astro. ACTIVATE for 'sitemap', 'robots.txt', '@astrojs/sitemap', 'sitemap filter'. Covers: @astrojs/sitemap setup, page filtering, custom priority/changefreq via serialize, multi-language sitemap with hreflang, robots.txt generation, dynamic content priority. DO NOT use for: SEO meta tags (see astro-seo), general routing.

ACTIVATE when styling Astro components with Tailwind CSS, configuring tailwind.config, or implementing responsive layouts. ACTIVATE for 'Tailwind', 'utility classes', '@tailwindcss/typography', 'prose', 'dark mode'. Covers: project-specific Tailwind config (colors, fonts), common UI patterns (cards, nav, forms, grids, buttons), typography plugin for markdown content, responsive patterns, dark mode, CSS variables with Tailwind. DO NOT use for: general CSS questions, Astro scoped styles without Tailwind.

ACTIVATE when implementing page transitions, SPA-like navigation, transition:persist, or data-astro-reload in Astro. ACTIVATE for 'ViewTransitions', 'transition:name', 'transition:animate', 'data-astro-reload', 'page transition'. Covers: ViewTransitions setup, transition directives (name/animate/persist), custom animations, data-astro-reload for language switching, lifecycle events (astro:page-load), loading indicator pattern. DO NOT use for: general Astro routing, React component hydration.