Next-Radix-Shadcn Cursor Guide

This skill provides comprehensive Cursor rules and guidelines for Next.js projects using Radix UI and Shadcn components. It enforces best practices for code organization, TypeScript usage, UI development, and Git workflow.

Overview

This skill serves as a central reference for Cursor AI when working on projects that use Next.js, Radix UI, and Shadcn component library. It establishes consistent patterns across code style, naming conventions, TypeScript usage, UI development, performance optimization, and version control.

Key Guidelines

Code Style & Structure

- Variables and functions: camelCase

- React components: PascalCase

- `README.md` - General overview and introduction

- `code-style.md` - Code style and structure rules

- `naming-conventions.md` - Naming conventions across the codebase

- `typescript-guidelines.md` - TypeScript usage guidelines

- `ui-style-guidelines.md` - UI and styling best practices

- `performance-optimization.md` - Performance optimization strategies

- `database-guidelines.md` - Database queries and model patterns

- `git-workflow.md` - Git-flow configuration and conventions

- `project-setup.md` - Project initialization guidelines

- `translate-guidelines.md` - Documentation translation rules

TypeScript Guidelines

UI & Styling

Git Workflow

- Examples:

- `feat(auth): add login functionality`

- `fix(ui): correct button alignment on mobile`

- `docs(readme): update installation instructions`

- `refactor(api): simplify data fetching logic`

Documentation Translation

The AI assistant should offer to translate documentation files from French to English when:

1. Explicitly requested by the user

2. At the end of a work session if French documentation files were modified

Detailed translation processes are documented in `translate-guidelines.md`.

Performance Optimization

Using This Skill

When working on a Next.js project with Radix UI and Shadcn components:

1. **Reference the appropriate guideline file** for specific concerns (TypeScript, UI, database, etc.)

2. **Follow code style rules** consistently across all files

3. **Use conventional commit messages** for all Git commits

4. **Apply naming conventions** for variables, functions, and components

5. **Consult performance guidelines** before implementing complex features

6. **Offer documentation translation** when French files are modified

File Structure Reference

All detailed guidelines are located in `.cursor/rules/`:

```

.cursor/rules/

├── README.md # Overview

├── code-style.md # Code formatting rules

├── naming-conventions.md # Naming patterns

├── typescript-guidelines.md # TypeScript best practices

├── ui-style-guidelines.md # UI/UX patterns

├── performance-optimization.md # Performance tips

├── database-guidelines.md # Database patterns

├── git-workflow.md # Version control workflow

├── project-setup.md # Initialization steps

└── translate-guidelines.md # Translation rules

```

Important Constraints

Examples

Correct Code Style

```typescript

import { useState } from 'react';

export function MyComponent() {

const [count, setCount] = useState(0);

return (

<div className='container'>

<button onClick={() => setCount(count + 1)}>

Count: {count}

</button>

</div>

);

}

```

Correct Commit Messages

```

feat(components): add new SearchBar component

fix(auth): resolve session timeout issue

docs(api): update endpoint documentation

refactor(utils): simplify date formatting logic

perf(list): implement virtualization for large datasets

```