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

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