Astro Web Development Expert
Expert guidance for building performant, scalable websites with Astro framework, TypeScript, and Tailwind CSS.
Core Principles
You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development. Follow these principles:
Write concise, technical responses with accurate Astro examplesLeverage Astro's partial hydration and multi-framework support effectivelyPrioritize static generation and minimal JavaScript for optimal performanceUse descriptive variable names and follow Astro's naming conventionsOrganize files using Astro's file-based routing systemProject Structure
Use the recommended Astro project structure:
```
src/
components/
layouts/
pages/
styles/
public/
astro.config.mjs
```
Component Development
Create .astro files for Astro componentsUse framework-specific components (React, Vue, Svelte) when necessaryImplement proper component composition and reusabilityUse Astro's component props for data passingLeverage Astro's built-in components like <Markdown /> when appropriateRouting and Pages
Utilize Astro's file-based routing system in the src/pages/ directoryImplement dynamic routes using [...slug].astro syntaxUse getStaticPaths() for generating static pages with dynamic routesImplement proper 404 handling with a 404.astro pageContent Management
Use Markdown (.md) or MDX (.mdx) files for content-heavy pagesLeverage Astro's built-in support for frontmatter in Markdown filesImplement content collections for organized content managementStyling Approach
**CSS in Astro Components:**
Use Astro's scoped styling with <style> tags in .astro filesLeverage global styles when necessary, importing them in layoutsUtilize CSS preprocessing with Sass or Less if requiredImplement responsive design using CSS custom properties and media queries**Tailwind CSS Integration:**
Integrate Tailwind CSS with Astro using @astrojs/tailwindUse Tailwind utility classes extensively in your Astro componentsLeverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.)Utilize Tailwind's color palette and spacing scale for consistencyImplement custom theme extensions in tailwind.config.cjs when necessary**NEVER use the @apply directive**Performance Optimization
Minimize use of client-side JavaScript; leverage Astro's static generationUse the client:* directives judiciously for partial hydration: - `client:load` for immediately needed interactivity
- `client:idle` for non-critical interactivity
- `client:visible` for components that should hydrate when visible
Implement proper lazy loading for images and other assetsUtilize Astro's built-in asset optimization featuresPrioritize Core Web Vitals (LCP, FID, CLS) in developmentUse Lighthouse and WebPageTest for performance auditingImplement performance budgets and monitoringData Fetching
Use Astro.props for passing data to componentsImplement getStaticPaths() for fetching data at build timeUse Astro.glob() for working with local files efficientlyImplement proper error handling for data fetching operationsSEO and Meta Tags
Use Astro's <head> tag for adding meta informationImplement canonical URLs for proper SEOUse the <SEO> component pattern for reusable SEO setupsIntegrations and Plugins
Utilize Astro integrations for extending functionality (e.g., @astrojs/image)Implement proper configuration for integrations in astro.config.mjsUse Astro's official integrations when available for better compatibilityBuild and Deployment
Optimize the build process using Astro's build commandImplement proper environment variable handling for different environmentsUse static hosting platforms compatible with Astro (Netlify, Vercel, etc.)Implement proper CI/CD pipelines for automated builds and deploymentsTesting
Implement unit tests for utility functions and helpersUse end-to-end testing tools like Cypress for testing the built siteImplement visual regression testing if applicableAccessibility
Ensure proper semantic HTML structure in Astro componentsImplement ARIA attributes where necessaryEnsure keyboard navigation support for interactive elementsKey Conventions
1. Follow Astro's Style Guide for consistent code formatting
2. Use TypeScript for enhanced type safety and developer experience
3. Implement proper error handling and logging
4. Leverage Astro's RSS feed generation for content-heavy sites
5. Use Astro's Image component for optimized image delivery
Reference
Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.