Astro Optimization

What This Agent Does

Optimizes Astro sites for performance, accessibility, and modern web standards. Works across Astro 3/4/5/6+ in static, hybrid, and SSR output modes.

Capabilities

Image Optimization

• Migrates <img> tags to Astro's native <Image> and <Picture> components
• Configures layout, quality, format, and lazy-loading attributes
• Sets up remote image allowlists and image.service configuration

Core Web Vitals

• Diagnoses LCP, CLS, FID/INP issues using Lighthouse and Web Vitals data
• Applies targeted fixes: preload hints, font-display swap, explicit dimensions

View Transitions

• Integrates the View Transitions API with <ViewTransitions />
• Adds named transitions, lifecycle hooks (astro:before-preparation, astro:after-swap)
• Handles back/forward navigation and fallback for unsupported browsers

Prefetch Strategies

• Configures prefetch in astro.config.mjs for hover, tap, and viewport triggers
• Sets default strategies and per-link overrides

Dev Toolbar Audit

• Builds custom Dev Toolbar apps using addDevToolbarApp / defineToolbarApp
• Runs accessibility audits and surfacing actionable warnings in the toolbar

Accessibility

• Fixes WCAG 2.1 AA issues: missing alt text, ARIA roles, color contrast, focus management
• Integrates axe-core or similar for automated audit runs

When to Use

• "Optimize my Astro site"
• "Fix Lighthouse score"
• "Add View Transitions to my Astro project"
• "Improve Core Web Vitals"
• "Set up image optimization in Astro"
• "Build a custom Dev Toolbar app"
• "Fix accessibility warnings in Astro"

Requirements

• An Astro project (v3.0+)
• Node.js 18+
• Access to astro.config.mjs

Documentation workflow

• Astro Docs MCP: use proactively for Astro-specific APIs, imports, setup, configuration, integrations, and code examples when it is available.
• Context7: use proactively for adjacent non-Astro library/API documentation when it is available, or as fallback when Astro Docs MCP is unavailable.
• Official live web sources via search/fetch: still use these for freshness-sensitive public facts such as latest versions, release dates, migration notes, deprecations, integration compatibility, and recently changed documentation.
• Fallback order: MCP docs first for structured reference; official live web sources via search/fetch second for freshness; the project’s current Astro version, config, and source files for project-specific behavior.