Vai alla guida all’uso
baseline-uidi Julien Thibeaut

Baseline UI Skill.

Una skill per Claude Code e Codex per la revisione del design: corregge rapidamente il codice UI eliminando problemi di spaziatura, gerarchia, tipografia e layout minori.

  • Design Review & Accessibility
  • Codice UI
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
Intestazione e sezioni lette dal file originale il 2026-09-14 · 3.417 caratteri in totale

01 Cosa fa

Cosa fa la skill baseline-ui in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Baseline UI è una skill di revisione che applica una baseline UI opinionata per fermare l'interfaccia "slop" generata dall'IA in una codebase. È pensata per progetti Tailwind CSS che utilizzano primitive React, e si installa come un insieme permanente di vincoli su qualsiasi lavoro UI nella conversazione, oppure come passaggio di revisione a livello di file.

Ciò che la rende specifica è il vocabolario: nomina le utility e le prop esatte da usare o evitare, da h-dvh al posto di h-screen e text-balance per le intestazioni, all'animazione solo tramite compositor limitata a 200ms e nessun valore z-index arbitrario. Usala quando l'interfaccia richiede un intervento di pulizia o rifinitura rapido.

Che cosa produce

  • Una spiegazione in una frase del motivo per cui ogni violazione è importante.
  • Una correzione concreta, a livello di codice, per ogni rilievo.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Richiamarlo come Insieme di Vincoli per l'intera conversazione

    Eseguire il comando senza argomenti applica ogni vincolo di questo file a tutto il lavoro UI svolto in quella conversazione, non solo a un file.

  2. 02
    Oppure Puntarlo su un Singolo File

    Passare un file come target commuta la skill in modalità revisione, verificando quel file rispetto a tutti i vincoli elencati di seguito.

  3. 03
    Restituire un Report delle Violazioni in tre parti

    Ogni rilievo cita lo snippet incriminato, fornisce una breve frase sul perché sia rilevante e propone una correzione a livello di codice.

  4. 04
    Analizzare i Gruppi di Vincoli in Ordine

    Il file organizza le proprie regole in Stack, Components, Interaction, Animation, Typography, Layout, Performance e Design, ciascuno con elementi MUST, SHOULD e NEVER.

02 Trova la tua applicazione

Quando usare la baseline-ui Skill

Usa la skill baseline-ui in Claude Code o Codex quando il lavoro è una revisione di design di questo tipo. Ambito e limiti sono tratti dal file della skill stessa.

Buona applicazione

  • Una rapida pulizia o passata di rifinitura su un'interfaccia che si è discostata da una base coerente.
  • Revisione di un file specifico per problemi di spaziatura, gerarchia, tipografia e piccoli problemi di layout.

Conosci i limiti

  • Lavoro di design che dipende da gradienti, curve di easing personalizzate o letter-spacing personalizzato, tutti soggetti a richiesta esplicita.
  • Realizzare manualmente il comportamento di tastiera o focus, cosa non consentita a meno di richiesta esplicita.

Cosa fornire

  • Un file da revisionareOpzionale. Indicare un file trasforma la skill in una passata di revisione che segnala le violazioni solo per quel file.

03 Dentro la skill

Regole che la Skill baseline-ui Fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Attenersi ai Valori Predefiniti di Tailwind CSS

    I valori personalizzati sono accettabili solo se già presenti nel progetto o esplicitamente richiesti; altrimenti l'agente deve usare i valori predefiniti di Tailwind.

  2. Nessuna Animazione Senza Richiesta Esplicita

    Le animazioni sono disattivate per impostazione predefinita. Quando vengono richieste esplicitamente, possono essere animate solo le proprietà del compositor, mai width, height, top, left, margin o padding.

  3. Limitare il Feedback di Interazione a 200ms

    Gli ingressi dovrebbero usare ease-out, le animazioni in loop devono fermarsi quando fuori schermo, e prefers-reduced-motion va rispettato.

  4. Non Mescolare Mai Sistemi di Primitive

    Qualsiasi elemento con comportamento di tastiera o focus richiede una primitiva accessibile da Base UI, React Aria o Radix; le primitive già presenti nel progetto hanno la priorità, e ricostruire manualmente il comportamento di tastiera o focus è vietato salvo richiesta esplicita.

  5. Usare h-dvh, Mai h-screen

    La sezione sull'interazione richiede inoltre che gli elementi fissi rispettino safe-area-inset e che gli errori siano mostrati vicino al punto in cui avviene l'azione.

  6. Usare una Scala z-index Fissa

    I valori z- arbitrari non sono consentiti e gli elementi quadrati devono usare size- invece delle utility abbinate w- e h-.

  7. Mantenere Letterali le Utility Tipografiche

    text-balance per i titoli, text-pretty per il corpo del testo, tabular-nums per i dati, e la letter-spacing non deve essere modificata a meno che non sia esplicitamente richiesto.

  8. Nessun Gradiente o Glow di Default

    I gradienti richiedono una richiesta esplicita, i gradienti viola e multicolore sono esclusi del tutto, e gli effetti glow non possono servire come affordance primarie.

04 Mettila al lavoro

Installa baseline-ui in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi baseline-ui a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per skills/baseline-ui/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla skill un primo task di revisione del design

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Confermare che nessuna proprietà animata sia al di fuori di transform e opacity.
  • Confermare che i pulsanti solo icona abbiano un aria-label e che le azioni distruttive siano protette da un AlertDialog.

In OpenDesign importi baseline-ui dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Repository
github.com/ibelick/ui-skills Branch main
File della skill
skills/baseline-ui/SKILL.md Checksum del contenuto registrato alla verifica; commit 79081ab
License
MIT Da LICENSE.
Stelle del repository
8.402 Snapshot GitHub del 14 settembre 2026 per l'intero repository ibelick/ui-skills, che contiene 5 skill in questo catalogo. Non è una valutazione né un conteggio d'uso per baseline-ui.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

  1. Come si usaDue modalità di invocazione: il comando nudo applica i vincoli, l'argomento file genera un report delle violazioni.
  2. StackValori predefiniti di Tailwind CSS, motion/react per l'animazione JS, tw-animate-css e l'utility cn.
  3. ComponentiSolo primitive accessibili, priorità alle primitive esistenti nel progetto, aria-label sui pulsanti solo icona.
  4. InterazioneAlertDialog per le azioni distruttive, skeleton per il caricamento, h-dvh, safe-area-inset, nessun blocco del paste.
  5. AnimazioneNessuna animazione se non richiesta; solo proprietà del compositor, ease-out, limite di 200ms, rispetto di reduced-motion.
  6. Tipografiatext-balance sui titoli, text-pretty sul corpo del testo, tabular-nums per i dati, nessuna modifica al tracking.
  7. LayoutScala z-index fissa invece di valori arbitrari, size-* per gli elementi quadrati.
  8. PrestazioniEvitare blur ampi o animazioni di backdrop-filter, limitare will-change, preferire la logica di rendering a useEffect.
  9. DesignNessuna affordance con gradienti o glow, scala di ombre predefinita, un solo colore d'accento, riutilizzo dei token esistenti.
Descrizione della skill
«Ripulisce rapidamente il codice UI correggendo spaziature, gerarchia, tipografia e piccoli problemi di layout. Da usare quando l'interfaccia necessita di una rapida revisione o rifinitura.»

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 3.417 caratteri. Legga il file completo su GitHub.

06 Prima di installare

Domande sullo Skill baseline-ui

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Quale stack presuppone?

Valori predefiniti di Tailwind CSS, motion/react (precedentemente framer-motion) quando è richiesta l'animazione JavaScript, tw-animate-css per animazioni di ingresso e micro-animazioni, e l'utility cn costruita da clsx e tailwind-merge.

Aggiungerà animazioni o gradienti per rendere le cose più belle?

No. L'animazione non viene mai aggiunta se non richiesta esplicitamente, e i gradienti non vengono usati se non richiesti esplicitamente. I gradienti viola e multicolore sono esclusi del tutto.

Quali librerie di componenti consente?

Base UI, React Aria o Radix per qualsiasi elemento con comportamento da tastiera o focus, preferendo le primitive esistenti del progetto. Base UI è la scelta consigliata per nuove primitive se compatibile con lo stack, e non è consentito mescolare sistemi di primitive in una stessa superficie di interazione.

Baseline UI

Esegua baseline-ui su un'attività reale di design review.

Scarichi OpenDesign, importi baseline-ui dal suo link SKILL.md, incolli il prompt qui sopra e legga il piano prima del risultato.

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

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows