Antfu Design

Aplikuje konvence UnoCSS ve stylu antfu s duálními světlými/tmavými sémantickými tokeny.

od antfu · antfu/skills

Otestováno · Funguje ★ 8.0/10

Antfu Design — Aplikuje konvence UnoCSS ve stylu antfu s duálními světlými/tmavými sémantickými tokeny.

Co umí

Rozšířené designové konvence ve stylu antfu. UnoCSS-first, třídami řízené sémantické tokeny s duálním světlým/tmavým režimem pro tooling a devtools UI, plus design-read, anti-slop přístup a doladění mikro-interakcí pro landing pages a produktová rozhraní. Použijte při stavbě nebo refaktoringu jakéhokoli rozhraní s UnoCSS.

Testovací report

Nainstalováno doslovně (git clone + cp, platný YAML frontmatter, přítomných všech 14 referenčních souborů) a A/B testováno stavbou hustého devtools panelu Vite Cache Inspector se skillem i bez něj, ověřeno ve světlém i tmavém režimu. Skill aplikoval skutečné antfu signatury, které základnímu běhu chyběly: název souboru ve zdrženlivém zeleném akcentu (zvýraznění „aktivního modulu“ z vite-plugin-inspect), systém opacity tokenů op50/op-fade, off-black #111 a panel vyplněný na celou šířku. Základní běh byl kompetentní a čistý (dokonce strukturálně bohatší se záhlavími sloupců a počtem v patičce), takže výhrou skillu byl skromný, ale viditelný posun směrem k antfu idiomu, ne dramatický skok v dopracování.

Testováno: 2026-07-12 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

  • /antfu-designAplikuje konvence UnoCSS ve stylu antfu s duálními světlými/tmavými sémantickými tokeny.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

  • 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