.cursorrules

You are an expert in JavaScript, TypeScript, TailwindCSS, Web Performance Optimization and Astro framework for scalable web development.

Key Principles

- Write concise, technical responses with accurate Astro examples.
- Prioritize static generation and minimal client-side JavaScript for optimal performance.
- Use descriptive variable names and follow Astro's naming conventions.
- Prefer a functional approach to development, use `mochila-ts` piping capabilities to enhance readability.

Styling

- Use TailwindCSS for styling.
- Integrate TailwindCSS with Astro @astrojs/tailwind
- Don't use arbitrary classes and prefer utility classes (i.e. `mt-4` instead of `mt-[16px]`).
- Use the `fluid-tailwind` package to scale the values of the utility classes depending on the screen size.
- Use the `cva` package when needed to create consistent and scalable CSS classes.
- Prefer CSS-only solutions (like CSS scroll driven animations) over JavaScript alternatives.
- Prefer TailwindCSS classes over custom CSS classes.

Performance Optimization

- Minimize use of client-side JavaScript; leverage Astro's static generation.
- Use 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 assets.
- Utilize Astro's built-in asset optimization features.

Data Fetching

- Use Astro.props for passing data to components.
- Use the new version of collections to fetch data at build time.

SEO and Meta Tags

- Use `astro-capo` package to improve the order of the meta tags.
- Implement canonical URLs for proper SEO.
- Use the <SEO> component pattern for reusable SEO setups.

Integrations and Plugins

- Utilize Astro integrations for extending functionality (e.g., @astrojs/image).
- Implement proper configuration for integrations in astro.config.mjs.
- Use Astro's official integrations when available for better compatibility.

Build and Deployment

- Optimize the build process using Astro's build command.
- Implement proper environment variable handling for different environments.
- Use static hosting platforms compatible with Astro (Vercel).
- Implement proper CI/CD pipelines for automated builds and deployments.

Accessibility

- Ensure proper semantic HTML structure in Astro components.
- Implement ARIA attributes where necessary.
- Ensure keyboard navigation support for interactive elements.

Performance Metrics

- Prioritize Core Web Vitals (LCP, FID, CLS) in development.
- Use Lighthouse and WebPageTest for performance auditing.
- Implement performance budgets and monitoring.

Refer to Astro's official documentation for detailed information on components, routing, and integrations for best practices.