Skill Composants DSFR

Générez rapidement des interfaces web conformes au Design System de l'État Français.

Vue d'ensemble

Ce skill fournit tout le nécessaire pour créer des sites web gouvernementaux français :

• Générateur de composants DSFR (boutons, alertes, formulaires, etc.)
• Générateur de pages complètes (landing, formulaire, tableau de bord)
• Documentation complète des composants et classes utilitaires
• Templates HTML prêts à l'emploi

Utilisation rapide

Générer une page complète

python3 scripts/generate_page.py --type landing --title "Mon Service Public" --output page.html

Générer un composant

python3 scripts/generate_component.py button --config '{"variant": "primary", "size": "lg"}'

Workflow recommandé

1. Création d'une nouvelle page

Commencer par générer une page de base :

python3 scripts/generate_page.py --type [standard|landing|form|dashboard] --output index.html

2. Ajout de composants

Utiliser le générateur de composants pour créer les éléments nécessaires :

# Bouton
python3 scripts/generate_component.py button --config '{"variant": "secondary"}'

# Alerte
python3 scripts/generate_component.py alert --config '{"type": "info", "title": "Information"}'

# Carte
python3 scripts/generate_component.py card --config '{"title": "Ma carte", "description": "Description"}'

3. Personnalisation

• Copier le template de base depuis assets/template-base.html
• Intégrer les composants générés
• Ajuster les classes utilitaires selon les besoins

Composants disponibles

Composants de base

• Boutons : Primaire, secondaire, tertiaire, avec icônes
• Alertes : Info, succès, avertissement, erreur
• Badges : Statuts et étiquettes colorées
• Cartes : Présentation de contenu avec image optionnelle

Navigation

• Fil d'Ariane : Navigation hiérarchique
• Menu : Navigation principale et secondaire
• Pagination : Navigation entre pages
• Onglets : Organisation du contenu

Formulaires

• Champs de saisie : Texte, email, mot de passe, etc.
• Cases à cocher : Sélection multiple
• Boutons radio : Sélection unique
• Sélecteurs : Listes déroulantes

Affichage de données

• Tableaux : Présentation structurée de données
• Accordéons : Contenu repliable
• Modales : Fenêtres de dialogue

Classes utilitaires principales

Grille responsive

• fr-container : Container principal
• fr-grid-row : Ligne de grille
• fr-col-* : Colonnes (1-12)
• fr-col-md-* : Colonnes medium (≥768px)
• fr-col-lg-* : Colonnes large (≥992px)

Espacements

• fr-mt-* : Marge top (1w = 0.5rem, 2w = 1rem, etc.)
• fr-mb-* : Marge bottom
• fr-py-* : Padding vertical
• fr-px-* : Padding horizontal

Typographie

• fr-text--lg : Texte large
• fr-text--bold : Texte gras
• fr-text--lead : Texte d'introduction

Options des scripts

generate_page.py

• --type : Type de page (standard, landing, form, dashboard)
• --title : Titre de la page
• --content : Contenu HTML personnalisé
• --dark : Mode sombre
• --no-header : Sans en-tête
• --no-footer : Sans pied de page
• --output : Fichier de sortie

generate_component.py

• component : Type de composant à générer
• --config : Configuration JSON du composant

Documentation de référence

Composants détaillés

Voir references/components.md pour :

• Syntaxe HTML complète de chaque composant
• Variantes et modificateurs disponibles
• Exemples d'utilisation avancée

Classes utilitaires

Voir references/utilities.md pour :

• Système de grille complet
• Classes d'espacement
• Modificateurs typographiques
• Classes de couleur
• Helpers d'accessibilité

Ressources officielles

• Documentation DSFR
• Storybook des composants
• GitHub du DSFR

Conformité et accessibilité

Tous les composants générés respectent :

• Les standards WCAG 2.1 niveau AA
• Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité)
• Les bonnes pratiques du W3C
• La charte graphique de l'État français