AI coding instructions for guidebareme - a static Next.js site displaying French disability evaluation guidelines with static export and Tailwind typography
AI coding instructions for guidebareme - a static Next.js website displaying the French "GUIDE-BARÈME POUR L'ÉVALUATION DES DÉFICIENCES ET INCAPACITÉS DES PERSONNES HANDICAPÉES" (Disability Evaluation Guide).
This is a static Next.js website that displays French disability evaluation guidelines. The site was migrated from HTML content and uses Next.js App Router configured for static export. All content is pre-rendered at build time with no server-side rendering or dynamic data.
When working with this project, understand these key architectural decisions:
1. **Static Site Generation**: The site is configured with `output: 'export'` in `next.config.mjs` to generate a fully static site that can be deployed to any static hosting provider.
2. **Content Storage**: The main content is stored as a single HTML string in `app/content.tsx` and rendered via `dangerouslySetInnerHTML` in the main page component. This approach preserves the original HTML structure from the migration.
3. **Styling System**: Uses Tailwind CSS with the `@tailwindcss/typography` plugin for readable prose formatting. Typography classes like `prose lg:prose-xl prose-stone` handle text styling automatically.
4. **Layout Structure**: Standard Next.js App Router layout pattern with root layout in `app/layout.tsx` using Inter font.
1. Run the development server:
```bash
npm run dev
```
The site will be available at `localhost:3000`.
2. Build the static site:
```bash
npm run build
```
This generates static files in the `out/` directory.
3. Run linting:
```bash
npm run lint
```
Uses ESLint for code quality checks.
**To update the main content:**
1. Open `app/content.tsx`
2. Modify the HTML string export directly
3. Rebuild the static site to verify changes
4. Check the output in the `out/` directory
**Example content structure:**
```typescript
export const content = `
<h1>Section Title</h1>
<p>Content here...</p>
`;
```
**For typography and content styling:**
1. Adjust Tailwind classes in `app/page.tsx`:
- Use `prose` utilities for readable text
- Common patterns: `prose-stone`, `max-w-none`, `lg:prose-xl`
2. For global styles, modify `app/globals.css`
**Example prose configuration:**
```jsx
<div className="prose lg:prose-xl prose-stone max-w-none">
{/* Content here */}
</div>
```
**Key files to work with:**
1. Edit `app/content.tsx` to add HTML content
2. Build and verify: `npm run build`
3. Check prose styling renders correctly
4. Commit changes
1. Open `app/layout.tsx`
2. Modify the metadata object (title, description, etc.)
3. Rebuild to apply changes
1. Modify prose classes in `app/page.tsx`
2. Or update `tailwind.config.ts` for global typography changes
3. Rebuild and verify rendering
Since this project lacks automated tests:
1. **Manual verification** is required after all changes
2. **Build the static site** and inspect `out/` directory
3. **Test locally** by serving the `out/` directory
4. **Check** that all content renders correctly with proper styling
5. **Verify** responsive behavior on different screen sizes
1. Always rebuild after content changes
2. Use Tailwind utilities for consistency
3. Preserve the prose styling for readability
4. Test static output before deployment
5. Keep the content structure in a single file for simplicity
6. Follow Next.js static export best practices
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/french-disability-guide-static-site/raw