Configuración de la directiva Astro Programming Prompt Word para el cursor

Comandos de utilidad de AIActualizado hace 11 meses Círculo de intercambio de inteligencia artificial

3.1K 00

Astro es un framework que se centra en el desarrollo web escalable con soporte para JavaScript y TypeScript. Estos son algunos puntos clave a seguir cuando se desarrollan proyectos con Astro:

Astro ofrece un conjunto de estructuras de proyecto recomendadas para organizar el código y los recursos. Los directorios principales del proyecto son srcypublic y archivos de configuración astro.config.mjs. En src los desarrolladores deben almacenar los componentes, diseños, páginas y estilos por separado para que el código sea claro y fácil de mantener.

Para el desarrollo de componentes, cree .astro para definir componentes y utilizar componentes específicos del framework (como React, Vue y Svelte) cuando sea necesario. Los componentes deben ser bien reutilizables y combinables, utilizando las propiedades de Astro para pasar datos, así como componentes incorporados como el componente <Markdown />.

El enrutamiento y la gestión de páginas se implementan a través del sistema de archivos, que los desarrolladores pueden utilizar en el src/pages para definir rutas y utilizar la sintaxis de enrutamiento dinámico (p. ej. [...slug].astro) para manejar contenido dinámico. Además, debe implementarse la gestión de páginas 404 para mejorar la experiencia del usuario.

En cuanto a la gestión de contenidos, éstos pueden gestionarse mediante archivos Markdown o MDX, y organizarse utilizando el soporte de preinformación y las colecciones de contenidos de Astro.

En términos de estilo, Astro soporta el uso de estilos locales y globales dentro de los componentes. Los desarrolladores pueden utilizar preprocesadores CSS como Sass o Less e implementar el diseño responsivo mediante media queries.

Para optimizar el rendimiento, se recomienda minimizar el uso de JavaScript del lado del cliente, aprovechar la función de generación estática de Astro y utilizar las directivas del lado del cliente con criterio para lograr una hidratación parcial. Se debe prestar atención a la carga perezosa de imágenes y otros recursos, y hacer uso de las funciones de optimización integradas en Astro.

Los datos pueden obtenerse con el Astro.props pasa los datos al componente y los transmite en tiempo de compilación a través de la función getStaticPaths() Adquisición de datos. Al mismo tiempo, debe realizarse un tratamiento de errores para garantizar una adquisición de datos sin problemas.

Usa Astro's <head> para añadir metainformación e implementar URL canónicas para mejorar la optimización de los motores de búsqueda.

Para las integraciones y los plug-ins, los desarrolladores deben aprovechar las capacidades de integración de Astro para ampliar la funcionalidad del proyecto con la función astro.config.mjs Las configuraciones adecuadas se realizan en el

Para la compilación y el despliegue, se optimizó el proceso de compilación, se gestionaron adecuadamente las variables de entorno para distintos entornos y se eligió una plataforma de alojamiento estático compatible con Astro para el despliegue.

Para garantizar la accesibilidad, asegúrese de que los componentes tengan estructuras HTML semánticas, aplique atributos ARIA cuando sea necesario y soporte la navegación mediante teclado.

El desarrollo del proyecto también debería seguir las directrices de estilo de Astro, utilizar TypeScript para mejorar la seguridad tipográfica de su código y centrarse en la supervisión y auditoría de las métricas de rendimiento para garantizar que su proyecto está rindiendo en métricas de rendimiento web básicas como LCP, FID y CLS.

Astro

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

  Key Principles
  - Write concise, technical responses with accurate Astro examples.
  - Leverage Astro's partial hydration and multi-framework support effectively.
  - Prioritize static generation and minimal JavaScript for optimal performance.
  - Use descriptive variable names and follow Astro's naming conventions.
  - Organize files using Astro's file-based routing system.

  Astro Project Structure
  - Use the recommended Astro project structure:
    - src/
      - components/
      - layouts/
      - pages/
      - styles/
    - public/
    - astro.config.mjs

  Component Development
  - Create .astro files for Astro components.
  - Use framework-specific components (React, Vue, Svelte) when necessary.
  - Implement proper component composition and reusability.
  - Use Astro's component props for data passing.
  - Leverage Astro's built-in components like <Markdown /> when appropriate.

  Routing and Pages
  - Utilize Astro's file-based routing system in the src/pages/ directory.
  - Implement dynamic routes using [...slug].astro syntax.
  - Use getStaticPaths() for generating static pages with dynamic routes.
  - Implement proper 404 handling with a 404.astro page.

  Content Management
  - Use Markdown (.md) or MDX (.mdx) files for content-heavy pages.
  - Leverage Astro's built-in support for frontmatter in Markdown files.
  - Implement content collections for organized content management.

  Styling
  - Use Astro's scoped styling with <style> tags in .astro files.
  - Leverage global styles when necessary, importing them in layouts.
  - Utilize CSS preprocessing with Sass or Less if required.
  - Implement responsive design using CSS custom properties and media queries.

  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.
  - Implement getStaticPaths() for fetching data at build time.
  - Use Astro.glob() for working with local files efficiently.
  - Implement proper error handling for data fetching operations.

  SEO and Meta Tags
  - Use Astro's <head> tag for adding meta information.
  - 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 (Netlify, Vercel, etc.).
  - Implement proper CI/CD pipelines for automated builds and deployments.

  Styling with Tailwind CSS
  - Integrate Tailwind CSS with Astro @astrojs/tailwind

  Tailwind CSS Best Practices
  - Use Tailwind utility classes extensively in your Astro components.
  - Leverage Tailwind's responsive design utilities (sm:, md:, lg:, etc.).
  - Utilize Tailwind's color palette and spacing scale for consistency.
  - Implement custom theme extensions in tailwind.config.cjs when necessary.
  - Never use the @apply directive

  Testing
  - Implement unit tests for utility functions and helpers.
  - Use end-to-end testing tools like Cypress for testing the built site.
  - Implement visual regression testing if applicable.

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

  Key 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.

  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.