Baseline UI

Checklist opinionnée Tailwind/React MUST-NEVER contre le 'slop' d'interface utilisateur généré par l'IA.

par master5d · master5d/claude-design-skills

Testé · Fonctionne ★ 9.6/10

Baseline UI — Checklist opinionnée Tailwind/React MUST-NEVER contre le 'slop' d'interface utilisateur généré par l'IA.

Ce que fait

Une liste de règles (pas un script) qui applique les conventions Tailwind CSS + motion/react : plafonds de durée d'animation, propriétés d'animation uniquement pour le compositeur, primitives accessibles, aria-labels sur les boutons d'icônes, AlertDialog pour les actions destructrices, et motifs interdits comme les dégradés, h-screen, et le collage bloqué. Se déclenche lors de la construction ou de la révision de composants d'interface utilisateur React/Tailwind.

Rapport de test

Exécuté contre un composant de carte Tailwind délibérément désordonné : la compétence a détecté 8 violations citées par les règles (dégradé violet, h-screen, aria-label manquant sur un bouton d'icône, une transition largeur/hauteur de 400ms, collage bloqué, tracking-widest injustifié, pas d'AlertDialog sur une action destructive) chacune avec une correction exacte, contre une révision générique qui n'en a signalé que 4 vaguement.

Testé le: 2026-07-16 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/master5d/claude-design-skills
mkdir -p ~/.claude/skills
cp -r claude-design-skills/skills/baseline-ui ~/.claude/skills/baseline-ui

Commandes et exemples de prompts

/baseline-uiChecklist opinionnée Tailwind/React MUST-NEVER contre le 'slop' d'interface utilisateur généré par l'IA.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

Review this React component against our Tailwind must-never rules
Check this UI for banned gradients, missing aria-labels, and h-screen
Does this destructive delete button need an AlertDialog confirmation?

Rapport complet →