Antfu Design

Applica convenzioni UnoCSS in stile antfu con token semantici doppi per tema chiaro/scuro.

di antfu · antfu/skills

Promosso ★ 8.0/10

Antfu Design — Applica convenzioni UnoCSS in stile antfu con token semantici doppi per tema chiaro/scuro.

Cosa fa

Convenzioni di design in stile antfu, ampliate. UnoCSS-first, token semantici basati su classi con doppio chiaro/scuro per UI di tooling e devtools, più design-read, anti-slop e rifinitura delle micro-interazioni per landing page e superfici di prodotto. Da usare quando si costruisce o si rifattorizza qualsiasi interfaccia con UnoCSS.

Rapporto di test

Installato verbatim (git clone + cp, frontmatter YAML valido, tutti e 14 i file di riferimento presenti) e testato in A/B costruendo un pannello devtools denso Vite Cache Inspector con e senza lo skill, verificato in chiaro e in scuro. Lo skill ha applicato segni distintivi autenticamente antfu che mancavano al braccio base: il nome del file con un accento verde misurato (l'highlight 'active module' di vite-plugin-inspect), il sistema di token di opacità op50/op-fade, il nero non puro #111 e il riempimento del pannello a piena larghezza. Il braccio base era competente e pulito (persino strutturalmente più ricco, con intestazioni di colonna e un conteggio a piè di pagina), quindi il vantaggio dello skill è stato uno spostamento modesto ma visibile verso l'idioma antfu, non un salto di rifinitura drastico.

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

Installazione

git clone https://github.com/antfu/skills
cd skills
mkdir -p ~/.claude/skills
cp -r skills/antfu-design ~/.claude/skills/antfu-design

Comandi e prompt di esempio

  • /antfu-designApplica convenzioni UnoCSS in stile antfu con token semantici doppi per tema chiaro/scuro.

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

  • Refactor this UI to use antfu-style UnoCSS tokens
  • Add dark mode support using semantic UnoCSS classes
  • Polish this dashboard's micro-interactions and tokens