---
name: utd-webcomponents
description: >
Générer du HTML valide utilisant les composants web UTD (utd-webcomponents) du MESS/MTESSDev.
Déclencher dès que la conversation implique des balises utd-*, la librairie utd-webcomponents,
les gabarits PIV gouvernementaux du Québec, ou toute interface web MESS utilisant ce système de
design. Inclut les règles d'interfaces gouvernementales, la structure de page requise,
tous les composants disponibles et leur API complète.
compatibility: "Tout projet web — HTML vanilla, Vue 3, Blazor, Razor Pages, Angular"
---
# UTD Web Components — SKILL
## Objectif
Produire du HTML correct, accessible et conforme au système de design gouvernemental du Québec
en utilisant les composants web UTD du MESS.
**Lire les fichiers de référence** avant de générer du code pour un composant spécifique :
| Besoin | Fichier de référence |
|--------|----------------------|
| Gabarits de page (1 col, 2 col, pleine largeur), PIV entête/pied | `references/gabarits.md` |
| Formulaires : champs, listes déroulantes, cases à cocher, boutons radio, commutateur | `references/composants-formulaire.md` |
| Navigation : menus vertical/horizontal, onglets, accordéon, section, fil d'Ariane | `references/composants-navigation.md` |
| Feedback : avis, message, notification, dialogue modal, alerte générale | `references/composants-feedback.md` |
| API JavaScript : utd.message, utd.notification, utd.dialogue, utd.ajusterAccessibiliteLiens | `references/api-javascript.md` |
---
## Règles universelles
### 1 — Intégration des fichiers (à charger dans chaque page)
**Option A — CDN (utilisateurs avec accès Internet)**
```html
```
**Option B — Copie locale (environnements sans accès Internet, recommandé pour intranet/IIS)**
```html
```
> **Note déploiement IIS** : La structure du dossier `dist` doit être respectée. Télécharger
> depuis [les releases GitHub](https://github.com/MTESSDev/utd-webcomponents/releases).
### 2 — Structure HTML obligatoire
- Toujours `lang="fr"` sur ``.
- `
` encadre tout le contenu (header + main) — garantit le pied de page en bas.
- `` est requis — le lien "Passer au contenu" du PIV pointe vers `#main`.
- `utd-hautpage` se place juste avant le `