📚 Capriati S.A. – Peinture & Décoration

Site web de l’entreprise de peinture Capriati S.A., développé avec Next.js 15 et TypeScript.

🚀 Technologies

Framework: Next.js 15
Langage: TypeScript
Styling: Tailwind CSS V4
UI Components: Shadcn UI
Animations: Framer Motion
CMS: Sanity
Email: Resend
Déploiement: Vercel

🛠️ Technologies Incluses

Next.js 15
React 19
TypeScript 5
ESLint 9
Prettier 3
Tailwind CSS 4
Shadcn UI
App Directory
System, Light & Dark Mode
Next.js Bundle Analyzer

🔧 Plugins ESLint

@eslint/js - Configuration ESLint moderne
typescript-eslint - Support TypeScript
eslint-plugin-react - Règles React
@next/eslint-plugin-next - Règles Next.js
eslint-config-prettier - Compatibilité Prettier
eslint-plugin-tailwindcss - Règles Tailwind
eslint-plugin-import - Gestion des imports
eslint-plugin-promise - Gestion des promesses

✨ Plugins Prettier

@trivago/prettier-plugin-sort-imports - Tri automatique des imports
prettier-plugin-tailwindcss - Formatage Tailwind

🎯 Principes Fondamentaux

Performance
- SSG (Static Site Generation) pour toutes les pages
- Optimisation des images avec
```
next/image
```
- Revalidation ISR pour le contenu dynamique
Accessibilité
- Respect des normes WCAG 2.1
- Navigation au clavier optimisée
- Zoom de la typographie fluid avec fallbacks
UX/UI
- Design responsive
- Animations fluides avec Framer Motion

📁 Structure du Projet

📦 capriati-sa/
├── 📚 .cursor/                # Règles, conventions, doc interne (Markdown)
│   └── 📂 rules/
├── 📂 public/                 # Fichiers statiques (images, favicon, etc.)
├── 📂 src/
│   ├── 📂 app/                # Routing Next.js 15 (pages, layouts, templates)
│   │   ├── 📝 page.tsx        # Accueil
│   │   ├── 📝 layout.tsx      # Layout principal
│   │   ├── 📂 about/          # Page À propos
│   │   ├── 📂 contact/        # Page Contact
│   │   ├── 📂 services/       # Catalogue des services
│   │   │   ├── 📂 [slug]/     # Pages dynamiques pour chaque service
│   │   ├── 📂 works/          # Réalisations (galerie, projets)
│   │   │   ├── 📂 [slug]/     # Pages dynamiques pour chaque réalisation
│   │   └── 📝 globals.css     # Styles globaux
│   ├── 🧩 components/
│   │   ├── 🧩 ui/             # Composants Shadcn UI (ne pas modifier)
│   │   ├── 🧩 shared/         # Composants réutilisables (Header, Footer, etc.)
│   │   └── 🧩 pages/          # Composants spécifiques à une page
│   ├── 🔧 lib/                # Fonctions utilitaires, config Sanity, hooks, etc.
│   │   ├── 🔧 sanity/         # Config et clients Sanity
│   │   ├── 🔧 resend/         # Configuration de resend pour les formulaires
│   │   └── 🔧 utils/          # Fonctions utilitaires diverses
│   ├── 🎨 styles/             # Fichiers CSS/variables complémentaires
│   ├── 🔷 types/              # Types TypeScript partagés
│   ├── 🎣 hooks/              # Hooks de l'application
│   └── ✅ tests/              # Tests unitaires et d’intégration
├── 📝 .env.local              # Variables d’environnement (non versionné)
├── 📝 .eslintrc.json          # Config ESLint
├── 📝 .prettierrc             # Config Prettier
├── tailwind.config.ts      # Config Tailwind
├── 📝 next.config.mjs         # Config Next.js
├── 📝 package.json
├── 📝 pnpm-lock.yaml
└── 📝 README.md

📝 Conventions de Code

Nommage
- Composants : PascalCase
- Fonctions : camelCase
- Types : PascalCase
- Variables : camelCase
Organisation
- Un composant par fichier
- Types dans des fichiers séparés
- Styles avec Tailwind CSS
Documentation
- JSDoc pour les fonctions complexes
- README dans chaque dossier important
- Commentaires en français

🔄 Workflow Git

Branches
- ```
main
```
  : Production
  - 🔒 Protection contre les push directs
  - 🔍 Pull Request requis
  - 👥 Reviews approuvées requises (1 minimum)
  - ✅ Status checks requis
  - 🏷️ Tags sémantiques obligatoires
- ```
develop
```
  : Développement
  - 🔍 Pull Request requis
  - 👥 Reviews approuvées requises (1 minimum)
  - ✅ Status checks requis
- ```
feature/*
```
  : Nouvelles fonctionnalités
- ```
fix/*
```
  : Corrections de bugs
- ```
docs/*
```
  : Documentation
Commits
- Format :
```
type(scope): description
```
- Types : feat, fix, docs, style, refactor, test, chore
- Messages en français
Protection des Branches
- Configuration dans
```
.github/workflows/branch-protection.yml
```
- Documentation dans
```
.github/README.md
```
- Workflows automatisés pour la validation
- Règles de sécurité et de qualité

🎨 Design System

Couleurs
- Accent : #EE332D (Rouge)
- Gray : #F9A542 (orange)
Typographie
- Système fluide basé sur clamp()
- Échelle : xs, sm, base, lg, xl, 2xl, 3xl
- Espacement fluide pour le line-height
Espacement
- Base fluide avec clamp()
- Variables CSS pour les espacements
- Classes utilitaires : p-fl-, m-fl-, gap-fl-*

📱 Responsive Design

Breakpoints
- Mobile : < 640px
- Tablet : 640px - 1024px
- Desktop : > 1024px
Approche
- Mobile First
- Progressive Enhancement
- Typographie et espacements fluides

🔗 Liens vers la Documentation

📚
```
README.md
```
- Guide principal des règles
📝
```
.cursorrules.md
```
- Vue d'ensemble des règles du projet
🔧
```
code-style.md
```
- Conventions de style de code
🧩
```
components.md
```
- Règles pour les composants React
💾
```
git-workflow.md
```
- Convention de Git et Gitub
🎨
```
project-design.md
```
- Système de design et UI
🔷
```
typescript.md
```
- Conventions TypeScript
📝
```
markdown-style.md
```
- Conventions de style Markdown

🔄 Gestion des Fichiers Cursor

1. 📝 Ajout d'un Nouveau Fichier Cursor

Lors de l'ajout d'un nouveau fichier de règles Cursor :

Création du fichier
- Utiliser le format Markdown
- Suivre la structure standard
- Inclure les emojis appropriés
- Documenter clairement les règles
Mise à jour des références
- Ajouter le lien dans
```
.cursorrules.md
```
- Mettre à jour le README correspondant
- Vérifier les dépendances
Validation
- Vérifier la cohérence avec les autres règles
- S'assurer de la clarté des exemples
- Valider les liens et références

Règles pour l'Assistant IA

Dossiers protégés

```
src/components/ui/
```
Ne pas toucher les fichier Shadcn originaux
```
.ressources/
```
(contient les fichiers originaux et les templates)

Raisons

Ces dossiers contiennent des composants et configurations de base
Toute modification peut casser la cohérence du système
Les mises à jour de shadcn/ui seraient compromises
Le dossier .ressources contient le repository original et des ressources importantes

Utilisation Correcte

🔍 Analyse du projet

Lors de la demande de l'utilisateur pour une analyse du projet inspection obligatoire de tous les dossiers et fichiers.

Ci-dessous, la liste des dossiers avec leur contenu est à ignorer DOSSIERS:

.next/
.ressources/
.sanity/
node_modules/

✅ À FAIRE :

Utiliser les composants existants tels quels
Importer depuis ces dossiers
Créer de nouveaux composants qui utilisent ces composants de base

❌ À NE PAS FAIRE :

Modifier les fichiers dans ces dossiers
Dupliquer ou renommer ces composants
Suggérer des modifications directes à ces fichiers

En cas de besoin de modification

Si des modifications sont nécessaires dans ces dossiers :

En informer l'utilisateur
Laisser l'utilisateur gérer les modifications
Attendre la confirmation avant de continuer

Commits de Refactoring avec Backup

Pour les refactorisations majeures, créer un commit de backup avec :

Type :
```
refactor(backup)
```
Message principal : Description concise de la sauvegarde
Corps du message : Liste des changements prévus
Pour les détails et formatage, voir [
```
git-workflow.md
```
](./.cursor/rules/git-workflow.md/# 4. Backups de code)

🧪 Tests (Avec Vitest ou Jest qui viendront plus tard)

Configuration
- Utilisation de Vitest pour les tests
- Support natif de TypeScript
- Tests unitaires et d'intégration
- Interface utilisateur de test intégrée
Organisation
- Tests placés dans le dossier
```
tests/
```
- Structure miroir du code source
- Fichiers de test avec suffixe
```
.test.ts
```
  ou
```
.test.tsx
```
Conventions
- Tests descriptifs avec
```
describe
```
  et
```
it
```
- Utilisation de
```
@testing-library/react
```
  pour les composants
- Mocks avec les fonctionnalités natives de Vitest
- Coverage avec V8
Scripts
- Contient les scripts de base Next.js
- Contient des scripts pour Sanity
- Contient des scripts de formatage
- Contient des scripts liés à de la maintenance et developpement complémentaires

Pour de plus amples informations sur les scripts, consultez le README.md principal.

📚 Capriati S.A. – Peinture & Décoration

Site web de l’entreprise de peinture Capriati S.A., développé avec Next.js 15 et TypeScript.

🚀 Technologies

Framework: Next.js 15
Langage: TypeScript
Styling: Tailwind CSS V4
UI Components: Shadcn UI
Animations: Framer Motion
CMS: Sanity
Email: Resend
Déploiement: Vercel

🛠️ Technologies Incluses

Next.js 15
React 19
TypeScript 5
ESLint 9
Prettier 3
Tailwind CSS 4
Shadcn UI
App Directory
System, Light & Dark Mode
Next.js Bundle Analyzer

🔧 Plugins ESLint

@eslint/js - Configuration ESLint moderne
typescript-eslint - Support TypeScript
eslint-plugin-react - Règles React
@next/eslint-plugin-next - Règles Next.js
eslint-config-prettier - Compatibilité Prettier
eslint-plugin-tailwindcss - Règles Tailwind
eslint-plugin-import - Gestion des imports
eslint-plugin-promise - Gestion des promesses

✨ Plugins Prettier

@trivago/prettier-plugin-sort-imports - Tri automatique des imports
prettier-plugin-tailwindcss - Formatage Tailwind

🎯 Principes Fondamentaux

Performance
- SSG (Static Site Generation) pour toutes les pages
- Optimisation des images avec
```
next/image
```
- Revalidation ISR pour le contenu dynamique
Accessibilité
- Respect des normes WCAG 2.1
- Navigation au clavier optimisée
- Zoom de la typographie fluid avec fallbacks
UX/UI
- Design responsive
- Animations fluides avec Framer Motion

📁 Structure du Projet

📦 capriati-sa/
├── 📚 .cursor/                # Règles, conventions, doc interne (Markdown)
│   └── 📂 rules/
├── 📂 public/                 # Fichiers statiques (images, favicon, etc.)
├── 📂 src/
│   ├── 📂 app/                # Routing Next.js 15 (pages, layouts, templates)
│   │   ├── 📝 page.tsx        # Accueil
│   │   ├── 📝 layout.tsx      # Layout principal
│   │   ├── 📂 about/          # Page À propos
│   │   ├── 📂 contact/        # Page Contact
│   │   ├── 📂 services/       # Catalogue des services
│   │   │   ├── 📂 [slug]/     # Pages dynamiques pour chaque service
│   │   ├── 📂 works/          # Réalisations (galerie, projets)
│   │   │   ├── 📂 [slug]/     # Pages dynamiques pour chaque réalisation
│   │   └── 📝 globals.css     # Styles globaux
│   ├── 🧩 components/
│   │   ├── 🧩 ui/             # Composants Shadcn UI (ne pas modifier)
│   │   ├── 🧩 shared/         # Composants réutilisables (Header, Footer, etc.)
│   │   └── 🧩 pages/          # Composants spécifiques à une page
│   ├── 🔧 lib/                # Fonctions utilitaires, config Sanity, hooks, etc.
│   │   ├── 🔧 sanity/         # Config et clients Sanity
│   │   ├── 🔧 resend/         # Configuration de resend pour les formulaires
│   │   └── 🔧 utils/          # Fonctions utilitaires diverses
│   ├── 🎨 styles/             # Fichiers CSS/variables complémentaires
│   ├── 🔷 types/              # Types TypeScript partagés
│   ├── 🎣 hooks/              # Hooks de l'application
│   └── ✅ tests/              # Tests unitaires et d’intégration
├── 📝 .env.local              # Variables d’environnement (non versionné)
├── 📝 .eslintrc.json          # Config ESLint
├── 📝 .prettierrc             # Config Prettier
├── tailwind.config.ts      # Config Tailwind
├── 📝 next.config.mjs         # Config Next.js
├── 📝 package.json
├── 📝 pnpm-lock.yaml
└── 📝 README.md

📝 Conventions de Code

Nommage
- Composants : PascalCase
- Fonctions : camelCase
- Types : PascalCase
- Variables : camelCase
Organisation
- Un composant par fichier
- Types dans des fichiers séparés
- Styles avec Tailwind CSS
Documentation
- JSDoc pour les fonctions complexes
- README dans chaque dossier important
- Commentaires en français

🔄 Workflow Git

Branches
- ```
main
```
  : Production
  - 🔒 Protection contre les push directs
  - 🔍 Pull Request requis
  - 👥 Reviews approuvées requises (1 minimum)
  - ✅ Status checks requis
  - 🏷️ Tags sémantiques obligatoires
- ```
develop
```
  : Développement
  - 🔍 Pull Request requis
  - 👥 Reviews approuvées requises (1 minimum)
  - ✅ Status checks requis
- ```
feature/*
```
  : Nouvelles fonctionnalités
- ```
fix/*
```
  : Corrections de bugs
- ```
docs/*
```
  : Documentation
Commits
- Format :
```
type(scope): description
```
- Types : feat, fix, docs, style, refactor, test, chore
- Messages en français
Protection des Branches
- Configuration dans
```
.github/workflows/branch-protection.yml
```
- Documentation dans
```
.github/README.md
```
- Workflows automatisés pour la validation
- Règles de sécurité et de qualité

🎨 Design System

Couleurs
- Accent : #EE332D (Rouge)
- Gray : #F9A542 (orange)
Typographie
- Système fluide basé sur clamp()
- Échelle : xs, sm, base, lg, xl, 2xl, 3xl
- Espacement fluide pour le line-height
Espacement
- Base fluide avec clamp()
- Variables CSS pour les espacements
- Classes utilitaires : p-fl-, m-fl-, gap-fl-*

📱 Responsive Design

Breakpoints
- Mobile : < 640px
- Tablet : 640px - 1024px
- Desktop : > 1024px
Approche
- Mobile First
- Progressive Enhancement
- Typographie et espacements fluides

🔗 Liens vers la Documentation

📚
```
README.md
```
- Guide principal des règles
📝
```
.cursorrules.md
```
- Vue d'ensemble des règles du projet
🔧
```
code-style.md
```
- Conventions de style de code
🧩
```
components.md
```
- Règles pour les composants React
💾
```
git-workflow.md
```
- Convention de Git et Gitub
🎨
```
project-design.md
```
- Système de design et UI
🔷
```
typescript.md
```
- Conventions TypeScript
📝
```
markdown-style.md
```
- Conventions de style Markdown

🔄 Gestion des Fichiers Cursor

1. 📝 Ajout d'un Nouveau Fichier Cursor

Lors de l'ajout d'un nouveau fichier de règles Cursor :

Création du fichier
- Utiliser le format Markdown
- Suivre la structure standard
- Inclure les emojis appropriés
- Documenter clairement les règles
Mise à jour des références
- Ajouter le lien dans
```
.cursorrules.md
```
- Mettre à jour le README correspondant
- Vérifier les dépendances
Validation
- Vérifier la cohérence avec les autres règles
- S'assurer de la clarté des exemples
- Valider les liens et références

Règles pour l'Assistant IA

Dossiers protégés

```
src/components/ui/
```
Ne pas toucher les fichier Shadcn originaux
```
.ressources/
```
(contient les fichiers originaux et les templates)

Raisons

Ces dossiers contiennent des composants et configurations de base
Toute modification peut casser la cohérence du système
Les mises à jour de shadcn/ui seraient compromises
Le dossier .ressources contient le repository original et des ressources importantes

Utilisation Correcte

🔍 Analyse du projet

Lors de la demande de l'utilisateur pour une analyse du projet inspection obligatoire de tous les dossiers et fichiers.

Ci-dessous, la liste des dossiers avec leur contenu est à ignorer DOSSIERS:

.next/
.ressources/
.sanity/
node_modules/

✅ À FAIRE :

Utiliser les composants existants tels quels
Importer depuis ces dossiers
Créer de nouveaux composants qui utilisent ces composants de base

❌ À NE PAS FAIRE :

Modifier les fichiers dans ces dossiers
Dupliquer ou renommer ces composants
Suggérer des modifications directes à ces fichiers

En cas de besoin de modification

Si des modifications sont nécessaires dans ces dossiers :

En informer l'utilisateur
Laisser l'utilisateur gérer les modifications
Attendre la confirmation avant de continuer

Commits de Refactoring avec Backup

Pour les refactorisations majeures, créer un commit de backup avec :

Type :
```
refactor(backup)
```
Message principal : Description concise de la sauvegarde
Corps du message : Liste des changements prévus
Pour les détails et formatage, voir [
```
git-workflow.md
```
](./.cursor/rules/git-workflow.md/# 4. Backups de code)

🧪 Tests (Avec Vitest ou Jest qui viendront plus tard)

Configuration
- Utilisation de Vitest pour les tests
- Support natif de TypeScript
- Tests unitaires et d'intégration
- Interface utilisateur de test intégrée
Organisation
- Tests placés dans le dossier
```
tests/
```
- Structure miroir du code source
- Fichiers de test avec suffixe
```
.test.ts
```
  ou
```
.test.tsx
```
Conventions
- Tests descriptifs avec
```
describe
```
  et
```
it
```
- Utilisation de
```
@testing-library/react
```
  pour les composants
- Mocks avec les fonctionnalités natives de Vitest
- Coverage avec V8
Scripts
- Contient les scripts de base Next.js
- Contient des scripts pour Sanity
- Contient des scripts de formatage
- Contient des scripts liés à de la maintenance et developpement complémentaires

Pour de plus amples informations sur les scripts, consultez le README.md principal.

📚 Capriati S.A. – Peinture & Décoration

Related Skills

Repo rules

.cursorrules

This is an Elixir library that recompiles Elixir code in its AST form.