General Considerations

These are considerations to make with every prompt no matter its contents. They apply to the entire project and should be considered when generating code and answering chats.

• We are using Nuxt 3 as our frontend framework
• The project is built with TypeScript and follows strict typing conventions
• Tailwind CSS is used for styling with utility-first approach
• Nuxt UI provides our component library for consistent design
• NuxtHub is used for serverless functionality (KV, Blob, DB, Cache, AI)
• All components should be responsive and mobile-first
• SEO optimization is critical for all pages
• Always use Composition API with <script setup> syntax
• All components should be auto-imported using the Nuxt module system
• Use Vue 3's latest reactivity system with refs, computed, and watchEffect
• Prioritize server components where possible for improved performance

Architecture Guidelines

These guidelines define how the application should be structured.

• Follow the Nuxt directory structure conventions rigorously
• Use /composables for reusable logic and state management
• Place API integration in /server/api using Nitro routes
• Store types in /types directory with proper namespacing
• Keep page components lightweight by extracting business logic to composables
• Use /middleware for route guards and navigation hooks
• Implement /plugins for global functionality only when necessary
• Store global state in /stores using Pinia with proper typing
• Use /public only for static assets that must be directly accessible
• Create utility functions in /utils with proper documentation
• Organize components by feature in nested directories under /components

Tailwind & UI Guidelines

These guidelines relate to styling and UI components.

• Use Tailwind's utility classes directly in templates for most styling
• Extract common patterns to components rather than using @apply excessively
• Define custom theme extensions in tailwind.config.js
• Use CSS variables for theming through Nuxt UI's theming system
• Implement dark mode using the class strategy
• Use the Nuxt UI color system for consistent palette application
• Create component variants through Nuxt UI's configuration
• Maintain a11y standards in all UI components
• Use responsive variants (sm:, md:, lg:, etc.) consistently
• Implement container queries for complex responsive components
• Avoid inline styles except for dynamic calculated values

NuxtHub Integration Guidelines

These are specific guidelines for working with NuxtHub features.

• Use KV for simple key-value data with appropriate TTL settings to both stale and expire object data.
• Implement Blob storage for the cacheing of images in cloudflare's edge delivery network.
• Utilize DB for structured data required for the on-site search index strategy
• Leverage Request Cacheing for API responses for requests if available pre-empting object cacheing.
• Implement AI agents with prompting to derive and store search terms from content
• Stay "on-edge" with all functions for performance-critical operations
• Follow principle of least privilege for all NuxtHub resources
• Implement proper error handling for all NuxtHub API calls
• Use environment variables for configuration across environments
• Leverage NuxtHub's built-in analytics for performance monitoring
• Implement proper rate limiting for public-facing APIs

Performance Guidelines

These guidelines focus on creating a performant application.

• Implement code splitting at the route level
• Use dynamic imports for large components and libraries
• Leverage Nuxt's built-in image optimization for all assets
• Implement proper loading states for async operations
• Use suspense for managing loading states of nested async components
• Optimize third-party dependencies with careful tree-shaking
• Implement service worker for offline capabilities where appropriate
• Use proper caching strategies for API responses
• Implement proper lazy loading for below-the-fold content
• Monitor and optimize Core Web Vitals (LCP, FID, CLS)
• Use prefetching for predictable navigation paths

Testing Guidelines

These are considerations to make for testing.

• Achieve 90%+ code coverage for PR's into master
• Use Vitest for unit and component testing
• Write tests using the Arrange-Act-Assert pattern
• Use component testing for UI components with proper mocking
• Implement API mocking for service tests
• Use testing-library for component interaction testing
• Implement snapshot testing judiciously for UI components
• Run tests on pre-commit hooks and in CI/CD pipeline
• Use proper test isolation to prevent test pollution

Documentation Guidelines

These guidelines apply to code documentation.

• Document all public functions, composables, and components
• Use JSDoc syntax for function documentation
• Document state management patterns with examples
• Create API documentation for all server endpoints
• Document expected props and emits for components
• Maintain a changelog for all significant changes
• Document performance considerations for complex components
• Create usage examples for all public APIs
• All documentation should be concise and clear for experienced developers

Security Guidelines

These guidelines focus on securing the application.

• Implement proper input validation on all forms
• Use Content Security Policy headers
• Sanitize all user-generated content
• Implement proper authentication and authorization
• Use HTTPS for all API requests
• Implement rate limiting for authentication endpoints
• Regularly update dependencies for security patches
• Avoid storing sensitive information in client-side storage
• Use signed URLs for sensitive blob storage access
• Implement proper CORS policies
• Follow the principle of least privilege for all operations