Design System Francais (DSFR)

Documentación oficial del sistema de diseño del gobierno francés (DSFR): 23 componentes con nombres de clase fr- exactos, reglas de accesibilidad RGAA 4.1 y HTML para copiar y pegar.

Por numerique-gouv · numerique-gouv/dsfr-skill

Funciona con configuración ★ 8.4/10

Design System Francais (DSFR) — Documentación oficial del sistema de diseño del gobierno francés (DSFR): 23 componentes con nombres de clase fr- exactos, reglas de accesibilidad RGAA 4.1 y HTML para copiar y pegar.

Qué hace

Agrupa documentación sincronizada (index/accessibilite/code/design.md + ejemplos HTML funcionales) para 23 componentes DSFR utilizados en sitios web del gobierno francés, para que Claude pueda responder con los nombres de clase fr-* exactos, el patrón ARIA y los requisitos de accesibilidad RGAA 4.1 en lugar de adivinar. Se activa cuando el usuario solicita implementar un componente DSFR, necesita orientación RGAA o está construyendo un sitio web del gobierno francés.

Informe de la prueba

Se solicitó marcado de acordeón DSFR accesible: el skill extrajo la estructura oficial exacta (section.fr-accordion > h3.fr-accordion__title > button.fr-accordion__btn[aria-expanded][aria-controls] + div.fr-collapse) directamente de su code.md y accessibilite.md incluidos, que una respuesta de memoria no puede reproducir correctamente; la trampa es que las instrucciones manuales de git-clone del propio README están desactualizadas e instalarían una carpeta de skill rota (2 niveles demasiado profunda, indetectable).

Probado el: 2026-07-16 · Claude Code 2.x (agent harness)

Instalación

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

Comandos y prompts de ejemplo

/design-system-francais-dsfrDocumentación oficial del sistema de diseño del gobierno francés (DSFR): 23 componentes con nombres de clase fr- exactos, reglas de accesibilidad RGAA 4.1 y HTML para copiar y pegar.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →