Skip to content
Back to skills

Antfu Coding Style

ASecurity

Opinionated coding style and tooling preferences by Anthony Fu.

  • 508 stars
  • 0 votes
  • 0 copies
  • 5 views
  • Added February 8, 2026
developmenttypescriptgoreactvuetestingapi

Works with

  • api

Security analysis

A100/100

Scanned February 12, 2026

npx -y skills add Dokhacgiakhoa/antigravity-ide --skill antfu-coding-style --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Antfu Coding Style?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Antfu Coding Style
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/dokhacgiakhoa-antfu-coding-style/badge)](https://www.skillsdirectory.com/skills/dokhacgiakhoa-antfu-coding-style)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: antfu-coding-style
description: Opinionated coding style and tooling preferences by Anthony Fu.
category: development
version: 4.0.5
layer: master-skill
---

# Antfu Coding Style & Philosophy

> **Goal**: Maximal Developer Experience (DX) through minimalism and smart defaults. "Works out of the box."

## 1. Code Organization

- **Single Responsibility**: Keep files small. If you scroll too much, split it.
- **Export**: Use Named Exports for libraries, Default Exports for components.
- **Constants**: Extract magic strings/numbers to `constants.ts`.

## 2. TypeScript Preferences

- **Implicit over Explicit**: Let TS infer types when obvious.
    - *Bad*: `const count: number = 0`
    - *Good*: `const count = 0`
- **Return Types**: Explicitly type return values for library limits (public API), infer for internal functions.
- **No Enums**: Use `const assertion` object or String Unions.
    - `type Mode = 'dark' | 'light'` > `enum Mode { ... }`

## 3. Tooling Stack

- **Package Manager**: `pnpm` (Fast, disk efficient).
- **Runner**: `ni` (NPM/Yarn/PNPM/Bun Agnostic runner).
    - `ni` -> install
    - `nr dev` -> run dev
    - `nu` -> upgrade
- **Testing**: `Vitest` (Fast, Jest compatible, Native ESM).
    - Naming: `*.test.ts`.
    - Verification: Use `toMatchSnapshot()` sparingly, prefer `toMatchInlineSnapshot()`.

## 4. CSS / Styling

- **UnoCSS**: Atomic CSS engine.
- **Attributify**: Use attributes for styles to keep clean class strings.
    - `<div text="red 4xl" hover="text-blue">` (Controversial but preferred by Antfu for clean template).

## 5. Vue.js Specifics

- **Script Setup**: `<script setup lang="ts">`.
- **ReactivityTransform**: Previously experimental, now prefer `ref` with `.value` or explicit `.value` macros if configured.
- **Structure**:
    - `defineProps` and `defineEmits` at the top.
    - `watch` / `computed` grouped together.

---

**The "Antfu" Vibe**:
- Delete dead code immediately.
- If it can be automated, write a script.
- Aesthetics matter: Code should look beautiful.

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…