Design System Francais (DSFR)

Offisielle franske myndigheters designsystem-dokumentasjon: 23 komponenter med nøyaktige fr- klassenavn, RGAA 4.1 a11y-regler og kopier-lim inn HTML.

av numerique-gouv · numerique-gouv/dsfr-skill

Krever oppsett ★ 8.4/10

Design System Francais (DSFR) — Offisielle franske myndigheters designsystem-dokumentasjon: 23 komponenter med nøyaktige fr- klassenavn, RGAA 4.1 a11y-regler og kopier-lim inn HTML.

Hva den gjør

Bundler synkronisert dokumentasjon (index/accessibilite/code/design.md + fungerende HTML-eksempler) for 23 DSFR-komponenter brukt på franske myndigheters nettsteder, slik at Claude kan svare med de nøyaktige fr-* klassenavnene, ARIA-mønsteret og RGAA 4.1 tilgjengelighetskravene i stedet for å gjette. Utløses når brukeren ber om å implementere en DSFR-komponent, trenger RGAA-veiledning, eller bygger et fransk myndighetsnettsted.

Testrapport

Ba om tilgjengelig DSFR trekkspill-markup: ferdigheten hentet den nøyaktige offisielle strukturen (section.fr-accordion > h3.fr-accordion__title > button.fr-accordion__btn[aria-expanded][aria-controls] + div.fr-collapse) rett fra sin vedlagte code.md og accessibilite.md, som et svar fra minnet ikke har noen måte å reprodusere korrekt; fangsten er at READMEs egne manuelle git-kloneinstruksjoner er utdaterte og ville installere en ødelagt (2 nivåer for dyp, uoppdagelig) ferdighetsmappe.

Testet på: 2026-07-16 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

  • /design-system-francais-dsfrOffisielle franske myndigheters designsystem-dokumentasjon: 23 komponenter med nøyaktige fr- klassenavn, RGAA 4.1 a11y-regler og kopier-lim inn HTML.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • Donne-moi le HTML accessible d'un accordeon DSFR conforme RGAA
  • Comment coder un composant DSFR avec les bonnes classes fr- ?
  • Je construis un site gouvernemental, aide-moi avec le DSFR