Antfu Design
Stosuje konwencje UnoCSS w stylu antfu z podwójnymi semantycznymi tokenami light/dark.
Testowano · Działa
Co robi ten skill
Konwencje projektowe w stylu antfu, poszerzone. UnoCSS-first, oparte na klasach semantyczne tokeny z podwójnym light/dark dla interfejsów narzędziowych i devtools, plus design-read, anti-slop i dopracowanie mikrointerakcji dla landing page'y i powierzchni produktowych. Używaj przy budowaniu lub refaktoryzacji dowolnego interfejsu z UnoCSS.
Raport z testu
Zainstalowany dosłownie (git clone + cp, poprawny YAML we frontmatterze, obecne wszystkie 14 plików referencyjnych) i przetestowany A/B przy budowie gęstego panelu devtools Vite Cache Inspector, ze skillem i bez, zweryfikowany w trybie jasnym i ciemnym. Skill zastosował autentyczne sygnatury antfu, których zabrakło wariantowi bazowemu: nazwa pliku w stonowanym zielonym akcencie (podświetlenie 'aktywnego modułu' z vite-plugin-inspect), system tokenów przezroczystości op50/op-fade, głęboka czerń #111 i pełne wypełnienie panelu na całą szerokość. Wariant bazowy był kompetentny i czysty (nawet strukturalnie bogatszy — nagłówki kolumn i stopka z licznikiem), więc przewagą skilla było skromne, ale widoczne przesunięcie w stronę idiomu antfu, a nie dramatyczny skok jakości.
Testowano: 2026-07-12 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/antfu/skills cd skills mkdir -p ~/.claude/skills cp -r skills/antfu-design ~/.claude/skills/antfu-design
Komendy i przykładowe prompty
/antfu-designStosuje konwencje UnoCSS w stylu antfu z podwójnymi semantycznymi tokenami light/dark.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Refactor this UI to use antfu-style UnoCSS tokensAdd dark mode support using semantic UnoCSS classesPolish this dashboard's micro-interactions and tokens