Astro .cursorrules Cursor AI Three.js Tailwind CSS project prompt file

100

Jay Ciretose

Save

Saved

NEW

Astro .cursorrules Cursor AI Three.js Tailwind CSS project prompt file

Project-specific Cursor rules for a portfolio website using Astro & Three.JS on jayciretose.github.io

key_conventions:

Follow Astro's style guide for consistent code formatting.
Use TypeScript for enhanced type safety and developer experience.
Use functional, declarative programming. Avoid classes.
Use descriptive variable names with auxiliary verbs (e.g., isLoading).
Use lowercase with dashes for directories (e.g., components/image-gallery).
Favor named exports for components.
Implement proper error handling and logging.

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) 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.
Integrate Tailwind CSS with Astro via @astrojs/tailwind.
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.

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.

three_js_integration:

Set up Three.js using React three fiber in relevant components.
Use efficient rendering techniques to handle complex 3D scenes.
Optimize 3D object loading and management using Three.js best practices.
Leverage Three.js libraries for additional capabilities (e.g., animations, interactions).

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.

performance_metrics:

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

stack:

Astro .cursorrules Cursor AI Three.js Tailwind CSS project prompt file

Jay Ciretose

About .cursorrules prompt file

What you can build

Astro Portfolio Builder: A web application that allows users to easily build portfolio websites using Astro and Three.js, with predefined templates and components. The builder would emphasize following the best practices such as using TypeScript and Tailwind CSS for styling.
Static Site Performance Optimizer: A tool that analyzes Astro-based portfolio websites for performance improvements by providing suggestions on reducing client-side JavaScript and optimizing asset loading using Astro's features.
Markdown Portfolio Generator: A service that transforms Markdown or MDX files into a fully-fledged portfolio website using Astro, with support for dynamic content routing and styling with Tailwind CSS.
Astro & Three.js Learning Platform: An educational platform offering courses and tutorials focused on building interactive portfolio websites with Astro and Three.js, including deep-dives into Three.js rendering techniques and Astro optimizations.
Astro SEO Enhancer: A plugin for Astro that automatically configures and enhances SEO settings for portfolio websites, adding appropriate meta tags, canonical URLs, and offering reusable components.
Astro CI/CD Integration Tool: A service that integrates with popular CI/CD platforms like Netlify and Vercel to streamline the deployment process of Astro-based portfolio websites, ensuring that environment variables are handled correctly and builds are optimally configured.
Accessibility Audit Tool for Astro: A tool designed to audit Astro-based websites for accessibility compliance, offering insights on semantic HTML usage, ARIA attributes, and interactive element accessibility.
Tailwind Themer for Astro: An application or plugin that provides a user-friendly interface for creating custom Tailwind CSS themes and extensions specifically tailored for Astro projects.
Astro Content Management System: A lightweight CMS designed to manage content collections for Astro websites, supporting Markdown or MDX and offering a simple interface for content updates.
Astro and Three.js Component Library: A library of reusable components specifically designed for Astro and Three.js integration, including pre-built scenes, animations, and interactive 3D elements.

Benefits

Emphasizes strict adherence to Astro's style guide, TypeScript, and functional programming, ensuring consistency and reliability.
Integrates Three.js using React three fiber, focusing on efficient 3D rendering and management.
Comprehensive performance optimization with Astro's features, including static generation, lazy loading, and client directives for interactivity.

Synopsis

Developers looking to build a streamlined, performance-optimized portfolio website using Astro and Three.js can benefit from this guide by implementing modern web development standards.

Overview of .cursorrules prompt

The .cursorrules file outlines a set of guidelines and conventions for developing a portfolio website using Astro and Three.js, hosted on jayciretose.github.io. It includes coding conventions such as using TypeScript, functional programming, and proper error handling. It specifies project structure, component development practices, and routing methodologies using Astro's system. Content management is advised through markdown files, and styling is primarily done with Tailwind CSS. The file emphasizes performance optimization, including static generation and asset optimization, and covers data fetching strategies. SEO best practices and integration guidelines are provided. Build and deployment processes are geared towards static hosting platforms, with specific notes on integrating Three.js using React three fiber for 3D rendering. Testing and accessibility standards are mentioned, along with performance metrics monitoring. Overall, the file serves as a comprehensive guide for maintaining consistency and optimizing the development process for the specified project.

Astro .cursorrules Cursor AI Three.js Tailwind CSS project prompt file

Astro .cursorrules Cursor AI Three.js Tailwind CSS project prompt file

Astro .cursorrules Cursor AI Three.js Tailwind CSS project prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

JavaScript CSS HTML Obsidian .cursorrules prompt file

ReactJS Front-End Developer .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components