Design System Francais (DSFR)
Officiële Franse overheid design-system docs: 23 componenten met exacte fr- class namen, RGAA 4.1 a11y regels en copy-paste HTML.
Werkt met setup
Wat het doet
Bundelt gesynchroniseerde documentatie (index/accessibilite/code/design.md + werkende HTML voorbeelden) voor 23 DSFR componenten gebruikt op Franse overheidswebsites, zodat Claude kan antwoorden met de exacte fr-* class namen, ARIA patroon en RGAA 4.1 toegankelijkheidsvereisten in plaats van te gokken. Triggers wanneer de gebruiker vraagt om een DSFR component te implementeren, RGAA begeleiding nodig heeft, of een Franse overheidswebsite bouwt.
Testrapport
Vroeg om toegankelijke DSFR accordion markup: de skill haalde de exacte officiële structuur (section.fr-accordion > h3.fr-accordion__title > button.fr-accordion__btn[aria-expanded][aria-controls] + div.fr-collapse) rechtstreeks uit zijn gebundelde code.md en accessibilite.md, wat een uit-het-hoofd antwoord niet correct kan reproduceren; de vangst is dat de README's eigen handmatige git-clone instructies verouderd zijn en een kapotte (2 niveaus te diep, onvindbare) skill map zouden installeren.
Getest op: 2026-07-16 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/numerique-gouv/dsfr-skill.git mkdir -p ~/.claude/skills cp -r dsfr-skill/skills/dsfr-skill ~/.claude/skills/design-system-francais-dsfr
Commando's en voorbeeldprompts
/design-system-francais-dsfrOfficiële Franse overheid design-system docs: 23 componenten met exacte fr- class namen, RGAA 4.1 a11y regels en copy-paste HTML.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
Donne-moi le HTML accessible d'un accordeon DSFR conforme RGAAComment coder un composant DSFR avec les bonnes classes fr- ?Je construis un site gouvernemental, aide-moi avec le DSFR