Antfu Design

Applique les conventions UnoCSS de style antfu avec des tokens sémantiques clairs/sombres duaux.

par antfu · antfu/skills

Testé · Fonctionne ★ 8.0/10

Antfu Design — Applique les conventions UnoCSS de style antfu avec des tokens sémantiques clairs/sombres duaux.

Ce que fait

Conventions de design de style antfu, élargies. Axé UnoCSS, tokens sémantiques à base de classes avec mode clair/sombre dual pour les interfaces d'outillage et de devtools, plus lecture de design, anti-slop et polish des micro-interactions pour les landing pages et les surfaces produit. À utiliser pour construire ou refactoriser toute interface avec UnoCSS.

Rapport de test

Installé verbatim (git clone + cp, frontmatter YAML valide, les 14 fichiers de référence présents) et testé en A/B en construisant un panneau devtools dense de type Vite Cache Inspector avec et sans le skill, vérifié en mode clair et sombre. Le skill a appliqué de véritables signatures antfu que le bras de base n'avait pas : le nom de fichier en accent vert sobre (le highlight « module actif » de vite-plugin-inspect), le système de tokens d'opacité op50/op-fade, le noir profond #111, et le remplissage du panneau en pleine largeur. Le bras de base était compétent et propre (même structurellement plus riche avec des en-têtes de colonnes et un compteur en pied de page), donc le gain du skill a été un déplacement modeste mais visible vers l'idiome antfu plutôt qu'un bond de polish spectaculaire.

Testé le: 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

Commandes et exemples de prompts

  • /antfu-designApplique les conventions UnoCSS de style antfu avec des tokens sémantiques clairs/sombres duaux.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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