antfu
This skill collection brings antfu's opinionated JavaScript and TypeScript project setup conventions to your agent workflow. Built on Anthony Fu's widely-adopted standards, it provides a foundation for consistent, modern web development practices across your projects.
antfu provides a comprehensive foundation for modern JavaScript and TypeScript projects. To set up a new project following antfu conventions, you'll establish your project structure with antfu's recommended tooling: use pnpm as your package manager, configure ESLint with antfu's opinionated ruleset (which replaces Prettier with ESLint formatting), set up TypeScript with antfu's tsconfig settings, and integrate testing with Vitest. antfu's approach emphasizes consistency, performance, and developer experience across your codebase.
AI-generated summary based on this skill's SKILL.md
Install
hairyf/skills/antfu · repository language: MDX
git clone https://github.com/hairyf/skills
cp -r skills/skills/antfu ~/.claude/skills/antfuFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up a new JavaScript project the antfu way?
antfu provides a comprehensive foundation for modern JavaScript and TypeScript projects. To set up a new project following antfu conventions, you'll establish your project structure with antfu's recommended tooling: use pnpm as your package manager, configure ESLint with antfu's opinionated ruleset (which replaces Prettier with ESLint formatting), set up TypeScript with antfu's tsconfig settings, and integrate testing with Vitest. antfu's approach emphasizes consistency, performance, and developer experience across your codebase.
What is antfu's ESLint config setup and how does it differ from Prettier?
antfu's ESLint configuration is an opinionated alternative to the Prettier + ESLint combination. Rather than using separate tools, antfu consolidates formatting and linting into a single ESLint setup that handles both code style and quality checks. This approach reduces tool complexity and configuration overhead. The antfu ESLint config enforces consistent code style while maintaining the flexibility of ESLint rules, making it ideal for teams seeking streamlined, unified linting without the Prettier dependency.
How should I structure a monorepo using antfu conventions with pnpm?
antfu recommends establishing monorepo structure using pnpm workspaces combined with antfu's tooling ecosystem. Start by configuring pnpm-workspace.yaml to define your workspace packages, then use antfu's project organization principles to structure individual packages. antfu's approach leverages pnpm catalogs for dependency management across your monorepo, ensuring consistent versions and simplified maintenance. This setup scales well for multi-package projects while maintaining the performance benefits of pnpm's efficient dependency resolution.
What are Anthony Fu's core coding practices and code organization principles?
antfu's coding philosophy emphasizes clarity, maintainability, and modern JavaScript/TypeScript patterns. Key principles include type separation in TypeScript (keeping types organized and explicit), isomorphic code patterns that work across environments, and consistent project structure across all projects. antfu advocates for pragmatic tooling choices that reduce cognitive load, favors convention over configuration, and prioritizes developer experience. These practices extend to git hooks integration with lint-staged and testing conventions using Vitest, creating a cohesive development workflow.
What package manager commands does antfu recommend, and what is the ni tool?
antfu promotes the use of pnpm as the primary package manager for its efficiency and workspace support. The antfu ecosystem includes ni, a smart package manager command wrapper that automatically detects your project's package manager (npm, yarn, or pnpm) and runs the appropriate commands. This abstraction simplifies collaboration across projects with different package managers. ni standardizes commands like ni (install), nr (run), and nci (clean install), making antfu-based projects more portable and reducing friction when switching between different dependency management setups.
How do I publish a library or manage dependencies following antfu's recommended approach?
antfu's library publishing setup emphasizes clean dependency management and automated tooling. When publishing with antfu conventions, configure your tsconfig for proper type exports, use pnpm for consistent dependency resolution, and leverage antfu's ESLint and TypeScript configurations to ensure code quality. For monorepos, antfu recommends using pnpm catalogs to manage shared dependencies across packages. The workflow typically includes git hooks with lint-staged for pre-commit checks, automated testing with Vitest, and clear separation between development and production dependencies to minimize bundle size and improve library usability.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
typeorinterface
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 6 files
skills/antfu/SKILL.md
skills/antfu/references/antfu-eslint-config.md
skills/antfu/references/app-development.md
skills/antfu/references/library-development.md
skills/antfu/references/monorepo.md
skills/antfu/references/setting-up.md