# 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.astro
css
cypress
java
javascript
less
netlify
react
+4 more
First Time Repository
personal website
Astro
Languages:
Astro: 2.4KB
CSS: 0.0KB
JavaScript: 0.4KB
Created: 8/30/2024
Updated: 9/5/2024
All Repositories (1)
personal website