antfu-design

A curated collection of Agent Skills reflecting Anthony Fu's preferences, experience, and best p...

审核状态：已审核Quality 72Security 70

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件：README.md

抓取于 2026年8月2日

Anthony Fu's Skills

A curated collection of Agent Skills reflecting Anthony Fu's preferences, experience, and best practices, along with usage documentation for the tools.

[!IMPORTANT] This is a proof-of-concept project for generating agent skills from source documentation and keeping them in sync. I haven't fully tested how well the skills perform in practice, so feedback and contributions are greatly welcome.

Installation

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

or to install all of them globally:

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

Learn more about the CLI usage at skills.

Skills

This collection is aim to be a one-stop collection of you are mainly working on Vite/Nuxt. It includes skills from different sources with different scopes.

Hand-maintained Skills

Opinionated

Manually maintained by Anthony Fu with his preferred tools, setup conventions, and best practices.

Skill	Description
antfu	Anthony Fu's preferences and best practices for app/library projects (eslint, pnpm, vitest, vue, etc.)
antfu-design	UnoCSS-centered design principles, semantic tokens, and UI presentation patterns from Anthony Fu's tooling UIs

Skills Generated from Official Documentation

Unopinionated but with tilted focus (e.g. TypeScript, ESM, Composition API, and other modern stacks)

Generated from official documentation and fine-tuned by Anthony.

Skill	Description	Source
vue	Vue.js core - reactivity, components, composition API	vuejs/docs
nuxt	Nuxt framework - file-based routing, server routes, modules	nuxt/nuxt
pinia	Pinia - intuitive, type-safe state management for Vue	vuejs/pinia
vite	Vite build tool - config, plugins, SSR, library mode	vitejs/vite
vitepress	VitePress - static site generator powered by Vite	vuejs/vitepress
vitest	Vitest - unit testing framework powered by Vite	vitest-dev/vitest
unocss	UnoCSS - atomic CSS engine, presets, transformers	unocss/unocss
pnpm	pnpm - fast, disk space efficient package manager	pnpm/pnpm.io

Vendored Skills

Synced from external repositories that maintain their own skills.

Skill	Description	Source
slidev (Official)	Slidev - presentation slides for developers	slidevjs/slidev
tsdown (Official)	tsdown - TypeScript library bundler powered by Rolldown	rolldown/tsdown
turborepo (Official)	Turborepo - high-performance build system for monorepos	vercel/turborepo
vueuse-functions (Official)	VueUse - 200+ Vue composition utilities	vueuse/skills
vue-best-practices	Vue 3 + TypeScript best practices	vuejs-ai/skills
vue-router-best-practices	Vue Router best practices	vuejs-ai/skills
vue-testing-best-practices	Vue testing best practices	vuejs-ai/skills
web-design-guidelines	Web design guidelines for building beautiful interfaces	vercel-labs/agent-skills

FAQ

What Makes This Collection Different?

This collection is opinionated, but the key difference is that it uses git submodules to directly reference source documentation. This provides more reliable context and allows the skills to stay up-to-date with upstream changes over time. If you primarily work with Vue/Vite/Nuxt, this aims to be a comprehensive one-stop collection.

The project is also designed to be flexible - you can use it as a template to generate your own skills collection.

Skills vs llms.txt vs AGENTS.md

To me, the value of skills lies in being shareable and on-demand.

Being shareable makes prompts easier to manage and reuse across projects. Being on-demand means skills can be pulled in as needed, scaling far beyond what any agent's context window could fit at once.

You might hear people say "AGENTS.md outperforms skills". I think that's true — AGENTS.md loads everything upfront, so agents always respect it, whereas skills can have false negatives where agents don't pull them in when you'd expect. That said, I see this more as a gap in tooling and integration that will improve over time. Skills are really just a standardized format for agents to consume—plain markdown files at the end of the day. Think of them as a knowledge base for agents. If you want certain skills to always apply, you can reference them directly in your AGENTS.md.

Generate Your Own Skills

Fork this project to create your own customized skill collection.

Fork or clone this repository
Install dependencies: pnpm install
Update meta.ts with your own projects and skill sources
Run pnpm start cleanup to remove existing submodules and skills
Run pnpm start init to clone the submodules
Run pnpm start sync to sync vendored skills
Ask your agent to Generate skills for \<project\> (recommended one at a time to manage token usage)

See AGENTS.md for detailed generation guidelines.

License

Skills and the scripts in this repository are MIT licensed.

Vendored skills from external repositories retain their original licenses - see each skill directory for details.

其他

中风险

来源需自行核对维护者身份。
包含脚本或命令调用，安装前请复核。
可能需要外部 token、网络权限或第三方服务。
未检测到高风险命令。
扫描发现：1 条。

Codex — Git Clone 安装

安装前请先查看来源仓库和风险报告。
克隆仓库：git clone https://github.com/antfu/skills.git
将 "skills/antfu-design" 文件夹复制到 Codex 的 skills 目录中。
重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

安装前请先查看来源仓库和风险报告。
从源仓库下载 SKILL.md 及相关文件。
在 Codex 的 skills 目录中创建新文件夹。
将所有 skill 文件复制到新文件夹中。
重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

安装前请先查看来源仓库和风险报告。
克隆仓库：git clone https://github.com/antfu/skills.git
将 "skills/antfu-design" 文件夹复制到 Claude Code 的 skills 目录中。
重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

安装前请先查看来源仓库和风险报告。
从源仓库下载 SKILL.md 及相关文件。
在 Claude Code 的 skills 目录中创建新文件夹。
将所有 skill 文件复制到新文件夹中。
重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

安装前请先查看来源仓库和风险报告。
克隆仓库：git clone https://github.com/antfu/skills.git
将 "skills/antfu-design" 文件夹复制到 Cursor 的 skills 目录中。
重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

安装前请先查看来源仓库和风险报告。
从源仓库下载 SKILL.md 及相关文件。
在 Cursor 的 skills 目录中创建新文件夹。
将所有 skill 文件复制到新文件夹中。
重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

安装前请先查看来源仓库和风险报告。
克隆仓库：git clone https://github.com/antfu/skills.git
将 "skills/antfu-design" 文件夹复制到 GitHub Copilot 的 skills 目录中。
重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

安装前请先查看来源仓库和风险报告。
从源仓库下载 SKILL.md 及相关文件。
在 GitHub Copilot 的 skills 目录中创建新文件夹。
将所有 skill 文件复制到新文件夹中。
重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

安装前请先查看来源仓库和风险报告。
克隆仓库：git clone https://github.com/antfu/skills.git
将 "skills/antfu-design" 文件夹复制到 Windsurf 的 skills 目录中。
重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

安装前请先查看来源仓库和风险报告。
从源仓库下载 SKILL.md 及相关文件。
在 Windsurf 的 skills 目录中创建新文件夹。
将所有 skill 文件复制到新文件夹中。
重启 Windsurf 让新的 skill 生效。

查看 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).

Starter shortcuts

A minimal semantic core. See core-starter-kit for the full uno.config.ts and base styles.

shortcuts: [
  {
    'color-base': 'color-neutral-800 dark:color-neutral-200',
    'bg-base': 'bg-white dark:bg-#111',
    'bg-secondary': 'bg-#eee dark:bg-#222',
    'border-base': 'border-#8882',

    'bg-active': 'bg-#8881',
    'color-active': 'color-primary-600 dark:color-primary-300',
    'border-active': 'border-primary-600/25 dark:border-primary-400/25',

    'btn-action': 'inline-flex items-center gap-2 rounded border border-base px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
    'op-fade': 'op65 dark:op55',
    'op-mute': 'op30 dark:op25',

    'z-top-nav': 'z-60',
    'z-panel-content': 'z-70',
    'z-drawer-content': 'z-100',
  },
]

Core References

Topic	Description	Reference
Core Principles	Semantic tokens, dark mode parity, z-index naming, class-first output	core-principles
Starter Kit	Copy-paste UnoCSS starter config and base light/dark styles	core-starter-kit
Tokens and Combos	Token families, reusable class combinations, mobile-safe shell tokens	core-tokens-and-combinations
Design Read and Dials	Read the brief, declare a design read, set variance/motion/density dials	core-design-read

Best Practices

Topic	Description	Reference
Strict Rules and Pre-Flight	Do/don't checklist and the consolidated pre-flight	best-practices-strict-rules
Class over Attributify	Why generated code uses class utilities, with conversions	best-practices-class-utilities-over-attributify
Anti-Slop Hygiene	The dash ban and the AI-tell forbidden patterns	best-practices-anti-slop
Bias Correction	Typography, color, layout, and materiality defaults to override	best-practices-bias-correction

Features

Topic	Description	Reference
Data Presentation	Paths, icons, time, date, numbers, badges, buttons	features-data-presentation
Micro-Interactions	Radius, alignment, shadows, animation, numbers, outlines, hit areas	features-micro-interactions
Floating Vue Overrides	Shared Floating Vue setup and popper styling	features-floating-vue-overrides

Advanced

Topic	Description	Reference
Pattern Vocabulary	Named UI patterns to recognize and reach for	advanced-pattern-vocabulary
Redesign Protocol	Detect mode, audit first, preserve IA and SEO	advanced-redesign-protocol

发现问题？提交给管理员复核

暂无评论，成为第一个评论者吧！