Capriati S.A. - Next.js 15 Architecture

Build a professional painting & decoration company website using Next.js 15, TypeScript, Tailwind CSS 4, Shadcn UI, Sanity CMS, and Resend for email. Follow French naming conventions and modern best practices.

Project Overview

This skill implements a high-performance, accessible website with:

Key Technologies

Project Structure

```

src/

├── app/ # Next.js 15 routing

│ ├── page.tsx # Homepage

│ ├── layout.tsx # Root layout

│ ├── about/ # About page

│ ├── contact/ # Contact page

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

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

│ └── globals.css # Global styles

├── 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 configuration

│ └── utils/ # Utility functions

├── types/ # TypeScript type definitions

├── hooks/ # Custom React hooks

└── tests/ # Unit and integration tests

```

Design System

Colors

Fluid Typography

Spacing

Responsive Breakpoints

Instructions for AI Assistant

1. Protected Directories

**DO NOT MODIFY** the following directories:

**Rationale**: Modifications break system consistency and prevent clean updates from upstream.

2. Correct Usage

✅ **DO:**

❌ **DON'T:**

3. Naming Conventions

4. Git Workflow

**Branches:**

**Commit Format:**

```

type(scope): description

[optional body]

[optional footer]

```

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

**Example:**

```

feat(services): ajouter page détail service dynamique

```

5. Performance Best Practices

6. Accessibility Requirements

7. Component Development

8. Styling Guidelines

9. Project Analysis

When analyzing the project, **ignore these directories**:

Inspect all other directories and files for comprehensive understanding.

10. Refactoring with Backups

For major refactoring:

1. Create a backup commit with type `refactor(backup)`

2. List all planned changes in commit body

3. Wait for user confirmation before proceeding

4. Implement changes incrementally

11. Requesting Modifications to Protected Files

If modifications to protected directories are necessary:

1. Inform the user clearly

2. Explain why modification is needed

3. Let the user handle the changes

4. Wait for confirmation before continuing

Example Implementations

Creating a New Page Component

```tsx

// src/components/pages/ServiceDetail.tsx

import { type FC } from 'react';

import { Button } from '@/components/ui/button';

import { type Service } from '@/types/service';

interface ServiceDetailProps {

service: Service;

}

/**

* Affiche les détails d'un service spécifique

* @param service - Les données du service à afficher

*/

export const ServiceDetail: FC<ServiceDetailProps> = ({ service }) => {

return (

<article className="container mx-auto px-fl-4 py-fl-8">

<h1 className="text-fl-3xl font-bold mb-fl-4">{service.title}</h1>

<p className="text-fl-base text-gray-600">{service.description}</p>

<Button className="mt-fl-6">Demander un devis</Button>

</article>

);

};

```

Custom Hook Pattern

```typescript

// src/hooks/useServices.ts

import { useEffect, useState } from 'react';

import { fetchServices } from '@/lib/sanity/queries';

import { type Service } from '@/types/service';

/**

* Hook personnalisé pour récupérer la liste des services depuis Sanity

*/

export const useServices = () => {

const [services, setServices] = useState<Service[]>([]);

const [loading, setLoading] = useState(true);

const [error, setError] = useState<Error | null>(null);

useEffect(() => {

fetchServices()

.then(setServices)

.catch(setError)

.finally(() => setLoading(false));

}, []);

return { services, loading, error };

};

```

Important Constraints

1. **No Direct Modifications**: Never modify Shadcn UI components directly

2. **French First**: All documentation, comments, and commit messages in French

3. **Type Safety**: Strict TypeScript mode enabled

4. **Performance**: Target Lighthouse score >90 for all metrics

5. **Accessibility**: WCAG 2.1 AA compliance minimum

6. **Mobile First**: Design for mobile, progressively enhance for desktop

7. **Branch Protection**: Never bypass PR requirements on protected branches

Testing (Future Implementation)

Tests will use Vitest with:

Deployment