antfu
Skill28 starsChanged 30 days agoMITView on GitHub
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.
- Installs packages
11 other projects use a version of this, 9 of them edited; 1 new project in the last 4 weeks, against 1 the 4 before.
Adopted by
Steady: 1 new project took it in the last 4 weeks, 1× the 4 weeks before.thin data
Most recently taken up by
- Contentrain/studioedited, first seen Nov 8, 2026
- antfu/skillsword for word, first seen Nov 5, 2026
- rockcookies/skillsedited, first seen Oct 13, 2026
- liangmiQwQ/skillsword for word, first seen Oct 11, 2026
- oyjt/uniapp-vue3-templateedited, first seen Oct 8, 2026
- victorgarciaesgi/regleedited, first seen Oct 8, 2026
Used with
Projects with it also use antfu-design, nitro and 6 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
wltn7810-dotcomSkillantfu-design
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.
Also in 3 projects that use this
SentrySkillnitro
Build and deploy universal JavaScript servers with Nitro v3. Use when working with nitro.config.ts, defineNitroConfig, defineHandler, defineConfig, server.ts entry, filesystem routing, route rules, useStorage, defineCachedHandler, useDatabase, definePlugin, runtime hooks, Vercel/Cloudflare deployment, or migrating from Nitro v2/nitropack.
Also in 3 projects that use this
GoogleSkillsetup-matt-pocock-skills
Configure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
Also in 3 projects that use this
GoogleSkillimprove-codebase-architecture
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Also in 4 projects that use this
MicrosoftSkillcaveman
Ultra-compressed response style that reduces output token count while preserving technical accuracy, with intensity levels and auto-clarity safety rules
Also in 3 projects that use this
MicrosoftSkillgrill-with-docs
Grilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions.
Also in 3 projects that use this
- +1 more from google
Other versions11 projects use a version of this.
Word for word · 2
- antfu/skills★ 6.1k100% same
- liangmiQwQ/skills★ 1100% same
Edited · 9
- oyjt/uniapp-vue3-template★ 62813% same
- victorgarciaesgi/regle★ 50882% same
- JetBrains/skills★ 38678% same
- Contentrain/studio★ 482% same
- huangzida/skills★ 282% same
- ElyzeSolutions/skills★ 190% same
- heamlk/Python-Skill★ 182% same
- rockcookies/skills★ 1100% same
- wltn7810-dotcom/claude-skill★ 090% same
Wrote their own version · 0
None found.
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository16 other files it gives its agents.
- build-toolingSkill
- designSkill
- find-skillsSkill
- nuxtSkill
- vitepressSkill
- vue-a11ySkill
- vue-ciSkill
- vue-clean-componentsSkill
- vue-dataSkill
- vue-debugSkill
- vue-formsSkill
- vue-performanceSkill
- vue-reviewSkill
- vueSkill
- vue-uiSkill
- vue-upgradeSkill
The file
Show its rules and text
We split this skill into the rules it gives an agent
18 rules. 3 are common, 1 is distinctive, and 14 are very specific to this project.
3
Common
Most of the 9 edited versions we read keep these.
1
Distinctive
This author's own choices. Worth a look.
14
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 17
Type separation: Always separate types and interfaces into types.ts or types/*.ts
- Common: line 22
Prefer isomorphic code: Write runtime-agnostic code that works in Node, browser, and workers whenever possible
- Common: line 23
Clear runtime indicators: When code is environment-specific, add a comment at the top of the file:
- Very specific: line 39
Explicit imports: Prefer explicit import statements.
- Very specific: line 40
No path aliases by default: Use relative imports (./foo, ../bar).
- Very specific: line 49
Test files: foo.ts → foo.test.ts (same directory)
- Very specific: line 50
Use describe/it API (not test)
- Very specific: line 51
Use toMatchSnapshot for complex outputs
- Very specific: line 52
Use toMatchFileSnapshot with explicit path for language-specific snapshots
- Very specific: line 72
Use fast-npm-meta to look up the latest version of a package — it queries a small metadata endpoint instead of downloading the full …
- Very specific: line 82
Prefer this over npm view <pkg> version when you only need the latest version, and over reading package.json from the registry directly.
- Very specific: line 115
Always enable antislop: true.
- Distinctive: line 121
Use Knip to catch unused files, exports and dependencies — the linter only sees one file at a time.
- Very specific: line 136
Every project exposes a ci script that runs all checks in one command:
- Very specific: line 171
Add .githooks to .gitignore and simple-git-hooks: true under allowBuilds in pnpm-workspace.yaml.
- Very specific: line 179
Prefer npm Trusted Publishing (OIDC) over NPM_TOKEN secrets: releases run on CI from a v* tag via release.yml with id-token: write, and nr …
- Very specific: line 183
Use named catalogs in pnpm-workspace.yaml for version management:
- Common: line 192
Avoid the default catalog.
“Common” is measured: kept by at least 6 in 10 of the 9 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Reference template: antfu/starter-ts. When scaffolding a new TypeScript project, mirror its
package.jsonscripts,eslint.config.js,knip.json,tsdown.config.tsand workflows rather than inventing a new layout.
Coding Practices
Code Organization
- Single responsibility: Each source file should have a clear, focused scope/purpose
- Split large files: Break files when they become large or handle too many concerns
- Type separation: Always separate types and interfaces into
types.tsortypes/*.ts - Constants extraction: Move constants to a dedicated
constants.tsfile
Runtime Environment
- Prefer isomorphic code: Write runtime-agnostic code that works in Node, browser, and workers whenever possible
- Clear runtime indicators: When code is environment-specific, add a comment at the top of the file:
// @env node
// @env browserTypeScript
- Explicit return types: Declare return types explicitly when possible
- Avoid complex inline types: Extract complex types into dedicated
typeorinterfacedeclarations
Explicitness
Favor explicit, traceable code over implicit "magic". A reader (human or agent) should be able to follow where every name comes from without running tooling.
- Explicit imports: Prefer explicit
importstatements. Avoid auto-imports — when a framework provides them (e.g. Nuxt/Nitro), turn them off for new projects (see app-development). - No path aliases by default: Use relative imports (
./foo,../bar). Only use path aliases (@/,~/,#imports, etc.) when they are already configured in the project; don't introduce new ones for greenfield code.
Comments
- Avoid unnecessary comments: Code should be self-explanatory
- Explain "why" not "how": Comments should describe the reasoning or intent, not what the code does
Testing (Vitest)
- Test files:
foo.ts→foo.test.ts(same directory) - Use
describe/itAPI (nottest) - Use
toMatchSnapshotfor complex outputs - Use
toMatchFileSnapshotwith explicit path for language-specific snapshots
Tooling Choices
@antfu/ni Commands
| Command | Description |
ni | Install dependencies |
ni <pkg> / ni -D <pkg> | Add dependency / dev dependency |
nr <script> | Run script |
nu | Upgrade dependencies |
nun <pkg> | Uninstall dependency |
nci | Clean install (pnpm i --frozen-lockfile) |
nlx <pkg> | Execute package (npx) |
Checking npm Package Versions
Use fast-npm-meta to look up the latest version of a package — it queries a small metadata endpoint instead of downloading the full registry payload (which can be megabytes per package).
nlx fast-npm-meta version vite # 7.3.1
nlx fast-npm-meta version "nuxt@^3.5" # 3.5.22 — range-aware
nlx fast-npm-meta version vite nuxt vue # multiple at once
nlx fast-npm-meta version vite --json # JSON for scripting
nlx fast-npm-meta full vite # full version list + dist-tagsPrefer this over npm view <pkg> version when you only need the latest version, and over reading package.json from the registry directly.
TypeScript Config
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
}
}ESLint Setup
// eslint.config.js
import antfu from '@antfu/eslint-config'
export default antfu({
type: 'lib', // or 'app' (default)
pnpm: true, // enforce pnpm catalogs in package.json
antislop: true, // flag redundant/duplicated AI-style code, ban explicit `any`
})Always enable antislop: true. It requires eslint-plugin-slop and eslint-plugin-sonarjs as dev dependencies.
For detailed configuration options: antfu-eslint-config
Knip
Use Knip to catch unused files, exports and dependencies — the linter only sees one file at a time.
// knip.json
{
"$schema": "https://unpkg.com/knip@6/schema.json",
"project": ["src/**/*.ts"],
"ignoreDependencies": []
}Fix what Knip reports by deleting; only add to ignoreDependencies for tools invoked outside package.json scripts (e.g. taze).
Scripts and the ci Gate
Every project exposes a ci script that runs all checks in one command:
{
"scripts": {
"build": "tsdown",
"lint": "eslint --cache",
"typecheck": "tsc",
"knip": "knip",
"test": "pnpm run build && vitest",
"ci": "pnpm run lint && pnpm run typecheck && pnpm run knip && pnpm run test --run"
}
}Before every commit, run nr lint --fix to format, then nr ci and make sure it passes. Do not commit with a failing ci; fix the root cause instead of silencing rules or adding ignores.
Git Hooks
simple-git-hooks + nano-staged. The pre-commit hook runs the full ci gate; prepare also installs agent skills via skills-npm:
{
"scripts": {
"prepare": "git config core.hooksPath .githooks && simple-git-hooks && skills-npm"
},
"simple-git-hooks": {
"pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && pnpm run ci && pnpx nano-staged"
},
"nano-staged": {
"*": "eslint --fix --no-warn-ignored"
}
}Add .githooks to .gitignore and simple-git-hooks: true under allowBuilds in pnpm-workspace.yaml.
skills-npm
skills-npm symlinks agent skills shipped inside installed npm packages (and fetches those declared in a skills field) into the agent's skills directory on every install. Install as a dev dependency and wire it into prepare as above; add skills/npm-* to .gitignore. Commit the generated skills-npm-lock.json.
Publishing
Prefer npm Trusted Publishing (OIDC) over NPM_TOKEN secrets: releases run on CI from a v* tag via release.yml with id-token: write, and nr release (bumpp) only bumps, tags and pushes. Details: setting-up.
pnpm Catalogs
Use named catalogs in pnpm-workspace.yaml for version management:
| Catalog | Purpose |
prod | Production dependencies |
inlined | Bundler-inlined dependencies |
dev | Dev tools (linter, bundler, testing) |
frontend | Frontend libraries |
Avoid the default catalog. Catalog names can be adjusted per project needs.
References
| Topic | Description | Reference |
| ESLint Config | Framework support, antislop, formatters, rule overrides, VS Code settings | antfu-eslint-config |
| Project Setup | .gitignore, GitHub Actions, OIDC trusted publishing, VS Code extensions | setting-up |
| App Development | Vue/Nuxt/UnoCSS conventions, auto-import control, Storybook component testing | app-development |
| Library Development | tsdown bundling, pure ESM publishing, publint, API snapshots | library-development |
| Monorepo | pnpm workspaces, centralized alias, Turborepo | monorepo |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

