Add best practices rules for Next.js 15, React 19, Vercel AI SDK, and Tailwind CSS

rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc

@@ -0,0 +1,29 @@
+---
+description: Accessibility guidelines for Angular + TypeScript applications to ensure inclusive design and compliance with WCAG standards.
+globs: src/**/*
+---
+- Use semantic HTML elements for proper document structure.
+- Implement proper heading hierarchy (h1, h2, h3, etc.) for content organization.
+- Use ARIA attributes appropriately to enhance accessibility for screen readers.
+- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text).
+- Implement proper focus management for keyboard navigation.
+- Use `aria-label` or `aria-labelledby` for icon buttons and decorative elements.
+- Provide alternative text for images using `alt` attributes.
+- Implement skip navigation links for keyboard users.
+- Use `role` attributes when necessary to define element purposes.
+- Ensure form inputs have associated labels using `for`/`id` pairing.
+- Implement proper error messaging with `aria-live` regions for dynamic updates.
+- Use `tabindex` appropriately (preferably only `tabindex="0"` or `tabindex="-1"`).
+- Implement proper landmark roles (banner, main, navigation, etc.) for screen readers.
+- Ensure all interactive elements are keyboard accessible.
+- Use `prefers-reduced-motion` media query for users with motion sensitivity.
+- Implement proper table markup with `thead`, `tbody`, `th`, and `scope` attributes.
+- Use `aria-hidden="true"` for decorative elements that should be ignored by screen readers.
+- Implement proper language attributes (`lang`) on HTML elements.
+- Ensure text resizing works properly up to 200% zoom.
+- Use `aria-expanded` for collapsible sections and dropdown menus.
+- Implement proper modal dialog accessibility with focus trapping.
+- Use `aria-current` for current page indicators in navigation.
+- Ensure proper reading order for screen readers with CSS positioning.
+- Test with screen readers like NVDA, JAWS, or VoiceOver.
+- Use accessibility testing tools like axe-core in development workflow.

rules/angular-typescript-cursorrules-prompt-file/performance-optimization.mdc

@@ -0,0 +1,29 @@
+---
+description: Performance optimization strategies for Angular + TypeScript applications, including bundle optimization, caching, and rendering strategies.
+globs: src/**/*
+---
+- Use OnPush change detection strategy for components when possible.
+- Implement proper code splitting with Angular's lazy loading modules.
+- Use Angular's built-in pipes for transformations instead of methods in templates.
+- Implement proper bundle analysis with tools like webpack-bundle-analyzer.
+- Use Angular's built-in optimization features like tree-shaking.
+- Implement proper pagination for large data sets.
+- Use windowing/virtualization for long lists with Angular CDK Virtual Scroll.
+- Optimize images with proper sizing and modern formats (WebP, AVIF).
+- Implement proper lazy loading for modules and components.
+- Use ChangeDetectorRef.detach() and reattach() for manual change detection control.
+- Implement proper error boundaries to prevent cascading failures.
+- Use production builds for deployment with ng build --prod.
+- Implement proper caching strategies for HTTP responses with HttpInterceptors.
+- Use service workers for caching static assets.
+- Optimize CSS by removing unused styles and using efficient selectors.
+- Implement proper font loading strategies.
+- Use code splitting for routes with Angular Router.
+- Implement proper database query optimization for backend APIs.
+- Use CDN for static assets delivery.
+- Monitor Core Web Vitals for performance metrics.
+- Implement proper gzip/brotli compression for assets.
+- Use efficient state management to minimize change detection cycles.
+- Implement proper debounce/throttle for event handlers.
+- Use CSS containment to limit browser layout calculations.
+- Use Angular's built-in trackBy functions for *ngFor directives.

rules/angular-typescript-cursorrules-prompt-file/testing-guidelines.mdc

@@ -0,0 +1,28 @@
+---
+description: Testing guidelines for Angular + TypeScript applications, including unit testing, component testing, and end-to-end testing strategies.
+globs: src/**/*
+---
+- Use Jasmine and Karma for unit testing Angular components and services.
+- Use Angular Testing Utilities for component testing with a focus on user behavior.
+- Use Protractor or Cypress for end-to-end testing of user flows.
+- Implement proper test coverage targets (aim for 80%+ coverage).
+- Use mocking for external dependencies and HTTP calls in unit tests.
+- Test both success and error states for components and services.
+- Use snapshot testing sparingly and only for simple, stable components.
+- Implement proper test data setup and teardown with beforeEach/afterEach.
+- Use describe blocks to group related tests for better organization.
+- Test asynchronous behavior with proper async/await patterns or Angular's async utilities.
+- Use data-testid attributes for selecting elements in tests when necessary.
+- Implement proper environment setup for different test types (unit, integration, e2e).
+- Use factory functions for creating test data to reduce duplication.
+- Test edge cases and boundary conditions for components and functions.
+- Use page objects pattern for end-to-end tests to improve maintainability.
+- Implement visual regression testing for critical UI components.
+- Use code coverage tools to identify untested code paths.
+- Test accessibility with tools like axe-core in Jasmine tests.
+- Implement proper error handling testing for Angular components and services.
+- Use parameterized tests for testing multiple similar scenarios.
+- Test responsive behavior with different viewport sizes.
+- Implement proper cleanup between tests to prevent test interdependence.
+- Use realistic data in tests rather than dummy data when possible.
+- Test loading states, empty states, and error states for data-driven components.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc

@@ -0,0 +1,29 @@
+---
+description: Accessibility guidelines for Next.js 15 and React 19 applications to ensure inclusive design and compliance with WCAG standards.
+globs: app/**/*
+---
+- Use semantic HTML elements for proper document structure.
+- Implement proper heading hierarchy (h1, h2, h3, etc.) for content organization.
+- Use ARIA attributes appropriately to enhance accessibility for screen readers.
+- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text).
+- Implement proper focus management for keyboard navigation.
+- Use `aria-label` or `aria-labelledby` for icon buttons and decorative elements.
+- Provide alternative text for images using `alt` attributes.
+- Implement skip navigation links for keyboard users.
+- Use `role` attributes when necessary to define element purposes.
+- Ensure form inputs have associated labels using `htmlFor`/`id` pairing.
+- Implement proper error messaging with `aria-live` regions for dynamic updates.
+- Use `tabindex` appropriately (preferably only `tabindex="0"` or `tabindex="-1"`).
+- Implement proper landmark roles (banner, main, navigation, etc.) for screen readers.
+- Ensure all interactive elements are keyboard accessible.
+- Use `prefers-reduced-motion` media query for users with motion sensitivity.
+- Implement proper table markup with `thead`, `tbody`, `th`, and `scope` attributes.
+- Use `aria-hidden="true"` for decorative elements that should be ignored by screen readers.
+- Implement proper language attributes (`lang`) on HTML elements.
+- Ensure text resizing works properly up to 200% zoom.
+- Use `aria-expanded` for collapsible sections and dropdown menus.
+- Implement proper modal dialog accessibility with focus trapping.
+- Use `aria-current` for current page indicators in navigation.
+- Ensure proper reading order for screen readers with CSS positioning.
+- Test with screen readers like NVDA, JAWS, or VoiceOver.
+- Use accessibility testing tools like axe-core in development workflow.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc

@@ -0,0 +1,29 @@
+---
+description: Error handling patterns for Next.js 15 and React 19 applications, including error boundaries, API error handling, and graceful degradation strategies.
+globs: app/**/*
+---
+- Use React Error Boundaries to catch rendering errors in component trees.
+- Implement proper error logging with tools like Sentry or LogRocket.
+- Use try/catch blocks for handling asynchronous operations and API calls.
+- Implement proper HTTP status codes for API responses (4xx for client errors, 5xx for server errors).
+- Use Next.js error pages (`error.tsx`, `not-found.tsx`, `global-error.tsx`) for different error scenarios.
+- Implement proper error messages for users that are informative but not expose sensitive information.
+- Use error recovery patterns like retry mechanisms for transient failures.
+- Implement proper validation for user inputs to prevent errors before they occur.
+- Use centralized error handling for API calls with interceptors or wrapper functions.
+- Implement proper fallback UI components for error states.
+- Use error boundaries at appropriate levels in the component hierarchy.
+- Implement proper error tracking in production with error monitoring services.
+- Use proper error serialization when passing errors from server to client.
+- Implement timeout mechanisms for API calls to prevent hanging requests.
+- Use circuit breaker patterns for external service dependencies.
+- Implement proper error handling for server actions and form submissions.
+- Use error codes instead of generic error messages for better debugging.
+- Implement proper error handling for streaming responses from AI services.
+- Use environment-specific error handling (more verbose in development, less in production).
+- Implement proper error boundaries for React Server Components.
+- Use proper error handling for database operations with connection pooling.
+- Implement proper error handling for file uploads and processing.
+- Use proper error handling for authentication and authorization failures.
+- Implement proper error handling for third-party API integrations.
+- Use proper error handling for WebSocket connections and real-time features.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/performance-optimization.mdc

@@ -0,0 +1,27 @@
+---
+description: Performance optimization strategies for Next.js 15 and React 19 applications, including bundle optimization, caching, and rendering strategies.
+globs: app/**/*
+---
+- Use React Server Components (RSC) by default for better server-side rendering performance.
+- Minimize client components with 'use client' directive to reduce client-side JavaScript.
+- Implement proper code splitting with dynamic imports for large components.
+- Use Next.js Image component for optimized image loading and caching.
+- Implement proper caching strategies with `cache` function for data fetching.
+- Use `loading.tsx` for skeleton screens and improved perceived performance.
+- Optimize font loading with Next.js Font Optimization features.
+- Implement proper lazy loading for components and images.
+- Use `useTransition` for non-urgent updates to maintain responsiveness.
+- Implement proper bundle analysis with `@next/bundle-analyzer`.
+- Use `React.memo` for components with expensive render operations.
+- Implement proper pagination for large data sets.
+- Use `useDeferredValue` for deferring UI updates that aren't urgent.
+- Optimize API routes with proper caching headers.
+- Implement proper error boundaries to prevent cascading failures.
+- Use `prefetch` for links to preload pages and data.
+- Implement proper compression with gzip/brotli for static assets.
+- Use `generateStaticParams` for static generation of dynamic routes.
+- Implement proper CDN usage for static assets.
+- Use `revalidate` for incremental static regeneration (ISR).
+- Monitor Core Web Vitals for performance metrics.
+- Implement proper database query optimization.
+- Use `useOptimistic` for optimistic UI updates to improve perceived performance.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/react-19-specific-features.mdc

@@ -0,0 +1,24 @@
+---
+description: Guidelines for leveraging React 19 specific features in Next.js 15 applications, including new hooks, compiler optimizations, and improved server components.
+globs: app/**/*
+---
+- Use `use` hook for consuming Promises and Context directly in components.
+- Leverage new `useFormStatus` hook for form state management.
+- Use `useActionState` form actions and state management.
+- Implement Document Metadata API for better SEO and social sharing.
+- Use Actions for client-side mutations with automatic loading states.
+- Leverage compiler optimizations like automatic memoization.
+- Use `ref` as a prop directly without needing `forwardRef`.
+- Implement proper error boundaries with new error handling patterns.
+- Use `useOptimistic` hook for optimistic UI updates.
+- Leverage new React Compiler for automatic memoization and performance.
+- Use Document Metadata API for better SEO and social sharing.
+- Implement proper cleanup in useEffect to prevent memory leaks.
+- Use `startTransition` for non-urgent state updates.
+- Leverage new React DevTools for better debugging.
+- Use `useDeferredValue` for deferring UI updates.
+- Implement proper key prop usage for list rendering.
+- Use `useId` for generating unique IDs in server components.
+- Leverage new server component features for better performance.
+- Use `useSyncExternalStore` for subscribing to external stores.
+- Implement proper hydration strategies for client components.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/tailwind-css-best-practices.mdc

@@ -0,0 +1,22 @@
+---
+description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization.
+globs: app/**/*
+---
+- Use Tailwind's utility-first approach for consistent styling.
+- Leverage Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) for mobile-first responsive design.
+- Use `@apply` directive sparingly; prefer utility classes directly in HTML/JSX.
+- Create custom components with `@layer components` for repeated patterns.
+- Use Tailwind's built-in design tokens for spacing, colors, and typography.
+- Implement dark mode using Tailwind's `dark:` variant.
+- Use `group` and `peer` variants for interactive states.
+- Create custom utilities with `@layer utilities` for project-specific needs.
+- Use `theme()` function to reference Tailwind's design tokens in custom CSS.
+- Avoid arbitrary values (`w-[532px]`) when possible; define custom values in `tailwind.config.js`.
+- Use `container` class for responsive containers with max-width constraints.
+- Implement proper focus styles for accessibility using `focus:` and `focus-within:` variants.
+- Use `sr-only` for screen reader-only content.
+- Optimize for production by purging unused styles with `NODE_ENV=production`.
+- Use plugins like `@tailwindcss/typography` for rich text content.
+- Configure `content` paths properly in `tailwind.config.js` for purging.
+- Extend themes rather than overriding default values when possible.
+- Use `preflight` to reset browser default styles.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc

@@ -0,0 +1,28 @@
+---
+description: Testing guidelines for Next.js 15 and React 19 applications, including unit testing, integration testing, and end-to-end testing strategies.
+globs: app/**/*
+---
+- Use Jest for unit testing React components and utility functions.
+- Use React Testing Library for component testing with a focus on user behavior.
+- Use Cypress or Playwright for end-to-end testing of user flows.
+- Implement proper test coverage targets (aim for 80%+ coverage).
+- Use mocking for external dependencies and API calls in unit tests.
+- Test both success and error states for components and hooks.
+- Use snapshot testing sparingly and only for simple, stable components.
+- Implement proper test data setup and teardown with beforeEach/afterEach.
+- Use describe blocks to group related tests for better organization.
+- Test asynchronous behavior with proper async/await patterns.
+- Use data-testid attributes for selecting elements in tests when necessary.
+- Implement proper environment setup for different test types (unit, integration, e2e).
+- Use factory functions for creating test data to reduce duplication.
+- Test edge cases and boundary conditions for components and functions.
+- Use page objects pattern for end-to-end tests to improve maintainability.
+- Implement visual regression testing for critical UI components.
+- Use code coverage tools to identify untested code paths.
+- Test accessibility with tools like axe-core in Jest tests.
+- Implement proper error boundary testing for React components.
+- Use parameterized tests for testing multiple similar scenarios.
+- Test responsive behavior with different viewport sizes.
+- Implement proper cleanup between tests to prevent test interdependence.
+- Use realistic data in tests rather than dummy data when possible.
+- Test loading states, empty states, and error states for data-driven components.

rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc

@@ -0,0 +1,18 @@
+---
+description: Best practices for using the Vercel AI SDK in Next.js 15 applications with React Server Components and streaming capabilities.
+globs: app/**/*
+---
+- Use `streamText` for streaming text responses from AI models.
+- Use `streamObject` for streaming structured JSON responses.
+- Implement proper error handling with `onFinish` callback.
+- Use `onChunk` for real-time UI updates during streaming.
+- Prefer server-side streaming for better performance and security.
+- Use `smoothStream` for smoother streaming experiences.
+- Implement proper loading states for AI responses.
+- Use `useChat` for client-side chat interfaces when needed.
+- Use `useCompletion` for client-side text completion interfaces.
+- Handle rate limiting and quota management appropriately.
+- Implement proper authentication and authorization for AI endpoints.
+- Use environment variables for API keys and sensitive configuration.
+- Cache AI responses when appropriate to reduce costs.
+- Implement proper logging for debugging and monitoring.

rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc

@@ -0,0 +1,29 @@
+---
+description: Accessibility guidelines for TypeScript + React applications to ensure inclusive design and compliance with WCAG standards.
+globs: src/**/*
+---
+- Use semantic HTML elements for proper document structure.
+- Implement proper heading hierarchy (h1, h2, h3, etc.) for content organization.
+- Use ARIA attributes appropriately to enhance accessibility for screen readers.
+- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text).
+- Implement proper focus management for keyboard navigation.
+- Use `aria-label` or `aria-labelledby` for icon buttons and decorative elements.
+- Provide alternative text for images using `alt` attributes.
+- Implement skip navigation links for keyboard users.
+- Use `role` attributes when necessary to define element purposes.
+- Ensure form inputs have associated labels using `htmlFor`/`id` pairing.
+- Implement proper error messaging with `aria-live` regions for dynamic updates.
+- Use `tabindex` appropriately (preferably only `tabindex="0"` or `tabindex="-1"`).
+- Implement proper landmark roles (banner, main, navigation, etc.) for screen readers.
+- Ensure all interactive elements are keyboard accessible.
+- Use `prefers-reduced-motion` media query for users with motion sensitivity.
+- Implement proper table markup with `thead`, `tbody`, `th`, and `scope` attributes.
+- Use `aria-hidden="true"` for decorative elements that should be ignored by screen readers.
+- Implement proper language attributes (`lang`) on HTML elements.
+- Ensure text resizing works properly up to 200% zoom.
+- Use `aria-expanded` for collapsible sections and dropdown menus.
+- Implement proper modal dialog accessibility with focus trapping.
+- Use `aria-current` for current page indicators in navigation.
+- Ensure proper reading order for screen readers with CSS positioning.
+- Test with screen readers like NVDA, JAWS, or VoiceOver.
+- Use accessibility testing tools like axe-core in development workflow.