Maîtrise de l'UI Frontend

## Aperçu

Maîtrise de l'UI Frontend regroupe trois compétences frontend de qualité production — **frontend-accessibility**, **frontend-components** et **frontend-responsive** — en un seul plugin. Ensemble, ils couvrent le cycle de vie complet de l'UI : créer des composants composables, les rendre accessibles à tous les utilisateurs et les adapter parfaitement à tous les appareils. Un seul auteur, des conventions cohérentes entre React, Vue et Svelte.

## Démarrage Rapide

1. Installez le plugin dans votre espace de travail OpenClaw.
2. Lors de la création d'une nouvelle UI, invitez **frontend-components** pour définir des composants réutilisables à responsabilité unique avec des props clairs et un état local minimal.
3. Superposez **frontend-accessibility** pour le HTML sémantique, ARIA, la navigation au clavier, la gestion du focus et le contraste des couleurs — puis lancez une vérification avec un lecteur d'écran pour confirmer la conformité WCAG.
4. Terminez avec **frontend-responsive** pour appliquer des breakpoints mobile-first, des conteneurs fluides et un dimensionnement adapté au toucher afin que les mêmes composants s'adaptent du téléphone au bureau.
## Commandes Principales

- `frontend-components` — Concevez des composants React/Vue/Svelte composables avec des interfaces claires et une encapsulation appropriée.
- `frontend-accessibility` — Auditez et corrigez le HTML sémantique, ARIA, la navigation clavier et la compatibilité lecteur d'écran pour la conformité WCAG.
- `frontend-responsive` — Construisez des mises en page responsives mobile-first avec requêtes média, unités relatives et breakpoints standards.
## Conseils

- Construisez d'abord la base du composant (`frontend-components`), puis lancez immédiatement une vérification d'accessibilité (`frontend-accessibility`) avant d'ajouter les styles responsives — corriger l'accessibilité après coup est bien plus coûteux que de l'intégrer dès le départ.
- Associez `frontend-responsive` à un test sur appareil réel (ou émulation d'appareil DevTools à `375px`, `768px`, `1280px`) pour détecter les problèmes de cibles tactiles et de reflow que les layouts desktop-first négligent.
- Combinez avec un plugin backend ou DB pour livrer une tranche verticale complète : le plugin UI gère la couche utilisateur de bout en bout.