nextjs-react-redux-typescript-cursor-rules

•

6155 months ago

Comprehensive Next.js, React, Redux, and TypeScript development guidelines covering SOLID principles, component architecture, and best practices.

Quick Install

npxskills add mindrally/skills--skill nextjs-react-redux-typescript-cursor-rules

Instructions

Next.js React Redux TypeScript Cursor Rules

Complete development guidelines for building maintainable, scalable applications with Next.js, React, Redux Toolkit, and TypeScript.

Development Philosophy

Produce maintainable, scalable code following SOLID principles
Favor functional and declarative approaches over imperative styles
Prioritize type safety and static analysis
Embrace component-driven architecture

Code Style Standards

Indentation: Use tabs
Strings: Use single quotes (unless escaping needed)
Semicolons: Omit unless disambiguation required
Operators: Space around infix operators
Functions: Space before declaration parentheses
Equality: Always use === over ==
Line length: Maximum 80 characters
Conditionals: Use braces for multi-line if statements
Collections: Trailing commas in multiline arrays/objects

Naming Conventions

Convention	Usage
PascalCase	Components, type definitions, interfaces
kebab-case	Directory and file names (e.g., `user-profile.tsx`)
camelCase	Variables, functions, methods, hooks, properties, props
UPPERCASE	Environment variables, constants, global configurations

Prefixes

Event handlers: handle (e.g., handleClick)
Booleans: verbs (e.g., isLoading, hasError, canSubmit)
Custom hooks: use (e.g., useAuth, useForm)

React Best Practices

Components

Use functional components with TypeScript interfaces
Define components using function keyword
Extract reusable logic into custom hooks
Apply composition patterns properly
Leverage React.memo() strategically
Implement cleanup in useEffect hooks

Performance

Use useCallback for memoizing functions
Apply useMemo for expensive computations
Avoid inline function definitions in JSX
Implement code splitting via dynamic imports
Use proper key props in lists (never use index)

Next.js Best Practices

Core

Use App Router for routing
Implement metadata management
Apply proper caching strategies
Implement error boundaries

Components

Use built-in components: Image, Link, Script, Head
Implement loading states
Use appropriate data fetching methods

Server Components

Default to Server Components
Use URL query parameters for server state
Apply use client only when necessary:
- Event listeners
- Browser APIs
- State management
- Client libraries

TypeScript Implementation

Enable strict mode
Define clear interfaces for props, state, and Redux structure
Use type guards for undefined/null safety
Apply generics for flexibility
Leverage utility types (Partial, Pick, Omit)
Prefer interface over type for objects
Use mapped types for dynamic type variations

UI and Styling

Libraries

Shadcn UI: Consistent, accessible components
Radix UI: Customizable primitives
Composition patterns: Modularity

Styling

Tailwind CSS utility-first approach
Mobile-first responsive design
Dark mode via CSS variables or Tailwind's dark mode
Accessible color contrast ratios
Consistent spacing values
CSS variables for theme colors

State Management

Local State

useState for component-level state
useReducer for complex state
useContext for shared state

Global State (Redux Toolkit)

Use createSlice for combined state/reducers/actions
Normalize state structure
Use selectors for access encapsulation
Separate concerns by feature (avoid monolithic slices)

Error Handling and Validation

Forms

Zod for schema validation
React Hook Form integration
Clear error messaging

Error Boundaries

Catch and handle React tree errors gracefully
Log errors to external services (e.g., Sentry)
Display user-friendly fallback UIs

Testing

Unit Testing

Jest and React Testing Library
Arrange-Act-Assert pattern
Mock external dependencies and API calls

Integration Testing

Focus on user workflows
Proper test environment setup/teardown
Selective snapshot testing
Use testing utilities (screen in RTL)

Accessibility (a11y)

Semantic HTML
Accurate ARIA attributes
Full keyboard navigation
Proper focus management
Accessible color contrast
Logical heading hierarchy
Accessible interactive elements
Clear error feedback

Security

Input sanitization to prevent XSS
DOMPurify for HTML sanitization
Proper authentication methods

Internationalization (i18n)

next-i18next for translations
Locale detection
Number and date formatting
RTL support
Currency formatting

Documentation

JSDoc for all public functions, classes, methods, interfaces
Complete sentences with proper punctuation
Clear, concise descriptions
Proper markdown, code blocks, links, headings, lists
Examples when appropriate

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885

Next.js React Redux TypeScript Cursor Rules

Complete development guidelines for building maintainable, scalable applications with Next.js, React, Redux Toolkit, and TypeScript.

Development Philosophy

Produce maintainable, scalable code following SOLID principles
Favor functional and declarative approaches over imperative styles
Prioritize type safety and static analysis
Embrace component-driven architecture

Code Style Standards

Indentation: Use tabs
Strings: Use single quotes (unless escaping needed)
Semicolons: Omit unless disambiguation required
Operators: Space around infix operators
Functions: Space before declaration parentheses
Equality: Always use === over ==
Line length: Maximum 80 characters
Conditionals: Use braces for multi-line if statements
Collections: Trailing commas in multiline arrays/objects

Naming Conventions

Convention	Usage
PascalCase	Components, type definitions, interfaces
kebab-case	Directory and file names (e.g., `user-profile.tsx`)
camelCase	Variables, functions, methods, hooks, properties, props
UPPERCASE	Environment variables, constants, global configurations

Prefixes

Event handlers: handle (e.g., handleClick)
Booleans: verbs (e.g., isLoading, hasError, canSubmit)
Custom hooks: use (e.g., useAuth, useForm)

React Best Practices

Components

Use functional components with TypeScript interfaces
Define components using function keyword
Extract reusable logic into custom hooks
Apply composition patterns properly
Leverage React.memo() strategically
Implement cleanup in useEffect hooks

Performance

Use useCallback for memoizing functions
Apply useMemo for expensive computations
Avoid inline function definitions in JSX
Implement code splitting via dynamic imports
Use proper key props in lists (never use index)

Next.js Best Practices

Core

Use App Router for routing
Implement metadata management
Apply proper caching strategies
Implement error boundaries

Components

Use built-in components: Image, Link, Script, Head
Implement loading states
Use appropriate data fetching methods

Server Components

Default to Server Components
Use URL query parameters for server state
Apply use client only when necessary:
- Event listeners
- Browser APIs
- State management
- Client libraries

TypeScript Implementation

Enable strict mode
Define clear interfaces for props, state, and Redux structure
Use type guards for undefined/null safety
Apply generics for flexibility
Leverage utility types (Partial, Pick, Omit)
Prefer interface over type for objects
Use mapped types for dynamic type variations

UI and Styling

Libraries

Shadcn UI: Consistent, accessible components
Radix UI: Customizable primitives
Composition patterns: Modularity

Styling

Tailwind CSS utility-first approach
Mobile-first responsive design
Dark mode via CSS variables or Tailwind's dark mode
Accessible color contrast ratios
Consistent spacing values
CSS variables for theme colors

State Management

Local State

useState for component-level state
useReducer for complex state
useContext for shared state

Global State (Redux Toolkit)

Use createSlice for combined state/reducers/actions
Normalize state structure
Use selectors for access encapsulation
Separate concerns by feature (avoid monolithic slices)

Error Handling and Validation

Forms

Zod for schema validation
React Hook Form integration
Clear error messaging

Error Boundaries

Catch and handle React tree errors gracefully
Log errors to external services (e.g., Sentry)
Display user-friendly fallback UIs

Testing

Unit Testing

Jest and React Testing Library
Arrange-Act-Assert pattern
Mock external dependencies and API calls

Integration Testing

Focus on user workflows
Proper test environment setup/teardown
Selective snapshot testing
Use testing utilities (screen in RTL)

Accessibility (a11y)

Semantic HTML
Accurate ARIA attributes
Full keyboard navigation
Proper focus management
Accessible color contrast
Logical heading hierarchy
Accessible interactive elements
Clear error feedback

Security

Input sanitization to prevent XSS
DOMPurify for HTML sanitization
Proper authentication methods

Internationalization (i18n)

next-i18next for translations
Locale detection
Number and date formatting
RTL support
Currency formatting

Documentation

JSDoc for all public functions, classes, methods, interfaces
Complete sentences with proper punctuation
Clear, concise descriptions
Proper markdown, code blocks, links, headings, lists
Examples when appropriate