Back to skills
SKILL.md
Antfu Coding Style
ASecurityOpinionated coding style and tooling preferences by Anthony Fu.
- 508 stars
- 0 votes
- 0 copies
- 5 views
- Added February 8, 2026
Works with
Security analysis
100/100npx -y skills add Dokhacgiakhoa/antigravity-ide --skill antfu-coding-style --agent claude-codeAre you the author of Antfu Coding Style?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/dokhacgiakhoa-antfu-coding-style)---
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
Comments
Loading comments…