Next.js Radix Shadcn Theme Development Guidelines
This skill provides comprehensive development rules and conventions for building Next.js applications with Radix UI, shadcn/ui components, and TypeScript.
Overview
This skill enforces best practices and conventions for a Next.js project that uses:
Radix UI primitivesshadcn/ui component libraryTypeScriptModern React patternsDatabase operationsGit-flow workflowCode Structure and Style
Indentation and Formatting
**Use tabs for indentation** (not spaces)Use single quotes for JavaScript/TypeScript stringsMaintain consistent formatting across all filesNaming Conventions
**Variables and functions**: camelCase ```typescript
const userName = 'John';
function getUserData() { }
```
**React components**: PascalCase ```typescript
function UserProfile() { }
const ProfileCard = () => { };
```
**Constants**: UPPER_SNAKE_CASE for true constants ```typescript
const MAX_RETRY_COUNT = 3;
```
TypeScript Guidelines
Always use TypeScript for type safetyDefine explicit types for function parameters and return valuesUse interfaces for object shapesLeverage TypeScript's utility types when appropriateAvoid `any` type; use `unknown` if type is truly unknownExample:
```typescript
interface UserData {
id: string;
name: string;
email: string;
}
function processUser(user: UserData): void {
// Implementation
}
```
UI and Component Development
Component Guidelines
Follow shadcn/ui patterns for component compositionUse Radix UI primitives as base componentsEnsure components are accessible (ARIA labels, keyboard navigation)Keep components focused and single-responsibilityStyling
Use Tailwind CSS utility classesFollow the project's theme configurationEnsure responsive design (mobile-first approach)Maintain consistent spacing and sizingPerformance Optimization
Implement proper code splittingUse React.memo() for expensive componentsOptimize images (Next.js Image component)Minimize bundle sizeUse dynamic imports for heavy dependenciesImplement proper caching strategiesDatabase Operations
Follow the database guidelines in `.cursor/rules/database-guidelines.md`Use proper error handling for database queriesImplement connection poolingUse transactions when appropriateValidate data before database operationsGit Workflow
Commit Messages
All commit messages must be in **English** and follow conventional commit format:
```
type(scope): message
```
**Types:**
`feat`: New feature`fix`: Bug fix`docs`: Documentation changes`style`: Code style changes (formatting, no logic change)`refactor`: Code refactoring`test`: Adding or updating tests`chore`: Maintenance tasks**Examples:**
```
feat(auth): add login functionality
fix(ui): correct button alignment on mobile
docs(readme): update installation instructions
refactor(api): simplify user data fetching
```
Branch Strategy
Follow git-flow conventions as outlined in `.cursor/rules/git-workflow.md`
Documentation Translation
When working on documentation files in French, the assistant should:
1. Offer to translate documentation from French to English when explicitly requested
2. At the end of a work session, propose translation if French documentation files were modified
3. Follow the translation guidelines in `.cursor/rules/translate-guidelines.md`
Project Setup
For new project initialization:
Follow the setup guidelines in `.cursor/rules/project-setup.md`Ensure all dependencies are properly configuredSet up linting and formatting toolsConfigure TypeScript strict modeAdditional Rules Reference
This skill references a modular rule structure. For detailed guidelines on specific topics, refer to:
General overview: `.cursor/rules/README.md`Code style: `.cursor/rules/code-style.md`Naming conventions: `.cursor/rules/naming-conventions.md`TypeScript: `.cursor/rules/typescript-guidelines.md`UI and styling: `.cursor/rules/ui-style-guidelines.md`Performance: `.cursor/rules/performance-optimization.md`Database: `.cursor/rules/database-guidelines.md`Git workflow: `.cursor/rules/git-workflow.md`Project setup: `.cursor/rules/project-setup.md`Translation: `.cursor/rules/translate-guidelines.md`Important Notes
Always maintain consistency with existing code patternsPrioritize accessibility in all UI implementationsWrite clean, maintainable, and well-documented codeTest thoroughly before committingKeep dependencies up to dateFollow the principle of least surprise in API design