Настройка директивы Astro Programming Prompt Word для курсора

Утилитарные команды искусственного интеллектаОбновлено 12 месяцев назад Круг обмена ИИ

10.4K 00

Astro - это фреймворк, ориентированный на масштабируемую веб-разработку с поддержкой JavaScript и TypeScript. Вот несколько ключевых моментов, которых следует придерживаться при разработке проектов на Astro:

Astro предоставляет набор рекомендуемых структур проекта для организации кода и ресурсов. Основные каталоги проекта включают src, иpublic и файлы конфигурации astro.config.mjs. В src В каталоге разработчики должны хранить компоненты, макеты, страницы и стили отдельно, чтобы сохранить ясность и удобство работы с кодом.

Для разработки компонентов создайте .astro файл для определения компонентов и использовать специфические для фреймворка компоненты (такие как React, Vue и Svelte), когда это необходимо. Компоненты должны быть хорошо многократно используемыми и комбинируемыми, используя свойства Astro для передачи данных, а также встроенные компоненты, такие как <Markdown />.

Маршрутизация и управление страницами реализованы через файловую систему, которую разработчики могут использовать в src/pages каталог для определения маршрутов и использования синтаксиса динамической маршрутизации (например. [...slug].astro) для обработки динамического контента. Кроме того, для повышения удобства пользователей следует реализовать обработку страниц 404.

Для управления контентом можно использовать файлы Markdown или MDX, организованные с помощью поддержки предварительной информации и коллекций контента Astro.

Что касается стилей, то Astro поддерживает использование локальных и глобальных стилей в компонентах. Разработчики могут использовать препроцессоры CSS, такие как Sass или Less, и реализовать отзывчивый дизайн с помощью медиа-запросов.

Для оптимизации производительности рекомендуется минимизировать использование JavaScript на стороне клиента, использовать возможности статической генерации Astro и разумно применять директивы на стороне клиента для достижения частичной гидратации. Следует обратить внимание на "ленивую" загрузку изображений и других ресурсов, а также использовать встроенные в Astro функции оптимизации.

Данные можно получить с помощью Astro.props передает данные компоненту и передает их во время сборки через getStaticPaths() Получение данных. В то же время необходимо провести обработку ошибок, чтобы обеспечить бесперебойный сбор данных.

Используйте "Астро". <head> теги для добавления метаинформации и внедрения канонических URL-адресов для улучшения поисковой оптимизации.

Что касается интеграций и плагинов, разработчикам следует воспользоваться интеграционными возможностями Astro, чтобы расширить функциональность проекта с помощью astro.config.mjs Соответствующие настройки выполняются в

Для сборки и развертывания был оптимизирован процесс сборки, правильно обработаны переменные окружения для различных сред, а для развертывания была выбрана совместимая с Astro платформа статического хостинга.

Для обеспечения доступности убедитесь, что компоненты имеют семантическую структуру HTML, реализуют атрибуты ARIA, где это необходимо, и поддерживают навигацию с помощью клавиатуры.

При разработке проекта также следует придерживаться стилистических рекомендаций Astro, использовать TypeScript для повышения безопасности типов кода, а также уделять внимание мониторингу и аудиту показателей производительности, чтобы убедиться, что ваш проект соответствует основным показателям веб-производительности, таким как LCP, FID и CLS.

Астро

  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.

Утилитарные команды искусственного интеллекта Код #