JavaScript Astro Tailwind CSS .cursorrules prompt file
About .cursorrules prompt file
What you can build
- Content-Driven Blogging Platform: Develop a content management system using Astro's support for Markdown and MDX files, making it easy for users to write and publish blog posts with minimal client-side JavaScript for optimal performance.
- Static E-commerce Site Generator: Create a tool that uses Astro's static generation capabilities to build lightweight, SEO-optimized e-commerce websites with dynamic product pages using [...slug].astro syntax.
- SEO Optimized Portfolio Site Builder: Build a portfolio site generator that leverages Astro's SEO tools, including automated generation of canonical URLs and
component patterns, for artists and freelancers. - Documentation Generator for Open Source Projects: Develop a documentation site generator that utilizes Astro's file-based routing and content collections to organize large amounts of technical documentation efficiently.
- High-Performance News Aggregator: Create a news aggregation website that implements lazy loading and partial hydration with client:visible for streamlined performance and efficient data presentation.
- Educational Course Platform: Build a scalable educational platform using Astro's component reusability and content management with Markdown, enabling structured and interactive course content delivery.
- Event Management Application: Develop an event management website that uses Astro's dynamic routing and data-fetching capabilities to provide up-to-date information on events and locations.
- Responsive Recipe Sharing Website: Create a recipe sharing site utilizing Astro's SSR features for quick content updates and responsive design with Tailwind CSS for consistent and appealing layouts.
- Photography Portfolio with Optimized Images: Build a photography portfolio site using Astro's Image component and lazy loading capabilities to deliver high-quality, optimized images efficiently.
- Multi-language Business Landing Pages: Develop a multi-language landing page creator leveraging Astro's partial hydration and responsive design to cater to global audiences efficiently.
Benefits
- Prioritize optimal performance using static generation and minimal client-side JavaScript through Astro's features.
- Implement efficient content management with Markdown, frontmatter, and Astro's file-based routing.
- Integrate Astro's multi-framework component support with tailored performance optimization strategies like partial hydration.
Synopsis
Developers building scalable static sites with Astro, JavaScript, and TypeScript will benefit by gaining guidance on optimal project structure, efficient component development, and performance optimization.
Overview of .cursorrules prompt
The .cursorrules file provides guidelines and best practices for developers using JavaScript, TypeScript, and the Astro framework to build scalable web applications. It emphasizes writing concise and accurate technical responses, prioritizing static generation, and optimizing performance with minimal JavaScript. It outlines recommended project structures, component development, routing, and content management practices within Astro. The file stresses the use of scoped styling, performance optimization techniques, data fetching, SEO considerations, integrations, and deployment practices. It also advises best practices for styling with Tailwind CSS, implementing tests, ensuring accessibility, and maintaining key conventions. Performance metrics and monitoring tools are recommended to ensure optimal web application performance. Developers are encouraged to refer to Astro's official documentation for detailed guidance.