Design System Francais (DSFR)

Offizielle Dokumentation des französischen Regierungs-Designsystems: 23 Komponenten mit exakten fr-Klassennamen, RGAA 4.1 Barrierefreiheitsregeln und Copy-Paste-HTML.

von numerique-gouv · numerique-gouv/dsfr-skill

Funktioniert mit Setup ★ 8.4/10

Design System Francais (DSFR) — Offizielle Dokumentation des französischen Regierungs-Designsystems: 23 Komponenten mit exakten fr-Klassennamen, RGAA 4.1 Barrierefreiheitsregeln und Copy-Paste-HTML.

Was es kann

Bündelt synchronisierte Dokumentation (index/accessibilite/code/design.md + funktionierende HTML-Beispiele) für 23 DSFR-Komponenten, die auf französischen Regierungswebsites verwendet werden, damit Claude mit den exakten fr-*-Klassennamen, ARIA-Mustern und RGAA 4.1 Barrierefreiheitsanforderungen antworten kann, anstatt zu raten. Wird ausgelöst, wenn der Benutzer fragt, wie eine DSFR-Komponente implementiert wird, RGAA-Anleitungen benötigt oder eine französische Regierungswebsite erstellt.

Testbericht

Fragte nach barrierefreiem DSFR-Akkordeon-Markup: Der Skill zog die exakte offizielle Struktur (section.fr-accordion > h3.fr-accordion__title > button.fr-accordion__btn[aria-expanded][aria-controls] + div.fr-collapse) direkt aus seiner gebündelten code.md und accessibilite.md, die eine aus dem Gedächtnis generierte Antwort nicht korrekt reproduzieren kann; der Haken ist, dass die manuellen Git-Clone-Anweisungen in der README selbst veraltet sind und einen defekten (2 Ebenen zu tief, nicht auffindbaren) Skill-Ordner installieren würden.

Getestet am: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

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

Befehle & Beispiel-Prompts

  • /design-system-francais-dsfrOffizielle Dokumentation des französischen Regierungs-Designsystems: 23 Komponenten mit exakten fr-Klassennamen, RGAA 4.1 Barrierefreiheitsregeln und Copy-Paste-HTML.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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