Delight

Aggiunge una micro-interazione di gusto a una UI — niente coriandoli, niente rimbalzi, niente spam di emoji.

di educlopez · educlopez/ui-craft

Richiede configurazione ★ 7.6/10

Delight — Aggiunge una micro-interazione di gusto a una UI — niente coriandoli, niente rimbalzi, niente spam di emoji.

Cosa fa

Un passaggio mirato di 'delight' che aggiunge una o due micro-interazioni memorabili — copy dei toast più incisivo, stati hover coordinati, un dettaglio distintivo — vincolato da divieti espliciti su easing a rimbalzo, coriandoli, e spam di emoji. Si attiva quando una UI funziona ma sembra generica o l'utente chiede di 'aggiungere personalità' / 'renderla speciale'. È scritto come sub-skill dello skill genitore ui-craft, e un'installazione autonoma manca dei documenti di riferimento a cui rimanda.

Rapporto di test

Ho eseguito un task di delight su un toast di salvataggio: la baseline è ricorsa a coriandoli, un toast in maiuscolo con emoji, e easing a rimbalzo; la versione guidata dallo skill ha vietato esattamente quei tre elementi e ha prodotto invece un toast con il nome dell'elemento ('"Q3 Report" saved' invece di 'Success!'). Ma 2 dei 3 file referenziati (references/motion.md, ../examples/animation-storyboard.md) danno 404 ai percorsi relativi indicati — esistono solo sotto lo skill fratello ui-craft, che la riga di installazione del catalogo non include.

Testato il: 2026-07-13 · Claude Code 2.x (agent harness)

Installazione

git clone https://github.com/educlopez/ui-craft
cd ui-craft
mkdir -p ~/.claude/skills
cp -r .agents/skills/delight ~/.claude/skills/delight

Comandi e prompt di esempio

  • /delightAggiunge una micro-interazione di gusto a una UI — niente coriandoli, niente rimbalzi, niente spam di emoji.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • This UI works but feels generic, add one tasteful micro-interaction
  • Give this button and toast some personality without going overboard
  • Add a signature detail to make this hover state feel more memorable