Frontend Design

Ce que fait ce skill

• Ouvre sur une courte question (souhaits/no-gos/références) ou annonce des défauts transparents
• Choisit une direction de design délibérée et distinctive et la justifie (anti-AI-slop)
• Génère des design tokens (couleur, typo, espacement, rayon) en variables CSS ou config Tailwind
• Produit du code sémantique prêt pour la production, avec navigation mobile et footer obligatoires
• Utilise motion, parallax subtil et glass cards de façon délibérée (lisibilité + fallback)
• Contrôle en continu WCAG 2.2 / MDN / web.dev et corrige les écarts
• Lance une QA par captures d'écran sur plusieurs breakpoints pour les pages entières et rend compte

Description

Frontend Design est un skill de design d’interface (UI) front-end — il crée des interfaces distinctives et prêtes pour la production au lieu d'un AI slop générique, tout en vérifiant en continu l'accessibilité web, le contraste des couleurs, le focus clavier, le décalage de mise en page (CLS) et la performance. Un design engineer dans un skill : il choisit une direction de design délibérée et distinctive au lieu du look IA générique (pas d’Inter/Roboto par défaut, pas de clichés de dégradé violet, pas de card-in-card), produit des design tokens réutilisables et du code prêt pour la production dans votre stack (HTML/CSS+Tailwind par défaut, React/Vue/Svelte sur demande) — tout en contrôlant les standards primaires (WCAG 2.2, MDN, web.dev) : a11y, focus, clavier, contraste, stabilité de mise en page (CLS), motion et performance, corrections incluses. En plus, un véritable processus de production : courte question de départ, motion délibérée, parallax subtil et glass cards avec règles de lisibilité strictes, navigation mobile et footer obligatoires, typographie sûre pour les mots longs — et une QA par captures d'écran sur plusieurs breakpoints (pas de débordement horizontal, pas de collisions de texte) comme validation dure. Beau, correct et pensé comme un produit fini.

Exemples

Ce qu’il ne fait pas

• Pas de « AI slop » générique (sauf demande explicite comme marque)
• Pas de logos/images/marques inventés — des placeholders dimensionnés plutôt que de faux assets
• Pas de backend, pas de connexion réelle aux données
• Pas de chiffres de performance mesurés (pour cela → Web Vitals)

Compatibilité & technique

Testé (interne)

3 scénarios

Runtime recommandé

Claude Opus ou Sonnet

Modes

Créer · Auto-audit & correction · QA par captures d'écran (plusieurs breakpoints)

Entrées

Brief/description · code UI existant · capture/référence

Format de sortie

Direction de design + tokens + code (HTML/CSS/Tailwind, React/Vue/Svelte) + rapport d’auto-contrôle

Sous-catégorie

UI & Design

Licence

Proprietär

Profil de sécurité

Contenu livré

• frontend-design-1.3.0/4 fichiers
  • .claude-plugin/marketplace.json
  • plugins/frontend-design/skills/frontend-design/4 fichiers

    • SKILL.md
    • manifest.json
    • references/2 fichiers

      • frontend-design-guidelines.md
      • frontend-design-production-rules.md
  • .agents/skills/frontend-design/→ universel — même contenu (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
  • LICENSE.txt

Installation

Aussi comme prompt de chat

Remarque

Idéalement avec du contexte : framework cible (React/Vue/Svelte ou HTML/CSS/Tailwind), marque/ton et éventuel design system ou tokens existants ; sans ces infos, le skill pose une courte question. L’auto-check intégré couvre contraste, focus, décalage de mise en page et performance, mais ne remplace pas un audit complet — pour cela → Web Vitals ou Docteur Web.

Journal des modifications

• v1.3.001.07.2026Processus de production, pas seulement une surface : courte question de départ (souhaits/no-gos/références), motion délibérée, parallax subtil et glass cards avec règles de lisibilité strictes, navigation mobile + footer obligatoires, typographie sûre en mise en page (mots longs activement testés) et QA par captures d'écran sur plusieurs breakpoints comme validation dure. Nouveau : les images de fond deviennent des placeholders propres et clairement étiquetés — une vraie image seulement si le runtime peut la générer (p. ex. ChatGPT ou une CLI avec génération d'images) ; les graphiques SVG/CSS simples sont dessinés directement. Nouvelle référence frontend-design-production-rules.md.
• v1.2.022.06.2026Sortie native à la plateforme : utilise désormais activement le formatage natif de votre plateforme — tableaux, listes de contrôle, blocs de code et options cliquables/boutons, avec repli numéroté sur les plateformes non interactives. Et des métadonnées internes qui préparent le futur constructeur d'agents.
• v1.1.018.06.2026Référentiel approfondi : formulaires (autocomplete/type/inputmode, labels, pas de blocage du collage), tactile & taille des cibles (WCAG 2.2 SC 2.5.8, touch-action, overscroll-behavior), mode sombre (color-scheme), hydratation/SSR, finitions typographiques, navigation/état — le tout fondé sur des sources primaires, rédigé avec nos propres mots.
• v1.0.018.06.2026Première version selon AUTHORING v2 : création guidée par le design avec contrôle qualité continu (WCAG 2.2/MDN/web.dev), discipline anti-AI-slop, design tokens, adaptatif au stack (Tailwind par défaut) ; rubrique references + évaluations internes ; exemples entrée/réponse réalistes.

Questions fréquentes