antfu-design
An agent skill by antfu, from antfu/skills. Tags: javascript, vite, vue.
What it 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.
Install
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add antfu/skills --skill antfu-designOr copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/antfu/skills
cp -r skills/skills/antfu-design ~/.claude/skills/antfu-designSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- antfu/skills (all skills from this repository)
- Path
- skills/antfu-design/SKILL.md
- Branch
- main
- Updated
- 2026-09-22
Related skills
- antfu — Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects.
- nitro — Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere.
- nuxt — Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing.
- pinia — Pinia official Vue state management library, type-safe and extensible.
- pnpm — Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces via pnpm-workspace.yaml.
- slidev — Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features.