Antfu Design

Tillämpar antfu-stil UnoCSS-konventioner med dubbla semantiska tokens för ljust/mörkt läge.

av antfu · antfu/skills

Testad · Fungerar ★ 8.0/10

Antfu Design — Tillämpar antfu-stil UnoCSS-konventioner med dubbla semantiska tokens för ljust/mörkt läge.

Vad den gör

antfu-stilade designkonventioner, breddade. UnoCSS-först, klassbaserade semantiska tokens med dubbelt ljust/mörkt läge för verktygs- och devtools-gränssnitt, plus design-läsning, anti-slop och mikrointeraktionspolering för landningssidor och produktytor. Används vid byggande eller refaktorering av alla gränssnitt med UnoCSS.

Testrapport

Installerades ord för ord (git clone + cp, giltig YAML-frontmatter, alla 14 referensfiler finns) och A/B-testades genom att bygga en tät Vite Cache Inspector-devtools-panel med och utan skillen, verifierad i ljust och mörkt läge. Skillen tillämpade genuina antfu-signaturer som basen saknade: filnamnet i en återhållsam grön accentfärg (vite-plugin-inspects "aktiv modul"-highlight), op50/op-fade-opacitetstokensystemet, off-black #111 och panelfyllnad i full bredd. Basen var kompetent och ren (till och med strukturellt rikare med kolumnrubriker och en sidfotsräknare), så skillens vinst var en måttlig, synlig förskjutning mot antfu-idiomet snarare än ett dramatiskt polersteg.

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

Installation

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

Kommandon och exempelprompter

  • /antfu-designTillämpar antfu-stil UnoCSS-konventioner med dubbla semantiska tokens för ljust/mörkt läge.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

  • 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