Design System Francais (DSFR)
Documentazione ufficiale del design system del governo francese: 23 componenti con nomi di classe fr- esatti, regole di accessibilità RGAA 4.1 e HTML copia-incolla.
Richiede configurazione
Cosa fa
Raccoglie documentazione sincronizzata (index/accessibilite/code/design.md + esempi HTML funzionanti) per 23 componenti DSFR utilizzati sui siti web del governo francese, in modo che Claude possa rispondere con i nomi di classe fr-* esatti, il pattern ARIA e i requisiti di accessibilità RGAA 4.1 invece di indovinare. Si attiva quando l'utente chiede di implementare un componente DSFR, necessita di guida RGAA o sta costruendo un sito del governo francese.
Rapporto di test
Chiesto markup fisarmonica DSFR accessibile: la skill ha estratto la struttura ufficiale esatta (section.fr-accordion > h3.fr-accordion__title > button.fr-accordion__btn[aria-expanded][aria-controls] + div.fr-collapse) direttamente dal suo code.md e accessibilite.md allegati, che una risposta dalla memoria non può riprodurre correttamente; il problema è che le istruzioni manuali di git-clone del README sono obsolete e installerebbero una cartella skill rotta (troppo profonda di 2 livelli, non scopribile).
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
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
Comandi e prompt di esempio
/design-system-francais-dsfrDocumentazione ufficiale del design system del governo francese: 23 componenti con nomi di classe fr- esatti, regole di accessibilità RGAA 4.1 e HTML copia-incolla.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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