Utiliser le DSBJ avec l'IA

Le DSBJ est conçu pour fonctionner avec les assistants IA et les modèles de langage (LLM). Cette page fournit les fichiers, règles et configurations nécessaires pour que l'IA génère du code conforme au Design Système du Bénin.

Fichier llms.txt

Le fichier llms.txt suit le standard llmstxt.org. Il fournit un résumé structuré du design système que les LLM peuvent consommer pour comprendre les composants, les classes CSS et les règles d'accessibilité du DSBJ.

Deux versions disponibles

llms.txt : résumé concis avec liens vers chaque page de documentation.
llms-full.txt : documentation complète avec markup d'exemple pour chaque composant (~40 Ko).

Copiez l'URL du fichier et collez-la dans votre assistant IA favori pour lui donner le contexte du DSBJ :

https://dsbj.site/llms.txt

Ou pour la version complète avec tous les exemples de markup :

https://dsbj.site/llms-full.txt

Règles pour éditeurs IA

Ajoutez ces règles dans votre éditeur (Cursor, Windsurf, etc.) pour que l'IA respecte automatiquement les conventions du DSBJ. Créez un dossier .cursor/rules/ à la racine de votre projet et copiez-y les fichiers suivants.

Conventions générales

Fichier : .cursor/rules/dsbj-general.mdc

---
description: Conventions générales du Design Système du Bénin (DSBJ)
globs: ["**/*.html", "**/*.scss", "**/*.ts", "**/*.css"]
---

# DSBJ - Conventions générales

## Préfixe CSS
- Toutes les classes CSS utilisent le préfixe `bj-` (ex: `bj-btn`, `bj-card`)
- Toutes les variables CSS utilisent `--bj-*` (ex: `--bj-spacing-4v`, `--bj-color-vert-benin-main-491`)
- Les composants suivent la convention BEM : `bj-composant`, `bj-composant__element`, `bj-composant--modifier`

## Structure des composants
- Styles SCSS : `src/component/<name>/style/_<name>.scss`
- JavaScript : `src/js/<name>.ts` (utilise `register()` de `src/js/core.ts`)
- Documentation : `docs/composants/<name>.html`

## Attributs data
- Les hooks JavaScript utilisent `data-bj-*` (ex: `data-bj-accordion-btn`, `data-bj-modal-open`)
- L'état ouvert/actif est marqué par `data-bj-expanded`

## Polices et icônes
- Corps : Montserrat (400, 500, 600, 700)
- Titres éditoriaux : Spectral (400, 600)
- Icônes : Remix Icon 4.1 (`ri-*`), toujours avec `aria-hidden="true"` quand décoratives

## Package
- Installer avec `bun add @flrxnt/dsbj`
- Import : `import '@flrxnt/dsbj'` (auto-init JS + CSS)
- CSS seul : `import '@flrxnt/dsbj/css'`
- SCSS : `@use '@flrxnt/dsbj/scss'`

Accessibilité

Fichier : .cursor/rules/dsbj-accessibility.mdc

---
description: Règles d'accessibilité WCAG 2.1 AA pour le DSBJ
globs: ["**/*.html", "**/*.ts"]
---

# DSBJ - Accessibilité (WCAG 2.1 AA)

## Règles obligatoires
- Un seul `<h1>` par page, hiérarchie de titres stricte (h1 > h2 > h3, pas de saut)
- Skip links en début de page : `<div class="bj-skiplinks"><a class="bj-skiplink" href="#main">Accéder au contenu</a></div>`
- Attribut `lang="fr"` sur `<html>`, cohérent avec le contenu visible
- Alt text sur toutes les images (`alt=""` si purement décorative)
- Contraste minimum AA (4.5:1 texte normal, 3:1 grand texte)

## Composants interactifs
- `aria-expanded` + `aria-controls` sur les boutons qui ouvrent/ferment (accordéon, menu, dropdown)
- `aria-hidden="true"` sur les icônes décoratives (`<i class="ri-*">`)
- `aria-label` sur les boutons sans texte visible (boutons icône)
- `role="dialog"` + `aria-modal="true"` + `aria-labelledby` sur les modales
- `role="tablist"`, `role="tab"`, `role="tabpanel"` + `aria-selected` sur les onglets
- `role="alert"` sur les alertes dynamiques injectées
- `aria-current="page"` sur le lien actif dans la navigation et le breadcrumb

## Formulaires
- Chaque champ a un `<label>` avec `for` pointant vers l'`id` du champ
- Erreurs liées via `aria-describedby` + `aria-invalid="true"`
- Focus visible avec `:focus-visible` (jamais supprimer l'outline)

## Navigation clavier
- `focusTrap` de core.ts pour les overlays (modale, galerie)
- Tous les éléments interactifs accessibles au Tab
- Échap ferme les modales et dropdowns

SEO

Fichier : .cursor/rules/dsbj-seo.mdc

---
description: Règles SEO pour les pages utilisant le DSBJ
globs: ["**/*.html"]
---

# DSBJ - SEO

## Head obligatoire
- `<title>` structuré : "Page - Section - DSBJ" ou "Page - Mon service - République du Bénin"
- `<meta name="description">` unique par page (150-160 caractères)
- `<link rel="canonical">` avec URL absolue
- `<meta name="theme-color" content="#008751">`

## Open Graph
- `og:title`, `og:description`, `og:type` (website), `og:url`, `og:locale` (fr_BJ)
- `og:image` avec image de partage (1200x630px recommandé)

## Twitter Card
- `twitter:card` (summary_large_image), `twitter:title`, `twitter:description`

## Structure sémantique
- `<header role="banner">`, `<main id="main" role="main">`, `<footer role="contentinfo">`
- `<nav>` avec `aria-label` pour chaque bloc de navigation
- Breadcrumb dans un `<nav aria-label="Fil d'Ariane">` avec `<ol>`

## Données structurées
- JSON-LD WebSite + Organization sur la page d'accueil
- JSON-LD BreadcrumbList sur les pages intérieures

Serveur MCP

Le DSBJ fournit un serveur MCP (Model Context Protocol) qui permet aux assistants IA d'accéder directement à la documentation des composants, de générer du markup accessible et de vérifier la conformité de votre code.

Installation

cd mcp && bun install

Configuration Cursor

Fichier : .cursor/mcp.json

{
  "mcpServers": {
    "dsbj": {
      "command": "bun",
      "args": ["run", "mcp/src/index.ts"]
    }
  }
}

Outils disponibles (8)

Outil	Description
`list-components`	Liste les 53 composants groupés par catégorie
`get-component`	Documentation complète d'un composant : classes CSS, ARIA, markup
`search-components`	Recherche par mot-clé dans les noms, descriptions et classes CSS
`list-foundations`	Liste les fondamentaux (couleurs, typo, grille, etc.)
`get-foundation`	Documentation d'un fondamental avec variables CSS et exemples
`get-design-tokens`	Retourne tous les design tokens (variables CSS) groupés par catégorie
`generate-markup`	Génère du HTML accessible pour un composant donné
`check-accessibility`	Valide un snippet HTML contre les règles d'accessibilité DSBJ

Ressources exposées

Le serveur MCP expose également des ressources que l'IA peut lire directement pour obtenir le contexte complet du DSBJ :

URI	Description
`dsbj://docs/llms.txt`	Résumé structuré du design système (standard llmstxt.org)
`dsbj://docs/llms-full.txt`	Documentation complète avec markup pour chaque composant
`dsbj://components/{slug}`	Documentation d'un composant par son slug
`dsbj://foundations/{slug}`	Documentation d'un fondamental par son slug

Prompts pré-construits

Le serveur fournit des prompts prêts à l'emploi que l'assistant IA peut utiliser directement :

Prompt	Description	Paramètres
`page-gouvernementale`	Génère une page d'accueil de service public	-
`formulaire-accessible`	Génère un formulaire accessible	`purpose`
`composant-dsbj`	Génère l'intégration d'un composant spécifique	`componentName`

Exemples de prompts

Voici des prompts prêts à l'emploi pour générer du code DSBJ-conforme avec votre assistant IA. Copiez-les et adaptez-les à votre besoin.

Page d'accueil gouvernementale

En utilisant le Design Système du Bénin (DSBJ), génère une page d'accueil pour un portail de service public. La page doit inclure :
- Le header institutionnel (bj-header) avec logo République du Bénin et navigation
- Un hero avec titre et bouton d'action
- Une grille de 4 tuiles (bj-tile) pour les services principaux
- Un pied de page (bj-footer) avec mentions légales
- Skip links d'accessibilité
Utilise les classes bj-* et les variables CSS --bj-*. Respecte WCAG 2.1 AA.

Formulaire de contact

Crée un formulaire de contact accessible avec le DSBJ :
- bj-input-group pour nom, email, sujet
- bj-select-group pour le département
- Textarea pour le message
- bj-checkbox pour l'acceptation des CGU
- bj-btn pour la soumission
- Messages d'erreur avec bj-message--error et aria-describedby
- Validation côté client avec aria-invalid="true" sur les champs en erreur

Dashboard avec onglets

Génère un dashboard administratif avec le DSBJ :
- Breadcrumb (bj-breadcrumb) en haut
- Onglets (data-bj-tabs) avec 3 panneaux : Vue d'ensemble, Statistiques, Paramètres
- Dans chaque panneau : des cartes (bj-card) et un tableau (bj-table) avec données
- Une modale (bj-modal) de confirmation pour les actions destructives
- Alerte de succès (bj-alert--success) après validation
Assure-toi que les rôles ARIA sont corrects sur les onglets et la modale.

Contexte LLM complet

Tu es un développeur front-end spécialisé dans le Design Système du Bénin (DSBJ).
Voici la documentation complète : https://dsbj.site/llms-full.txt

Règles :
- Utilise uniquement les classes bj-* et variables --bj-*
- Respecte WCAG 2.1 AA (ARIA, focus, contraste, hiérarchie des titres)
- Un seul h1 par page, skip links obligatoires
- Icônes décoratives : aria-hidden="true"
- Composants interactifs : aria-expanded, aria-controls, aria-label
- Polices : Montserrat (corps) + Spectral (titres éditoriaux)
- Icônes : Remix Icon (ri-*)