Vite Fait, Bien Fait
In productionA digital almanac guiding vulnerable users through French administrative procedures.
- Next.js 15
- TypeScript
- Tailwind v4
- shadcn/ui
- MDX
- Zod
- Vitest
- Playwright
- Pa11y CI
- Vercel
Vite Fait, Bien Fait helps people facing administrative vulnerability — disability, financial precariousness, small-structure founders — by telling them exactly what to do, with which agency, which documents to provide and which letter to send, based on their case and where they live (v1: Île-de-France).
The problem
French institutional sites aren't built for vulnerable users: information is scattered, the wording is bureaucratic, and the journey is unintelligible. Corporate guides target professionals or companies — nobody makes the effort for people with disabilities, in financial trouble, or starting a small structure.
Brand promise: Vite (straight to the point, no fluff), Bien fait (accurate info, verified contacts, compliant letters), friendly without being pally (calm, factual tone).
The solution
A practical almanac kept by « someone who knows the system ». The user enters their postcode and their case, the site outputs a localized path: decision tree, procedure sheets with steps, local agencies to contact, CERFA forms to fill, and ready-to-send template letters.
Content is Git-versioned in MDX with Zod validation at build time — every procedure, letter, and local contact goes through PR review before publication.
Shipped
- 3 decision trees (disability / precariousness / small-structure)
- Procedure sheets with steps, contacts and CERFA links
- Template letters with HTML/PDF export
- Geographic filter postcode → city → department → region (IDF v1)
- Admin mode with on-demand rebuild
- WCAG 2.2 AA + Pa11y CI
- Administrative acronym glossary with ARIA tooltips
- Plausible analytics (cookie-free)
- Dark mode + sticky TOC + Cmd-K searchwip
AI process
The project was built with Claude Code, following the « 1 PR = 1 session » convention to avoid context drift on long cycles. The visual redesign was driven by Claude Design: a short brief produced in one pass a full design system (light/dark palette WCAG AAA, 3 type families, 8 component sections), then executed in 4 phased PRs with Lighthouse + Pa11y gates.
Detailed write-up on Claude Design in the best-practices-ia/claude-design article.
- Claude Code (Anthropic)
- Claude Design (Anthropic)
- Superpowers (Jesse Vincent)