Antfu Design
Wendet UnoCSS-Konventionen im antfu-Stil mit dualen Light/Dark-Semantic-Tokens an.
Getestet · Funktioniert
Was es kann
Design-Konventionen im antfu-Stil, erweitert. UnoCSS-first, klassenbasierte Semantic-Tokens mit dualem Light/Dark für Tooling- und Devtools-UIs, dazu Design-Read, Anti-Slop und Feinschliff bei Mikro-Interaktionen für Landingpages und Produktoberflächen. Einsetzen beim Bauen oder Refactoring jeder Oberfläche mit UnoCSS.
Testbericht
Installiert nach Anleitung (git clone + cp, gültiges YAML-Frontmatter, alle 14 Referenzdateien vorhanden) und im A/B-Test durch den Bau eines dichten Vite-Cache-Inspector-Devtools-Panels mit und ohne Skill, geprüft in Light und Dark. Der Skill setzte echte antfu-Signaturen ein, die der Basis fehlten: der Dateiname in einem zurückhaltenden Grün-Akzent (die 'active module'-Hervorhebung von vite-plugin-inspect), das op50/op-fade-Opacity-Token-System, Off-Black #111 und eine formatfüllende Panel-Fläche. Die Basis war kompetent und sauber (strukturell sogar reicher mit Spaltenköpfen und einem Footer-Counter), der Vorteil des Skills war also eine spürbare, aber moderate Verschiebung hin zur antfu-Idiomatik statt ein dramatischer Politur-Sprung.
Getestet am: 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
Befehle & Beispiel-Prompts
/antfu-designWendet UnoCSS-Konventionen im antfu-Stil mit dualen Light/Dark-Semantic-Tokens an.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Refactor this UI to use antfu-style UnoCSS tokensAdd dark mode support using semantic UnoCSS classesPolish this dashboard's micro-interactions and tokens