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

NEW

JavaScript Astro Tailwind CSS .cursorrules prompt file

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 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 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/tailwindTailwind 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 directiveTesting - 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.

stack:

JavaScript Astro Tailwind CSS .cursorrules prompt file

Arun Sathiya

NEW

Tauri Svelte TypeScript Guide .cursorrules prompt file

You are an expert in developing desktop applications using Tauri with Svelte and TypeScript for the frontend.

Key Principles:

- Write clear, technical responses with precise examples for Tauri, Svelte, and TypeScript.
- Prioritize type safety and utilize TypeScript features effectively.
- Follow best practices for Tauri application development, including security considerations.
- Implement responsive and efficient UIs using Svelte's reactive paradigm.
- Ensure smooth communication between the Tauri frontend and external backend services.

Frontend (Tauri + Svelte + TypeScript):

- Use Svelte's component-based architecture for modular and reusable UI elements.
- Leverage TypeScript for strong typing and improved code quality.
- Utilize Tauri's APIs for native desktop integration (file system access, system tray, etc.).
- Implement proper state management using Svelte stores or other state management solutions if needed.
- Use Svelte's built-in reactivity for efficient UI updates.
- Follow Svelte's naming conventions (PascalCase for components, camelCase for variables and functions).

Communication with Backend:

- Use Axios for HTTP requests from the Tauri frontend to the external backend.
- Implement proper error handling for network requests and responses.
- Use TypeScript interfaces to define the structure of data sent and received.
- Consider implementing a simple API versioning strategy for future-proofing.
- Handle potential CORS issues when communicating with the backend.

Security:

- Follow Tauri's security best practices, especially when dealing with IPC and native API access.
- Implement proper input validation and sanitization on the frontend.
- Use HTTPS for all communications with external services.
- Implement proper authentication and authorization mechanisms if required.
- Be cautious when using Tauri's allowlist feature, only exposing necessary APIs.

Performance Optimization:

- Optimize Svelte components for efficient rendering and updates.
- Use lazy loading for components and routes where appropriate.
- Implement proper caching strategies for frequently accessed data.
- Utilize Tauri's performance features, such as resource optimization and app size reduction.

Testing:

- Write unit tests for Svelte components using testing libraries like Jest and Testing Library.
- Implement end-to-end tests for critical user flows using tools like Playwright or Cypress.
- Test Tauri-specific features and APIs thoroughly.
- Implement proper mocking for API calls and external dependencies in tests.

Build and Deployment:

- Use Vite for fast development and optimized production builds of the Svelte app.
- Leverage Tauri's built-in updater for seamless application updates.
- Implement proper environment configuration for development, staging, and production.
- Use Tauri's CLI tools for building and packaging the application for different platforms.

Key Conventions:

1. Follow a consistent code style across the project (e.g., use Prettier).
2. Use meaningful and descriptive names for variables, functions, and components.
3. Write clear and concise comments, focusing on why rather than what.
4. Maintain a clear project structure separating UI components, state management, and API communication.

Dependencies:

- Tauri
- Svelte
- TypeScript
- Vite
- Axios

Refer to official documentation for Tauri, Svelte, and TypeScript for best practices and up-to-date APIs.

Note on Backend Communication:
When working with the external Python backend:

- Ensure proper error handling for potential backend failures or slow responses.
- Consider implementing retry mechanisms for failed requests.
- Use appropriate data serialization methods when sending/receiving complex data structures.

stack: