antfu

@lyzno1/antfu

0 forks

Updated 4/1/2026

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

$npx agent-skills-cli install @lyzno1/antfu

Claude Code

Cursor

Copilot

Codex

Antigravity

Details

Repositorylyzno1/flux

Path.agents/skills/antfu/SKILL.md

Branchmain

Scoped Name@lyzno1/antfu

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill 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.ts or types/*.ts
Constants extraction: Move constants to a dedicated constants.ts file

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 type or interface declarations

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/it API (not test)
Use toMatchSnapshot for complex outputs
Use toMatchFileSnapshot with 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 all

turborepo

Turborepo 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.

skill-creator

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.

zustand-store

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.

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.