baseline-uipar Julien Thibeaut

Baseline UI Skill.

Un skill Claude Code et Codex pour la revue de design : corrige rapidement le code UI en ajustant les espacements, la hiérarchie, la typographie et les petits problèmes de mise en page.

Revue de conception et accessibilité
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md

--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography

En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 3 417 caractères au total

01 Ce qu'il fait

Ce que fait le skill baseline-ui dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Baseline UI est un skill de revue qui impose une base d'UI tranchée pour stopper le désordre d'interfaces généré par IA dans une base de code. Il vise les projets Tailwind CSS utilisant des primitives React, et s'installe soit comme un ensemble de contraintes permanentes sur tout travail d'UI dans la conversation, soit comme une passe de revue au niveau des fichiers.

Ce qui le rend spécifique, c'est le vocabulaire : il nomme précisément les utilitaires et props à utiliser ou à éviter, de h-dvh plutôt que h-screen et text-balance pour les titres, à l'animation compositor-only limitée à 200ms et l'absence de valeurs z-index arbitraires. Utilisez-le quand l'interface a besoin d'un nettoyage rapide ou d'une passe de polish.

Ce qu'il produit

Une explication en une phrase de l'importance de chaque violation.
Un correctif concret, au niveau du code, pour chaque constat.

Voir l'exemple de prompt ↗

Fonctionnement

01
Invoquez-le comme un ensemble de contraintes valable pour toute la conversation
Exécuter la commande brute applique toutes les contraintes de ce fichier à tout travail d'interface effectué dans cette conversation, pas seulement à un fichier.
02
Ou pointez-le vers un seul fichier
Passer une cible de fichier fait basculer le skill en mode revue, en vérifiant ce fichier par rapport à toutes les contraintes listées ci-dessous.
03
Retourne un rapport de violation en trois parties
Chaque constat cite l'extrait fautif, donne une courte phrase expliquant pourquoi c'est important, et propose un correctif au niveau du code.
04
Parcourez les groupes de contraintes dans l'ordre
Le fichier organise ses règles en Stack, Components, Interaction, Animation, Typography, Layout, Performance et Design, chacun mélangeant des éléments MUST, SHOULD et NEVER.

02 Trouvez celui qui vous convient

Quand utiliser le skill baseline-ui

Utilisez le skill baseline-ui dans Claude Code ou Codex quand le travail consiste en une revue de design de ce type. L'usage et les limites ci-dessous sont tirés du fichier du skill lui-même.

Bon choix

Un nettoyage rapide ou une passe de finition sur une interface qui s'est écartée d'une base cohérente.
Revue d'un fichier spécifique pour les problèmes d'espacement, de hiérarchie, de typographie et de petits problèmes de mise en page.

Connaître les limites

Un travail de design qui dépend de dégradés, de courbes d'accélération personnalisées ou d'un espacement des lettres personnalisé, tous soumis à une demande explicite.
Créer manuellement un comportement de clavier ou de focus, ce qui n'est pas autorisé sauf demande explicite.

Quoi fournir

Un fichier à revoirFacultatif. Nommer un fichier transforme le skill en une passe de revue qui signale les violations pour ce fichier uniquement.

03 Dans le skill

Règles que le skill baseline-ui donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Restez sur les valeurs par défaut de Tailwind CSS
Les valeurs personnalisées ne sont acceptables que si elles existent déjà dans le projet ou ont été explicitement demandées ; sinon l'agent doit utiliser les valeurs par défaut de Tailwind.
Pas d'animation sauf demande explicite
L'animation est désactivée par défaut. Lorsqu'elle est explicitement demandée, seules les propriétés du compositeur peuvent être animées, jamais width, height, top, left, margin ou padding.
Limitez le retour d'interaction à 200ms
Les entrées doivent utiliser ease-out, les animations en boucle doivent se mettre en pause hors écran, et prefers-reduced-motion doit être respecté.
Ne jamais mélanger les systèmes de primitives
Tout élément ayant un comportement de clavier ou de focus nécessite une primitive accessible de Base UI, React Aria ou Radix ; les primitives existantes du projet passent avant, et reconstruire manuellement le comportement de clavier ou de focus est interdit sauf demande explicite.
Utilisez h-dvh, jamais h-screen
La section interaction exige également que les éléments fixes respectent le safe-area-inset et que les erreurs soient affichées à proximité de l'endroit où l'action se produit.
Utiliser une échelle de z-index fixe
Les valeurs z- arbitraires ne sont pas autorisées, et les éléments carrés doivent utiliser size- plutôt que les utilitaires w- et h- combinés.
Garder les utilitaires typographiques littéraux
text-balance pour les titres, text-pretty pour le corps de texte, tabular-nums pour les données, et letter-spacing ne doit pas être modifié sans demande explicite.
Pas de dégradés ni de glow par défaut
Les dégradés nécessitent une demande explicite, les dégradés violets et multicolores sont entièrement exclus, et les effets de glow ne peuvent pas servir d'affordance principale.

04 Mettez-le en pratique

Installer baseline-ui dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter baseline-ui à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

Forme générique de la CLI skills pour skills/baseline-ui/SKILL.md; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de révision de conception

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Confirmer qu'aucune propriété animée ne se trouve hors de transform et opacity.
Confirmer que les boutons icône seule portent un aria-label et que les actions destructrices se trouvent derrière un AlertDialog.

Dans OpenDesign importez baseline-ui depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills Branche main
Fichier du skill: skills/baseline-ui/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 79081ab
License: MIT Depuis LICENSE.
Étoiles du dépôt: 8 402 Instantané GitHub pris le 14 sept. 2026 pour l'ensemble du dépôt ibelick/ui-skills, qui contient 5 skills dans ce catalogue. Il ne s'agit pas d'une note ni d'un compteur d'utilisation pour baseline-ui.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Comment l'utiliserDeux modes d'invocation : la commande seule applique les contraintes, un argument de fichier déclenche un rapport de violations.
StackValeurs par défaut de Tailwind CSS, motion/react pour l'animation JS, tw-animate-css, et l'utilitaire cn.
ComposantsUniquement des primitives accessibles, priorité aux primitives existantes du projet, aria-label sur les boutons icône seule.
InteractionAlertDialog pour les actions destructrices, skeletons pour le chargement, h-dvh, safe-area-inset, pas de collage bloqué.
AnimationAucune animation sans demande ; propriétés du compositeur uniquement, ease-out, plafond de 200ms, reduced-motion respecté.
Typographietext-balance sur les titres, text-pretty sur le corps de texte, tabular-nums pour les données, aucun changement de tracking.
LayoutÉchelle de z-index fixe plutôt que des valeurs arbitraires, size-* pour les éléments carrés.
PerformanceÉviter les animations de blur important ou de backdrop-filter, limiter la portée de will-change, préférer la logique de rendu à useEffect.
DesignPas d'affordances en dégradé ou en glow, échelle d'ombre par défaut, une seule couleur d'accent, réutilisation des tokens existants.

Description du skill lui-même

« Corrigez rapidement le code UI en réparant l'espacement, la hiérarchie, la typographie et les petits problèmes de mise en page. Utilisez cette compétence lorsque l'interface nécessite un nettoyage rapide ou une passe de polissage. »

Description du front-matter de SKILL.md. Le fichier complet fait environ 3 417 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill baseline-ui

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quel stack suppose-t-il ?

Les valeurs par défaut de Tailwind CSS, motion/react (anciennement framer-motion) lorsqu'une animation JavaScript est requise, tw-animate-css pour les animations d'entrée et micro-animations, et l'utilitaire cn construit à partir de clsx et tailwind-merge.

Va-t-il ajouter des animations ou des dégradés pour rendre les choses plus attrayantes ?

Non. Aucune animation n'est jamais ajoutée sans demande explicite, et les gradients ne sont pas utilisés sans demande explicite. Les gradients violets et multicolores sont exclus entièrement.

Quelles bibliothèques de composants autorise-t-il ?

Base UI, React Aria ou Radix pour tout ce qui implique un comportement de clavier ou de focus, en privilégiant les primitives existantes du projet. Base UI est le choix recommandé pour les nouvelles primitives s'il est compatible avec la stack, et le mélange de systèmes de primitives sur une même surface d'interaction n'est pas autorisé.

Baseline UI

Exécutez baseline-ui sur une vraie tâche de revue de design.

Téléchargez OpenDesign, importez baseline-ui depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills