Build a modern Next.js 15 website with TypeScript, Tailwind CSS 4, Shadcn UI, Sanity CMS, and comprehensive linting. Follows French conventions with fluid typography and mobile-first responsive design.
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.
This skill implements a high-performance, accessible website with:
```
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
```
**DO NOT MODIFY** the following directories:
**Rationale**: Modifications break system consistency and prevent clean updates from upstream.
✅ **DO:**
❌ **DON'T:**
**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
```
When analyzing the project, **ignore these directories**:
Inspect all other directories and files for comprehensive understanding.
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
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
```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>
);
};
```
```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 };
};
```
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
Tests will use Vitest with:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/capriati-sa-nextjs-15-architecture/raw