make-interfaces-feel-betterdi Jakub Krehel

Make Interfaces Feel Better Skill.

Uno skill per Claude Code e Codex per la ricerca UX: principi di design engineering per hover, shadow, border, icone, tipografia e rifinitura delle microinterazioni.

UX & Research

Scarica OpenDesign Guida all'uso

jakubkrehel/make-interfaces-feel-better · skills/make-interfaces-feel-better/SKILL.mdSKILL.md

--- name: make-interfaces-feel-better description: - Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border … --- ## Core Principles ## Common Mistakes ## Review Output Format

Intestazione e intestazioni di sezione lette dal file upstream il 14/09/2026 · 11.798 caratteri in totale

01 Cosa fa

Cosa fa la Skill make-interfaces-feel-better 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

Principi di design engineering per rendere le interfacce più curate, scritti per chiunque costruisca componenti UI o revisioni codice frontend: stati hover, ombre, bordi, tipografia, icone, micro-interazioni e animazioni di entrata/uscita.

Comprende diciannove principi fondamentali numerati con default rigorosi — raggio del bordo concentrico, allineamento ottico, box-shadow stratificate invece di bordi di falsa elevazione, transizioni CSS interrompibili, stagger di circa 100ms, testo antialiased, numeri tabulari, contorni immagine puro nero o bianco, scale(0.96) alla pressione, aree di tocco 44×44px e spessore del tratto delle icone abbinato al testo. Due modalità di revisione, rapida e completa, producono una tabella Severity/Location/Before/After/Why raggruppata per principio, limitata a 5 o 15 risultati, che termina in Block, Needs changes o Approve.

Che cosa produce

Un report di revisione che dichiara subito cosa è stato ispezionato e non lascia mai intendere che una superficie non ispezionata sia stata coperta.
Risultati raggruppati per principio all'interno di una tabella Severity, Location, Before, After, Why che elenca ogni modifica effettuata o proposta, non un sottoinsieme.
Una tabella Considered but Rejected con 1–3 candidati reali in modalità rapida e 2–5 in modalità completa, ciascuno con il motivo per cui è stato scartato.
Una sezione di verifica che elenca i comandi o le interazioni esatte eseguite e i risultati osservati, seguita dal verdetto.

Vedi l'esempio di prompt ↗

Come funziona

01
Espressione delle correzioni nel sistema di stile proprio del progetto
Prima di proporre o scrivere qualsiasi correzione, individuare come il progetto già stila gli elementi ed esprimere la modifica in quel sistema — Tailwind in un progetto Tailwind, CSS puro in un progetto CSS, o l'approccio CSS-in-JS già stabilito.
02
Rallentare l'Interfaccia
Durante la revisione, riprodurre il movimento al 10% della velocità nel panel Animations del browser, perché ciò che appare sbagliato al 10% della velocità è ciò che è sottilmente errato a piena velocità.
03
Modalità Predefinita: Completa
La modalità completa viene usata ogni volta che non viene fornita alcuna modalità di revisione; la modalità rapida deve essere richiesta esplicitamente.
04
Scrivere i Risultati in un Formato Tabellare Fisso
Raggruppare i risultati per principio in una tabella markdown con colonne Severity, Location, Before, After e Why; la location cita path/to/file:line.
05
Tenere Conto di Tutte le Cinque Categorie
La tabella dell'ambito deve includere tutte le cinque categorie del Quick Reference, e una superficie non ispezionata non deve mai essere implicitamente indicata come revisionata.
06
Concludere con Verifica e un Verdetto
Il verdetto è Block quando rimane un risultato HIGH, Needs changes quando rimangono solo risultati MEDIUM o LOW, e Approve solo quando non resta nulla di azionabile.

02 Trova la tua applicazione

Quando Usare lo Skill make-interfaces-feel-better

Usa lo skill make-interfaces-feel-better in Claude Code o Codex quando il lavoro è una ricerca UX di questo tipo. Idoneità e limiti qui sotto sono presi dal file dello skill stesso.

Buona applicazione

Costruire o revisionare componenti UI dove il lavoro di dettaglio visivo conta: animazioni, stati hover, ombre, bordi, tipografia, icone, micro-interazioni e transizioni di ingresso/uscita.
Un passaggio rapido sul percorso utente principale e sugli stati a maggior traffico, che riporta solo problemi HIGH e MEDIUM.
Un audit approfondito di un intero ambito richiesto su tipografia, superfici, animazioni, icone e performance.
Progetti che hanno già una convenzione di stile, così che le correzioni di rifinitura vengano applicate in Tailwind, CSS puro o CSS-in-JS in modo appropriato.

Conosci i limiti

Non aggiungerà un secondo sistema di stile a un progetto solo per fornire una correzione di rifinitura.
Rifiuta animazioni personalizzate su interazioni ad alta frequenza, poiché il costo attentivo si ripete a ogni attivazione.
Non applica lo stagger alle interazioni di routine, ma solo agli ingressi a stadi poco frequenti.
I bordi mantenuti solo per simulare elevazione dovrebbero essere sostituiti da valori box-shadow trasparenti sovrapposti; i bordi strutturali e di stato restano.

Cosa fornire

package.jsonNecessario per decidere il percorso di animazione delle icone: verificare se motion o framer-motion è installato, e allineare al percorso di import già stabilito.
File sorgente o schermate esatteI risultati citano path/to/file:line; quando l'artefatto non ha file sorgente, viene citata invece la schermata e il componente esatti.
Modalità, ambito e contesto del frameworkIndicare la modalità, l'ambito esatto, il framework, le convenzioni di stile e qualsiasi limite di revisione così che il report possa mostrare cosa è stato effettivamente ispezionato.

03 Dentro la skill

Le Regole che la Skill make-interfaces-feel-better 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.

Calcolare i Raggi Concentrici
Gli angoli annidati devono essere concentrici: il raggio esterno equivale al raggio interno più il padding.
Premere sempre a 0.96
La scala al click è fissata a scale(0.96) e non deve mai essere inferiore a 0.95; qualsiasi valore più piccolo risulta esagerato. Una prop statica la disattiva quando il movimento distrarrebbe.
I contorni delle immagini restano neutri e puri
Il contorno dell'immagine a 1px e opacità bassa deve essere nero puro in modalità chiara e bianco puro in modalità scura — mai un neutro con tinta come slate o zinc, che assume il colore della superficie e sembra sporco.
Non fare mai la transizione di tutto
Elencare le proprietà esatte, come transition-property: scale, opacity. La classe transition-transform di Tailwind copre transform, translate, scale e rotate.
Far corrispondere lo spessore del tratto dell'icona al peso del testo
Un tratto da 1.5px accompagna il testo regular 400, uno da 2px il semibold 600. Mantenere un solo spessore di tratto per set di icone e non mescolare mai librerie di icone su una stessa superficie.
Usare i valori esatti di animazione delle icone
Gli scambi contestuali di icone si animano su scale, opacity e blur — non su visibility — e questi valori sono fissi, non improvvisati.
Applicare lo stagger solo a ingressi poco frequenti
Suddividere un ingresso graduale in blocchi semantici e distanziarli con uno stagger di circa 100ms invece di animare un unico contenitore. Le interazioni frequenti e di routine non devono avere stagger.
Dimensionare le aree di tocco in modo deliberato
Preferire un'area di tocco di 44×44px per touch o mobile, almeno 40×40px in interfacce desktop dense, estendendo gli elementi visibili più piccoli con uno pseudo-elemento.

04 Mettila al lavoro

Installa make-interfaces-feel-better in Claude Code o Codex

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

Aggiungi make-interfaces-feel-better 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/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Forma generica della CLI skills per skills/make-interfaces-feel-better/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegnare allo Skill un Primo Compito di Ricerca UX

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

Starter prompt

Review [src/components/] in full mode. The card and its inner button both use rounded-xl, the counter shifts when the value changes, and the outline-to-fill icon swap exits with a jarring fade. Express every fix in [our existing styling system] and give me a Severity/Location/Before/After/Why table.

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:

Percorrere ogni stato dell'interfaccia — hover, focus, active, loading ed empty — come parte della revisione.
Elencare ogni verifica non eseguita accanto al verdetto come Non verificato, indicando cosa resta da fare.
Quando si applica initial={false}, verificare che non interrompa animazioni di ingresso intenzionali.
Non riempire il report per raggiungere il limite massimo di risultati, e omettere i principi senza riscontri.

In OpenDesign importa make-interfaces-feel-better dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

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

Author: Jakub Krehel
Repository: github.com/jakubkrehel/make-interfaces-feel-better Branch main
File della skill: skills/make-interfaces-feel-better/SKILL.md Checksum del contenuto registrato alla verifica; commit 35545ea
License: MIT Da LICENSE.
Stelle del repository: 3.433 Snapshot GitHub acquisita il 14/09/2026 per l'intero repository jakubkrehel/make-interfaces-feel-better. Non è una valutazione o un conteggio di utilizzo per make-interfaces-feel-better.
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

Riferimento rapidoCinque categorie — tipografia, superfici, animazioni, icone, prestazioni — ciascuna mappata su quando usarla.
Principi fondamentaliDiciannove regole numerate, dal raggio dei bordi concentrico alla misura nel movimento, con valori predefiniti esatti.
Errori comuniTabella che accosta ogni errore frequente alla relativa correzione, come transition: all e aree di tocco troppo piccole.
Formato dell'output della reviewModalità, copertura, limiti massimi dei finding, definizioni di gravità e struttura richiesta del report.
Ambito e coperturaIndicare modalità, ambito, framework e convenzioni; elencare tutte le cinque categorie con le evidenze esaminate e il risultato.
FindingRaggruppare per principio in una tabella con Gravità, Posizione, Prima, Dopo, Perché che copra ogni modifica.
EsempioTabelle svolte per raggio del bordo concentrico, numeri tabellari e scala al momento della pressione.
Considerati ma respintiTabella di candidati reali al limite che sono stati respinti, con la motivazione fornita.
Verifica ed esitoElencare i comandi o le interazioni eseguite, segnalare i controlli non verificati, quindi Blocca, Richiede modifiche o Approva.

Descrizione della skill

"- Principi di design engineering per rendere le interfacce rifinite. Da usare quando costruisci componenti UI, rivedi codice frontend, implementi animazioni, stati hover, ombre, bordi, tipografia, icone, micro-interazioni, animazioni di entrata/uscita, o qualsiasi lavoro di dettaglio visivo. Supporta modalità di revisione rapida e completa. Si attiva su rifinitura UI, dettagli di design, "fallo sentire meglio", "sembra strano", animazioni sfalsate, raggio dei bordi, allineamento ottico, smussatura dei caratteri, numeri tabulari, contorni delle immagini, ombre delle caselle, icone, spessore del tratto delle icone, stati delle icone, moderazione del movimento."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 11.798 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla Skill make-interfaces-feel-better

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

Serve una libreria di animazione per le animazioni contestuali delle icone?

No. Se non è installata nessuna libreria di animazione, il file mantiene entrambe le icone nel DOM con una posizionata in modo assoluto e le dissolve in transizione con transizioni CSS, ottenendo sia animazioni di ingresso che di uscita senza alcuna dipendenza.

Un'animazione di ingresso viene riprodotta al caricamento della pagina — come viene gestita?

Il file lo evita con initial={false} su AnimatePresence, che blocca le animazioni di ingresso al primo render, e poi chiede di confermare che ciò non comprometta animazioni di ingresso intenzionali.

Una review copre anche le prestazioni oltre agli aspetti visivi?

Sì, le prestazioni sono una delle cinque categorie del Quick Reference, incentrata sulla specificità delle transizioni e sull'uso di will-change. will-change è limitato a transform, opacity e filter — le proprietà che la GPU può comporre — e will-change: all non viene mai usato.

Make Interfaces Feel Better

Esegui make-interfaces-feel-better su un Vero Compito di Ricerca UX.

Scarica OpenDesign, importa make-interfaces-feel-better dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/jakubkrehel/make-interfaces-feel-better --skill make-interfaces-feel-better

Cosa fa la Skill make-interfaces-feel-better in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare lo Skill make-interfaces-feel-better

Buona applicazione

Conosci i limiti

Cosa fornire

Le Regole che la Skill make-interfaces-feel-better Fornisce a Claude Code e Codex

Calcolare i Raggi Concentrici

Premere sempre a 0.96

I contorni delle immagini restano neutri e puri

Non fare mai la transizione di tutto

Far corrispondere lo spessore del tratto dell'icona al peso del testo

Usare i valori esatti di animazione delle icone

Applicare lo stagger solo a ingressi poco frequenti

Dimensionare le aree di tocco in modo deliberato