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:
**Framework**: Next.js 15 (App Directory, SSG)**Language**: TypeScript 5**Styling**: Tailwind CSS V4 + Shadcn UI**CMS**: Sanity**Email**: Resend**Linting**: ESLint 9 with 8+ plugins**Formatting**: Prettier 3 with import sortingCore Principles
1. Performance First
Use SSG (Static Site Generation) for all pagesOptimize images with `next/image`Implement ISR revalidation for dynamic contentMonitor bundle size with Next.js Bundle Analyzer2. Accessibility (WCAG 2.1)
Keyboard navigation optimizationSemantic HTML structureFluid typography with clamp() fallbacksAlt text for all images3. UX/UI Excellence
Mobile-first responsive designSmooth Framer Motion animationsSystem/Light/Dark mode supportFluid spacing and typographyFile 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
**Components**: PascalCase (`HeaderNav.tsx`)**Functions**: camelCase (`fetchProjects()`)**Types/Interfaces**: PascalCase (`ServiceData`)**Variables**: camelCase (`projectList`)**CSS Classes**: Tailwind utilities onlyFile Organization
One component per fileTypes in separate files when sharedAll styling via Tailwind CSSFrench comments and documentationDocumentation Requirements
JSDoc for complex functionsREADME in important directoriesComments in FrenchClear prop interfaces for componentsTypeScript 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
Use Server Components by defaultAdd `'use client'` only when necessaryPrefer composition over props drillingKeep components under 200 linesExtract complex logic to custom hooksDesign System
Colors
**Accent**: `#EE332D` (Red)**Gray**: `#F9A542` (Orange)Use CSS variables for theme supportTypography (Fluid with clamp())
**Scale**: xs, sm, base, lg, xl, 2xl, 3xl**Line Height**: Fluid spacing with clamp()**Font**: System font stackSpacing (Fluid)
Use `clamp()` for responsive spacingCSS variables: `--space-fl-*`Utilities: `p-fl-*`, `m-fl-*`, `gap-fl-*`Responsive Breakpoints
**Mobile**: < 640px**Tablet**: 640px - 1024px**Desktop**: > 1024pxGit Workflow
Branch Strategy
`main`: Production (protected, requires PR + 1 approval)`develop`: Development (requires PR + 1 approval)`feature/*`: New features`fix/*`: Bug fixes`docs/*`: DocumentationCommit Format
```
type(scope): description
[optional body in French]
```
**Types**: feat, fix, docs, style, refactor, test, chore
**Examples**:
`feat(services): add interior painting service page``fix(contact): correct form validation logic``docs(readme): update installation instructions`Refactoring with Backup
For major refactors:
```
refactor(backup): save state before gallery redesign
Planned changes:
Restructure image gridAdd filteringUpdate animations```
Protected Directories
🚫 DO NOT MODIFY
`src/components/ui/` - Original Shadcn components`.ressources/` - Original files and templates✅ Correct Usage
Import from protected directories as-isCreate new components that use base componentsExtend via composition, not modification⚠️ 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:
`.next/``.ressources/``.sanity/``node_modules/`Linting & Formatting
ESLint Plugins (8+)
`@eslint/js` - Modern ESLint config`typescript-eslint` - TypeScript support`eslint-plugin-react` - React rules`@next/eslint-plugin-next` - Next.js rules`eslint-config-prettier` - Prettier compatibility`eslint-plugin-tailwindcss` - Tailwind linting`eslint-plugin-import` - Import management`eslint-plugin-promise` - Promise best practicesPrettier Plugins
`@trivago/prettier-plugin-sort-imports` - Auto-sort imports`prettier-plugin-tailwindcss` - Class sortingPre-commit Checks
Run before committing:
```bash
pnpm lint # ESLint
pnpm format # Prettier
```
Testing (Future Implementation)
Framework
**Vitest** for unit/integration tests`@testing-library/react` for componentsV8 coverageOrganization
Tests in `tests/` directoryMirror source structureUse `.test.ts` or `.test.tsx` suffixConventions
```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
**French language** for comments and documentation**No modifications** to Shadcn UI components**Mobile-first** approach mandatory**Accessibility** is non-negotiable**Performance** monitoring required**TypeScript strict mode** enforced**PR reviews** required for main/develop**Semantic versioning** for releasesResources
Next.js 15 docs: https://nextjs.org/docsTailwind CSS V4: https://tailwindcss.com/Shadcn UI: https://ui.shadcn.com/Sanity: https://www.sanity.io/docsTypeScript: https://www.typescriptlang.org/docs