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
Decision gist · record as of 2026-06-10
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.
Use it when
- antfu's ESLint configuration is an opinionated alternative to the Prettier + ESLint combination.
- antfu recommends establishing monorepo structure using pnpm workspaces combined with antfu's tooling ecosystem.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
hairyf/skills/antfu · repository language: MDX
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up a new JavaScript/TypeScript project with antfu conventions”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill pack brings Anthony Fu's opinionated development practices directly into your agent workflow. Leverage a carefully assembled set of tools and configurations that reflect real-world TypeScript and JavaScript project standards, enabling you to bootstrap new projects with established patterns and conventions.
Hairy packages a handpicked set of agent skills reflecting Hairyf's approach to contemporary web development. Built on proven foundations and extended with specialized capabilities, this collection captures real-world tooling choices and architectural patterns for developers seeking a focused, opinionated stack.
This skill guides you through architecting a TypeScript monorepo using pnpm as your package manager and tsdown for efficient bundling. It combines proven patterns from the web development community with streamlined tooling to accelerate multi-package project setup.
pnpm is a high-performance package manager designed for Node.js projects that prioritizes speed and storage efficiency. It streamlines dependency installation and management through innovative linking strategies, making it ideal for monorepos and large-scale development environments. Integrate pnpm into your workflow to reduce disk usage and accelerate build times across your projects.
This skill enables agents to handle Node.js package installation and dependency management through pnpm, a performant alternative to traditional package managers. Leverage pnpm's speed and storage efficiency to streamline your project's dependency lifecycle.
Set up a modern TypeScript library project using tsdown, a streamlined build tool for ESM packages. This skill automates project scaffolding with sensible defaults, letting you focus on writing code rather than configuration. Perfect for developers building reusable TypeScript modules.
More skills tsdown (MIT) · tsdown (MIT)