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.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: antfu description: 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. metadata: author: Anthony Fu version: "2026.02.03"
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 browser
TypeScript
- Explicit return types: Declare return types explicitly when possible
- Avoid complex inline types: Extract complex types into dedicated
typeorinterfacedeclarations
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) |
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.mjs
import antfu from '@antfu/eslint-config'
export default antfu()
When completing tasks, run pnpm run lint --fix to format the code and fix coding style.
For detailed configuration options: antfu-eslint-config
Git Hooks
{
"simple-git-hooks": {
"pre-commit": "pnpm i --frozen-lockfile --ignore-scripts --offline && npx lint-staged"
},
"lint-staged": { "*": "eslint --fix" },
"scripts": {
"prepare": "npx simple-git-hooks"
}
}
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, formatters, rule overrides, VS Code settings | antfu-eslint-config |
| Project Setup | .gitignore, GitHub Actions, VS Code extensions | setting-up |
| App Development | Vue/Nuxt/UnoCSS conventions and patterns | app-development |
| Library Development | tsdown bundling, pure ESM publishing | library-development |
| Monorepo | pnpm workspaces, centralized alias, Turborepo | monorepo |
More by lyzno1
View allTurborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
Zustand state management patterns for the Flux project. Slice pattern, strict selectors, and app-local store definitions. Use when creating new zustand stores, adding slices, writing selectors, integrating stores with React components, or refactoring client-side state management. Triggers on tasks involving zustand, store creation, state management, selectors, or client UI state.
i18next internationalization patterns for the Flux project. Flat keys, type-safe namespaces, on-demand loading, Intl-based formatting, and i18next-cli toolchain. Use when adding translation keys, creating namespaces, using useTranslation, formatting numbers/dates/durations, working with pluralization, running i18n extraction/validation, or debugging CLI issues. Triggers on tasks involving i18n, translations, localization, language switching, locale files, or i18next-cli.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
