Browse

Three.js Integration .cursorrules strategies

Filters

Tech

Clear

agency_swarm

openai

1. HTML

HTMX

AlpineJS

GitHub Pages

redis

morgan

winston

sequelize

prom-client

ExpressJs

Postgres

Prime React

Inertia.js

Pest

Jetstream

react-hook-form.

JsonKey

ChangeNotifierProvider

Flutter Hooks

cached_network_image

JsonValue

Riverpod Hooks

StateNotifierProvider

AssetImage

auto_route

StateProvider

Freezed

AsyncNotifierProvider

build_runner

GoRouter

ListView.builder

JsonSerializable

NotifierProvider

serverless environments

Nx

npm workspaces

API development

Lerna

swr

Postcss

Apollo Graphql

TypeORM

React.memo()

Lucide icons

RevenueCat

Shadcn UI components

Prisma ORM

Mux

RGAA

Jupyter Notebook

taskfile.dev

testify

loggo

TS

tailwind

shadcn

magicui

lucide

Supabase Client API

Supabase/Postgres

scikit-image

RPi.GPIO

SoundDevice

ORB

OpenCV

SIFT

YAML

cn utility

useCallback

useMemo

useImmerReducer

memo

temporal

frame motion

module css

Shopify Admin GraphQL API

Polaris

Genql

Vercel KV

NetCDF

nbdev

fastcore

Marisco

SASS

SCSS

Hugo

Go templating

Vinxi

React Query SSR

React Router

Tanstack Start

Obsidian Plugin Development

Google Chat

EditorConfig

nextjs app router

ShadCN-Graphs

ShadCN-UI

Google Calendar

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: