Skip to content

Commit 4d2fff3

Browse files
SH20RAJSH20RAJ
committed
Add testing, performance, and accessibility guidelines for multiple frameworks
- Add testing guidelines for TypeScript + React - Add performance optimization guidelines for TypeScript + React - Add accessibility guidelines for TypeScript + React - Add testing guidelines for Vue 3 Composition API - Add performance optimization guidelines for Vue 3 Composition API - Add accessibility guidelines for Vue 3 Composition API - Add testing guidelines for Angular + TypeScript - Add performance optimization guidelines for Angular + TypeScript - Add accessibility guidelines for Angular + TypeScript
1 parent b2f5b1a commit 4d2fff3

File tree

9 files changed

+258
-0
lines changed

9 files changed

+258
-0
lines changed

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

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

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

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

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

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

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

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

‎rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
description: Performance optimization strategies for TypeScript + React applications, including bundle optimization, caching, and rendering strategies.
3+
globs: src/**/*
4+
---
5+
- Use React.memo for components with expensive render operations.
6+
- Implement proper code splitting with React.lazy and Suspense.
7+
- Use useMemo for expensive computations that are used in render.
8+
- Use useCallback for functions passed as props to prevent unnecessary re-renders.
9+
- Implement proper bundle analysis with tools like webpack-bundle-analyzer.
10+
- Use React.PureComponent or shouldComponentUpdate for class components.
11+
- Implement proper pagination for large data sets.
12+
- Use windowing/virtualization for long lists with react-window or react-virtualized.
13+
- Optimize images with proper sizing and modern formats (WebP, AVIF).
14+
- Implement proper lazy loading for components and images.
15+
- Use useEffect dependencies correctly to prevent unnecessary re-execution.
16+
- Implement proper error boundaries to prevent cascading failures.
17+
- Use production builds for deployment with NODE_ENV=production.
18+
- Implement proper caching strategies for API responses.
19+
- Use service workers for caching static assets.
20+
- Optimize CSS by removing unused styles and using efficient selectors.
21+
- Implement proper font loading strategies.
22+
- Use code splitting for routes with React Router.
23+
- Implement proper database query optimization for backend APIs.
24+
- Use CDN for static assets delivery.
25+
- Monitor Core Web Vitals for performance metrics.
26+
- Implement proper gzip/brotli compression for assets.
27+
- Use efficient state management to minimize re-renders.
28+
- Implement proper debounce/throttle for event handlers.
29+
- Use CSS containment to limit browser layout calculations.

‎rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
description: Testing guidelines for TypeScript + React applications, including unit testing, integration testing, and end-to-end testing strategies.
3+
globs: src/**/*
4+
---
5+
- Use Jest for unit testing React components and utility functions.
6+
- Use React Testing Library for component testing with a focus on user behavior.
7+
- Use Cypress or Playwright for end-to-end testing of user flows.
8+
- Implement proper test coverage targets (aim for 80%+ coverage).
9+
- Use mocking for external dependencies and API calls in unit tests.
10+
- Test both success and error states for components and hooks.
11+
- Use snapshot testing sparingly and only for simple, stable components.
12+
- Implement proper test data setup and teardown with beforeEach/afterEach.
13+
- Use describe blocks to group related tests for better organization.
14+
- Test asynchronous behavior with proper async/await patterns.
15+
- Use data-testid attributes for selecting elements in tests when necessary.
16+
- Implement proper environment setup for different test types (unit, integration, e2e).
17+
- Use factory functions for creating test data to reduce duplication.
18+
- Test edge cases and boundary conditions for components and functions.
19+
- Use page objects pattern for end-to-end tests to improve maintainability.
20+
- Implement visual regression testing for critical UI components.
21+
- Use code coverage tools to identify untested code paths.
22+
- Test accessibility with tools like axe-core in Jest tests.
23+
- Implement proper error boundary testing for React components.
24+
- Use parameterized tests for testing multiple similar scenarios.
25+
- Test responsive behavior with different viewport sizes.
26+
- Implement proper cleanup between tests to prevent test interdependence.
27+
- Use realistic data in tests rather than dummy data when possible.
28+
- Test loading states, empty states, and error states for data-driven components.

‎rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc‎

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

‎rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
description: Performance optimization strategies for Vue 3 Composition API applications, including bundle optimization, caching, and rendering strategies.
3+
globs: src/**/*
4+
---
5+
- Use functional components for simple presentational components.
6+
- Implement proper code splitting with dynamic imports.
7+
- Use computed properties for expensive calculations that are used in templates.
8+
- Implement proper bundle analysis with tools like webpack-bundle-analyzer.
9+
- Use Vue's built-in optimization features like static hoisting.
10+
- Implement proper pagination for large data sets.
11+
- Use windowing/virtualization for long lists with vue-virtual-scroller.
12+
- Optimize images with proper sizing and modern formats (WebP, AVIF).
13+
- Implement proper lazy loading for components and images.
14+
- Use watchEffect and watch with proper dependencies to prevent unnecessary re-execution.
15+
- Implement proper error boundaries to prevent cascading failures.
16+
- Use production builds for deployment with NODE_ENV=production.
17+
- Implement proper caching strategies for API responses.
18+
- Use service workers for caching static assets.
19+
- Optimize CSS by removing unused styles and using efficient selectors.
20+
- Implement proper font loading strategies.
21+
- Use code splitting for routes with Vue Router.
22+
- Implement proper database query optimization for backend APIs.
23+
- Use CDN for static assets delivery.
24+
- Monitor Core Web Vitals for performance metrics.
25+
- Implement proper gzip/brotli compression for assets.
26+
- Use efficient state management to minimize re-renders.
27+
- Implement proper debounce/throttle for event handlers.
28+
- Use CSS containment to limit browser layout calculations.
29+
- Use Vue's reactivity system efficiently by avoiding unnecessary reactive objects.

‎rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
description: Testing guidelines for Vue 3 Composition API applications, including unit testing, component testing, and end-to-end testing strategies.
3+
globs: src/**/*
4+
---
5+
- Use Vitest for unit testing Vue components and utility functions.
6+
- Use Vue Test Utils for component testing with a focus on user behavior.
7+
- Use Cypress or Playwright for end-to-end testing of user flows.
8+
- Implement proper test coverage targets (aim for 80%+ coverage).
9+
- Use mocking for external dependencies and API calls in unit tests.
10+
- Test both success and error states for components and composables.
11+
- Use snapshot testing sparingly and only for simple, stable components.
12+
- Implement proper test data setup and teardown with beforeEach/afterEach.
13+
- Use describe blocks to group related tests for better organization.
14+
- Test asynchronous behavior with proper async/await patterns.
15+
- Use data-testid attributes for selecting elements in tests when necessary.
16+
- Implement proper environment setup for different test types (unit, integration, e2e).
17+
- Use factory functions for creating test data to reduce duplication.
18+
- Test edge cases and boundary conditions for components and functions.
19+
- Use page objects pattern for end-to-end tests to improve maintainability.
20+
- Implement visual regression testing for critical UI components.
21+
- Use code coverage tools to identify untested code paths.
22+
- Test accessibility with tools like axe-core in Vitest tests.
23+
- Implement proper error boundary testing for Vue components.
24+
- Use parameterized tests for testing multiple similar scenarios.
25+
- Test responsive behavior with different viewport sizes.
26+
- Implement proper cleanup between tests to prevent test interdependence.
27+
- Use realistic data in tests rather than dummy data when possible.
28+
- Test loading states, empty states, and error states for data-driven components.

0 commit comments

Comments
 (0)