Anthony Fu's Skills

Install

pnpx skills add antfu/skills --skill='*'

This is third-party code. Review the repository files before installing.

What it does

Anthony Fu, a Vue, Vite and Nuxt core team member, assembled three kinds of skills. Two are hand-maintained: antfu with his project setup for eslint, pnpm, vitest and vue, and antfu-design with UnoCSS and semantic token UI principles. vue, nuxt, pinia, vite, vitepress, vitest, unocss and pnpm are generated from official docs via git submodules and tuned by the author. The rest are synced from repositories where projects maintain their own skills: slidev, tsdown, turborepo, vueuse, Vue best practices and Vercel's web-design-guidelines.

Who it is for. For frontend developers working with Vue, Nuxt and Vite.

Example request

Add a server route for the order list to the Nuxt project and cover it with a Vitest test

Limitations

The author calls the project a proof of concept and says he has not fully tested how well the skills work in practice. antfu and antfu-design reflect personal preferences. Vendored skills keep their original licenses.

How to disable. Remove the installed skills with the skills CLI or delete the skill folders from the agent's directory.

Security check

• The skills consist of documentation and conventions

README in short

The README splits skills into hand-maintained, generated from docs and vendored, with a source for each. Install with one skills CLI command. The author explains how skills differ from llms.txt and AGENTS.md and how to build your own collection from this template. MIT licensed.

SKILL.md

---
name: antfu-design
description: 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.
metadata:
  author: Anthony Fu
  version: "2026.06.22"
---

Use this when building interfaces with UnoCSS in any framework (React, Vue, Svelte, Solid, or plain HTML), from dense devtools panels to landing pages. Read core-design-read first to set the direction, then apply the token system plus the polish and anti-slop rules.

## Core Rules

- Use semantic shortcuts (`bg-base`, `border-base`, `color-active`, `btn-action`) instead of raw utility chains in markup.
- Design light and dark mode together. Core tokens must work in both themes.
- Name z-index layers (`z-top-nav`, `z-panel-content`, `z-drawer-content`). Do not use raw z values in templates.
- Generate class-based utilities only (`class="..."`). Avoid Attributify syntax in generated code.
- Keep icon/status class strings literal so UnoCSS can statically extract them (`// @unocss-include` when needed).
- Use `font-mono` + `tabular-nums` for technical values (paths, SHAs, counters, timestamps, percentages).
- For long paths and IDs, truncate visually but keep the full value in `title`.
- Read the brief and set the three dials before choosing a look (core-design-read).
- Borders for dense or structural surfaces, layered shadows for elevated ones (features-micro-interactions).
- Zero em-dash and en-dash characters in any user-facing text (best-practices-anti-slop).

Related