Capriati SA Next.js Project Standards

Development standards for a professional Next.js 15 painting company website with TypeScript, Sanity CMS, Tailwind CSS V4, Shadcn UI, and strict code quality enforcement.

Project Overview

This skill enforces development standards for Capriati S.A., a painting company website built with:

Core Principles

1. Performance First

2. Accessibility (WCAG 2.1)

3. UX/UI Excellence

File Structure

```

src/

├── app/ # Next.js routing (pages, layouts)

│ ├── page.tsx # Homepage

│ ├── layout.tsx # Root layout

│ ├── about/

│ ├── contact/

│ ├── services/[slug]/ # Dynamic service pages

│ └── works/[slug]/ # Dynamic portfolio pages

├── components/

│ ├── ui/ # Shadcn UI (PROTECTED - do not modify)

│ ├── shared/ # Reusable components (Header, Footer)

│ └── pages/ # Page-specific components

├── lib/

│ ├── sanity/ # Sanity config and clients

│ ├── resend/ # Resend email config

│ └── utils/ # Utility functions

├── styles/ # Additional CSS/variables

├── types/ # Shared TypeScript types

├── hooks/ # Custom React hooks

└── tests/ # Unit and integration tests

```

Code Conventions

Naming Standards

File Organization

Documentation Requirements

TypeScript Rules

1. **Strict Mode Enabled**

- No implicit `any`

- Strict null checks

- No unused variables

2. **Type Patterns**

```typescript

// Props with children

interface ComponentProps {

title: string;

children: React.ReactNode;

}

// Async functions

async function fetchData(): Promise<DataType> {

// ...

}

// Union types for variants

type ButtonVariant = 'primary' | 'secondary' | 'ghost';

```

3. **Import Organization**

- React imports first

- Third-party libraries

- Local components

- Types

- Utilities

Component Standards

Structure Template

```tsx

import { type ComponentProps } from '@/types';

interface Props {

title: string;

variant?: 'default' | 'alternate';

}

export function ComponentName({ title, variant = 'default' }: Props) {

return (

<section className="container mx-auto px-4">

{/* Content */}

</section>

);

}

```

Best Practices

Design System

Colors

Typography (Fluid with clamp())

Spacing (Fluid)

Responsive Breakpoints

Git Workflow

Branch Strategy

Commit Format

```

type(scope): description

[optional body in French]

```

**Types**: feat, fix, docs, style, refactor, test, chore

**Examples**:

Refactoring with Backup

For major refactors:

```

refactor(backup): save state before gallery redesign

Planned changes:

```

Protected Directories

🚫 DO NOT MODIFY

✅ Correct Usage

⚠️ If Modifications Needed

1. Inform the user

2. Let user handle changes

3. Wait for confirmation before proceeding

Project Analysis Protocol

When analyzing the project, inspect all directories EXCEPT:

Linting & Formatting

ESLint Plugins (8+)

Prettier Plugins

Pre-commit Checks

Run before committing:

```bash

pnpm lint # ESLint

pnpm format # Prettier

```

Testing (Future Implementation)

Framework

Organization

Conventions

```typescript

describe('ComponentName', () => {

it('should render correctly', () => {

// Test implementation

});

});

```

Implementation Steps

For New Features

1. **Read existing code** in relevant sections

2. **Create feature branch** (`feature/feature-name`)

3. **Follow file structure** conventions

4. **Use design system** (colors, spacing, typography)

5. **Write TypeScript** with strict types

6. **Test responsiveness** at all breakpoints

7. **Run linting** (`pnpm lint`)

8. **Format code** (`pnpm format`)

9. **Commit with convention** (`feat(scope): description`)

10. **Create PR** to `develop`

For Bug Fixes

1. **Reproduce bug** and document behavior

2. **Create fix branch** (`fix/bug-description`)

3. **Implement minimal fix** without refactoring

4. **Test thoroughly** across devices

5. **Run linting and formatting**

6. **Commit** (`fix(scope): description`)

7. **Create PR** with reproduction steps

For Refactoring

1. **Create backup commit** (`refactor(backup): description`)

2. **List planned changes** in commit body

3. **Refactor incrementally** with frequent commits

4. **Maintain functionality** throughout

5. **Update tests** if applicable

6. **Document changes** in comments

Key Constraints

Resources