Add best practices rules for Next.js 15, React 19, Vercel AI SDK, and Tailwind CSS #137
Conversation
… Tailwind CSS - Add Vercel AI SDK best practices - Add Tailwind CSS best practices - Add React 19 specific features guidelines - Add performance optimization strategies - Add testing guidelines - Add accessibility guidelines - Add error handling patterns
WalkthroughAdds many new Markdown guideline/rule documents across multiple rule directories (Next.js/React, Angular, TypeScript+React, Vue3). Each file contains YAML front matter with globs and detailed checklists for accessibility, performance, testing, error handling, Tailwind, React 19 features, and Vercel AI SDK usage. No code or public API changes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
…rameworks - 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
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (30)
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc (2)
14-14: Expand rate-limit guidance to include 429 backoffAdd handling for Retry-After and exponential backoff.
-- Handle rate limiting and quota management appropriately. +- Handle rate limiting and quotas: detect 429s, honor `Retry-After`, and use exponential backoff with jitter.
18-18: Strengthen logging guidance with PII redaction and correlation IDsAvoid leaking prompts/user data in logs and add request correlation.
-- Implement proper logging for debugging and monitoring. +- Implement structured logging with correlation IDs; redact prompts/PII in logs for privacy and compliance.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc (3)
8-8: Expand contrast guidance to include non-text UI componentsWCAG requires 3:1 contrast for graphical objects and focus indicators.
-- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text). +- Ensure sufficient color contrast: 4.5:1 for normal text, 3:1 for large text, and ≥3:1 for essential non-text UI (icons, focus indicators).
16-16: Tabindex usage: add warning against positive valuesPositive tabindex often harms keyboard order.
- - Use `tabindex` appropriately (preferably only `tabindex="0"` or `tabindex="-1"`). + - Use `tabindex` appropriately (prefer only `0` or `-1`; avoid positive values).
29-29: Add WCAG 2.2 and testing specificsInclude focus-not-obscured, target size, drag alternatives, and concrete testing tools.
- - Use accessibility testing tools like axe-core in development workflow. + - Integrate accessibility testing tools in CI (axe-core, @axe-core/react, eslint-plugin-jsx-a11y). + - Meet WCAG 2.2: focus not obscured, minimum target size (~24px), drag-and-drop alternatives via keyboard. + - Ensure visible focus styles meet ≥3:1 contrast ratio and are not clipped or dynamically removed.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/react-19-specific-features.mdc (4)
15-15: Remove duplicated “Document Metadata API” bulletThis appears twice (Line 8 and Line 15).
- - Use Document Metadata API for better SEO and social sharing.
10-10: Consolidate React Compiler guidance and set expectationsAvoid repeating and clarify stability/opt-in.
- - Leverage compiler optimizations like automatic memoization. + - Leverage the React Compiler for automatic memoization where available; validate stability/opt-in requirements before enabling.
14-14: Remove repeated compiler noteThis repeats Line 10’s intent.
- - Leverage new React Compiler for automatic memoization and performance.
5-24: Augment Actions/Form guidance with concrete patternsClarify how to wire Actions with forms and suspense/loading.
- 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. + - Use `formAction` on submit buttons to bind specific Actions; surface pending state via `useFormStatus`. - Implement Document Metadata API for better SEO and social sharing. - Use Actions for client-side mutations with automatic loading states. - Leverage the React Compiler for automatic memoization where available; validate stability/opt-in requirements before enabling. - 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. + - Prefer Server Components by default; isolate Client Components with `use client` boundaries for interactivity.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/performance-optimization.mdc (5)
5-5: Clarify RSC benefits vs SSR performanceRSC primarily reduces client JS and improves streaming; it’s not just “server-side rendering performance.”
- - Use React Server Components (RSC) by default for better server-side rendering performance. + - Use React Server Components (RSC) by default to reduce client-side JavaScript and enable fine-grained streaming; pair with SSR as needed.
9-9: Be precise about caching APIsName Next.js caching controls and invalidation APIs.
- - Implement proper caching strategies with `cache` function for data fetching. + - Implement caching with Next.js fetch cache (`cache: 'force-cache' | 'no-store'`, `next: { revalidate }`) and invalidation via `revalidateTag`/`revalidatePath` from `next/cache`.
20-21: Tighten link prefetch and compression guidanceAdvise strategic prefetch and platform-level compression.
- - Use `prefetch` for links to preload pages and data. + - Use Link prefetch strategically (it may be on by default); disable for low-priority links (`prefetch={false}`) to save bandwidth. - - Implement proper compression with gzip/brotli for static assets. + - Ensure gzip/Brotli compression at the CDN/edge; avoid double-compressing in app code.
24-24: Call out ISR plus tag-based revalidationMinor clarity improvement.
- - Use `revalidate` for incremental static regeneration (ISR). + - Use `revalidate` for ISR and tag paths/data for selective revalidation.
5-27: Add Partial Prerendering (PPR) and edge/runtime guidancePPR and edge placement can materially impact perf.
- Use React Server Components (RSC) by default to reduce client-side JavaScript and enable fine-grained streaming; pair with SSR as needed. + - Enable Partial Prerendering (PPR) where appropriate to combine static shells with streamed dynamic content. - 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 caching with Next.js fetch cache (`cache: 'force-cache' | 'no-store'`, `next: { revalidate }`) and invalidation via `revalidateTag`/`revalidatePath` from `next/cache`. - 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 Link prefetch strategically (it may be on by default); disable for low-priority links (`prefetch={false}`) to save bandwidth. - Ensure gzip/Brotli compression at the CDN/edge; avoid double-compressing in app code. - Use `generateStaticParams` for static generation of dynamic routes. - Implement proper CDN usage for static assets. - Use `revalidate` for ISR and tag paths/data for selective revalidation. - Monitor Core Web Vitals for performance metrics. - Implement proper database query optimization. + - Choose the right runtime per route (Edge for latency-sensitive I/O-bound work; Node.js for heavy CPU or libraries that need native modules). - Use `useOptimistic` for optimistic UI updates to improve perceived performance.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/tailwind-css-best-practices.mdc (4)
18-18: Update purge guidance for Tailwind v3+Tailwind v3 tree-shakes based on content globs; no separate “purge” step.
- - Optimize for production by purging unused styles with `NODE_ENV=production`. + - Optimize for production: ensure accurate `content` globs so Tailwind tree-shakes unused classes; build with `NODE_ENV=production` for minification.
20-20: Emphasize dynamic class name caveatsDynamic strings can break tree-shaking if not statically analyzable.
- - Configure `content` paths properly in `tailwind.config.js` for purging. + - Configure `content` paths precisely; avoid non-literal/dynamic class names (or safelist them) so Tailwind can tree-shake correctly.
7-13: Keep @apply and custom utilities balancedEncourage composition and consistent tokens.
- - Use `@apply` directive sparingly; prefer utility classes directly in HTML/JSX. + - Use `@apply` sparingly; prefer composing utilities in JSX. When extracting patterns, prefer `@layer components` and keep usage consistent with design tokens.
5-22: Optional additions: class sorting, variants composition, and container queriesThese help consistency and capability.
- 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` sparingly; prefer composing utilities in JSX. When extracting patterns, prefer `@layer components` and keep usage consistent with design tokens. - 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`. + - Optimize for production: ensure accurate `content` globs so Tailwind tree-shakes unused classes; build with `NODE_ENV=production` for minification. - Use plugins like `@tailwindcss/typography` for rich text content. - - Configure `content` paths properly in `tailwind.config.js` for purging. + - Configure `content` paths precisely; avoid non-literal/dynamic class names (or safelist them) so Tailwind can tree-shake correctly. - Extend themes rather than overriding default values when possible. - Use `preflight` to reset browser default styles. + - Consider class composition helpers (e.g., `cva`/`tailwind-variants`) for variant-heavy components. + - Use the Prettier Tailwind plugin to keep utility order consistent across the codebase. + - Explore CSS container queries (`@container`) alongside Tailwind’s utilities for responsive component design.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc (6)
5-7: Clarify primary tools (Jest/Vitest, Playwright/Cypress) and Next.js presets.Recommend acknowledging Vitest as an option and calling out Next’s preset for Jest; prefer Playwright by default for speed, traces, and parallelism with CI.
Apply:
-- Use Jest for unit testing React components and utility functions. +- Use Jest (with `next/jest`) or Vitest for unit testing React components and utility functions. ... -- Use Cypress or Playwright for end-to-end testing of user flows. +- Use Playwright (preferred) or Cypress for end-to-end testing of user flows. Prefer Playwright for built-in traces, parallelism, and first-class CI support.
9-9: Recommend MSW for HTTP mocking to align with app router/fetch.MSW is a de facto standard for request mocking and works well with both unit and integration tests.
Apply:
- - Use mocking for external dependencies and API calls in unit tests. + - Use mocking for external dependencies and API calls in unit tests. + - Prefer Mock Service Worker (MSW) to mock `fetch`/network requests in unit and integration tests.
16-16: Call out Node vs Edge runtime differences in test env setup.Next.js 15 apps often mix runtimes; behavior and APIs differ.
Apply:
- - Implement proper environment setup for different test types (unit, integration, e2e). + - Implement proper environment setup for different test types (unit, integration, e2e), and for both Node.js and Edge runtimes (APIs, globals, and limits differ).
20-22: Be specific about visual regression and a11y tooling.Name concrete options to reduce ambiguity for adopters.
Apply:
- - 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 visual regression testing for critical UI components (e.g., Playwright snapshots, Storybook + Chromatic/Percy). + - Use code coverage tools to identify untested code paths and enforce thresholds in CI. + - Test accessibility with `jest-axe` (axe-core) or Playwright a11y scans; include `@testing-library/jest-dom` matchers for better assertions.
23-23: Add guidance for testing Error Boundaries and Server Components/Actions.React 19 and the App Router introduce Server Components and Server Actions that need explicit coverage.
Apply:
- - Implement proper error boundary testing for React components. + - Implement proper error boundary testing for React components (verify fallback UI and reset behavior). + - Test React Server Components via integration tests where possible; for Server Actions, cover success/error states and validation at the action boundary.
25-28: Add CI and preview-env guidance to close the loop.Running e2e against Vercel Preview URLs catches integration issues earlier.
Apply:
- 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. + - Run end-to-end tests against Vercel Preview Deployments in CI to validate real integration (auth, routing, middleware, edge functions). + - Capture Playwright traces/videos on failure and upload as CI artifacts for faster debugging.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc (6)
9-9: Scope and behavior of Next.jsglobal-error.tsx.
global-error.tsxis only allowed at the root and catches unhandled errors that bubble to the app root; localerror.tsxlives at any route segment. Make this explicit.Apply:
- - Use Next.js error pages (`error.tsx`, `not-found.tsx`, `global-error.tsx`) for different error scenarios. + - Use Next.js error pages for different scenarios: + - `error.tsx` at a route segment to handle errors within that segment boundary. + - `not-found.tsx` for 404s within a segment. + - `global-error.tsx` at the app root to handle uncaught errors that escape all segment boundaries.
6-7: Add structured logging, redaction, and instrumentation guidance.Production-grade error handling benefits from structured logs and privacy safeguards.
Apply:
- - Implement proper error logging with tools like Sentry or LogRocket. - - Use try/catch blocks for handling asynchronous operations and API calls. + - Implement proper error logging with tools like Sentry or LogRocket; prefer structured logs (JSON) with PII redaction. + - Use Next.js `instrumentation.ts` for app-wide telemetry, tracing, and error logging hooks. + - Use try/catch blocks for handling asynchronous operations and API calls; remember `fetch` does not throw on non-2xx—check `response.ok` and handle accordingly.
17-17: Be explicit about safe error serialization across server/client.Avoid leaking stack traces or unserializable fields.
Apply:
- - Use proper error serialization when passing errors from server to client. + - Use proper error serialization when passing errors from server to client: map to a stable, serializable shape (code, message, details), avoid sending raw `Error` objects or stack traces.
21-22: Standardize error shape and streaming guidance (Problem Details, SSE).Promotes consistency in API consumers and better DX for AI/streaming endpoints.
Apply:
- - Use error codes instead of generic error messages for better debugging. - - Implement proper error handling for streaming responses from AI services. + - Use error codes instead of generic error messages for better debugging; consider RFC 9457 Problem Details (`application/problem+json`) for HTTP APIs. + - Implement robust error handling for streaming responses (SSE/edge streams): send structured error events, close streams on fatal errors, and surface partial results with clear status.
25-25: Serverless-friendly DB guidance (pooling/connectivity).Pool management differs on serverless/edge. Offer concrete options to avoid connection storms.
Apply:
- - Use proper error handling for database operations with connection pooling. + - Use proper error handling for database operations with serverless-friendly pooling (e.g., Neon/http, Prisma Accelerate, `@vercel/postgres`). + - Detect and surface pool exhaustion or cold-start connection spikes with actionable error messages and retry hints.
27-29: Tighten auth and realtime error semantics (401 vs 403, WS retry).Helps avoid common pitfalls and ambiguous UX.
Apply:
- - Use proper error handling for authentication and authorization failures. + - Use proper error handling for authentication and authorization failures (401 for unauthenticated, 403 for unauthorized). Avoid leaking existence of protected resources. ... - - Use proper error handling for WebSocket connections and real-time features. + - Use proper error handling for WebSocket connections and real-time features: implement reconnect with exponential backoff, heartbeat/ping timeouts, and stale subscription cleanup.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc(1 hunks)rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc(1 hunks)rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/performance-optimization.mdc(1 hunks)rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/react-19-specific-features.mdc(1 hunks)rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/tailwind-css-best-practices.mdc(1 hunks)rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc(1 hunks)rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc(1 hunks)
🔇 Additional comments (10)
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc (2)
10-10: Verify availability and import path forsmoothStreamEnsure this helper exists in the targeted AI SDK version and document how to import it.
Would you confirm the exact import path/version for
smoothStreamand add a short snippet? If unavailable, replace with guidance on token-smoothing via buffering and Suspense boundaries.
1-4: Front matter looks goodYAML block and glob pattern align with the folder’s conventions.
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc (1)
1-4: Front matter and scope look consistentGood use of globs and concise description.
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/react-19-specific-features.mdc (2)
1-4: Front matter is fineGood description and scope.
11-11: Document React 19 “ref as a prop” support anduseIdconstraintsPlease update the React 19–specific features doc (
react-19-specific-features.mdc) to reflect official guidance from the React 19 stable release:
“ref” as a prop
- Supported directly on function components in React 19+—no need for
forwardRef(class components continue to receive refs as instance pointers, not via arefprop).- When exposing imperative methods, use
useImperativeHandle(ref, …)inside your function component.- Callback refs may now return a cleanup function (akin to
useEffect).- String refs are fully deprecated, and the new JSX transform is required for these ref enhancements.
useIdin Server Components
- Allowed in both Server and Client Components in React 19/Next.js 15 to generate SSR/CSR–consistent IDs for ARIA labels, form elements, etc.
- Ensure the ID format matches on server and client to prevent hydration mismatches (React 19.1+ moved to a new
«r123»syntax; earlier versions could produce different server/client prefixes).- Do not replace
useIdwith manual ID generation in Server Components—this hook is side-effect-free and deterministic.rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/performance-optimization.mdc (1)
1-4: Front matter is accurateDescription and glob are consistent with the rest.
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/tailwind-css-best-practices.mdc (1)
1-4: Front matter is consistentLooks good.
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc (1)
1-4: Front matter looks good.Description and globs are consistent with other rules in this repo (based on prior patterns).
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc (2)
1-4: Front matter is consistent and clear.No issues with description and globs; reads well.
24-24: Clarify Next.js 15 App Router error boundary phrasingThe original bullet
“Implement proper error boundaries for React Server Components.”
is a bit too generic and could mislead readers into thinking RSCs support error boundaries differently than the App Router model. Based on Next.js 15’s behavior—Server Component errors bubble to the nearesterror.tsxin the segment hierarchy, withglobal-error.tsxonly valid at/approot—consider replacing it with:“Implement proper error boundaries for Next.js 15 App Router Server Components by adding an
error.tsxfile in each route segment; use/app/global-error.tsxas the top-level catch-all fallback.”Does this updated phrasing accurately reflect the segment-level
error.tsxbehavior andglobal-error.tsxusage?
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/accessibility-guidelines.mdc
Show resolved
Hide resolved
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc
Show resolved
Hide resolved
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc
Show resolved
Hide resolved
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/error-handling-patterns.mdc
Show resolved
Hide resolved
rules/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/testing-guidelines.mdc
Show resolved
Hide resolved
.../nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc
Show resolved
Hide resolved
.../nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc
Show resolved
Hide resolved
.../nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file/vercel-ai-sdk-best-practices.mdc
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (39)
rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc (6)
8-9: Add non-text contrast requirement (WCAG 2.1/2.2 1.4.11).Color contrast guidance currently covers text only. Non-text UI components and graphical objects also require a minimum 3:1 contrast ratio.
Append this bullet right after the contrast line:
- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text). + - Ensure non-text contrast for UI components and graphical objects is at least 3:1.
16-19: Focus visibility and outline preservation.You mention focus management, but not the requirement to keep focus indicators visible. Teams often remove outlines, harming keyboard users.
Insert after Line 16:
- Use `tabindex` appropriately (preferably only `tabindex="0"` or `tabindex="-1"`). + - Ensure visible focus indicators (:focus-visible) and do not remove outlines without providing an accessible replacement.
12-18: Prefer native elements and avoid redundant roles.Reinforce that native semantics beat ARIA. This prevents overuse of role attributes and improves keyboard support by default.
Add after Line 13:
- Use `role` attributes when necessary to define element purposes. + - Prefer native interactive elements (button, a[href], input) over generic div/span + ARIA/handlers; avoid redundant roles on already-semantic elements.
12-15: Form error association via aria-describedby.You already cover labels and live regions. Add explicit guidance to associate inline errors with inputs.
Add after Line 15:
- Implement proper error messaging with `aria-live` regions for dynamic updates. + - Associate error/help text to inputs using `aria-describedby` for clear announcements.
12-13: SPA routing focus management.Angular apps need to move focus on route changes for keyboard and SR users.
Add after Line 12:
- Implement skip navigation links for keyboard users. + - Move focus to the main landmark or top heading on route changes (e.g., in router events).
28-29: Automated linting recommendation for Angular templates.Complement manual testing with static checks.
Add after Line 29:
- Use accessibility testing tools like axe-core in development workflow. + - Enable @angular-eslint/template accessibility rules to statically catch common template a11y issues.rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc (4)
8-9: Include non-text contrast requirement.Add after Line 8:
- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text). + - Ensure non-text contrast for interactive controls and graphics is at least 3:1.
9-10: Focus indicators: don’t remove outlines.Add after Line 9:
- Implement proper focus management for keyboard navigation. + - Ensure visible focus indicators (:focus-visible); never remove focus outlines without a suitable accessible replacement.
13-14: Prefer native semantics and accessible queries.Reinforce native-first and testing best practices in React.
Add after Line 13:
- Use `role` attributes when necessary to define element purposes. + - Prefer native interactive elements (button, a[href]) over div/span with click handlers and roles; avoid redundant roles on semantic elements.And after Line 29:
- Use accessibility testing tools like axe-core in development workflow. + - Enable eslint-plugin-jsx-a11y and fix surfaced issues in CI.
12-13: SPA routing focus management (React Router/SPA).Add after Line 12:
- Implement skip navigation links for keyboard users. + - On client-side route changes, programmatically move focus to the main landmark or page heading.rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc (3)
8-9: Add non-text contrast.Insert after Line 8:
- Ensure sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text). + - Ensure non-text contrast for UI components and graphical objects is at least 3:1.
16-18: Focus indicators and native semantics.Add after Line 16:
- Use `tabindex` appropriately (preferably only `tabindex="0"` or `tabindex="-1"`). + - Ensure visible focus indicators (:focus-visible); do not remove outlines without an accessible replacement.And after Line 13:
- Use `role` attributes when necessary to define element purposes. + - Prefer native interactive elements (button, a[href]) over div/span + ARIA; avoid redundant roles on semantic elements.
28-29: Static analysis for Vue templates.Append after Line 29:
- Use accessibility testing tools like axe-core in development workflow. + - Enable eslint-plugin-vuejs-accessibility to catch template a11y issues early.rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc (5)
5-9: Avoid blanket memoization guidance; measure first and note React Compiler context.Over-prescribing React.memo/useMemo/useCallback can harm performance and complexity. Encourage profiling first; acknowledge that with React 19’s compiler many memoizations are unnecessary.
Apply this diff:
- - 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. + - Profile first (React Profiler/DevTools); only use React.memo/useMemo/useCallback when measurements show benefit. + - Implement code splitting with React.lazy and Suspense; define clear chunk boundaries. + - Prefer stable props by design (hoist constants, avoid inline objects) before reaching for useCallback/useMemo. + - If using the React Compiler, rely on it to optimize re-renders and remove unnecessary memoization.
10-13: Modernize and clarify list virtualization and class-component note.Class optimizations are niche; emphasize virtualization impact.
Apply this diff:
- - 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. + - For legacy class components, consider React.PureComponent/shouldComponentUpdate; prefer functional components for new code. + - Implement pagination or infinite scroll for large data sets. + - Use list virtualization (react-window, react-virtualized) for long lists.
19-21: Service worker cautions and Workbox.Blindly caching can brick apps. Mention Workbox and HTML-caching caveat.
Apply this diff:
- - Use service workers for caching static assets. + - Use a service worker (e.g., Workbox) to cache static assets with safe strategies (avoid caching HTML documents; prefer stale-while-revalidate for assets).
21-27: Scope to client concerns and add resource hints.“Database query optimization” is server-side; either reword or move. Also add preloading/prefetching best practices.
Apply this diff:
- - Implement proper database query optimization for backend APIs. + - Ensure API payloads are efficient (pagination, field selection, compression); coordinate with backend teams for server-side performance. + - Use resource hints (preload/prefetch/priorities) for critical resources and above-the-fold content.
25-29: Add Core Web Vitals nuance and state management guidance.Apply this diff:
- - Monitor Core Web Vitals for performance metrics. + - Monitor Core Web Vitals (LCP/INP/CLS) via RUM and lab tooling; set budgets and alerting. - - Use efficient state management to minimize re-renders. + - Keep state localized; split contexts or use selector-based state libs to reduce re-render surfaces.rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc (5)
15-16: Prefer accessible queries over data-testid by default.Testing Library encourages queries by role/label/text first; reserve data-testid for cases without accessible affordances.
Apply this diff:
- - Use data-testid attributes for selecting elements in tests when necessary. + - Prefer getByRole/getByLabelText/getByText; use data-testid only when accessible queries are impractical.
5-9: Add MSW and user-event for realistic interactions.Mocks and interactions are better with MSW and @testing-library/user-event.
Append after Line 9:
- Use mocking for external dependencies and API calls in unit tests. + - Use MSW (Mock Service Worker) to simulate network calls across unit/integration tests.Append after Line 14:
- Test asynchronous behavior with proper async/await patterns. + - Use @testing-library/user-event for realistic user interactions instead of fireEvent.
10-13: Clarify snapshot usage and hook testing.Apply this diff:
- Use snapshot testing sparingly and only for simple, stable components. + - Avoid large snapshots; prefer explicit assertions on behavior and accessible output.And add after Line 10:
- Test both success and error states for components and hooks. + - Test custom hooks with renderHook from @testing-library/react.
21-24: Add accessibility automation and error boundary specifics.You already mention axe; make it concrete for Jest.
Apply this diff:
- Use code coverage tools to identify untested code paths. - - Test accessibility with tools like axe-core in Jest tests. + - Test accessibility with jest-axe or @axe-core/playwright; fail builds on critical violations. - Implement proper error boundary testing for React components.
25-28: Add timing, viewport, and cleanup clarifications.Apply this diff:
- Test responsive behavior with different viewport sizes. + - Use test runner APIs to set viewport sizes (e.g., Playwright test.use({ viewport })) and assert layout changes. - Implement proper cleanup between tests to prevent test interdependence. + - Prefer RTL’s automatic cleanup; when using timers, pair with jest.useFakeTimers/jest.runOnlyPendingTimers and restore in afterEach.rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc (11)
5-5: Don't oversell functional components; prefer clarity over micro-optimizations.Functional components no longer provide inherent performance wins in Vue 3. Suggest reframing to avoid encouraging premature optimization.
- - Use functional components for simple presentational components. + - Keep presentational components simple; functional components are fine, but don't expect inherent performance gains in Vue 3—prefer clarity over premature micro-optimizations.
8-9: Align tooling with Vite/Rollup and clarify “static hoisting.”Most Vue 3 projects use Vite (Rollup). Also, “static hoisting” is a compiler optimization, not a knob to turn—point to actionable directives like v-once/v-memo.
- - Implement proper bundle analysis with tools like webpack-bundle-analyzer. - - Use Vue's built-in optimization features like static hoisting. + - Analyze bundles with Vite/Rollup tooling (e.g., rollup-plugin-visualizer or vite-bundle-visualizer) and act on the findings. + - Favor compile-time optimizations you control: prefer static template sections and use v-once/v-memo where appropriate; static hoisting is handled by the compiler and is not a manual toggle.
14-14: Be precise about watch vs watchEffect and cleanup.watchEffect re-runs on any accessed reactive; encourage explicit sources, avoid deep watches, and show cleanup with onScopeDispose.
- - Use watchEffect and watch with proper dependencies to prevent unnecessary re-execution. + - Prefer watch with explicit sources (e.g., watch([a,b], ...)) when you need control; reserve watchEffect for broad reactive tracking. Avoid deep watch on large objects; clean up via onScopeDispose.
16-16: Production guidance should reflect Vite/modern builds and flags.NODE_ENV alone is insufficient guidance. Mention vite build and production flags.
- - Use production builds for deployment with NODE_ENV=production. + - Build for production using your bundler's production mode (e.g., vite build). Ensure devtools are disabled and production flags are set (__VUE_PROD_DEVTOOLS__=false, __VUE_OPTIONS_API__ as needed).
18-18: Name concrete solutions for SW caching.Point to Workbox or vite-plugin-pwa and versioned strategies.
- - Use service workers for caching static assets. + - Use a PWA solution (e.g., workbox or vite-plugin-pwa) to cache static assets and critical routes with versioned, offline-safe strategies.
21-21: Show the idiomatic route-based code splitting approach.Explicitly mention dynamic import/defineAsyncComponent.
- - Use code splitting for routes with Vue Router. + - Code-split route components with dynamic imports (e.g., component: () => import('...')) or defineAsyncComponent for non-route splits.
25-25: Clarify where to apply compression.Recommend precompression and ensuring proper headers at CDN/edge.
- - Implement proper gzip/brotli compression for assets. + - Serve precompressed gzip/brotli assets at the CDN/edge and ensure correct Content-Encoding headers; consider build-time precompression.
28-28: Strengthen CSS containment guidance with content-visibility.Add content-visibility and contain-intrinsic-size for offscreen content.
- - Use CSS containment to limit browser layout calculations. + - Use CSS containment (contain) and content-visibility: auto with contain-intrinsic-size to reduce layout/paint costs on offscreen content.
26-26: State management: call out Pinia and shallow reactivity patterns.Make the advice concrete and actionable.
- - Use efficient state management to minimize re-renders. + - Use efficient state management (e.g., Pinia) and avoid overly deep reactive trees; prefer toRef/toRefs and normalized data to minimize updates.
29-29: Reactivity: suggest markRaw/shallowRef for large structures.This helps avoid costly deep proxies.
- - Use Vue's reactivity system efficiently by avoiding unnecessary reactive objects. + - Use Vue's reactivity system efficiently: avoid making large structures reactive (use markRaw/shallowRef where appropriate) and leverage computed for derived data.
22-22: Out-of-scope backend guidance.“Database query optimization for backend APIs” is valid but belongs in backend/server rules. Consider moving to a backend performance doc to keep this file focused.
rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc (5)
9-9: Recommend MSW for HTTP mocking and clarify scope of unit vs. integration.Make mocking guidance concrete and bias toward realistic integration where possible.
- - Use mocking for external dependencies and API calls in unit tests. + - Mock external dependencies with vi.mock and HTTP with MSW; favor integration tests that exercise real component trees.
14-14: Async testing: include nextTick/flushPromises.Vue DOM updates and pending promises require explicit flushing.
- - Test asynchronous behavior with proper async/await patterns. + - Test async behavior using async/await with await nextTick()/flushPromises() for Vue updates and pending promises.
15-15: Prefer accessible queries before data-testid.Promotes more robust tests.
- - Use data-testid attributes for selecting elements in tests when necessary. + - Prefer accessible queries (role, label, text). Fall back to data-testid only when no accessible handle exists.
20-20: Name specific visual regression options.Provide actionable tool suggestions.
- - Implement visual regression testing for critical UI components. + - Implement visual regression testing for critical UI components (e.g., Playwright trace snapshots, Percy/Chromatic with Storybook).
28-28: Augment with SSR/hydration, composables, and deterministic network tests.These are common gaps in Vue test suites.
+ - Validate SSR/hydration when applicable (no DOM mismatch warnings) and test Suspense/async component fallbacks. + - Test composables in isolation by mounting a minimal host component; for Pinia stores, use setActivePinia(createPinia()) and hot-reset between tests. + - Record and assert network interactions deterministically using MSW or Playwright route handlers; avoid brittle time-based waits.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc(1 hunks)rules/angular-typescript-cursorrules-prompt-file/performance-optimization.mdc(1 hunks)rules/angular-typescript-cursorrules-prompt-file/testing-guidelines.mdc(1 hunks)rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc(1 hunks)rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc(1 hunks)rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc(1 hunks)rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc(1 hunks)rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc(1 hunks)rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- rules/angular-typescript-cursorrules-prompt-file/performance-optimization.mdc
- rules/angular-typescript-cursorrules-prompt-file/testing-guidelines.mdc
🔇 Additional comments (6)
rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc (1)
1-29: Solid addition overall.Good breadth and alignment with WCAG; once the contradictions are fixed and the extra bullets added, this will serve teams well.
rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc (1)
1-29: Well-scoped React guidance.With the tabIndex fix and the added clarifications, this doc will be spot-on for TS + React teams.
rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc (1)
1-29: Good coverage for Vue 3.Minor tweaks above will close gaps and remove contradictions.
rules/typescript-react-cursorrules-prompt-file/performance-optimization.mdc (1)
1-29: Overall, strong, but avoid prescriptive memoization.Great checklist. With the refinements above, guidance will be both modern and safer.
rules/typescript-react-cursorrules-prompt-file/testing-guidelines.mdc (1)
1-28: Comprehensive and actionable.These additions will nudge tests toward user-centric, resilient patterns.
rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc (1)
5-7: Solid tool choices for Vue testing.Vitest + Vue Test Utils + Cypress/Playwright is a well-aligned stack.
rules/angular-typescript-cursorrules-prompt-file/accessibility-guidelines.mdc
Show resolved
Hide resolved
rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc
Show resolved
Hide resolved
rules/typescript-react-cursorrules-prompt-file/accessibility-guidelines.mdc
Show resolved
Hide resolved
rules/vue3-composition-api-cursorrules-prompt-file/accessibility-guidelines.mdc
Show resolved
Hide resolved
rules/vue3-composition-api-cursorrules-prompt-file/performance-optimization.mdc
Show resolved
Hide resolved
rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc
Show resolved
Hide resolved
rules/vue3-composition-api-cursorrules-prompt-file/testing-guidelines.mdc
Show resolved
Hide resolved
|
awesome! thanks |
2 participants
Summary by CodeRabbit