diff --git a/rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc b/rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc new file mode 100644 index 00000000..e03c9114 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/angular-typescript-cursorrules-prompt-file/performance-optimization.mdc b/rules/angular-typescript-cursorrules-prompt-file/performance-optimization.mdc new file mode 100644 index 00000000..e079d831 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/angular-typescript-cursorrules-prompt-file/testing-guidelines.mdc b/rules/angular-typescript-cursorrules-prompt-file/testing-guidelines.mdc new file mode 100644 index 00000000..f9b99d8f --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc new file mode 100644 index 00000000..51b9fd18 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc new file mode 100644 index 00000000..14b04f3d --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/performance-optimization.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/performance-optimization.mdc new file mode 100644 index 00000000..af0492f1 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/react-19-specific-features.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/react-19-specific-features.mdc new file mode 100644 index 00000000..c2deb33f --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/tailwind-css-best-practices.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/tailwind-css-best-practices.mdc new file mode 100644 index 00000000..54c0863a --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc new file mode 100644 index 00000000..5351444f --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc b/rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc new file mode 100644 index 00000000..741f2758 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc b/rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc new file mode 100644 index 00000000..3846b9b8 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc b/rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc new file mode 100644 index 00000000..3477112a --- /dev/null +++ b/rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc @@ -0,0 +1,29 @@ +--- +description: Performance optimization strategies for TypeScript + React applications, including bundle optimization, caching, and rendering strategies. +globs: src/**/* +--- +- Use React.memo for components with expensive render operations. +- Implement proper code splitting with React.lazy and Suspense. +- Use useMemo for expensive computations that are used in render. +- Use useCallback for functions passed as props to prevent unnecessary re-renders. +- Implement proper bundle analysis with tools like webpack-bundle-analyzer. +- Use React.PureComponent or shouldComponentUpdate for class components. +- Implement proper pagination for large data sets. +- Use windowing/virtualization for long lists with react-window or react-virtualized. +- Optimize images with proper sizing and modern formats (WebP, AVIF). +- Implement proper lazy loading for components and images. +- Use useEffect dependencies correctly to prevent unnecessary re-execution. +- Implement proper error boundaries to prevent cascading failures. +- Use production builds for deployment with NODE_ENV=production. +- Implement proper caching strategies for API responses. +- 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 React 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 re-renders. +- Implement proper debounce/throttle for event handlers. +- Use CSS containment to limit browser layout calculations. \ No newline at end of file diff --git a/rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc b/rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc new file mode 100644 index 00000000..c4794dbf --- /dev/null +++ b/rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc @@ -0,0 +1,28 @@ +--- +description: Testing guidelines for TypeScript + React applications, including unit testing, integration testing, and end-to-end testing strategies. +globs: src/**/* +--- +- 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. \ No newline at end of file diff --git a/rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc b/rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc new file mode 100644 index 00000000..32870d35 --- /dev/null +++ b/rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc @@ -0,0 +1,29 @@ +--- +description: Accessibility guidelines for Vue 3 Composition API 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. \ No newline at end of file diff --git a/rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc b/rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc new file mode 100644 index 00000000..53bdae6f --- /dev/null +++ b/rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc @@ -0,0 +1,29 @@ +--- +description: Performance optimization strategies for Vue 3 Composition API applications, including bundle optimization, caching, and rendering strategies. +globs: src/**/* +--- +- Use functional components for simple presentational components. +- Implement proper code splitting with dynamic imports. +- Use computed properties for expensive calculations that are used in templates. +- Implement proper bundle analysis with tools like webpack-bundle-analyzer. +- Use Vue's built-in optimization features like static hoisting. +- Implement proper pagination for large data sets. +- Use windowing/virtualization for long lists with vue-virtual-scroller. +- Optimize images with proper sizing and modern formats (WebP, AVIF). +- Implement proper lazy loading for components and images. +- Use watchEffect and watch with proper dependencies to prevent unnecessary re-execution. +- Implement proper error boundaries to prevent cascading failures. +- Use production builds for deployment with NODE_ENV=production. +- Implement proper caching strategies for API responses. +- 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 Vue 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 re-renders. +- Implement proper debounce/throttle for event handlers. +- Use CSS containment to limit browser layout calculations. +- Use Vue's reactivity system efficiently by avoiding unnecessary reactive objects. \ No newline at end of file diff --git a/rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc b/rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc new file mode 100644 index 00000000..1e304cf7 --- /dev/null +++ b/rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc @@ -0,0 +1,28 @@ +--- +description: Testing guidelines for Vue 3 Composition API applications, including unit testing, component testing, and end-to-end testing strategies. +globs: src/**/* +--- +- Use Vitest for unit testing Vue components and utility functions. +- Use Vue Test Utils 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 composables. +- 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 Vitest tests. +- Implement proper error boundary testing for Vue 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. \ No newline at end of file