Is the Antfu Design skill free?

Yes. The skill itself is free from antfu/skills. SkillProof publishes the install command and an independent test verdict at no cost.

What is the Antfu Design SkillProof Score?

8.0/10 — installs cleanly 5/5, triggers reliably 4/5, output vs. baseline 6/10, docs & honesty 5/5.

How do I install Antfu Design?

Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.

Can I use Antfu Design with Cursor, Copilot, Gemini CLI, Codex or other AI tools?

The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.

Antfu Design

Applies antfu-style UnoCSS conventions with dual light/dark semantic tokens.

by antfu · antfu/skills

Tested · Works

Install — copy the command Download source ↗

Test report

Verdict: Tested · Works
Score: 8.0/10
Tested: Jul 12, 2026
Environment: Claude Code 2.x (agent harness)
Upstream re-checked: Aug 10, 2026 · f3d0887

Installed verbatim (git clone + cp, valid YAML frontmatter, all 14 reference files present) and A/B tested by building a dense Vite Cache Inspector devtools panel with and without the skill, verified in light and dark. The skill applied genuine antfu signatures the base lacked: the filename in a restrained green accent (the vite-plugin-inspect 'active module' highlight), the op50/op-fade opacity token system, off-black #111, and full-width panel fill. The base was competent and clean (even structurally richer with column headers and a footer count), so the skill's win was a modest, visible shift toward the antfu idiom rather than a dramatic polish leap.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

Installs cleanly 5/5
Triggers reliably 4/5
Output vs. baseline 6/10
Docs & honesty 5/5

What Antfu Design does

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

How to install Antfu Design

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

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Antfu Design

/antfu-design Applies antfu-style UnoCSS conventions with dual light/dark semantic tokens.

It also activates on plain-language prompts like these:

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

Frequently asked questions

Is the Antfu Design skill free?: Yes. The skill itself is free from antfu/skills. SkillProof publishes the install command and an independent test verdict at no cost.
Does Antfu Design work with Claude Code?: We tested it with Claude Code 2.x (agent harness) on Jul 12, 2026. Verdict: Tested · Works. Installed verbatim (git clone + cp, valid YAML frontmatter, all 14 reference files present) and A/B tested by building a dense Vite Cache Inspector devtools panel with and without the skill, verified in light and dark. The skill applied genuine antfu signatures the base lacked: the filename in a restrained green accent (the vite-plugin-inspect 'active module' highlight), the op50/op-fade opacity token system, off-black #111, and full-width panel fill. The base was competent and clean (even structurally richer with column headers and a footer count), so the skill's win was a modest, visible shift toward the antfu idiom rather than a dramatic polish leap.
What is the Antfu Design SkillProof Score?: 8.0/10 — installs cleanly 5/5, triggers reliably 4/5, output vs. baseline 6/10, docs & honesty 5/5.
How do I install Antfu Design?: Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Antfu Design with Cursor, Copilot, Gemini CLI, Codex or other AI tools?: The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.