---
title: "antfu/skills"
description: "Anthony Fu's curated collection of agent skills."
source: https://github.com/antfu/skills
ref: main
license: MIT
licenseName: "MIT License"
canonical: https://skillsdocs.com/antfu/skills
base: https://github.com/antfu/skills/blob/main/
provenance: authored
chapters: 19
inlined: 19
withheld: 0
words: 8268
updated: 2026-06-23T00:14:36Z
generator: "Skills Docs"
---

> **antfu/skills** — every Agent Skill in this repository, inlined verbatim.
>
> Canonical HTML: https://skillsdocs.com/antfu/skills
> Per-skill Markdown: https://skillsdocs.com/antfu/skills/<skill>.md
> Machine manifest: https://skillsdocs.com/antfu/skills/.well-known/agent-skills/index.json
> JSON: https://skillsdocs.com/api/v1/books/antfu/skills
> Install: `npx skills add antfu/skills`
> Upstream: https://github.com/antfu/skills @ `main`
> Licence: MIT
>
> Content is mirrored from GitHub and © its authors, served unmodified. Takedown: https://github.com/DreambaseAI/skillsdocs/issues/new?labels=takedown&title=Takedown+request

# antfu/skills

Anthony Fu's curated collection of agent skills.

- **Skills:** 19
- **Inlined:** 19 (licence detected)
- **Words:** 8,268
- **Reading time:** 40 min
- **Stars:** 5,920

## Table of contents

1. [antfu-design](https://skillsdocs.com/antfu/skills/antfu-design.md) — antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-…
2. [antfu](https://skillsdocs.com/antfu/skills/antfu.md) — Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier alternatives…
3. [nitro](https://skillsdocs.com/antfu/skills/nitro.md) — Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server rout…
4. [nuxt](https://skillsdocs.com/antfu/skills/nuxt.md) — Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid r…
5. [pinia](https://skillsdocs.com/antfu/skills/pinia.md) — Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patt…
6. [pnpm](https://skillsdocs.com/antfu/skills/pnpm.md) — Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces via pnpm-workspace.yaml, or managing…
7. [slidev](https://skillsdocs.com/antfu/skills/slidev.md) — Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use…
8. [tsdown](https://skillsdocs.com/antfu/skills/tsdown.md) — Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for…
9. [turborepo](https://skillsdocs.com/antfu/skills/turborepo.md) — Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI…
10. [unocss](https://skillsdocs.com/antfu/skills/unocss.md) — UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, I…
11. [vite](https://skillsdocs.com/antfu/skills/vite.md) — Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building l…
12. [vitepress](https://skillsdocs.com/antfu/skills/vitepress.md) — VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
13. [vitest](https://skillsdocs.com/antfu/skills/vitest.md) — Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filter…
14. [vue-best-practices](https://skillsdocs.com/antfu/skills/vue-best-practices.md) — MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue…
15. [vue-router-best-practices](https://skillsdocs.com/antfu/skills/vue-router-best-practices.md) — Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
16. [vue-testing-best-practices](https://skillsdocs.com/antfu/skills/vue-testing-best-practices.md) — Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
17. [vue](https://skillsdocs.com/antfu/skills/vue.md) — Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watcher…
18. [vueuse-functions](https://skillsdocs.com/antfu/skills/vueuse-functions.md) — Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
19. [web-design-guidelines](https://skillsdocs.com/antfu/skills/web-design-guidelines.md) — Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…


## Front matter

_The repository README, verbatim except that relative links are resolved against https://github.com/antfu/skills/blob/main/._

# Anthony Fu's Skills

A curated collection of [Agent Skills](https://agentskills.io/home) reflecting [Anthony Fu](https://github.com/antfu)'s preferences, experience, and best practices, along with usage documentation for the tools.

> [!IMPORTANT]
> This is a proof-of-concept project for generating agent skills from source documentation and keeping them in sync.
> I haven't fully tested how well the skills perform in practice, so feedback and contributions are greatly welcome.

## Installation

```bash
pnpx skills add antfu/skills --skill='*'
```

or to install all of them globally:

```bash
pnpx skills add antfu/skills --skill='*' -g
```

Learn more about the CLI usage at [skills](https://github.com/vercel-labs/skills).

## Skills

This collection is aim to be a one-stop collection of you are mainly working on Vite/Nuxt. It includes skills from different sources with different scopes.

### Hand-maintained Skills

> Opinionated

Manually maintained by Anthony Fu with his preferred tools, setup conventions, and best practices.

| Skill | Description |
|-------|-------------|
| [antfu](https://github.com/antfu/skills/blob/main/skills/antfu) | Anthony Fu's preferences and best practices for app/library projects (eslint, pnpm, vitest, vue, etc.) |
| [antfu-design](https://github.com/antfu/skills/blob/main/skills/antfu-design) | UnoCSS-centered design principles, semantic tokens, and UI presentation patterns from Anthony Fu's tooling UIs |

### Skills Generated from Official Documentation

> Unopinionated but with tilted focus (e.g. TypeScript, ESM, Composition API, and other modern stacks)

Generated from official documentation and fine-tuned by Anthony.

| Skill | Description | Source |
|-------|-------------|--------|
| [vue](https://github.com/antfu/skills/blob/main/skills/vue) | Vue.js core - reactivity, components, composition API | [vuejs/docs](https://github.com/vuejs/docs) |
| [nuxt](https://github.com/antfu/skills/blob/main/skills/nuxt) | Nuxt framework - file-based routing, server routes, modules | [nuxt/nuxt](https://github.com/nuxt/nuxt) |
| [pinia](https://github.com/antfu/skills/blob/main/skills/pinia) | Pinia - intuitive, type-safe state management for Vue | [vuejs/pinia](https://github.com/vuejs/pinia) |
| [vite](https://github.com/antfu/skills/blob/main/skills/vite) | Vite build tool - config, plugins, SSR, library mode | [vitejs/vite](https://github.com/vitejs/vite) |
| [vitepress](https://github.com/antfu/skills/blob/main/skills/vitepress) | VitePress - static site generator powered by Vite | [vuejs/vitepress](https://github.com/vuejs/vitepress) |
| [vitest](https://github.com/antfu/skills/blob/main/skills/vitest) | Vitest - unit testing framework powered by Vite | [vitest-dev/vitest](https://github.com/vitest-dev/vitest) |
| [unocss](https://github.com/antfu/skills/blob/main/skills/unocss) | UnoCSS - atomic CSS engine, presets, transformers | [unocss/unocss](https://github.com/unocss/unocss) |
| [pnpm](https://github.com/antfu/skills/blob/main/skills/pnpm) | pnpm - fast, disk space efficient package manager | [pnpm/pnpm.io](https://github.com/pnpm/pnpm.io) |

### Vendored Skills

Synced from external repositories that maintain their own skills.

| Skill | Description | Source |
|-------|-------------|--------|
| [slidev](https://github.com/antfu/skills/blob/main/skills/slidev) (Official) | Slidev - presentation slides for developers | [slidevjs/slidev](https://github.com/slidevjs/slidev) |
| [tsdown](https://github.com/antfu/skills/blob/main/skills/tsdown) (Official) | tsdown - TypeScript library bundler powered by Rolldown | [rolldown/tsdown](https://github.com/rolldown/tsdown) |
| [turborepo](https://github.com/antfu/skills/blob/main/skills/turborepo) (Official) | Turborepo - high-performance build system for monorepos | [vercel/turborepo](https://github.com/vercel/turborepo) |
| [vueuse-functions](https://github.com/antfu/skills/blob/main/skills/vueuse-functions) (Official) | VueUse - 200+ Vue composition utilities | [vueuse/skills](https://github.com/vueuse/skills) |
| [vue-best-practices](https://github.com/antfu/skills/blob/main/skills/vue-best-practices) | Vue 3 + TypeScript best practices | [vuejs-ai/skills](https://github.com/vuejs-ai/skills) |
| [vue-router-best-practices](https://github.com/antfu/skills/blob/main/skills/vue-router-best-practices) | Vue Router best practices | [vuejs-ai/skills](https://github.com/vuejs-ai/skills) |
| [vue-testing-best-practices](https://github.com/antfu/skills/blob/main/skills/vue-testing-best-practices) | Vue testing best practices | [vuejs-ai/skills](https://github.com/vuejs-ai/skills) |
| [web-design-guidelines](https://github.com/antfu/skills/blob/main/skills/web-design-guidelines) | Web design guidelines for building beautiful interfaces | [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) |

## FAQ

### What Makes This Collection Different?

This collection is opinionated, but the key difference is that it uses git submodules to directly reference source documentation. This provides more reliable context and allows the skills to stay up-to-date with upstream changes over time. If you primarily work with Vue/Vite/Nuxt, this aims to be a comprehensive one-stop collection.

The project is also designed to be flexible - you can use it as a template to generate your own skills collection.

### Skills vs llms.txt vs AGENTS.md

To me, the value of skills lies in being **shareable** and **on-demand**.

Being shareable makes prompts easier to manage and reuse across projects. Being on-demand means skills can be pulled in as needed, scaling far beyond what any agent's context window could fit at once.

You might hear people say "AGENTS.md outperforms skills". I think that's true — AGENTS.md loads everything upfront, so agents always respect it, whereas skills can have false negatives where agents don't pull them in when you'd expect. That said, I see this more as a gap in tooling and integration that will improve over time. Skills are really just a standardized format for agents to consume—plain markdown files at the end of the day. Think of them as a knowledge base for agents. If you want certain skills to always apply, you can reference them directly in your AGENTS.md.

## Generate Your Own Skills

Fork this project to create your own customized skill collection.

1. Fork or clone this repository
2. Install dependencies: `pnpm install`
3. Update `meta.ts` with your own projects and skill sources
4. Run `pnpm start cleanup` to remove existing submodules and skills
5. Run `pnpm start init` to clone the submodules
6. Run `pnpm start sync` to sync vendored skills
7. Ask your agent to `Generate skills for \<project\>` (recommended one at a time to manage token usage)

See [AGENTS.md](https://github.com/antfu/skills/blob/main/AGENTS.md) for detailed generation guidelines.

## Sponsors

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
    <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg' alt='Sponsors' />
  </a>
</p>

## License

Skills and the scripts in this repository are [MIT](https://github.com/antfu/skills/blob/main/LICENSE.md) licensed.

Vendored skills from external repositories retain their original licenses - see each skill directory for details.

---

<!-- chapter:begin slug=antfu-design position=1 -->

## 1. antfu-design

- **Source:** https://github.com/antfu/skills/blob/main/skills/antfu-design/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/antfu-design.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (14), referenced from this skill's directory:
  - `README.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/README.md
  - `references/advanced-pattern-vocabulary.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/advanced-pattern-vocabulary.md
  - `references/advanced-redesign-protocol.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/advanced-redesign-protocol.md
  - `references/best-practices-anti-slop.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/best-practices-anti-slop.md
  - `references/best-practices-bias-correction.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/best-practices-bias-correction.md
  - `references/best-practices-class-utilities-over-attributify.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/best-practices-class-utilities-over-attributify.md
  - `references/best-practices-strict-rules.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/best-practices-strict-rules.md
  - `references/core-design-read.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/core-design-read.md
  - `references/core-principles.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/core-principles.md
  - `references/core-starter-kit.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/core-starter-kit.md
  - `references/core-tokens-and-combinations.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/core-tokens-and-combinations.md
  - `references/features-data-presentation.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/features-data-presentation.md
  - `references/features-floating-vue-overrides.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/features-floating-vue-overrides.md
  - `references/features-micro-interactions.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/references/features-micro-interactions.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: antfu-design
description: antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.
metadata:
  author: Anthony Fu
  version: "2026.06.22"
---

Use this when building interfaces with UnoCSS in any framework (React, Vue, Svelte, Solid, or plain HTML), from dense devtools panels to landing pages. Read core-design-read first to set the direction, then apply the token system plus the polish and anti-slop rules.

## Core Rules

- Use semantic shortcuts (`bg-base`, `border-base`, `color-active`, `btn-action`) instead of raw utility chains in markup.
- Design light and dark mode together. Core tokens must work in both themes.
- Name z-index layers (`z-top-nav`, `z-panel-content`, `z-drawer-content`). Do not use raw z values in templates.
- Generate class-based utilities only (`class="..."`). Avoid Attributify syntax in generated code.
- Keep icon/status class strings literal so UnoCSS can statically extract them (`// @unocss-include` when needed).
- Use `font-mono` + `tabular-nums` for technical values (paths, SHAs, counters, timestamps, percentages).
- For long paths and IDs, truncate visually but keep the full value in `title`.
- Read the brief and set the three dials before choosing a look (core-design-read).
- Borders for dense or structural surfaces, layered shadows for elevated ones (features-micro-interactions).
- Zero em-dash and en-dash characters in any user-facing text (best-practices-anti-slop).

## Starter shortcuts

A minimal semantic core. See core-starter-kit for the full `uno.config.ts` and base styles.

```ts
shortcuts: [
  {
    'color-base': 'color-neutral-800 dark:color-neutral-200',
    'bg-base': 'bg-white dark:bg-#111',
    'bg-secondary': 'bg-#eee dark:bg-#222',
    'border-base': 'border-#8882',

    'bg-active': 'bg-#8881',
    'color-active': 'color-primary-600 dark:color-primary-300',
    'border-active': 'border-primary-600/25 dark:border-primary-400/25',

    'btn-action': 'inline-flex items-center gap-2 rounded border border-base px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
    'op-fade': 'op65 dark:op55',
    'op-mute': 'op30 dark:op25',

    'z-top-nav': 'z-60',
    'z-panel-content': 'z-70',
    'z-drawer-content': 'z-100',
  },
]
```

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Core Principles | Semantic tokens, dark mode parity, z-index naming, class-first output | [core-principles](references/core-principles.md) |
| Starter Kit | Copy-paste UnoCSS starter config and base light/dark styles | [core-starter-kit](references/core-starter-kit.md) |
| Tokens and Combos | Token families, reusable class combinations, mobile-safe shell tokens | [core-tokens-and-combinations](references/core-tokens-and-combinations.md) |
| Design Read and Dials | Read the brief, declare a design read, set variance/motion/density dials | [core-design-read](references/core-design-read.md) |

## Best Practices

| Topic | Description | Reference |
|-------|-------------|-----------|
| Strict Rules and Pre-Flight | Do/don't checklist and the consolidated pre-flight | [best-practices-strict-rules](references/best-practices-strict-rules.md) |
| Class over Attributify | Why generated code uses class utilities, with conversions | [best-practices-class-utilities-over-attributify](references/best-practices-class-utilities-over-attributify.md) |
| Anti-Slop Hygiene | The dash ban and the AI-tell forbidden patterns | [best-practices-anti-slop](references/best-practices-anti-slop.md) |
| Bias Correction | Typography, color, layout, and materiality defaults to override | [best-practices-bias-correction](references/best-practices-bias-correction.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Data Presentation | Paths, icons, time, date, numbers, badges, buttons | [features-data-presentation](references/features-data-presentation.md) |
| Micro-Interactions | Radius, alignment, shadows, animation, numbers, outlines, hit areas | [features-micro-interactions](references/features-micro-interactions.md) |
| Floating Vue Overrides | Shared Floating Vue setup and popper styling | [features-floating-vue-overrides](references/features-floating-vue-overrides.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Pattern Vocabulary | Named UI patterns to recognize and reach for | [advanced-pattern-vocabulary](references/advanced-pattern-vocabulary.md) |
| Redesign Protocol | Detect mode, audit first, preserve IA and SEO | [advanced-redesign-protocol](references/advanced-redesign-protocol.md) |

<!--
Source references:
- https://github.com/antfu/node-modules-inspector
- https://github.com/vitejs/devtools/tree/main/packages/rolldown
- https://github.com/eslint/config-inspector
- https://github.com/antfu/vite-plugin-inspect
- https://github.com/antfu/agent-container
- https://github.com/Leonxlnx/taste-skill
- https://github.com/jakubkrehel/make-interfaces-feel-better
-->

<!-- chapter:end slug=antfu-design -->

---

<!-- chapter:begin slug=antfu position=2 -->

## 2. antfu

- **Source:** https://github.com/antfu/skills/blob/main/skills/antfu/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/antfu/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/antfu.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (5), referenced from this skill's directory:
  - `references/antfu-eslint-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu/references/antfu-eslint-config.md
  - `references/app-development.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu/references/app-development.md
  - `references/library-development.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu/references/library-development.md
  - `references/monorepo.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu/references/monorepo.md
  - `references/setting-up.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/antfu/references/setting-up.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
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.06.22"
---

## 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:

```ts
// @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

### Explicitness

Favor explicit, traceable code over implicit "magic". A reader (human or agent) should be able to follow where every name comes from without running tooling.

- **Explicit imports**: Prefer explicit `import` statements. Avoid auto-imports — when a framework provides them (e.g. Nuxt/Nitro), turn them off for new projects (see [app-development](references/app-development.md)).
- **No path aliases by default**: Use relative imports (`./foo`, `../bar`). Only use path aliases (`@/`, `~/`, `#imports`, etc.) when they are *already* configured in the project; don't introduce new ones for greenfield code.

### 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`) |

### Checking npm Package Versions

Use [`fast-npm-meta`](https://github.com/antfu/fast-npm-meta) to look up the latest version of a package — it queries a small metadata endpoint instead of downloading the full registry payload (which can be megabytes per package).

```bash
nlx fast-npm-meta version vite              # 7.3.1
nlx fast-npm-meta version "nuxt@^3.5"       # 3.5.22 — range-aware
nlx fast-npm-meta version vite nuxt vue     # multiple at once
nlx fast-npm-meta version vite --json       # JSON for scripting
nlx fast-npm-meta full vite                 # full version list + dist-tags
```

Prefer this over `npm view <pkg> version` when you only need the latest version, and over reading `package.json` from the registry directly.

### TypeScript Config

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}
```

### ESLint Setup

```js
// 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](references/antfu-eslint-config.md)

### Git Hooks

```json
{
  "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](references/antfu-eslint-config.md) |
| Project Setup | .gitignore, GitHub Actions, VS Code extensions | [setting-up](references/setting-up.md) |
| App Development | Vue/Nuxt/UnoCSS conventions, auto-import control, Storybook component testing | [app-development](references/app-development.md) |
| Library Development | tsdown bundling, pure ESM publishing | [library-development](references/library-development.md) |
| Monorepo | pnpm workspaces, centralized alias, Turborepo | [monorepo](references/monorepo.md) |

<!-- chapter:end slug=antfu -->

---

<!-- chapter:begin slug=nitro position=3 -->

## 3. nitro

- **Source:** https://github.com/antfu/skills/blob/main/skills/nitro/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/nitro.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (14), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/GENERATION.md
  - `references/advanced-migration.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/advanced-migration.md
  - `references/core-assets.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/core-assets.md
  - `references/core-cache.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/core-cache.md
  - `references/core-configuration.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/core-configuration.md
  - `references/core-rendering.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/core-rendering.md
  - `references/core-routing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/core-routing.md
  - `references/core-storage.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/core-storage.md
  - `references/deploy-presets.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/deploy-presets.md
  - `references/features-database.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/features-database.md
  - `references/features-openapi.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/features-openapi.md
  - `references/features-plugins.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/features-plugins.md
  - `references/features-tasks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/features-tasks.md
  - `references/features-websocket.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nitro/references/features-websocket.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: nitro
description: Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server routes/event handlers, route rules, caching, storage, tasks, websockets, or deploying to Node/Bun/Deno/Cloudflare/Vercel.
metadata:
  author: Anthony Fu
  version: "2026.6.22"
  source: Generated from https://github.com/nitrojs/nitro, scripts located at https://github.com/antfu/skills
---

> The skill is based on Nitro v3 (beta), generated at 2026-06-22.

Nitro is a framework-agnostic, deployment-agnostic server toolkit powered by [H3](https://h3.dev) v2, [unstorage](https://unstorage.unjs.io), and Vite/Rolldown/Rollup. It powers Nuxt and works standalone. From one codebase it builds optimized output for Node.js, Bun, Deno, Cloudflare, Vercel, Netlify, and more.

Key capabilities:
- **Filesystem routing** with H3 v2 event handlers, dynamic params, and method suffixes.
- **Route rules** for declarative caching, headers, redirects, proxying, and auth.
- **Caching** layer (cached handlers/functions, SWR) on top of **unstorage** KV.
- **Runtime config** overridable via `NITRO_*` env vars.
- **Tasks** (on-demand + scheduled/cron), **WebSockets**/SSE, a SQL **database** layer, and **OpenAPI** auto-docs.
- **Plugins & lifecycle hooks**, custom **renderer**/**server entry**, and portable **deployment presets**.

> Nitro v3 renamed the package `nitropack` → `nitro` and adopts H3 v2 (web-standard `Request`/`Response`). If unsure about v2-vs-v3 APIs, read [advanced-migration](references/advanced-migration.md) first.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Routing | File-based routes, `defineHandler`, params, middleware, route rules, errors | [core-routing](references/core-routing.md) |
| Configuration | `nitro.config.ts`, `defineConfig`, key options, runtime config | [core-configuration](references/core-configuration.md) |
| Storage | unstorage KV, mount points, drivers, dynamic mounts | [core-storage](references/core-storage.md) |
| Cache | `defineCachedHandler`, `defineCachedFunction`, SWR, invalidation | [core-cache](references/core-cache.md) |
| Assets | Public assets, compression, server assets via storage | [core-assets](references/core-assets.md) |
| Rendering | Renderer (HTML/SSR), server entry, framework integration | [core-rendering](references/core-rendering.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Plugins & Hooks | `definePlugin`, runtime lifecycle hooks, error capture | [features-plugins](references/features-plugins.md) |
| Tasks | On-demand & scheduled (cron) tasks, `runTask` | [features-tasks](references/features-tasks.md) |
| WebSocket & SSE | `defineWebSocketHandler`, pub/sub, namespaces, event streams | [features-websocket](references/features-websocket.md) |
| Database | Built-in SQL layer via db0, `useDatabase`, connectors | [features-database](references/features-database.md) |
| OpenAPI | Auto spec from `defineRouteMeta`, Scalar/Swagger UIs | [features-openapi](references/features-openapi.md) |

## Advanced / Deployment

| Topic | Description | Reference |
|-------|-------------|-----------|
| Deployment Presets | Runtimes & providers, compatibility dates, platform integration | [deploy-presets](references/deploy-presets.md) |
| v2 → v3 Migration | Package rename, `nitro/*` imports, H3 v2 API, preset changes | [advanced-migration](references/advanced-migration.md) |

<!-- chapter:end slug=nitro -->

---

<!-- chapter:begin slug=nuxt position=4 -->

## 4. nuxt

- **Source:** https://github.com/antfu/skills/blob/main/skills/nuxt/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/nuxt.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (19), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/GENERATION.md
  - `references/advanced-hooks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/advanced-hooks.md
  - `references/advanced-layers.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/advanced-layers.md
  - `references/advanced-module-authoring.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/advanced-module-authoring.md
  - `references/best-practices-data-fetching.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/best-practices-data-fetching.md
  - `references/best-practices-ssr.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/best-practices-ssr.md
  - `references/core-cli.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-cli.md
  - `references/core-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-config.md
  - `references/core-data-fetching.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-data-fetching.md
  - `references/core-deployment.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-deployment.md
  - `references/core-directory-structure.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-directory-structure.md
  - `references/core-modules.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-modules.md
  - `references/core-routing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/core-routing.md
  - `references/features-components-autoimport.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/features-components-autoimport.md
  - `references/features-components.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/features-components.md
  - `references/features-composables.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/features-composables.md
  - `references/features-server.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/features-server.md
  - `references/features-state.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/features-state.md
  - `references/rendering-modes.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/nuxt/references/rendering-modes.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: nuxt
description: Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
metadata:
  author: Anthony Fu
  version: "2026.6.22"
  source: Generated from https://github.com/nuxt/nuxt, scripts located at https://github.com/antfu/skills
---

Nuxt is a full-stack Vue framework that provides server-side rendering, file-based routing, auto-imports, and a powerful module system. It uses Nitro as its server engine for universal deployment across Node.js, serverless, and edge platforms.

> The skill is based on Nuxt 4.x, generated at 2026-06-22.

> **Nuxt 4 note:** the default `srcDir` is `app/` — Vue app code (`app.vue`, `components/`, `composables/`, `pages/`, etc.) lives under `app/`, while `server/`, `shared/`, `public/`, `modules/`, `layers/` and `nuxt.config.ts` stay at the project root. The `~`/`@` aliases now point at `app/`; use `~~`/`@@` for the root.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Directory Structure | Nuxt 4 `app/` srcDir, `shared/`, aliases, conventions | [core-directory-structure](references/core-directory-structure.md) |
| Configuration | nuxt.config.ts, app.config.ts, aliases, compatibilityVersion, experimental | [core-config](references/core-config.md) |
| CLI Commands | Dev server, build, generate, preview, and utility commands | [core-cli](references/core-cli.md) |
| Routing | File-based routing, dynamic routes, named views, layout props, middleware | [core-routing](references/core-routing.md) |
| Data Fetching | useFetch, useAsyncData, $fetch, createUseFetch factories, caching | [core-data-fetching](references/core-data-fetching.md) |
| Modules | Creating and using Nuxt modules, Nuxt Kit utilities | [core-modules](references/core-modules.md) |
| Deployment | Platform-agnostic deployment with Nitro, Vercel, Netlify, Cloudflare | [core-deployment](references/core-deployment.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Composables Auto-imports | Vue/Nuxt composables, custom composables, `shared/`, useAnnouncer | [features-composables](references/features-composables.md) |
| Components Auto-imports | Component naming, lazy loading, hydration strategies | [features-components-autoimport](references/features-components-autoimport.md) |
| Built-in Components | NuxtLink, NuxtPage, NuxtLayout, NuxtAnnouncer, ClientOnly, and more | [features-components](references/features-components.md) |
| State Management | useState composable, SSR-friendly state, Pinia integration | [features-state](references/features-state.md) |
| Server Routes | API routes, server middleware, Nitro server engine | [features-server](references/features-server.md) |

## Rendering

| Topic | Description | Reference |
|-------|-------------|-----------|
| Rendering Modes | Universal (SSR), client-side (SPA), hybrid rendering, route rules | [rendering-modes](references/rendering-modes.md) |

## Best Practices

| Topic | Description | Reference |
|-------|-------------|-----------|
| Data Fetching Patterns | Efficient fetching, caching, parallel requests, error handling | [best-practices-data-fetching](references/best-practices-data-fetching.md) |
| SSR & Hydration | Avoiding context leaks, hydration mismatches, composable patterns | [best-practices-ssr](references/best-practices-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Layers | Extending applications with reusable layers | [advanced-layers](references/advanced-layers.md) |
| Lifecycle Hooks | Build-time, runtime, and server hooks | [advanced-hooks](references/advanced-hooks.md) |
| Module Authoring | Publishable modules with Nuxt Kit, keyed composables, dependencies | [advanced-module-authoring](references/advanced-module-authoring.md) |

<!-- chapter:end slug=nuxt -->

---

<!-- chapter:begin slug=pinia position=5 -->

## 5. pinia

- **Source:** https://github.com/antfu/skills/blob/main/skills/pinia/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/pinia.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (10), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/GENERATION.md
  - `references/advanced-hmr.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/advanced-hmr.md
  - `references/advanced-nuxt.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/advanced-nuxt.md
  - `references/advanced-ssr.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/advanced-ssr.md
  - `references/best-practices-outside-component.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/best-practices-outside-component.md
  - `references/best-practices-testing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/best-practices-testing.md
  - `references/core-stores.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/core-stores.md
  - `references/features-composables.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/features-composables.md
  - `references/features-composing-stores.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/features-composing-stores.md
  - `references/features-plugins.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pinia/references/features-plugins.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: pinia
description: Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/vuejs/pinia, scripts located at https://github.com/antfu/skills
---

# Pinia

Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration.

> The skill is based on Pinia v3.0.4, generated at 2026-01-28.

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Stores | Defining stores, state, getters, actions, storeToRefs, subscriptions | [core-stores](references/core-stores.md) |

## Features

### Extensibility

| Topic | Description | Reference |
|-------|-------------|-----------|
| Plugins | Extend stores with custom properties, state, and behavior | [features-plugins](references/features-plugins.md) |

### Composability

| Topic | Description | Reference |
|-------|-------------|-----------|
| Composables | Using Vue composables within stores (VueUse, etc.) | [features-composables](references/features-composables.md) |
| Composing Stores | Store-to-store communication, avoiding circular dependencies | [features-composing-stores](references/features-composing-stores.md) |

## Best Practices

| Topic | Description | Reference |
|-------|-------------|-----------|
| Testing | Unit testing with @pinia/testing, mocking, stubbing | [best-practices-testing](references/best-practices-testing.md) |
| Outside Components | Using stores in navigation guards, plugins, middlewares | [best-practices-outside-component](references/best-practices-outside-component.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| SSR | Server-side rendering, state hydration | [advanced-ssr](references/advanced-ssr.md) |
| Nuxt | Nuxt integration, auto-imports, SSR best practices | [advanced-nuxt](references/advanced-nuxt.md) |
| HMR | Hot module replacement for development | [advanced-hmr](references/advanced-hmr.md) |

## Key Recommendations

- **Prefer Setup Stores** for complex logic, composables, and watchers
- **Use `storeToRefs()`** when destructuring state/getters to preserve reactivity
- **Actions can be destructured directly** - they're bound to the store
- **Call stores inside functions** not at module scope, especially for SSR
- **Add HMR support** to each store for better development experience
- **Use `@pinia/testing`** for component tests with mocked stores

<!-- chapter:end slug=pinia -->

---

<!-- chapter:begin slug=pnpm position=6 -->

## 6. pnpm

- **Source:** https://github.com/antfu/skills/blob/main/skills/pnpm/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/pnpm.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (17), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/GENERATION.md
  - `references/best-practices-ci.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/best-practices-ci.md
  - `references/best-practices-migration.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/best-practices-migration.md
  - `references/best-practices-performance.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/best-practices-performance.md
  - `references/core-cli.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/core-cli.md
  - `references/core-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/core-config.md
  - `references/core-store.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/core-store.md
  - `references/core-workspaces.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/core-workspaces.md
  - `references/features-aliases.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-aliases.md
  - `references/features-catalogs.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-catalogs.md
  - `references/features-config-dependencies.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-config-dependencies.md
  - `references/features-global-virtual-store.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-global-virtual-store.md
  - `references/features-hooks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-hooks.md
  - `references/features-overrides.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-overrides.md
  - `references/features-patches.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-patches.md
  - `references/features-peer-deps.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-peer-deps.md
  - `references/features-supply-chain-security.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/pnpm/references/features-supply-chain-security.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: pnpm
description: Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces via pnpm-workspace.yaml, or managing dependencies with catalogs, patches, overrides, config dependencies, or the global virtual store.
metadata:
  author: Anthony Fu
  version: "2026.6.22"
  source: Generated from https://github.com/pnpm/pnpm, scripts located at https://github.com/antfu/skills
---

pnpm is a fast, disk space efficient package manager. It uses a content-addressable store to deduplicate packages across all projects on a machine, and enforces strict dependency resolution by default, preventing phantom dependencies.

**Configuration model (important):** pnpm settings now live in `pnpm-workspace.yaml` (and the global `config.yaml`) using **camelCase** keys. `.npmrc` is used **only** for authentication/registry credentials, and the `pnpm` field of `package.json` is no longer read. When working in a pnpm project, check `pnpm-workspace.yaml` for settings/workspace structure and `.npmrc` only for auth. Always use `--frozen-lockfile` (or `pnpm ci`) in CI.

> The skill is based on pnpm 10.x, generated at 2026-06-22. It also covers v11 behavior changes (config split, isolated global packages, `allowBuilds`, `pmOnFail`, global virtual store) where current docs describe them.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| CLI Commands | install/add/remove/update, run, dlx/pnx, workspace, runtime, publishing (version, view, sbom, stage) | [core-cli](references/core-cli.md) |
| Configuration | pnpm-workspace.yaml settings (camelCase), global config.yaml, packageConfigs, .npmrc auth | [core-config](references/core-config.md) |
| Workspaces | Monorepo support: filtering, workspace protocol, shared lockfile, packageConfigs | [core-workspaces](references/core-workspaces.md) |
| Store | Content-addressable store, virtual store, node linker modes, frozen/read-only store | [core-store](references/core-store.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Catalogs | Centralized dependency versions; catalogMode, catalog: in overrides | [features-catalogs](references/features-catalogs.md) |
| Overrides | Force versions (incl. transitive & peer deps); packageExtensions | [features-overrides](references/features-overrides.md) |
| Patches | Modify third-party packages; patchedDependencies in pnpm-workspace.yaml | [features-patches](references/features-patches.md) |
| Aliases | Install under custom names (npm:) and registry aliases (namedRegistries) | [features-aliases](references/features-aliases.md) |
| Hooks | .pnpmfile.mjs hooks (readPackage, updateConfig, beforePacking), finders, resolvers/fetchers | [features-hooks](references/features-hooks.md) |
| Peer Dependencies | Auto-install, strict mode, rules, dedupePeers, peers check | [features-peer-deps](references/features-peer-deps.md) |
| Config Dependencies | Share hooks/settings/catalogs/patches across repos via configDependencies | [features-config-dependencies](references/features-config-dependencies.md) |
| Global Virtual Store | Shared node_modules, git-worktree multi-agent setups, isolated global packages | [features-global-virtual-store](references/features-global-virtual-store.md) |
| Supply-Chain Security | Build approval (allowBuilds), minimumReleaseAge, trustPolicy, lockfile integrity | [features-supply-chain-security](references/features-supply-chain-security.md) |

## Best Practices

| Topic | Description | Reference |
|-------|-------------|-----------|
| CI/CD Setup | GitHub Actions, GitLab, Docker, pnpm ci, store caching, frozen lockfiles | [best-practices-ci](references/best-practices-ci.md) |
| Migration | npm/Yarn → pnpm, phantom deps, and pnpm v10 → v11 config migration | [best-practices-migration](references/best-practices-migration.md) |
| Performance | Install optimizations, allowBuilds, global virtual store, workspace parallelization | [best-practices-performance](references/best-practices-performance.md) |

<!-- chapter:end slug=pnpm -->

---

<!-- chapter:begin slug=slidev position=7 -->

## 7. slidev

- **Source:** https://github.com/antfu/skills/blob/main/skills/slidev/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/slidev.md
- **Licence:** Declared in LICENSE.md — https://github.com/antfu/skills/blob/main/skills/slidev/LICENSE.md

Bundled files (55), referenced from this skill's directory:
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/LICENSE.md
  - `README.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/README.md
  - `references/animation-click-marker.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/animation-click-marker.md
  - `references/animation-drawing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/animation-drawing.md
  - `references/animation-rough-marker.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/animation-rough-marker.md
  - `references/api-slide-hooks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/api-slide-hooks.md
  - `references/build-og-image.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/build-og-image.md
  - `references/build-pdf.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/build-pdf.md
  - `references/build-remote-assets.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/build-remote-assets.md
  - `references/build-seo-meta.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/build-seo-meta.md
  - `references/code-groups.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-groups.md
  - `references/code-import-snippet.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-import-snippet.md
  - `references/code-line-highlighting.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-line-highlighting.md
  - `references/code-line-numbers.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-line-numbers.md
  - `references/code-magic-move.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-magic-move.md
  - `references/code-max-height.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-max-height.md
  - `references/code-twoslash.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/code-twoslash.md
  - `references/core-animations.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-animations.md
  - `references/core-cli.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-cli.md
  - `references/core-components.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-components.md
  - `references/core-exporting.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-exporting.md
  - `references/core-frontmatter.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-frontmatter.md
  - `references/core-global-context.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-global-context.md
  - `references/core-headmatter.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/slidev/references/core-headmatter.md
  - …and 31 more, listed in https://skillsdocs.com/api/v1/books/antfu/skills/skills/slidev

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: slidev
description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.
---

# Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

## When to Use

- Technical presentations or slidedecks with live code examples
- Syntax-highlighted code snippets with animations
- Interactive demos (Monaco editor, runnable code)
- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)
- Record presentations with presenter notes
- Export to PDF, PPTX, or host as SPA
- Code walkthroughs for developer talks or workshops

## Quick Start

```bash
pnpm create slidev    # Create project
pnpm run dev          # Start dev server (opens http://localhost:3030)
pnpm run build        # Build static SPA
pnpm run export       # Export to PDF (requires playwright-chromium)
```

**Verify**: After `pnpm run dev`, confirm slides load at `http://localhost:3030`. After `pnpm run export`, check the output PDF exists in the project root.

## Basic Syntax

```md
---
theme: default
title: My Presentation
---

# First Slide

Content here

---

# Second Slide

More content

<!--
Presenter notes go here
-->
```

- `---` separates slides
- First frontmatter = headmatter (deck config)
- HTML comments = presenter notes

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |
| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |
| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |
| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |
| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |
| Components | Built-in Vue components | [core-components](references/core-components.md) |
| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |
| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |
| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |
| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |

## Feature Reference

### Code & Editor

| Feature | Usage | Reference |
|---------|-------|-----------|
| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |
| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |
| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) |
| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |
| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |
| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |
| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |

### Diagrams & Math

| Feature | Usage | Reference |
|---------|-------|-----------|
| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |
| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |

### Layout & Styling

| Feature | Usage | Reference |
|---------|-------|-----------|
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |
| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |
| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |
| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |
| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |

### Animation & Interaction

| Feature | Usage | Reference |
|---------|-------|-----------|
| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |
| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |
| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |

### Syntax Extensions

| Feature | Usage | Reference |
|---------|-------|-----------|
| Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) |
| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |
| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |

### Presenter & Recording

| Feature | Usage | Reference |
|---------|-------|-----------|
| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |
| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |

### Export & Build

| Feature | Usage | Reference |
|---------|-------|-----------|
| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |
| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |
| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |
| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |
| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |

**Export prerequisite**: `pnpm add -D playwright-chromium` is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.

### Editor & Tools

| Feature | Usage | Reference |
|---------|-------|-----------|
| Side editor | Click edit icon | [editor-side](references/editor-side.md) |
| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |
| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |
| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |

### Lifecycle & API

| Feature | Usage | Reference |
|---------|-------|-----------|
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |
| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |

## Common Layouts

| Layout | Purpose |
|--------|---------|
| `cover` | Title/cover slide |
| `center` | Centered content |
| `default` | Standard slide |
| `two-cols` | Two columns (use `::right::`) |
| `two-cols-header` | Header + two columns |
| `image` / `image-left` / `image-right` | Image layouts |
| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |
| `quote` | Quotation |
| `section` | Section divider |
| `fact` / `statement` | Data/statement display |
| `intro` / `end` | Intro/end slides |

## Resources

- Documentation: https://sli.dev
- Theme Gallery: https://sli.dev/resources/theme-gallery
- Showcases: https://sli.dev/resources/showcases

<!-- chapter:end slug=slidev -->

---

<!-- chapter:begin slug=tsdown position=8 -->

## 8. tsdown

- **Source:** https://github.com/antfu/skills/blob/main/skills/tsdown/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/tsdown.md
- **Licence:** Declared in LICENSE.md — https://github.com/antfu/skills/blob/main/skills/tsdown/LICENSE.md

Bundled files (41), referenced from this skill's directory:
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/LICENSE.md
  - `README.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/README.md
  - `references/advanced-benchmark.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/advanced-benchmark.md
  - `references/advanced-ci.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/advanced-ci.md
  - `references/advanced-hooks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/advanced-hooks.md
  - `references/advanced-plugins.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/advanced-plugins.md
  - `references/advanced-programmatic.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/advanced-programmatic.md
  - `references/advanced-rolldown-options.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/advanced-rolldown-options.md
  - `references/guide-getting-started.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/guide-getting-started.md
  - `references/guide-introduction.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/guide-introduction.md
  - `references/guide-migrate-from-tsup.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/guide-migrate-from-tsup.md
  - `references/option-cjs-default.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-cjs-default.md
  - `references/option-cleaning.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-cleaning.md
  - `references/option-config-file.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-config-file.md
  - `references/option-css.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-css.md
  - `references/option-dependencies.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-dependencies.md
  - `references/option-dts.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-dts.md
  - `references/option-entry.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-entry.md
  - `references/option-exe.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-exe.md
  - `references/option-lint.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-lint.md
  - `references/option-log-level.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-log-level.md
  - `references/option-minification.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-minification.md
  - `references/option-output-directory.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-output-directory.md
  - `references/option-output-format.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/tsdown/references/option-output-format.md
  - …and 17 more, listed in https://skillsdocs.com/api/v1/books/antfu/skills/skills/tsdown

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: tsdown
description: Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for multiple formats, or migrating from tsup.
---

# tsdown - The Elegant Library Bundler

Blazing-fast bundler for TypeScript/JavaScript libraries powered by Rolldown and Oxc.

## Runtime Requirement

`tsdown` requires **Node.js 22.18.0 or higher to run** (build-time only). However, the bundled output can target much lower Node.js versions via the [`target`](references/option-target.md) option, so libraries built with tsdown are **not locked to Node.js 22+ at runtime**.

If your package needs to support Node.js 18 / 20:

- **Build with Node.js 22+ in CI** (e.g. set `target: 'node18'` or `target: 'node20'`).
- **Test the built output (or the packed tarball) on the lower Node.js versions** you intend to support — e.g. using a matrix job that runs the published package's tests on Node.js 18 / 20 / 22.

## When to Use

- Building TypeScript/JavaScript libraries for npm
- Generating TypeScript declaration files (.d.ts)
- Bundling for multiple formats (ESM, CJS, IIFE, UMD)
- Optimizing bundles with tree shaking and minification
- Migrating from tsup with minimal changes
- Building React, Vue, Solid, or Svelte component libraries

## Quick Start

```bash
# Install
pnpm add -D tsdown

# Basic usage
npx tsdown

# With config file
npx tsdown --config tsdown.config.ts

# Watch mode
npx tsdown --watch

# Migrate from tsup
npx tsdown-migrate
```

## Basic Configuration

```ts
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['./src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  clean: true,
})
```

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| Getting Started | Installation, first bundle, CLI basics | [guide-getting-started](references/guide-getting-started.md) |
| Configuration File | Config file formats, multiple configs, workspace | [option-config-file](references/option-config-file.md) |
| CLI Reference | All CLI commands and options | [reference-cli](references/reference-cli.md) |
| Migrate from tsup | Migration guide and compatibility notes | [guide-migrate-from-tsup](references/guide-migrate-from-tsup.md) |
| Plugins | Rolldown, Rollup, Unplugin support | [advanced-plugins](references/advanced-plugins.md) |

> For comprehensive migration assistance with complete option mappings, install the dedicated [`tsdown-migrate`](../tsdown-migrate/SKILL.md) skill: `npx skills add rolldown/tsdown --skill tsdown-migrate`
| Hooks | Lifecycle hooks for custom logic | [advanced-hooks](references/advanced-hooks.md) |
| Programmatic API | Build from Node.js scripts | [advanced-programmatic](references/advanced-programmatic.md) |
| Rolldown Options | Pass options directly to Rolldown | [advanced-rolldown-options](references/advanced-rolldown-options.md) |
| CI Environment | CI detection, `'ci-only'` / `'local-only'` values | [advanced-ci](references/advanced-ci.md) |

## Build Options

| Option | Usage | Reference |
|--------|-------|-----------|
| Entry points | `entry: ['src/*.ts', '!**/*.test.ts']` | [option-entry](references/option-entry.md) |
| Output formats | `format: ['esm', 'cjs', 'iife', 'umd']` | [option-output-format](references/option-output-format.md) |
| Output directory | `outDir: 'dist'`, `outExtensions` | [option-output-directory](references/option-output-directory.md) |
| Type declarations | `dts: true`, `dts: { sourcemap, compilerOptions, vue }` | [option-dts](references/option-dts.md) |
| Target environment | `target: 'es2020'`, `target: 'esnext'` | [option-target](references/option-target.md) |
| Platform | `platform: 'node'`, `platform: 'browser'` | [option-platform](references/option-platform.md) |
| Tree shaking | `treeshake: true`, custom options | [option-tree-shaking](references/option-tree-shaking.md) |
| Minification | `minify: true`, `minify: 'dce-only'` | [option-minification](references/option-minification.md) |
| Source maps | `sourcemap: true`, `'inline'`, `'hidden'` | [option-sourcemap](references/option-sourcemap.md) |
| Watch mode | `watch: true`, watch options | [option-watch-mode](references/option-watch-mode.md) |
| Cleaning | `clean: true`, clean patterns | [option-cleaning](references/option-cleaning.md) |
| Log level | `logLevel: 'silent'`, `failOnWarn: false` | [option-log-level](references/option-log-level.md) |

## Dependency Handling

| Feature | Usage | Reference |
|---------|-------|-----------|
| Never bundle | `deps: { neverBundle: ['react', /^@myorg\//] }` | [option-dependencies](references/option-dependencies.md) |
| Always bundle | `deps: { alwaysBundle: ['dep-to-bundle'] }` | [option-dependencies](references/option-dependencies.md) |
| Only bundle | `deps: { onlyBundle: ['cac', 'bumpp'] }` - Whitelist | [option-dependencies](references/option-dependencies.md) |
| Skip node_modules | `deps: { skipNodeModulesBundle: true }` | [option-dependencies](references/option-dependencies.md) |
| Auto external | Automatic dependency/peer/optional externalization | [option-dependencies](references/option-dependencies.md) |

## Output Enhancement

| Feature | Usage | Reference |
|---------|-------|-----------|
| Shims | `shims: true` - Add ESM/CJS compatibility | [option-shims](references/option-shims.md) |
| CJS default | `cjsDefault: true` (default) / `false` | [option-cjs-default](references/option-cjs-default.md) |
| Package exports | `exports: true` - Generate exports field | [option-package-exports](references/option-package-exports.md) |
| CSS handling | **[experimental]** `css: { ... }` — full pipeline with preprocessors, Lightning CSS, PostCSS, CSS modules, code splitting; requires `@tsdown/css` | [option-css](references/option-css.md) |
| CSS modules | `css: { modules: { localsConvention: 'camelCase' } }` — scoped class names for `.module.css` files | [option-css](references/option-css.md) |
| CSS inject | `css: { inject: true }` — preserve CSS imports in JS output | [option-css](references/option-css.md) |
| Unbundle mode | `unbundle: true` - Preserve directory structure | [option-unbundle](references/option-unbundle.md) |
| Root directory | `root: 'src'` - Control output directory mapping | [option-root](references/option-root.md) |
| Executable | **[experimental]** `exe: true` - Bundle as standalone executable, cross-platform via `@tsdown/exe` | [option-exe](references/option-exe.md) |
| Package validation | `publint: true`, `attw: true` - Validate package | [option-lint](references/option-lint.md) |

## Framework & Runtime Support

| Framework | Guide | Reference |
|-----------|-------|-----------|
| React | JSX transform, React Compiler | [recipe-react](references/recipe-react.md) |
| Vue | SFC support, JSX | [recipe-vue](references/recipe-vue.md) |
| Solid | SolidJS JSX transform | [recipe-solid](references/recipe-solid.md) |
| Svelte | Svelte component libraries (source distribution recommended) | [recipe-svelte](references/recipe-svelte.md) |
| WASM | WebAssembly modules via `rolldown-plugin-wasm` | [recipe-wasm](references/recipe-wasm.md) |

## Common Patterns

### Basic Library Bundle

```ts
export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  clean: true,
})
```

### Multiple Entry Points

```ts
export default defineConfig({
  entry: {
    index: 'src/index.ts',
    utils: 'src/utils.ts',
    cli: 'src/cli.ts',
  },
  format: ['esm', 'cjs'],
  dts: true,
})
```

### Browser Library (IIFE/UMD)

```ts
export default defineConfig({
  entry: ['src/index.ts'],
  format: ['iife'],
  globalName: 'MyLib',
  platform: 'browser',
  minify: true,
})
```

### React Component Library

```ts
export default defineConfig({
  entry: ['src/index.tsx'],
  format: ['esm', 'cjs'],
  dts: true,
  deps: {
    neverBundle: ['react', 'react-dom'],
  },
  inputOptions: {
    jsx: { runtime: 'automatic' },
  },
})
```

### Preserve Directory Structure

```ts
export default defineConfig({
  entry: ['src/**/*.ts', '!**/*.test.ts'],
  unbundle: true, // Preserve file structure
  format: ['esm'],
  dts: true,
})
```

### CI-Aware Configuration

```ts
export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  failOnWarn: 'ci-only',  // opt-in: fail on warnings in CI
  publint: 'ci-only',
  attw: 'ci-only',
})
```

### WASM Support

```ts
import { wasm } from 'rolldown-plugin-wasm'
import { defineConfig } from 'tsdown'

export default defineConfig({
  entry: ['src/index.ts'],
  plugins: [wasm()],
})
```

### Library with CSS and Sass

```ts
export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  target: 'chrome100',
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/styles/variables" as *;`,
      },
    },
  },
})
```

### Standalone Executable

```ts
export default defineConfig({
  entry: ['src/cli.ts'],
  exe: true,
})
```

### Cross-Platform Executable (requires `@tsdown/exe`)

```ts
export default defineConfig({
  entry: ['src/cli.ts'],
  exe: {
    targets: [
      { platform: 'linux', arch: 'x64', nodeVersion: '25.7.0' },
      { platform: 'darwin', arch: 'arm64', nodeVersion: '25.7.0' },
      { platform: 'win', arch: 'x64', nodeVersion: '25.7.0' },
    ],
  },
})
```

### Advanced with Hooks

```ts
export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  hooks: {
    'build:before': async (context) => {
      console.log('Building...')
    },
    'build:done': async (context) => {
      console.log('Build complete!')
    },
  },
})
```

## Configuration Features

### Multiple Configs

Export an array for multiple build configurations:

```ts
export default defineConfig([
  {
    entry: ['src/index.ts'],
    format: ['esm', 'cjs'],
    dts: true,
  },
  {
    entry: ['src/cli.ts'],
    format: ['esm'],
    platform: 'node',
  },
])
```

### Conditional Config

Use functions for dynamic configuration:

```ts
export default defineConfig((options) => {
  const isDev = options.watch
  return {
    entry: ['src/index.ts'],
    format: ['esm', 'cjs'],
    minify: !isDev,
    sourcemap: isDev,
  }
})
```

### Workspace/Monorepo

Use glob patterns to build multiple packages:

```ts
export default defineConfig({
  workspace: 'packages/*',
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
})
```

## CLI Quick Reference

```bash
# Basic commands
tsdown                          # Build once
tsdown --watch                  # Watch mode
tsdown --config custom.ts       # Custom config
npx tsdown-migrate              # Migrate from tsup

# Output options
tsdown --format esm,cjs        # Multiple formats
tsdown -d lib                  # Custom output directory (--out-dir)
tsdown --minify                # Enable minification
tsdown --dts                   # Generate declarations
tsdown --exe                   # Bundle as standalone executable
tsdown --unbundle              # Bundleless mode

# Entry options
tsdown src/index.ts            # Single entry
tsdown src/*.ts                # Glob patterns
tsdown src/a.ts src/b.ts       # Multiple entries

# Workspace / Monorepo
tsdown -W                      # Enable workspace mode
tsdown -W -F my-package        # Filter specific package
tsdown --filter /^pkg-/        # Filter by regex

# Development
tsdown --watch                 # Watch mode
tsdown --sourcemap             # Generate source maps
tsdown --clean                 # Clean output directory
tsdown --from-vite             # Reuse Vite config
tsdown --tsconfig tsconfig.build.json  # Custom tsconfig
```

## Best Practices

1. **Always generate type declarations** for TypeScript libraries:
   ```ts
   { dts: true }
   ```

2. **Externalize dependencies** to avoid bundling unnecessary code:
   ```ts
   { deps: { neverBundle: [/^react/, /^@myorg\//] } }
   ```

3. **Use tree shaking** for optimal bundle size:
   ```ts
   { treeshake: true }
   ```

4. **Enable minification** for production builds:
   ```ts
   { minify: true }
   ```

5. **Add shims** for better ESM/CJS compatibility:
   ```ts
   { shims: true }  // Adds __dirname, __filename, etc.
   ```

6. **Auto-generate package.json exports**:
   ```ts
   { exports: true }  // Creates proper exports field
   ```

7. **Use watch mode** during development:
   ```bash
   tsdown --watch
   ```

8. **Preserve structure** for utilities with many files:
   ```ts
   { unbundle: true }  // Keep directory structure
   ```

9. **Validate packages** in CI before publishing:
   ```ts
   { publint: 'ci-only', attw: 'ci-only' }
   ```

## Resources

- Documentation: https://tsdown.dev
- GitHub: https://github.com/rolldown/tsdown
- Rolldown: https://rolldown.rs
- Migration Guide: https://tsdown.dev/guide/migrate-from-tsup

<!-- chapter:end slug=tsdown -->

---

<!-- chapter:begin slug=turborepo position=9 -->

## 9. turborepo

- **Source:** https://github.com/antfu/skills/blob/main/skills/turborepo/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/turborepo.md
- **Licence:** Declared in LICENSE.md — https://github.com/antfu/skills/blob/main/skills/turborepo/LICENSE.md

Bundled files (27), referenced from this skill's directory:
  - `command/turborepo.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/command/turborepo.md
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/LICENSE.md
  - `references/best-practices/dependencies.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/best-practices/dependencies.md
  - `references/best-practices/packages.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/best-practices/packages.md
  - `references/best-practices/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/best-practices/RULE.md
  - `references/best-practices/structure.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/best-practices/structure.md
  - `references/boundaries/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/boundaries/RULE.md
  - `references/caching/gotchas.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/caching/gotchas.md
  - `references/caching/remote-cache.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/caching/remote-cache.md
  - `references/caching/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/caching/RULE.md
  - `references/ci/github-actions.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/ci/github-actions.md
  - `references/ci/patterns.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/ci/patterns.md
  - `references/ci/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/ci/RULE.md
  - `references/ci/vercel.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/ci/vercel.md
  - `references/cli/commands.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/cli/commands.md
  - `references/cli/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/cli/RULE.md
  - `references/configuration/global-options.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/configuration/global-options.md
  - `references/configuration/gotchas.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/configuration/gotchas.md
  - `references/configuration/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/configuration/RULE.md
  - `references/configuration/tasks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/configuration/tasks.md
  - `references/environment/gotchas.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/environment/gotchas.md
  - `references/environment/modes.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/environment/modes.md
  - `references/environment/RULE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/environment/RULE.md
  - `references/filtering/patterns.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/turborepo/references/filtering/patterns.md
  - …and 3 more, listed in https://skillsdocs.com/api/v1/books/antfu/skills/skills/turborepo

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: turborepo
description: |
  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.
metadata:
  version: 2.9.19-canary.9
---

# Turborepo Skill

Build system for JavaScript/TypeScript monorepos. Turborepo caches task outputs and runs tasks in parallel based on dependency graph.

## IMPORTANT: Package Tasks, Not Root Tasks

**Prefer package tasks over Root Tasks.**

When creating tasks/scripts/pipelines, you MUST default to package tasks:

1. Add the script to each relevant package's `package.json`
2. Register the task in root `turbo.json`
3. Root `package.json` only delegates via `turbo run <task>`

**DO NOT** put task logic in root `package.json` when it can live in packages. This defeats Turborepo's parallelization.

```json
// DO THIS: Scripts in each package
// apps/web/package.json
{ "scripts": { "build": "next build", "lint": "eslint .", "test": "vitest" } }

// apps/api/package.json
{ "scripts": { "build": "tsc", "lint": "eslint .", "test": "vitest" } }

// packages/ui/package.json
{ "scripts": { "build": "tsc", "lint": "eslint .", "test": "vitest" } }
```

```json
// turbo.json - register tasks
{
  "tasks": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] },
    "lint": {},
    "test": { "dependsOn": ["build"] }
  }
}
```

```json
// Root package.json - ONLY delegates, no task logic
{
  "scripts": {
    "build": "turbo run build",
    "lint": "turbo run lint",
    "test": "turbo run test"
  }
}
```

```json
// DO NOT DO THIS - defeats parallelization
// Root package.json
{
  "scripts": {
    "build": "cd apps/web && next build && cd ../api && tsc",
    "lint": "eslint apps/ packages/",
    "test": "vitest"
  }
}
```

Root Tasks (`//#taskname`) are ONLY for tasks that truly cannot exist in packages, such as Vitest Projects' `//#test`, repo-wide release scripts, or tooling that does not invoke `turbo` itself.

## Secondary Rule: `turbo run` vs `turbo`

**Always use `turbo run` when the command is written into code:**

```json
// package.json - ALWAYS "turbo run"
{
  "scripts": {
    "build": "turbo run build"
  }
}
```

```yaml
# CI workflows - ALWAYS "turbo run"
- run: turbo run build --affected
```

**The shorthand `turbo <tasks>` is ONLY for one-off terminal commands** typed directly by humans or agents. Never write `turbo build` into package.json, CI, or scripts.

## Quick Decision Trees

### "I need to configure a task"

```
Configure a task?
├─ Define task dependencies → references/configuration/tasks.md
├─ Lint/check-types (parallel + caching) → Use Transit Nodes pattern (see below)
├─ Specify build outputs → references/configuration/tasks.md#outputs
├─ Handle environment variables → references/environment/RULE.md
├─ Set up dev/watch tasks → references/configuration/tasks.md#persistent
├─ Package-specific config → references/configuration/RULE.md#package-configurations
└─ Global settings (cacheDir, daemon) → references/configuration/global-options.md
```

### "My cache isn't working"

```
Cache problems?
├─ Tasks run but outputs not restored → Missing `outputs` key
├─ Cache misses unexpectedly → references/caching/gotchas.md
├─ Need to debug hash inputs → Use --summarize or --dry
├─ Want to skip cache entirely → Use --force or cache: false
├─ Remote cache not working → references/caching/remote-cache.md
└─ Environment causing misses → references/environment/gotchas.md
```

### "I want to run only changed packages"

```
Run only what changed?
├─ Changed packages + dependents (RECOMMENDED) → turbo run build --affected
├─ Custom base branch → --affected --affected-base=origin/develop
├─ Manual git comparison → --filter=...[origin/main]
└─ See all filter options → references/filtering/RULE.md
```

**`--affected` is the primary way to run only changed packages.** It automatically compares against the default branch and includes dependents.

### "I want to filter packages"

```
Filter packages?
├─ Only changed packages → --affected (see above)
├─ By package name → --filter=web
├─ By directory → --filter=./apps/*
├─ Package + dependencies → --filter=web...
├─ Package + dependents → --filter=...web
└─ Complex combinations → references/filtering/patterns.md
```

### "Environment variables aren't working"

```
Environment issues?
├─ Vars not available at runtime → Strict mode filtering (default)
├─ Cache hits with wrong env → Var not in `env` key
├─ .env changes not causing rebuilds → .env not in `inputs`
├─ CI variables missing → references/environment/gotchas.md
└─ Framework vars (NEXT_PUBLIC_*) → Auto-included via inference
```

### "I need to set up CI"

```
CI setup?
├─ GitHub Actions → references/ci/github-actions.md
├─ Vercel deployment → references/ci/vercel.md
├─ Remote cache in CI → references/caching/remote-cache.md
├─ Only build changed packages → --affected flag
├─ Skip unnecessary builds → turbo-ignore (references/cli/commands.md)
└─ Skip container setup when no changes → turbo-ignore
```

### "I want to watch for changes during development"

```
Watch mode?
├─ Re-run tasks on change → turbo watch (references/watch/RULE.md)
├─ Dev servers with dependencies → Use `with` key (references/configuration/tasks.md#with)
├─ Restart dev server on dep change → Use `interruptible: true`
└─ Persistent dev tasks → Use `persistent: true`
```

### "I need to create/structure a package"

```
Package creation/structure?
├─ Create an internal package → references/best-practices/packages.md
├─ Repository structure → references/best-practices/structure.md
├─ Dependency management → references/best-practices/dependencies.md
├─ Best practices overview → references/best-practices/RULE.md
├─ JIT vs Compiled packages → references/best-practices/packages.md#compilation-strategies
└─ Sharing code between apps → references/best-practices/RULE.md#package-types
```

### "How should I structure my monorepo?"

```
Monorepo structure?
├─ Standard layout (apps/, packages/) → references/best-practices/RULE.md
├─ Package types (apps vs libraries) → references/best-practices/RULE.md#package-types
├─ Creating internal packages → references/best-practices/packages.md
├─ TypeScript configuration → references/best-practices/structure.md#typescript-configuration
├─ ESLint configuration → references/best-practices/structure.md#eslint-configuration
├─ Dependency management → references/best-practices/dependencies.md
└─ Enforce package boundaries → references/boundaries/RULE.md
```

### "I want to enforce architectural boundaries"

```
Enforce boundaries?
├─ Check for violations → turbo boundaries
├─ Tag packages → references/boundaries/RULE.md#tags
├─ Restrict which packages can import others → references/boundaries/RULE.md#rule-types
└─ Prevent cross-package file imports → references/boundaries/RULE.md
```

## Critical Anti-Patterns

### Using `turbo` Shorthand in Code

**`turbo run` is recommended in package.json scripts and CI pipelines.** The shorthand `turbo <task>` is intended for interactive terminal use.

```json
// WRONG - using shorthand in package.json
{
  "scripts": {
    "build": "turbo build",
    "dev": "turbo dev"
  }
}

// CORRECT
{
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev"
  }
}
```

```yaml
# WRONG - using shorthand in CI
- run: turbo build --affected

# CORRECT
- run: turbo run build --affected
```

### Root Scripts Bypassing Turbo

Root `package.json` scripts MUST delegate to `turbo run`, not run tasks directly.

```json
// WRONG - bypasses turbo entirely
{
  "scripts": {
    "build": "bun build",
    "dev": "bun dev"
  }
}

// CORRECT - delegates to turbo
{
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev"
  }
}
```

### Using `&&` to Chain Turbo Tasks

Don't chain turbo tasks with `&&`. Let turbo orchestrate.

```json
// WRONG - turbo task not using turbo run
{
  "scripts": {
    "changeset:publish": "bun build && changeset publish"
  }
}

// CORRECT
{
  "scripts": {
    "changeset:publish": "turbo run build && changeset publish"
  }
}
```

### `prebuild` Scripts That Manually Build Dependencies

Scripts like `prebuild` that manually build other packages bypass Turborepo's dependency graph.

```json
// WRONG - manually building dependencies
{
  "scripts": {
    "prebuild": "cd ../../packages/types && bun run build && cd ../utils && bun run build",
    "build": "next build"
  }
}
```

**However, the fix depends on whether workspace dependencies are declared:**

1. **If dependencies ARE declared** (e.g., `"@repo/types": "workspace:*"` in package.json), remove the `prebuild` script. Turbo's `dependsOn: ["^build"]` handles this automatically.

2. **If dependencies are NOT declared**, the `prebuild` exists because `^build` won't trigger without a dependency relationship. The fix is to:
   - Add the dependency to package.json: `"@repo/types": "workspace:*"`
   - Then remove the `prebuild` script

```json
// CORRECT - declare dependency, let turbo handle build order
// package.json
{
  "dependencies": {
    "@repo/types": "workspace:*",
    "@repo/utils": "workspace:*"
  },
  "scripts": {
    "build": "next build"
  }
}

// turbo.json
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}
```

**Key insight:** `^build` only runs build in packages listed as dependencies. No dependency declaration = no automatic build ordering.

### Overly Broad `globalDependencies`

`globalDependencies` affects ALL tasks in ALL packages via the **global hash** — tasks cannot opt out of specific files, even with negation globs in `inputs`. Be specific.

```json
// WRONG - heavy hammer, affects all hashes
{
  "globalDependencies": ["**/.env.*local"]
}

// BETTER - move to task-level inputs
{
  "globalDependencies": [".env"],
  "tasks": {
    "build": {
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "outputs": ["dist/**"]
    }
  }
}
```

With `futureFlags.globalConfiguration`, this problem is reduced because `global.inputs` files are folded into each task's inputs (not the global hash). Tasks can exclude specific files:

```json
// BEST - global.inputs with per-task exclusion
{
  "futureFlags": { "globalConfiguration": true },
  "global": {
    "inputs": [".env"]
  },
  "tasks": {
    "build": { "outputs": ["dist/**"] },
    "lint": {
      "inputs": ["$TURBO_DEFAULT$", "!$TURBO_ROOT$/.env"]
    }
  }
}
```

### Repetitive Task Configuration

Look for repeated configuration across tasks that can be collapsed. Turborepo supports shared configuration patterns.

```json
// WRONG - repetitive env and inputs across tasks
{
  "tasks": {
    "build": {
      "env": ["API_URL", "DATABASE_URL"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"]
    },
    "test": {
      "env": ["API_URL", "DATABASE_URL"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"]
    },
    "dev": {
      "env": ["API_URL", "DATABASE_URL"],
      "inputs": ["$TURBO_DEFAULT$", ".env*"],
      "cache": false,
      "persistent": true
    }
  }
}

// BETTER - use globalEnv and globalDependencies for shared config
{
  "globalEnv": ["API_URL", "DATABASE_URL"],
  "globalDependencies": [".env*"],
  "tasks": {
    "build": {},
    "test": {},
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}
```

**When to use global vs task-level:**

- `globalEnv` / `globalDependencies` - affects ALL tasks, use for truly shared config
- Task-level `env` / `inputs` - use when only specific tasks need it

### NOT an Anti-Pattern: Large `env` Arrays

A large `env` array (even 50+ variables) is **not** a problem. It usually means the user was thorough about declaring their build's environment dependencies. Do not flag this as an issue.

### Using `--parallel` Flag

The `--parallel` flag bypasses Turborepo's dependency graph. If tasks need parallel execution, configure `dependsOn` correctly instead.

```bash
# WRONG - bypasses dependency graph
turbo run lint --parallel

# CORRECT - configure tasks to allow parallel execution
# In turbo.json, set dependsOn appropriately (or use transit nodes)
turbo run lint
```

### Package-Specific Task Overrides in Root turbo.json

When multiple packages need different task configurations, use **Package Configurations** (`turbo.json` in each package) instead of cluttering root `turbo.json` with `package#task` overrides.

```json
// WRONG - root turbo.json with many package-specific overrides
{
  "tasks": {
    "test": { "dependsOn": ["build"] },
    "@repo/web#test": { "outputs": ["coverage/**"] },
    "@repo/api#test": { "outputs": ["coverage/**"] },
    "@repo/utils#test": { "outputs": [] },
    "@repo/cli#test": { "outputs": [] },
    "@repo/core#test": { "outputs": [] }
  }
}

// CORRECT - use Package Configurations
// Root turbo.json - base config only
{
  "tasks": {
    "test": { "dependsOn": ["build"] }
  }
}

// packages/web/turbo.json - package-specific override
{
  "extends": ["//"],
  "tasks": {
    "test": { "outputs": ["coverage/**"] }
  }
}

// packages/api/turbo.json
{
  "extends": ["//"],
  "tasks": {
    "test": { "outputs": ["coverage/**"] }
  }
}
```

**Benefits of Package Configurations:**

- Keeps configuration close to the code it affects
- Root turbo.json stays clean and focused on base patterns
- Easier to understand what's special about each package
- Works with `$TURBO_EXTENDS$` to inherit + extend arrays

**When to use `package#task` in root:**

- Single package needs a unique dependency (e.g., `"deploy": { "dependsOn": ["web#build"] }`)
- Temporary override while migrating

See `references/configuration/RULE.md#package-configurations` for full details.

### Using `../` to Traverse Out of Package in `inputs`

Don't use relative paths like `../` to reference files outside the package. Use `$TURBO_ROOT$` instead.

```json
// WRONG - traversing out of package
{
  "tasks": {
    "build": {
      "inputs": ["$TURBO_DEFAULT$", "../shared-config.json"]
    }
  }
}

// CORRECT - use $TURBO_ROOT$ for repo root
{
  "tasks": {
    "build": {
      "inputs": ["$TURBO_DEFAULT$", "$TURBO_ROOT$/shared-config.json"]
    }
  }
}
```

### Missing `outputs` for File-Producing Tasks

**Before flagging missing `outputs`, check what the task actually produces:**

1. Read the package's script (e.g., `"build": "tsc"`, `"test": "vitest"`)
2. Determine if it writes files to disk or only outputs to stdout
3. Only flag if the task produces files that should be cached

```json
// WRONG: build produces files but they're not cached
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

// CORRECT: build outputs are cached
{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    }
  }
}
```

Common outputs by framework:

- Next.js: `[".next/**", "!.next/cache/**", "!.next/dev/**"]`
- Vite/Rollup: `["dist/**"]`
- tsc: `["dist/**"]` or custom `outDir`

**TypeScript `--noEmit` can still produce cache files:**

When `incremental: true` in tsconfig.json, `tsc --noEmit` writes `.tsbuildinfo` files even without emitting JS. Check the tsconfig before assuming no outputs:

```json
// If tsconfig has incremental: true, tsc --noEmit produces cache files
{
  "tasks": {
    "typecheck": {
      "outputs": ["node_modules/.cache/tsbuildinfo.json"] // or wherever tsBuildInfoFile points
    }
  }
}
```

To determine correct outputs for TypeScript tasks:

1. Check if `incremental` or `composite` is enabled in tsconfig
2. Check `tsBuildInfoFile` for custom cache location (default: alongside `outDir` or in project root)
3. If no incremental mode, `tsc --noEmit` produces no files

### `^build` vs `build` Confusion

```json
{
  "tasks": {
    // ^build = run build in DEPENDENCIES first (other packages this one imports)
    "build": {
      "dependsOn": ["^build"]
    },
    // build (no ^) = run build in SAME PACKAGE first
    "test": {
      "dependsOn": ["build"]
    },
    // pkg#task = specific package's task
    "deploy": {
      "dependsOn": ["web#build"]
    }
  }
}
```

### Environment Variables Not Hashed

```json
// WRONG: API_URL changes won't cause rebuilds
{
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    }
  }
}

// CORRECT: API_URL changes invalidate cache
{
  "tasks": {
    "build": {
      "outputs": ["dist/**"],
      "env": ["API_URL", "API_KEY"]
    }
  }
}
```

### `.env` Files Not in Inputs

Turbo does NOT load `.env` files - your framework does. But Turbo needs to know about changes:

```json
// WRONG: .env changes don't invalidate cache
{
  "tasks": {
    "build": {
      "env": ["API_URL"]
    }
  }
}

// CORRECT: .env file changes invalidate cache
{
  "tasks": {
    "build": {
      "env": ["API_URL"],
      "inputs": ["$TURBO_DEFAULT$", ".env", ".env.*"]
    }
  }
}
```

### Root `.env` File in Monorepo

A `.env` file at the repo root is an anti-pattern — even for small monorepos or starter templates. It creates implicit coupling between packages and makes it unclear which packages depend on which variables.

```
// WRONG - root .env affects all packages implicitly
my-monorepo/
├── .env              # Which packages use this?
├── apps/
│   ├── web/
│   └── api/
└── packages/

// CORRECT - .env files in packages that need them
my-monorepo/
├── apps/
│   ├── web/
│   │   └── .env      # Clear: web needs DATABASE_URL
│   └── api/
│       └── .env      # Clear: api needs API_KEY
└── packages/
```

**Problems with root `.env`:**

- Unclear which packages consume which variables
- All packages get all variables (even ones they don't need)
- Cache invalidation is coarse-grained (root .env change invalidates everything)
- Security risk: packages may accidentally access sensitive vars meant for others
- Bad habits start small — starter templates should model correct patterns

**If you must share variables**, use `globalEnv` to be explicit about what's shared, and document why.

### Strict Mode Filtering CI Variables

By default, Turborepo filters environment variables to only those in `env`/`globalEnv`. CI variables may be missing:

```json
// If CI scripts need GITHUB_TOKEN but it's not in env:
{
  "globalPassThroughEnv": ["GITHUB_TOKEN", "CI"],
  "tasks": { ... }
}
```

Or use `--env-mode=loose` (not recommended for production).

### Shared Code in Apps (Should Be a Package)

```
// WRONG: Shared code inside an app
apps/
  web/
    shared/          # This breaks monorepo principles!
      utils.ts

// CORRECT: Extract to a package
packages/
  utils/
    src/utils.ts
```

### Accessing Files Across Package Boundaries

```typescript
// WRONG: Reaching into another package's internals
import { Button } from "../../packages/ui/src/button";

// CORRECT: Install and import properly
import { Button } from "@repo/ui/button";
```

### Too Many Root Dependencies

```json
// WRONG: App dependencies in root
{
  "dependencies": {
    "react": "^18",
    "next": "^14"
  }
}

// CORRECT: Only repo tools in root
{
  "devDependencies": {
    "turbo": "latest"
  }
}
```

## Common Task Configurations

### Standard Build Pipeline

```json
{
  "$schema": "https://v2-9-19-canary-9.turborepo.dev/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**", "!.next/cache/**", "!.next/dev/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}
```

Add a `transit` task if you have tasks that need parallel execution with cache invalidation (see below).

### Dev Task with `^dev` Pattern (for `turbo watch`)

A `dev` task with `dependsOn: ["^dev"]` and `persistent: false` in root turbo.json may look unusual but is **correct for `turbo watch` workflows**:

```json
// Root turbo.json
{
  "tasks": {
    "dev": {
      "dependsOn": ["^dev"],
      "cache": false,
      "persistent": false  // Packages have one-shot dev scripts
    }
  }
}

// Package turbo.json (apps/web/turbo.json)
{
  "extends": ["//"],
  "tasks": {
    "dev": {
      "persistent": true  // Apps run long-running dev servers
    }
  }
}
```

**Why this works:**

- **Packages** (e.g., `@acme/db`, `@acme/validators`) have `"dev": "tsc"` — one-shot type generation that completes quickly
- **Apps** override with `persistent: true` for actual dev servers (Next.js, etc.)
- **`turbo watch`** re-runs the one-shot package `dev` scripts when source files change, keeping types in sync

**Intended usage:** Run `turbo watch dev` (not `turbo run dev`). Watch mode re-executes one-shot tasks on file changes while keeping persistent tasks running.

**Alternative pattern:** Use a separate task name like `prepare` or `generate` for one-shot dependency builds to make the intent clearer:

```json
{
  "tasks": {
    "prepare": {
      "dependsOn": ["^prepare"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "dependsOn": ["prepare"],
      "cache": false,
      "persistent": true
    }
  }
}
```

### Transit Nodes for Parallel Tasks with Cache Invalidation

Some tasks can run in parallel (don't need built output from dependencies) but must invalidate cache when dependency source code changes.

**The problem with `dependsOn: ["^taskname"]`:**

- Forces sequential execution (slow)

**The problem with `dependsOn: []` (no dependencies):**

- Allows parallel execution (fast)
- But cache is INCORRECT - changing dependency source won't invalidate cache

**Transit Nodes solve both:**

```json
{
  "tasks": {
    "transit": { "dependsOn": ["^transit"] },
    "my-task": { "dependsOn": ["transit"] }
  }
}
```

The `transit` task creates dependency relationships without matching any actual script, so tasks run in parallel with correct cache invalidation.

**How to identify tasks that need this pattern:** Look for tasks that read source files from dependencies but don't need their build outputs.

### With Environment Variables

```json
{
  "globalEnv": ["NODE_ENV"],
  "globalDependencies": [".env"],
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"],
      "env": ["API_URL", "DATABASE_URL"]
    }
  }
}
```

With `futureFlags.globalConfiguration`, the same config moves global settings under `global` — and `.env` becomes a per-task input instead of a global hash input:

```json
{
  "futureFlags": { "globalConfiguration": true },
  "global": {
    "env": ["NODE_ENV"],
    "inputs": [".env"]
  },
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"],
      "env": ["API_URL", "DATABASE_URL"]
    }
  }
}
```

## Reference Index

### Configuration

| File                                                                            | Purpose                                                                   |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| [configuration/RULE.md](./references/configuration/RULE.md)                     | turbo.json overview, Package Configurations                               |
| [configuration/tasks.md](./references/configuration/tasks.md)                   | dependsOn, outputs, inputs, env, cache, persistent                        |
| [configuration/global-options.md](./references/configuration/global-options.md) | globalEnv, globalDependencies, global key, futureFlags, cacheDir, envMode |
| [configuration/gotchas.md](./references/configuration/gotchas.md)               | Common configuration mistakes                                             |

### Caching

| File                                                            | Purpose                                      |
| --------------------------------------------------------------- | -------------------------------------------- |
| [caching/RULE.md](./references/caching/RULE.md)                 | How caching works, hash inputs               |
| [caching/remote-cache.md](./references/caching/remote-cache.md) | Vercel Remote Cache, self-hosted, login/link |
| [caching/gotchas.md](./references/caching/gotchas.md)           | Debugging cache misses, --summarize, --dry   |

### Environment Variables

| File                                                          | Purpose                                   |
| ------------------------------------------------------------- | ----------------------------------------- |
| [environment/RULE.md](./references/environment/RULE.md)       | env, globalEnv, passThroughEnv            |
| [environment/modes.md](./references/environment/modes.md)     | Strict vs Loose mode, framework inference |
| [environment/gotchas.md](./references/environment/gotchas.md) | .env files, CI issues                     |

### Filtering

| File                                                        | Purpose                  |
| ----------------------------------------------------------- | ------------------------ |
| [filtering/RULE.md](./references/filtering/RULE.md)         | --filter syntax overview |
| [filtering/patterns.md](./references/filtering/patterns.md) | Common filter patterns   |

### CI/CD

| File                                                      | Purpose                         |
| --------------------------------------------------------- | ------------------------------- |
| [ci/RULE.md](./references/ci/RULE.md)                     | General CI principles           |
| [ci/github-actions.md](./references/ci/github-actions.md) | Complete GitHub Actions setup   |
| [ci/vercel.md](./references/ci/vercel.md)                 | Vercel deployment, turbo-ignore |
| [ci/patterns.md](./references/ci/patterns.md)             | --affected, caching strategies  |

### CLI

| File                                            | Purpose                                       |
| ----------------------------------------------- | --------------------------------------------- |
| [cli/RULE.md](./references/cli/RULE.md)         | turbo run basics                              |
| [cli/commands.md](./references/cli/commands.md) | turbo run flags, turbo-ignore, other commands |

### Best Practices

| File                                                                          | Purpose                                                         |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------- |
| [best-practices/RULE.md](./references/best-practices/RULE.md)                 | Monorepo best practices overview                                |
| [best-practices/structure.md](./references/best-practices/structure.md)       | Repository structure, workspace config, TypeScript/ESLint setup |
| [best-practices/packages.md](./references/best-practices/packages.md)         | Creating internal packages, JIT vs Compiled, exports            |
| [best-practices/dependencies.md](./references/best-practices/dependencies.md) | Dependency management, installing, version sync                 |

### Watch Mode

| File                                        | Purpose                                         |
| ------------------------------------------- | ----------------------------------------------- |
| [watch/RULE.md](./references/watch/RULE.md) | turbo watch, interruptible tasks, dev workflows |

### Boundaries (Experimental)

| File                                                  | Purpose                                               |
| ----------------------------------------------------- | ----------------------------------------------------- |
| [boundaries/RULE.md](./references/boundaries/RULE.md) | Enforce package isolation, tag-based dependency rules |

## Source Documentation

This skill is based on the official Turborepo documentation at:

- Source: `apps/docs/content/docs/` in the Turborepo repository
- Live: https://turborepo.dev/docs

<!-- chapter:end slug=turborepo -->

---

<!-- chapter:begin slug=unocss position=10 -->

## 10. unocss

- **Source:** https://github.com/antfu/skills/blob/main/skills/unocss/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/unocss.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (24), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/GENERATION.md
  - `references/core-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-config.md
  - `references/core-extracting.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-extracting.md
  - `references/core-layers.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-layers.md
  - `references/core-rules.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-rules.md
  - `references/core-safelist.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-safelist.md
  - `references/core-shortcuts.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-shortcuts.md
  - `references/core-theme.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-theme.md
  - `references/core-variants.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/core-variants.md
  - `references/integrations-nuxt.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/integrations-nuxt.md
  - `references/integrations-vite.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/integrations-vite.md
  - `references/preset-attributify.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-attributify.md
  - `references/preset-icons.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-icons.md
  - `references/preset-mini.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-mini.md
  - `references/preset-rem-to-px.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-rem-to-px.md
  - `references/preset-tagify.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-tagify.md
  - `references/preset-typography.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-typography.md
  - `references/preset-web-fonts.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-web-fonts.md
  - `references/preset-wind3.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-wind3.md
  - `references/preset-wind4.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/preset-wind4.md
  - `references/transformer-attributify-jsx.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/transformer-attributify-jsx.md
  - `references/transformer-compile-class.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/transformer-compile-class.md
  - `references/transformer-directives.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/transformer-directives.md
  - `references/transformer-variant-group.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/unocss/references/transformer-variant-group.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: unocss
description: UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/unocss/unocss, scripts located at https://github.com/antfu/skills
---

UnoCSS is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated - all CSS utilities are provided via presets. It's a superset of Tailwind CSS, so you can reuse your Tailwind knowledge for basic syntax usage.

**Important:** Before writing UnoCSS code, agents should check for `uno.config.*` or `unocss.config.*` files in the project root to understand what presets, rules, and shortcuts are available. If the project setup is unclear, avoid using attributify mode and other advanced features - stick to basic `class` usage.

> The skill is based on UnoCSS 66.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup and all configuration options | [core-config](references/core-config.md) |
| Rules | Static and dynamic rules for generating CSS utilities | [core-rules](references/core-rules.md) |
| Shortcuts | Combine multiple rules into single shorthands | [core-shortcuts](references/core-shortcuts.md) |
| Theme | Theming system for colors, breakpoints, and design tokens | [core-theme](references/core-theme.md) |
| Variants | Apply variations like hover:, dark:, responsive to rules | [core-variants](references/core-variants.md) |
| Extracting | How UnoCSS extracts utilities from source code | [core-extracting](references/core-extracting.md) |
| Safelist & Blocklist | Force include or exclude specific utilities | [core-safelist](references/core-safelist.md) |
| Layers & Preflights | CSS layer ordering and raw CSS injection | [core-layers](references/core-layers.md) |

## Presets

### Main Presets

| Topic | Description | Reference |
|-------|-------------|-----------|
| Preset Wind3 | Tailwind CSS v3 / Windi CSS compatible preset (most common) | [preset-wind3](references/preset-wind3.md) |
| Preset Wind4 | Tailwind CSS v4 compatible preset with modern CSS features | [preset-wind4](references/preset-wind4.md) |
| Preset Mini | Minimal preset with essential utilities for custom builds | [preset-mini](references/preset-mini.md) |

### Feature Presets

| Topic | Description | Reference |
|-------|-------------|-----------|
| Preset Icons | Pure CSS icons using Iconify with any icon set | [preset-icons](references/preset-icons.md) |
| Preset Attributify | Group utilities in HTML attributes instead of class | [preset-attributify](references/preset-attributify.md) |
| Preset Typography | Prose classes for typographic defaults | [preset-typography](references/preset-typography.md) |
| Preset Web Fonts | Easy Google Fonts and other web fonts integration | [preset-web-fonts](references/preset-web-fonts.md) |
| Preset Tagify | Use utilities as HTML tag names | [preset-tagify](references/preset-tagify.md) |
| Preset Rem to Px | Convert rem units to px for utilities | [preset-rem-to-px](references/preset-rem-to-px.md) |

## Transformers

| Topic | Description | Reference |
|-------|-------------|-----------|
| Variant Group | Shorthand for grouping utilities with common prefixes | [transformer-variant-group](references/transformer-variant-group.md) |
| Directives | CSS directives: @apply, @screen, theme(), icon() | [transformer-directives](references/transformer-directives.md) |
| Compile Class | Compile multiple classes into one hashed class | [transformer-compile-class](references/transformer-compile-class.md) |
| Attributify JSX | Support valueless attributify in JSX/TSX | [transformer-attributify-jsx](references/transformer-attributify-jsx.md) |

## Integrations

| Topic | Description | Reference |
|-------|-------------|-----------|
| Vite Integration | Setting up UnoCSS with Vite and framework-specific tips | [integrations-vite](references/integrations-vite.md) |
| Nuxt Integration | UnoCSS module for Nuxt applications | [integrations-nuxt](references/integrations-nuxt.md) |

<!-- chapter:end slug=unocss -->

---

<!-- chapter:begin slug=vite position=11 -->

## 11. vite

- **Source:** https://github.com/antfu/skills/blob/main/skills/vite/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vite/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vite.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (7), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/GENERATION.md
  - `references/build-and-ssr.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/references/build-and-ssr.md
  - `references/core-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/references/core-config.md
  - `references/core-features.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/references/core-features.md
  - `references/core-plugin-api.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/references/core-plugin-api.md
  - `references/environment-api.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/references/environment-api.md
  - `references/rolldown-migration.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vite/references/rolldown-migration.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vite
description: Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
metadata:
  author: Anthony Fu
  version: "2026.1.31"
  source: Generated from https://github.com/vitejs/vite, scripts at https://github.com/antfu/skills
---

# Vite

> Based on Vite 8 beta (Rolldown-powered). Vite 8 uses Rolldown bundler and Oxc transformer.

Vite is a next-generation frontend build tool with fast dev server (native ESM + HMR) and optimized production builds.

## Preferences

- Use TypeScript: prefer `vite.config.ts`
- Always use ESM, avoid CommonJS

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | `vite.config.ts`, `defineConfig`, conditional configs, `loadEnv` | [core-config](references/core-config.md) |
| Features | `import.meta.glob`, asset queries (`?raw`, `?url`), `import.meta.env`, HMR API | [core-features](references/core-features.md) |
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | [core-plugin-api](references/core-plugin-api.md) |

## Build & SSR

| Topic | Description | Reference |
|-------|-------------|-----------|
| Build & SSR | Library mode, SSR middleware mode, `ssrLoadModule`, JavaScript API | [build-and-ssr](references/build-and-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Environment API | Vite 6+ multi-environment support, custom runtimes | [environment-api](references/environment-api.md) |
| Rolldown Migration | Vite 8 changes: Rolldown bundler, Oxc transformer, config migration | [rolldown-migration](references/rolldown-migration.md) |

## Quick Reference

### CLI Commands

```bash
vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build
```

### Common Config

```ts
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})
```

### Official Plugins

- `@vitejs/plugin-vue` - Vue 3 SFC support
- `@vitejs/plugin-vue-jsx` - Vue 3 JSX
- `@vitejs/plugin-react` - React with Oxc/Babel
- `@vitejs/plugin-react-swc` - React with SWC
- `@vitejs/plugin-legacy` - Legacy browser support

<!-- chapter:end slug=vite -->

---

<!-- chapter:begin slug=vitepress position=12 -->

## 12. vitepress

- **Source:** https://github.com/antfu/skills/blob/main/skills/vitepress/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vitepress.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (15), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/GENERATION.md
  - `references/advanced-i18n.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/advanced-i18n.md
  - `references/advanced-ssr.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/advanced-ssr.md
  - `references/core-cli.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/core-cli.md
  - `references/core-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/core-config.md
  - `references/core-markdown.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/core-markdown.md
  - `references/core-routing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/core-routing.md
  - `references/features-code-blocks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/features-code-blocks.md
  - `references/features-data-loading.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/features-data-loading.md
  - `references/features-dynamic-routes.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/features-dynamic-routes.md
  - `references/features-vue.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/features-vue.md
  - `references/recipes-deploy.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/recipes-deploy.md
  - `references/theme-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/theme-config.md
  - `references/theme-custom.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/theme-custom.md
  - `references/theme-customization.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitepress/references/theme-customization.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vitepress
description: VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/vuejs/vitepress, scripts located at https://github.com/antfu/skills
---

VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It takes Markdown content, applies a theme, and generates static HTML that becomes an SPA for fast navigation. Perfect for documentation, blogs, and marketing sites.

**Key Characteristics:**
- File-based routing with `.md` files
- Vue components work directly in Markdown
- Fast HMR with instant updates (<100ms)
- Default theme optimized for documentation
- Built-in search (local or Algolia)

**Before working with VitePress projects:**
- Check `.vitepress/config.ts` for site configuration
- Look at `.vitepress/theme/` for custom theme extensions
- The `public/` directory contains static assets served as-is

> The skill is based on VitePress 1.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup, defineConfig, site metadata | [core-config](references/core-config.md) |
| CLI | Command-line interface: dev, build, preview, init | [core-cli](references/core-cli.md) |
| Routing | File-based routing, source directory, rewrites | [core-routing](references/core-routing.md) |
| Markdown | Frontmatter, containers, tables, anchors, includes | [core-markdown](references/core-markdown.md) |

## Features

### Code & Content

| Topic | Description | Reference |
|-------|-------------|-----------|
| Code Blocks | Syntax highlighting, line highlighting, diffs, focus | [features-code-blocks](references/features-code-blocks.md) |
| Vue in Markdown | Components, script setup, directives, templating | [features-vue](references/features-vue.md) |
| Data Loading | Build-time data loaders, createContentLoader | [features-data-loading](references/features-data-loading.md) |
| Dynamic Routes | Generate pages from data, paths loader files | [features-dynamic-routes](references/features-dynamic-routes.md) |

## Theme

| Topic | Description | Reference |
|-------|-------------|-----------|
| Theme Config | Nav, sidebar, search, social links, footer | [theme-config](references/theme-config.md) |
| Customization | CSS variables, slots, fonts, global components | [theme-customization](references/theme-customization.md) |
| Custom Theme | Building themes from scratch, theme interface | [theme-custom](references/theme-custom.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Internationalization | Multi-language sites, locale configuration | [advanced-i18n](references/advanced-i18n.md) |
| SSR Compatibility | Server-side rendering, ClientOnly, dynamic imports | [advanced-ssr](references/advanced-ssr.md) |

## Recipes

| Topic | Description | Reference |
|-------|-------------|-----------|
| Deployment | GitHub Pages, Netlify, Vercel, Cloudflare, Nginx | [recipes-deploy](references/recipes-deploy.md) |

<!-- chapter:end slug=vitepress -->

---

<!-- chapter:begin slug=vitest position=13 -->

## 13. vitest

- **Source:** https://github.com/antfu/skills/blob/main/skills/vitest/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vitest.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (20), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/GENERATION.md
  - `references/advanced-environments.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/advanced-environments.md
  - `references/advanced-projects.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/advanced-projects.md
  - `references/advanced-type-testing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/advanced-type-testing.md
  - `references/advanced-vi.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/advanced-vi.md
  - `references/core-cli.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/core-cli.md
  - `references/core-config.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/core-config.md
  - `references/core-describe.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/core-describe.md
  - `references/core-expect.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/core-expect.md
  - `references/core-hooks.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/core-hooks.md
  - `references/core-test-api.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/core-test-api.md
  - `references/features-benchmarking.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-benchmarking.md
  - `references/features-concurrency.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-concurrency.md
  - `references/features-context.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-context.md
  - `references/features-coverage.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-coverage.md
  - `references/features-filtering.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-filtering.md
  - `references/features-mocking.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-mocking.md
  - `references/features-reporters.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-reporters.md
  - `references/features-snapshots.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-snapshots.md
  - `references/features-test-tags.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vitest/references/features-test-tags.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vitest
description: Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
metadata:
  author: Anthony Fu
  version: "2026.6.22"
  source: Generated from https://github.com/vitest-dev/vitest, scripts located at https://github.com/antfu/skills
---

Vitest is a next-generation testing framework powered by Vite. It provides a Jest-compatible API with native ESM, TypeScript, and JSX support out of the box. Vitest shares the same config, transformers, resolvers, and plugins with your Vite app.

**Key Features:**
- Vite-native: Uses Vite's transformation pipeline for fast HMR-like test updates
- Jest-compatible: Drop-in replacement for most Jest test suites
- Smart watch mode: Only reruns affected tests based on module graph
- Native ESM, TypeScript, JSX support without configuration
- Multi-threaded workers for parallel test execution
- Built-in coverage via V8 or Istanbul
- Snapshot testing, mocking, and spy utilities

> The skill is based on Vitest 5.x (beta), generated at 2026-06-22.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Vitest and Vite config integration, defineConfig usage | [core-config](references/core-config.md) |
| CLI | Command line interface, commands and options | [core-cli](references/core-cli.md) |
| Test API | test/it function, modifiers like skip, only, concurrent | [core-test-api](references/core-test-api.md) |
| Describe API | describe/suite for grouping tests and nested suites | [core-describe](references/core-describe.md) |
| Expect API | Assertions with toBe, toEqual, matchers and asymmetric matchers | [core-expect](references/core-expect.md) |
| Hooks | beforeEach, afterEach, beforeAll, afterAll, aroundEach | [core-hooks](references/core-hooks.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Mocking | Mock functions, modules, timers, dates with vi utilities | [features-mocking](references/features-mocking.md) |
| Snapshots | Snapshot testing with toMatchSnapshot and inline snapshots | [features-snapshots](references/features-snapshots.md) |
| Coverage | Code coverage with V8 or Istanbul providers | [features-coverage](references/features-coverage.md) |
| Test Context | Test fixtures, context.expect, test.extend for custom fixtures | [features-context](references/features-context.md) |
| Concurrency | Concurrent tests, parallel execution, sharding | [features-concurrency](references/features-concurrency.md) |
| Filtering | Filter tests by name, file patterns, tags | [features-filtering](references/features-filtering.md) |
| Test Tags | Label tests with tags to filter runs and apply shared options | [features-test-tags](references/features-test-tags.md) |
| Reporters | Built-in reporters, default selection, CI/output config | [features-reporters](references/features-reporters.md) |
| Benchmarking | Write benchmarks with the bench fixture (Tinybench) | [features-benchmarking](references/features-benchmarking.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Vi Utilities | vi helper: mock, spyOn, fake timers, hoisted, waitFor | [advanced-vi](references/advanced-vi.md) |
| Environments | Test environments: node, jsdom, happy-dom, custom | [advanced-environments](references/advanced-environments.md) |
| Type Testing | Type-level testing with expectTypeOf and assertType | [advanced-type-testing](references/advanced-type-testing.md) |
| Projects | Multi-project workspaces, different configs per project | [advanced-projects](references/advanced-projects.md) |

<!-- chapter:end slug=vitest -->

---

<!-- chapter:begin slug=vue-best-practices position=14 -->

## 14. vue-best-practices

- **Source:** https://github.com/antfu/skills/blob/main/skills/vue-best-practices/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vue-best-practices.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (24), referenced from this skill's directory:
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/LICENSE.md
  - `references/animation-class-based-technique.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/animation-class-based-technique.md
  - `references/animation-state-driven-technique.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/animation-state-driven-technique.md
  - `references/component-async.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-async.md
  - `references/component-data-flow.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-data-flow.md
  - `references/component-fallthrough-attrs.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-fallthrough-attrs.md
  - `references/component-keep-alive.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-keep-alive.md
  - `references/component-slots.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-slots.md
  - `references/component-suspense.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-suspense.md
  - `references/component-teleport.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-teleport.md
  - `references/component-transition-group.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-transition-group.md
  - `references/component-transition.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/component-transition.md
  - `references/composables.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/composables.md
  - `references/directives.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/directives.md
  - `references/perf-avoid-component-abstraction-in-lists.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/perf-avoid-component-abstraction-in-lists.md
  - `references/perf-v-once-v-memo-directives.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/perf-v-once-v-memo-directives.md
  - `references/perf-virtualize-large-lists.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/perf-virtualize-large-lists.md
  - `references/plugins.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/plugins.md
  - `references/reactivity.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/reactivity.md
  - `references/render-functions.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/render-functions.md
  - `references/sfc.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/sfc.md
  - `references/state-management.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/state-management.md
  - `references/updated-hook-performance.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/references/updated-hook-performance.md
  - `SYNC.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/SYNC.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vue-best-practices
description: MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
license: MIT
metadata:
  author: github.com/vuejs-ai
  version: "18.0.0"
---

# Vue Best Practices Workflow

Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.

## Core Principles
- **Keep state predictable:** one source of truth, derive everything else.
- **Make data flow explicit:** Props down, Events up for most cases.
- **Favor small, focused components:** easier to test, reuse, and maintain.
- **Avoid unnecessary re-renders:** use computed properties and watchers wisely.
- **Readability counts:** write clear, self-documenting code.

## 1) Confirm architecture before coding (required)

- Default stack: Vue 3 + Composition API + `<script setup lang="ts">`.
- If the project explicitly uses Options API, load `vue-options-api-best-practices` skill if available.
- If the project explicitly uses JSX, load `vue-jsx-best-practices` skill if available.

### 1.1 Must-read core references (required)

- Before implementing any Vue task, make sure to read and apply these core references:
  - `references/reactivity.md`
  - `references/sfc.md`
  - `references/component-data-flow.md`
  - `references/composables.md`
- Keep these references in active working context for the entire task, not only when a specific issue appears.

### 1.2 Plan component boundaries before coding (required)

Create a brief component map before implementation for any non-trivial feature.

- Define each component's single responsibility in one sentence.
- Keep entry/root and route-level view components as composition surfaces by default.
- Move feature UI and feature logic out of entry/root/view components unless the task is intentionally a tiny single-file demo.
- Define props/emits contracts for each child component in the map.
- Prefer a feature folder layout (`components/<feature>/...`, `composables/use<Feature>.ts`) when adding more than one component.

## 2) Apply essential Vue foundations (required)

These are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section `1.1`.

### Reactivity

- Must-read reference from `1.1`: [reactivity](references/reactivity.md)
- Keep source state minimal (`ref`/`reactive`), derive everything possible with `computed`.
- Use watchers for side effects if needed.
- Avoid recomputing expensive logic in templates.

### SFC structure and template safety

- Must-read reference from `1.1`: [sfc](references/sfc.md)
- Keep SFC sections in this order: `<script>` → `<template>` → `<style>`.
- Keep SFC responsibilities focused; split large components.
- Keep templates declarative; move branching/derivation to script.
- Apply Vue template safety rules (`v-html`, list rendering, conditional rendering choices).

### Keep components focused

Split a component when it has **more than one clear responsibility** (e.g. data orchestration + UI, or multiple independent UI sections).

- Prefer **smaller components + composables** over one “mega component”
- Move **UI sections** into child components (props in, events out).
- Move **state/side effects** into composables (`useXxx()`).

Apply objective split triggers. Split the component if **any** condition is true:

- It owns both orchestration/state and substantial presentational markup for multiple sections.
- It has 3+ distinct UI sections (for example: form, filters, list, footer/status).
- A template block is repeated or could become reusable (item rows, cards, list entries).

Entry/root and route view rule:

- Keep entry/root and route view components thin: app shell/layout, provider wiring, and feature composition.
- Do not place full feature implementations in entry/root/view components when those features contain independent parts.
- For CRUD/list features (todo, table, catalog, inbox), split at least into:
  - feature container component
  - input/form component
  - list (and/or item) component
  - footer/actions or filter/status component
- Allow a single-file implementation only for very small throwaway demos; if chosen, explicitly justify why splitting is unnecessary.

### Component data flow

- Must-read reference from `1.1`: [component-data-flow](references/component-data-flow.md)
- Use props down, events up as the primary model.
- Use `v-model` only for true two-way component contracts.
- Use provide/inject only for deep-tree dependencies or shared context.
- Keep contracts explicit and typed with `defineProps`, `defineEmits`, and `InjectionKey` as needed.

### Composables

- Must-read reference from `1.1`: [composables](references/composables.md)
- Extract logic into composables when it is reused, stateful, or side-effect heavy.
- Keep composable APIs small, typed, and predictable.
- Separate feature logic from presentational components.

## 3) Consider optional features only when requirements call for them

### 3.1 Standard optional features

Do not add these by default. Load the matching reference only when the requirement exists.

- Slots: parent needs to control child content/layout -> [component-slots](references/component-slots.md)
- Fallthrough attributes: wrapper/base components must forward attrs/events safely -> [component-fallthrough-attrs](references/component-fallthrough-attrs.md)
- Built-in component `<KeepAlive>` for stateful view caching -> [component-keep-alive](references/component-keep-alive.md)
- Built-in component `<Teleport>` for overlays/portals -> [component-teleport](references/component-teleport.md)
- Built-in component `<Suspense>` for async subtree fallback boundaries -> [component-suspense](references/component-suspense.md)
- Animation-related features: pick the simplest approach that matches the required motion behavior.
  - Built-in component `<Transition>` for enter/leave effects -> [transition](references/component-transition.md)
  - Built-in component `<TransitionGroup>` for animated list mutations -> [transition-group](references/component-transition-group.md)
  - Class-based animation for non-enter/leave effects -> [animation-class-based-technique](references/animation-class-based-technique.md)
  - State-driven animation for user-input-driven animation -> [animation-state-driven-technique](references/animation-state-driven-technique.md)

### 3.2 Less-common optional features

Use these only when there is explicit product or technical need.

- Directives: behavior is DOM-specific and not a good composable/component fit -> [directives](references/directives.md)
- Async components: heavy/rarely-used UI should be lazy loaded -> [component-async](references/component-async.md)
- Render functions only when templates cannot express the requirement -> [render-functions](references/render-functions.md)
- Plugins when behavior must be installed app-wide -> [plugins](references/plugins.md)
- State management patterns: app-wide shared state crosses feature boundaries -> [state-management](references/state-management.md)

## 4) Run performance optimization after behavior is correct

Performance work is a post-functionality pass. Do not optimize before core behavior is implemented and verified.

- Large list rendering bottlenecks -> [perf-virtualize-large-lists](references/perf-virtualize-large-lists.md)
- Static subtrees re-rendering unnecessarily -> [perf-v-once-v-memo-directives](references/perf-v-once-v-memo-directives.md)
- Over-abstraction in hot list paths -> [perf-avoid-component-abstraction-in-lists](references/perf-avoid-component-abstraction-in-lists.md)
- Expensive updates triggered too often -> [updated-hook-performance](references/updated-hook-performance.md)

## 5) Final self-check before finishing

- Core behavior works and matches requirements.
- All must-read references were read and applied.
- Reactivity model is minimal and predictable.
- SFC structure and template rules are followed.
- Components are focused and well-factored, splitting when needed.
- Entry/root and route view components remain composition surfaces unless there is an explicit small-demo exception.
- Component split decisions are explicit and defensible (responsibility boundaries are clear).
- Data flow contracts are explicit and typed.
- Composables are used where reuse/complexity justifies them.
- Moved state/side effects into composables if applicable
- Optional features are used only when requirements demand them.
- Performance changes were applied only after functionality was complete.

<!-- chapter:end slug=vue-best-practices -->

---

<!-- chapter:begin slug=vue-router-best-practices position=15 -->

## 15. vue-router-best-practices

- **Source:** https://github.com/antfu/skills/blob/main/skills/vue-router-best-practices/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vue-router-best-practices.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (10), referenced from this skill's directory:
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/LICENSE.md
  - `reference/router-beforeenter-no-param-trigger.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-beforeenter-no-param-trigger.md
  - `reference/router-beforerouteenter-no-this.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-beforerouteenter-no-this.md
  - `reference/router-guard-async-await-pattern.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-guard-async-await-pattern.md
  - `reference/router-navigation-guard-infinite-loop.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-navigation-guard-infinite-loop.md
  - `reference/router-navigation-guard-next-deprecated.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-navigation-guard-next-deprecated.md
  - `reference/router-param-change-no-lifecycle.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-param-change-no-lifecycle.md
  - `reference/router-simple-routing-cleanup.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-simple-routing-cleanup.md
  - `reference/router-use-vue-router-for-production.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/reference/router-use-vue-router-for-production.md
  - `SYNC.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-router-best-practices/SYNC.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vue-router-best-practices
description: "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions."
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
---

Vue Router best practices, common gotchas, and navigation patterns.

### Navigation Guards
- Navigating between same route with different params → See [router-beforeenter-no-param-trigger](reference/router-beforeenter-no-param-trigger.md)
- Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference/router-beforerouteenter-no-this.md)
- Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference/router-guard-async-await-pattern.md)
- Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference/router-navigation-guard-infinite-loop.md)
- Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference/router-navigation-guard-next-deprecated.md)

### Route Lifecycle
- Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md)
- Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md)

### Setup
- Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)

<!-- chapter:end slug=vue-router-best-practices -->

---

<!-- chapter:begin slug=vue-testing-best-practices position=16 -->

## 16. vue-testing-best-practices

- **Source:** https://github.com/antfu/skills/blob/main/skills/vue-testing-best-practices/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vue-testing-best-practices.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (13), referenced from this skill's directory:
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/LICENSE.md
  - `reference/async-component-testing.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/async-component-testing.md
  - `reference/teleport-testing-complexity.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/teleport-testing-complexity.md
  - `reference/testing-async-await-flushpromises.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-async-await-flushpromises.md
  - `reference/testing-browser-vs-node-runners.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-browser-vs-node-runners.md
  - `reference/testing-component-blackbox-approach.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-component-blackbox-approach.md
  - `reference/testing-composables-helper-wrapper.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-composables-helper-wrapper.md
  - `reference/testing-e2e-playwright-recommended.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-e2e-playwright-recommended.md
  - `reference/testing-no-snapshot-only.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-no-snapshot-only.md
  - `reference/testing-pinia-store-setup.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-pinia-store-setup.md
  - `reference/testing-suspense-async-components.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-suspense-async-components.md
  - `reference/testing-vitest-recommended-for-vue.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/reference/testing-vitest-recommended-for-vue.md
  - `SYNC.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue-testing-best-practices/SYNC.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vue-testing-best-practices
version: 1.0.0
license: MIT
author: github.com/vuejs-ai
description: Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
---

Vue.js testing best practices, patterns, and common gotchas.

### Testing
- Setting up test infrastructure for Vue 3 projects → See [testing-vitest-recommended-for-vue](reference/testing-vitest-recommended-for-vue.md)
- Tests keep breaking when refactoring component internals → See [testing-component-blackbox-approach](reference/testing-component-blackbox-approach.md)
- Tests fail intermittently with race conditions → See [testing-async-await-flushpromises](reference/testing-async-await-flushpromises.md)
- Composables using lifecycle hooks or inject fail to test → See [testing-composables-helper-wrapper](reference/testing-composables-helper-wrapper.md)
- Getting "injection Symbol(pinia) not found" errors in tests → See [testing-pinia-store-setup](reference/testing-pinia-store-setup.md)
- Components with async setup won't render in tests → See [testing-suspense-async-components](reference/testing-suspense-async-components.md)
- Snapshot tests keep passing despite broken functionality → See [testing-no-snapshot-only](reference/testing-no-snapshot-only.md)
- Choosing end-to-end testing framework for Vue apps → See [testing-e2e-playwright-recommended](reference/testing-e2e-playwright-recommended.md)
- Tests need to verify computed styles or real DOM events → See [testing-browser-vs-node-runners](reference/testing-browser-vs-node-runners.md)
- Testing components created with defineAsyncComponent fails → See [async-component-testing](reference/async-component-testing.md)
- Teleported modal content can't be found in wrapper queries → See [teleport-testing-complexity](reference/teleport-testing-complexity.md)

## Reference

- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)
- [Vue Test Utils](https://test-utils.vuejs.org/)
- [Vitest Documentation](https://vitest.dev/)
- [Playwright Documentation](https://playwright.dev/)

<!-- chapter:end slug=vue-testing-best-practices -->

---

<!-- chapter:begin slug=vue position=17 -->

## 17. vue

- **Source:** https://github.com/antfu/skills/blob/main/skills/vue/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vue/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vue.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (4), referenced from this skill's directory:
  - `GENERATION.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue/GENERATION.md
  - `references/advanced-patterns.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue/references/advanced-patterns.md
  - `references/core-new-apis.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue/references/core-new-apis.md
  - `references/script-setup-macros.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vue/references/script-setup-macros.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vue
description: Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
metadata:
  author: Anthony Fu
  version: "2026.1.31"
  source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills
---

# Vue

> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.

## Preferences

- Prefer TypeScript over JavaScript
- Prefer `<script setup lang="ts">` over `<script>`
- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed
- Always use Composition API over Options API
- Discourage using Reactive Props Destructure

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |

## Quick Reference

### Component Template

```vue
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Title changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>
```

### Key Imports

```ts
// Reactivity
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Watchers
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Lifecycle
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilities
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
```

<!-- chapter:end slug=vue -->

---

<!-- chapter:begin slug=vueuse-functions position=18 -->

## 18. vueuse-functions

- **Source:** https://github.com/antfu/skills/blob/main/skills/vueuse-functions/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/vueuse-functions.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (268), referenced from this skill's directory:
  - `LICENSE.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/LICENSE.md
  - `references/computedAsync.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/computedAsync.md
  - `references/computedEager.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/computedEager.md
  - `references/computedInject.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/computedInject.md
  - `references/computedWithControl.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/computedWithControl.md
  - `references/createDisposableDirective.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createDisposableDirective.md
  - `references/createEventHook.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createEventHook.md
  - `references/createGenericProjection.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createGenericProjection.md
  - `references/createGlobalState.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createGlobalState.md
  - `references/createInjectionState.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createInjectionState.md
  - `references/createProjection.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createProjection.md
  - `references/createRef.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createRef.md
  - `references/createReusableTemplate.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createReusableTemplate.md
  - `references/createSharedComposable.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createSharedComposable.md
  - `references/createTemplatePromise.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createTemplatePromise.md
  - `references/createUnrefFn.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/createUnrefFn.md
  - `references/extendRef.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/extendRef.md
  - `references/from.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/from.md
  - `references/get.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/get.md
  - `references/injectLocal.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/injectLocal.md
  - `references/isDefined.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/isDefined.md
  - `references/logicAnd.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/logicAnd.md
  - `references/logicNot.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/logicNot.md
  - `references/logicOr.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/vueuse-functions/references/logicOr.md
  - …and 244 more, listed in https://skillsdocs.com/api/v1/books/antfu/skills/skills/vueuse-functions

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: vueuse-functions
description: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
license: MIT
metadata:
    author: SerKo <https://github.com/serkodev>
    version: "1.0"
compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project
---

# VueUse Functions

This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

## When to Apply

- Apply this skill whenever assisting user development work in Vue.js / Nuxt.
- Always check first whether a VueUse function can implement the requirement.
- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.
- Please refer to the `Invocation` field in the below functions table. For example:
  - `AUTO`: Use automatically when applicable.
  - `EXTERNAL`: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
  - `EXPLICIT_ONLY`: Use only when explicitly requested by the user.
  > *NOTE* User instructions in the prompt or `AGENTS.md` may override a function’s default `Invocation` rule.

## Functions

All functions listed below are part of the [VueUse](https://vueuse.org/) library, each section categorizes functions based on their functionality.

IMPORTANT: Each function entry includes a short `Description` and a detailed `Reference`. When using any function, always consult the corresponding document in `./references` for Usage details and Type Declarations.

### State

| Function | Description | Invocation |
|----------|-------------|------------|
| [`createGlobalState`](references/createGlobalState.md) | Keep states in the global scope to be reusable across Vue instances | AUTO |
| [`createInjectionState`](references/createInjectionState.md) | Create global state that can be injected into components | AUTO |
| [`createSharedComposable`](references/createSharedComposable.md) | Make a composable function usable with multiple Vue instances | AUTO |
| [`injectLocal`](references/injectLocal.md) | Extended `inject` with ability to call `provideLocal` to provide the value in the same component | AUTO |
| [`provideLocal`](references/provideLocal.md) | Extended `provide` with ability to call `injectLocal` to obtain the value in the same component | AUTO |
| [`useAsyncState`](references/useAsyncState.md) | Reactive async state | AUTO |
| [`useDebouncedRefHistory`](references/useDebouncedRefHistory.md) | Shorthand for `useRefHistory` with debounced filter | AUTO |
| [`useLastChanged`](references/useLastChanged.md) | Records the timestamp of the last change | AUTO |
| [`useLocalStorage`](references/useLocalStorage.md) | Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) | AUTO |
| [`useManualRefHistory`](references/useManualRefHistory.md) | Manually track the change history of a ref when the user calls `commit()` | AUTO |
| [`useRefHistory`](references/useRefHistory.md) | Track the change history of a ref | AUTO |
| [`useSessionStorage`](references/useSessionStorage.md) | Reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO |
| [`useStorage`](references/useStorage.md) | Create a reactive ref that can be used to access & modify [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO |
| [`useStorageAsync`](references/useStorageAsync.md) | Reactive Storage with async support | AUTO |
| [`useThrottledRefHistory`](references/useThrottledRefHistory.md) | Shorthand for `useRefHistory` with throttled filter | AUTO |

### Elements

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useActiveElement`](references/useActiveElement.md) | Reactive `document.activeElement` | AUTO |
| [`useDocumentVisibility`](references/useDocumentVisibility.md) | Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState) | AUTO |
| [`useDraggable`](references/useDraggable.md) | Make elements draggable | AUTO |
| [`useDropZone`](references/useDropZone.md) | Create a zone where files can be dropped | AUTO |
| [`useElementBounding`](references/useElementBounding.md) | Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element | AUTO |
| [`useElementSize`](references/useElementSize.md) | Reactive size of an HTML element | AUTO |
| [`useElementVisibility`](references/useElementVisibility.md) | Tracks the visibility of an element within the viewport | AUTO |
| [`useIntersectionObserver`](references/useIntersectionObserver.md) | Detects changes to a target element's visibility | AUTO |
| [`useMouseInElement`](references/useMouseInElement.md) | Reactive mouse position related to an element | AUTO |
| [`useMutationObserver`](references/useMutationObserver.md) | Watch for changes being made to the DOM tree | AUTO |
| [`useParentElement`](references/useParentElement.md) | Get parent element of the given element | AUTO |
| [`useResizeObserver`](references/useResizeObserver.md) | Reports changes to the dimensions of an Element's content or the border-box | AUTO |
| [`useWindowFocus`](references/useWindowFocus.md) | Reactively track window focus with `window.onfocus` and `window.onblur` events | AUTO |
| [`useWindowScroll`](references/useWindowScroll.md) | Reactive window scroll | AUTO |
| [`useWindowSize`](references/useWindowSize.md) | Reactive window size | AUTO |

### Browser

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useBluetooth`](references/useBluetooth.md) | Reactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) | AUTO |
| [`useBreakpoints`](references/useBreakpoints.md) | Reactive viewport breakpoints | AUTO |
| [`useBroadcastChannel`](references/useBroadcastChannel.md) | Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) | AUTO |
| [`useBrowserLocation`](references/useBrowserLocation.md) | Reactive browser location | AUTO |
| [`useClipboard`](references/useClipboard.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO |
| [`useClipboardItems`](references/useClipboardItems.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO |
| [`useColorMode`](references/useColorMode.md) | Reactive color mode (dark / light / customs) with auto data persistence | AUTO |
| [`useCssSupports`](references/useCssSupports.md) | SSR compatible and reactive [`CSS.supports`](https://developer.mozilla.org/docs/Web/API/CSS/supports_static) | AUTO |
| [`useCssVar`](references/useCssVar.md) | Manipulate CSS variables | AUTO |
| [`useDark`](references/useDark.md) | Reactive dark mode with auto data persistence | AUTO |
| [`useEventListener`](references/useEventListener.md) | Use EventListener with ease | AUTO |
| [`useEyeDropper`](references/useEyeDropper.md) | Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) | AUTO |
| [`useFavicon`](references/useFavicon.md) | Reactive favicon | AUTO |
| [`useFileDialog`](references/useFileDialog.md) | Open file dialog with ease | AUTO |
| [`useFileSystemAccess`](references/useFileSystemAccess.md) | Create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) | AUTO |
| [`useFullscreen`](references/useFullscreen.md) | Reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) | AUTO |
| [`useGamepad`](references/useGamepad.md) | Provides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) | AUTO |
| [`useImage`](references/useImage.md) | Reactive load an image in the browser | AUTO |
| [`useMediaControls`](references/useMediaControls.md) | Reactive media controls for both `audio` and `video` elements | AUTO |
| [`useMediaQuery`](references/useMediaQuery.md) | Reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) | AUTO |
| [`useMemory`](references/useMemory.md) | Reactive Memory Info | AUTO |
| [`useObjectUrl`](references/useObjectUrl.md) | Reactive URL representing an object | AUTO |
| [`usePerformanceObserver`](references/usePerformanceObserver.md) | Observe performance metrics | AUTO |
| [`usePermission`](references/usePermission.md) | Reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) | AUTO |
| [`usePreferredColorScheme`](references/usePreferredColorScheme.md) | Reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query | AUTO |
| [`usePreferredContrast`](references/usePreferredContrast.md) | Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query | AUTO |
| [`usePreferredDark`](references/usePreferredDark.md) | Reactive dark theme preference | AUTO |
| [`usePreferredLanguages`](references/usePreferredLanguages.md) | Reactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages) | AUTO |
| [`usePreferredReducedMotion`](references/usePreferredReducedMotion.md) | Reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query | AUTO |
| [`usePreferredReducedTransparency`](references/usePreferredReducedTransparency.md) | Reactive [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query | AUTO |
| [`useScreenOrientation`](references/useScreenOrientation.md) | Reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API) | AUTO |
| [`useScreenSafeArea`](references/useScreenSafeArea.md) | Reactive `env(safe-area-inset-*)` | AUTO |
| [`useScriptTag`](references/useScriptTag.md) | Creates a script tag | AUTO |
| [`useShare`](references/useShare.md) | Reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) | AUTO |
| [`useSSRWidth`](references/useSSRWidth.md) | Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like [`useMediaQuery`](../useMediaQuery/index.md) or [`useBreakpoints`](../useBreakpoints/index.md) | AUTO |
| [`useStyleTag`](references/useStyleTag.md) | Inject reactive `style` element in head | AUTO |
| [`useTextareaAutosize`](references/useTextareaAutosize.md) | Automatically update the height of a textarea depending on the content | AUTO |
| [`useTextDirection`](references/useTextDirection.md) | Reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text | AUTO |
| [`useTitle`](references/useTitle.md) | Reactive document title | AUTO |
| [`useUrlSearchParams`](references/useUrlSearchParams.md) | Reactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) | AUTO |
| [`useVibrate`](references/useVibrate.md) | Reactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) | AUTO |
| [`useWakeLock`](references/useWakeLock.md) | Reactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) | AUTO |
| [`useWebNotification`](references/useWebNotification.md) | Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification) | AUTO |
| [`useWebWorker`](references/useWebWorker.md) | Simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication | AUTO |
| [`useWebWorkerFn`](references/useWebWorkerFn.md) | Run expensive functions without blocking the UI | AUTO |

### Sensors

| Function | Description | Invocation |
|----------|-------------|------------|
| [`onClickOutside`](references/onClickOutside.md) | Listen for clicks outside of an element | AUTO |
| [`onElementRemoval`](references/onElementRemoval.md) | Fires when the element or any element containing it is removed from the DOM | AUTO |
| [`onKeyStroke`](references/onKeyStroke.md) | Listen for keyboard keystrokes | AUTO |
| [`onLongPress`](references/onLongPress.md) | Listen for a long press on an element | AUTO |
| [`onStartTyping`](references/onStartTyping.md) | Fires when users start typing on non-editable elements | AUTO |
| [`useBattery`](references/useBattery.md) | Reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) | AUTO |
| [`useDeviceMotion`](references/useDeviceMotion.md) | Reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent) | AUTO |
| [`useDeviceOrientation`](references/useDeviceOrientation.md) | Reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) | AUTO |
| [`useDevicePixelRatio`](references/useDevicePixelRatio.md) | Reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio) | AUTO |
| [`useDevicesList`](references/useDevicesList.md) | Reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices | AUTO |
| [`useDisplayMedia`](references/useDisplayMedia.md) | Reactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming | AUTO |
| [`useElementByPoint`](references/useElementByPoint.md) | Reactive element by point | AUTO |
| [`useElementHover`](references/useElementHover.md) | Reactive element's hover state | AUTO |
| [`useFocus`](references/useFocus.md) | Reactive utility to track or set the focus state of a DOM element | AUTO |
| [`useFocusWithin`](references/useFocusWithin.md) | Reactive utility to track if an element or one of its descendants has focus | AUTO |
| [`useFps`](references/useFps.md) | Reactive FPS (frames per second) | AUTO |
| [`useGeolocation`](references/useGeolocation.md) | Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) | AUTO |
| [`useIdle`](references/useIdle.md) | Tracks whether the user is being inactive | AUTO |
| [`useInfiniteScroll`](references/useInfiniteScroll.md) | Infinite scrolling of the element | AUTO |
| [`useKeyModifier`](references/useKeyModifier.md) | Reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) | AUTO |
| [`useMagicKeys`](references/useMagicKeys.md) | Reactive keys pressed state | AUTO |
| [`useMouse`](references/useMouse.md) | Reactive mouse position | AUTO |
| [`useMousePressed`](references/useMousePressed.md) | Reactive mouse pressing state | AUTO |
| [`useNavigatorLanguage`](references/useNavigatorLanguage.md) | Reactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) | AUTO |
| [`useNetwork`](references/useNetwork.md) | Reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) | AUTO |
| [`useOnline`](references/useOnline.md) | Reactive online state | AUTO |
| [`usePageLeave`](references/usePageLeave.md) | Reactive state to show whether the mouse leaves the page | AUTO |
| [`useParallax`](references/useParallax.md) | Create parallax effect easily | AUTO |
| [`usePointer`](references/usePointer.md) | Reactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) | AUTO |
| [`usePointerLock`](references/usePointerLock.md) | Reactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) | AUTO |
| [`usePointerSwipe`](references/usePointerSwipe.md) | Reactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | AUTO |
| [`useScroll`](references/useScroll.md) | Reactive scroll position and state | AUTO |
| [`useScrollLock`](references/useScrollLock.md) | Lock scrolling of the element | AUTO |
| [`useSpeechRecognition`](references/useSpeechRecognition.md) | Reactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) | AUTO |
| [`useSpeechSynthesis`](references/useSpeechSynthesis.md) | Reactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) | AUTO |
| [`useSwipe`](references/useSwipe.md) | Reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) | AUTO |
| [`useTextSelection`](references/useTextSelection.md) | Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) | AUTO |
| [`useUserMedia`](references/useUserMedia.md) | Reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming | AUTO |

### Network

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useEventSource`](references/useEventSource.md) | An [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or [Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) instance opens a persistent connection to an HTTP server | AUTO |
| [`useFetch`](references/useFetch.md) | Reactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provides the ability to abort requests | AUTO |
| [`useWebSocket`](references/useWebSocket.md) | Reactive [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket) client | AUTO |

### Animation

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useAnimate`](references/useAnimate.md) | Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) | AUTO |
| [`useInterval`](references/useInterval.md) | Reactive counter that increases on every interval | AUTO |
| [`useIntervalFn`](references/useIntervalFn.md) | Wrapper for `setInterval` with controls | AUTO |
| [`useNow`](references/useNow.md) | Reactive current Date instance | AUTO |
| [`useRafFn`](references/useRafFn.md) | Call function on every `requestAnimationFrame` | AUTO |
| [`useTimeout`](references/useTimeout.md) | Reactive value that becomes `true` after a given time | AUTO |
| [`useTimeoutFn`](references/useTimeoutFn.md) | Wrapper for `setTimeout` with controls | AUTO |
| [`useTimestamp`](references/useTimestamp.md) | Reactive current timestamp | AUTO |
| [`useTransition`](references/useTransition.md) | Transition between values | AUTO |

### Component

| Function | Description | Invocation |
|----------|-------------|------------|
| [`computedInject`](references/computedInject.md) | Combine `computed` and `inject` | AUTO |
| [`createReusableTemplate`](references/createReusableTemplate.md) | Define and reuse template inside the component scope | AUTO |
| [`createTemplatePromise`](references/createTemplatePromise.md) | Template as Promise | AUTO |
| [`templateRef`](references/templateRef.md) | Shorthand for binding ref to template element | AUTO |
| [`tryOnBeforeMount`](references/tryOnBeforeMount.md) | Safe `onBeforeMount` | AUTO |
| [`tryOnBeforeUnmount`](references/tryOnBeforeUnmount.md) | Safe `onBeforeUnmount` | AUTO |
| [`tryOnMounted`](references/tryOnMounted.md) | Safe `onMounted` | AUTO |
| [`tryOnScopeDispose`](references/tryOnScopeDispose.md) | Safe `onScopeDispose` | AUTO |
| [`tryOnUnmounted`](references/tryOnUnmounted.md) | Safe `onUnmounted` | AUTO |
| [`unrefElement`](references/unrefElement.md) | Retrieves the underlying DOM element from a Vue ref or component instance | AUTO |
| [`useCurrentElement`](references/useCurrentElement.md) | Get the DOM element of current component as a ref | AUTO |
| [`useMounted`](references/useMounted.md) | Mounted state in ref | AUTO |
| [`useTemplateRefsList`](references/useTemplateRefsList.md) | Shorthand for binding refs to template elements and components inside `v-for` | AUTO |
| [`useVirtualList`](references/useVirtualList.md) | Create virtual lists with ease | AUTO |
| [`useVModel`](references/useVModel.md) | Shorthand for v-model binding | AUTO |
| [`useVModels`](references/useVModels.md) | Shorthand for props v-model binding | AUTO |

### Watch

| Function | Description | Invocation |
|----------|-------------|------------|
| [`until`](references/until.md) | Promised one-time watch for changes | AUTO |
| [`watchArray`](references/watchArray.md) | Watch for an array with additions and removals | AUTO |
| [`watchAtMost`](references/watchAtMost.md) | `watch` with the number of times triggered | AUTO |
| [`watchDebounced`](references/watchDebounced.md) | Debounced watch | AUTO |
| [`watchDeep`](references/watchDeep.md) | Shorthand for watching value with `{deep: true}` | AUTO |
| [`watchIgnorable`](references/watchIgnorable.md) | Ignorable watch | AUTO |
| [`watchImmediate`](references/watchImmediate.md) | Shorthand for watching value with `{immediate: true}` | AUTO |
| [`watchOnce`](references/watchOnce.md) | Shorthand for watching value with `{ once: true }` | AUTO |
| [`watchPausable`](references/watchPausable.md) | Pausable watch | AUTO |
| [`watchThrottled`](references/watchThrottled.md) | Throttled watch | AUTO |
| [`watchTriggerable`](references/watchTriggerable.md) | Watch that can be triggered manually | AUTO |
| [`watchWithFilter`](references/watchWithFilter.md) | `watch` with additional EventFilter control | AUTO |
| [`whenever`](references/whenever.md) | Shorthand for watching value to be truthy | AUTO |

### Reactivity

| Function | Description | Invocation |
|----------|-------------|------------|
| [`computedAsync`](references/computedAsync.md) | Computed for async functions | AUTO |
| [`computedEager`](references/computedEager.md) | Eager computed without lazy evaluation | AUTO |
| [`computedWithControl`](references/computedWithControl.md) | Explicitly define the dependencies of computed | AUTO |
| [`createRef`](references/createRef.md) | Returns a `deepRef` or `shallowRef` depending on the `deep` param | AUTO |
| [`extendRef`](references/extendRef.md) | Add extra attributes to Ref | AUTO |
| [`reactify`](references/reactify.md) | Converts plain functions into reactive functions | AUTO |
| [`reactifyObject`](references/reactifyObject.md) | Apply `reactify` to an object | AUTO |
| [`reactiveComputed`](references/reactiveComputed.md) | Computed reactive object | AUTO |
| [`reactiveOmit`](references/reactiveOmit.md) | Reactively omit fields from a reactive object | AUTO |
| [`reactivePick`](references/reactivePick.md) | Reactively pick fields from a reactive object | AUTO |
| [`refAutoReset`](references/refAutoReset.md) | A ref which will be reset to the default value after some time | AUTO |
| [`refDebounced`](references/refDebounced.md) | Debounce execution of a ref value | AUTO |
| [`refDefault`](references/refDefault.md) | Apply default value to a ref | AUTO |
| [`refManualReset`](references/refManualReset.md) | Create a ref with manual reset functionality | AUTO |
| [`refThrottled`](references/refThrottled.md) | Throttle changing of a ref value | AUTO |
| [`refWithControl`](references/refWithControl.md) | Fine-grained controls over ref and its reactivity | AUTO |
| [`syncRef`](references/syncRef.md) | Two-way refs synchronization | AUTO |
| [`syncRefs`](references/syncRefs.md) | Keep target refs in sync with a source ref | AUTO |
| [`toReactive`](references/toReactive.md) | Converts ref to reactive | AUTO |
| [`toRef`](references/toRef.md) | Normalize value/ref/getter to `ref` or `computed` | EXPLICIT_ONLY |
| [`toRefs`](references/toRefs.md) | Extended [`toRefs`](https://vuejs.org/api/reactivity-utilities.html#torefs) that also accepts refs of an object | AUTO |

### Array

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useArrayDifference`](references/useArrayDifference.md) | Reactive get array difference of two arrays | AUTO |
| [`useArrayEvery`](references/useArrayEvery.md) | Reactive `Array.every` | AUTO |
| [`useArrayFilter`](references/useArrayFilter.md) | Reactive `Array.filter` | AUTO |
| [`useArrayFind`](references/useArrayFind.md) | Reactive `Array.find` | AUTO |
| [`useArrayFindIndex`](references/useArrayFindIndex.md) | Reactive `Array.findIndex` | AUTO |
| [`useArrayFindLast`](references/useArrayFindLast.md) | Reactive `Array.findLast` | AUTO |
| [`useArrayIncludes`](references/useArrayIncludes.md) | Reactive `Array.includes` | AUTO |
| [`useArrayJoin`](references/useArrayJoin.md) | Reactive `Array.join` | AUTO |
| [`useArrayMap`](references/useArrayMap.md) | Reactive `Array.map` | AUTO |
| [`useArrayReduce`](references/useArrayReduce.md) | Reactive `Array.reduce` | AUTO |
| [`useArraySome`](references/useArraySome.md) | Reactive `Array.some` | AUTO |
| [`useArrayUnique`](references/useArrayUnique.md) | Reactive unique array | AUTO |
| [`useSorted`](references/useSorted.md) | Reactive sort array | AUTO |

### Time

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useCountdown`](references/useCountdown.md) | Reactive countdown timer in seconds | AUTO |
| [`useDateFormat`](references/useDateFormat.md) | Get the formatted date according to the string of tokens passed in | AUTO |
| [`useTimeAgo`](references/useTimeAgo.md) | Reactive time ago | AUTO |
| [`useTimeAgoIntl`](references/useTimeAgoIntl.md) | Reactive time ago with i18n supported | AUTO |

### Utilities

| Function | Description | Invocation |
|----------|-------------|------------|
| [`createDisposableDirective`](references/createDisposableDirective.md) | Utility for authoring disposable directives | AUTO |
| [`createEventHook`](references/createEventHook.md) | Utility for creating event hooks | AUTO |
| [`createUnrefFn`](references/createUnrefFn.md) | Make a plain function accepting ref and raw values as arguments | AUTO |
| [`get`](references/get.md) | Shorthand for accessing `ref.value` | EXPLICIT_ONLY |
| [`isDefined`](references/isDefined.md) | Non-nullish checking type guard for Ref | AUTO |
| [`makeDestructurable`](references/makeDestructurable.md) | Make isomorphic destructurable for object and array at the same time | AUTO |
| [`set`](references/set.md) | Shorthand for `ref.value = x` | EXPLICIT_ONLY |
| [`useAsyncQueue`](references/useAsyncQueue.md) | Executes each asynchronous task sequentially and passes the current task result to the next task | AUTO |
| [`useBase64`](references/useBase64.md) | Reactive base64 transforming | AUTO |
| [`useCached`](references/useCached.md) | Cache a ref with a custom comparator | AUTO |
| [`useCloned`](references/useCloned.md) | Reactive clone of a ref | AUTO |
| [`useConfirmDialog`](references/useConfirmDialog.md) | Creates event hooks to support modals and confirmation dialog chains | AUTO |
| [`useCounter`](references/useCounter.md) | Basic counter with utility functions | AUTO |
| [`useCycleList`](references/useCycleList.md) | Cycle through a list of items | AUTO |
| [`useDebounceFn`](references/useDebounceFn.md) | Debounce execution of a function | AUTO |
| [`useEventBus`](references/useEventBus.md) | A basic event bus | AUTO |
| [`useMemoize`](references/useMemoize.md) | Cache results of functions depending on arguments and keep it reactive | AUTO |
| [`useOffsetPagination`](references/useOffsetPagination.md) | Reactive offset pagination | AUTO |
| [`usePrevious`](references/usePrevious.md) | Holds the previous value of a ref | AUTO |
| [`useStepper`](references/useStepper.md) | Provides helpers for building a multi-step wizard interface | AUTO |
| [`useSupported`](references/useSupported.md) | SSR compatibility `isSupported` | AUTO |
| [`useThrottleFn`](references/useThrottleFn.md) | Throttle execution of a function | AUTO |
| [`useTimeoutPoll`](references/useTimeoutPoll.md) | Use timeout to poll something | AUTO |
| [`useToggle`](references/useToggle.md) | A boolean switcher with utility functions | AUTO |
| [`useToNumber`](references/useToNumber.md) | Reactively convert a string ref to number | AUTO |
| [`useToString`](references/useToString.md) | Reactively convert a ref to string | AUTO |

### @Electron

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useIpcRenderer`](references/useIpcRenderer.md) | Provides [ipcRenderer](https://www.electronjs.org/docs/api/ipc-renderer) and all of its APIs with Vue reactivity | EXTERNAL |
| [`useIpcRendererInvoke`](references/useIpcRendererInvoke.md) | Reactive [ipcRenderer.invoke API](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args) result | EXTERNAL |
| [`useIpcRendererOn`](references/useIpcRendererOn.md) | Use [ipcRenderer.on](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener) with ease and [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted | EXTERNAL |
| [`useZoomFactor`](references/useZoomFactor.md) | Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom factor | EXTERNAL |
| [`useZoomLevel`](references/useZoomLevel.md) | Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom level | EXTERNAL |

### @Firebase

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useAuth`](references/useAuth.md) | Reactive [Firebase Auth](https://firebase.google.com/docs/auth) binding | EXTERNAL |
| [`useFirestore`](references/useFirestore.md) | Reactive [Firestore](https://firebase.google.com/docs/firestore) binding | EXTERNAL |
| [`useRTDB`](references/useRTDB.md) | Reactive [Firebase Realtime Database](https://firebase.google.com/docs/database) binding | EXTERNAL |

### @Head

| Function | Description | Invocation |
|----------|-------------|------------|
| [`createHead`](https://github.com/vueuse/head#api) | Create the head manager instance. | EXTERNAL |
| [`useHead`](https://github.com/vueuse/head#api) | Update head meta tags reactively. | EXTERNAL |

### @Integrations

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useAsyncValidator`](references/useAsyncValidator.md) | Wrapper for [`async-validator`](https://github.com/yiminghe/async-validator) | EXTERNAL |
| [`useAxios`](references/useAxios.md) | Wrapper for [`axios`](https://github.com/axios/axios) | EXTERNAL |
| [`useChangeCase`](references/useChangeCase.md) | Reactive wrapper for [`change-case`](https://github.com/blakeembrey/change-case) | EXTERNAL |
| [`useCookies`](references/useCookies.md) | Wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie) | EXTERNAL |
| [`useDrauu`](references/useDrauu.md) | Reactive instance for [drauu](https://github.com/antfu/drauu) | EXTERNAL |
| [`useFocusTrap`](references/useFocusTrap.md) | Reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap) | EXTERNAL |
| [`useFuse`](references/useFuse.md) | Easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse) | EXTERNAL |
| [`useIDBKeyval`](references/useIDBKeyval.md) | Wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval) | EXTERNAL |
| [`useJwt`](references/useJwt.md) | Wrapper for [`jwt-decode`](https://github.com/auth0/jwt-decode) | EXTERNAL |
| [`useNProgress`](references/useNProgress.md) | Reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress) | EXTERNAL |
| [`useQRCode`](references/useQRCode.md) | Wrapper for [`qrcode`](https://github.com/soldair/node-qrcode) | EXTERNAL |
| [`useSortable`](references/useSortable.md) | Wrapper for [`sortable`](https://github.com/SortableJS/Sortable) | EXTERNAL |

### @Math

| Function | Description | Invocation |
|----------|-------------|------------|
| [`createGenericProjection`](references/createGenericProjection.md) | Generic version of `createProjection` | EXTERNAL |
| [`createProjection`](references/createProjection.md) | Reactive numeric projection from one domain to another | EXTERNAL |
| [`logicAnd`](references/logicAnd.md) | `AND` condition for refs | EXTERNAL |
| [`logicNot`](references/logicNot.md) | `NOT` condition for ref | EXTERNAL |
| [`logicOr`](references/logicOr.md) | `OR` conditions for refs | EXTERNAL |
| [`useAbs`](references/useAbs.md) | Reactive `Math.abs` | EXTERNAL |
| [`useAverage`](references/useAverage.md) | Get the average of an array reactively | EXTERNAL |
| [`useCeil`](references/useCeil.md) | Reactive `Math.ceil` | EXTERNAL |
| [`useClamp`](references/useClamp.md) | Reactively clamp a value between two other values | EXTERNAL |
| [`useFloor`](references/useFloor.md) | Reactive `Math.floor` | EXTERNAL |
| [`useMath`](references/useMath.md) | Reactive `Math` methods | EXTERNAL |
| [`useMax`](references/useMax.md) | Reactive `Math.max` | EXTERNAL |
| [`useMin`](references/useMin.md) | Reactive `Math.min` | EXTERNAL |
| [`usePrecision`](references/usePrecision.md) | Reactively set the precision of a number | EXTERNAL |
| [`useProjection`](references/useProjection.md) | Reactive numeric projection from one domain to another | EXTERNAL |
| [`useRound`](references/useRound.md) | Reactive `Math.round` | EXTERNAL |
| [`useSum`](references/useSum.md) | Get the sum of an array reactively | EXTERNAL |
| [`useTrunc`](references/useTrunc.md) | Reactive `Math.trunc` | EXTERNAL |

### @Motion

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useElementStyle`](https://motion.vueuse.org/api/use-element-style) | Sync a reactive object to a target element CSS styling | EXTERNAL |
| [`useElementTransform`](https://motion.vueuse.org/api/use-element-transform) | Sync a reactive object to a target element CSS transform. | EXTERNAL |
| [`useMotion`](https://motion.vueuse.org/api/use-motion) | Putting your components in motion. | EXTERNAL |
| [`useMotionProperties`](https://motion.vueuse.org/api/use-motion-properties) | Access Motion Properties for a target element. | EXTERNAL |
| [`useMotionVariants`](https://motion.vueuse.org/api/use-motion-variants) | Handle the Variants state and selection. | EXTERNAL |
| [`useSpring`](https://motion.vueuse.org/api/use-spring) | Spring animations. | EXTERNAL |

### @Router

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useRouteHash`](references/useRouteHash.md) | Shorthand for a reactive `route.hash` | EXTERNAL |
| [`useRouteParams`](references/useRouteParams.md) | Shorthand for a reactive `route.params` | EXTERNAL |
| [`useRouteQuery`](references/useRouteQuery.md) | Shorthand for a reactive `route.query` | EXTERNAL |

### @RxJS

| Function | Description | Invocation |
|----------|-------------|------------|
| [`from`](references/from.md) | Wrappers around RxJS's [`from()`](https://rxjs.dev/api/index/function/from) and [`fromEvent()`](https://rxjs.dev/api/index/function/fromEvent) to allow them to accept `ref`s | EXTERNAL |
| [`toObserver`](references/toObserver.md) | Sugar function to convert a `ref` into an RxJS [Observer](https://rxjs.dev/guide/observer) | EXTERNAL |
| [`useExtractedObservable`](references/useExtractedObservable.md) | Use an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables | EXTERNAL |
| [`useObservable`](references/useObservable.md) | Use an RxJS [`Observable`](https://rxjs.dev/guide/observable) | EXTERNAL |
| [`useSubject`](references/useSubject.md) | Bind an RxJS [`Subject`](https://rxjs.dev/guide/subject) to a `ref` and propagate value changes both ways | EXTERNAL |
| [`useSubscription`](references/useSubscription.md) | Use an RxJS [`Subscription`](https://rxjs.dev/guide/subscription) without worrying about unsubscribing from it or creating memory leaks | EXTERNAL |
| [`watchExtractedObservable`](references/watchExtractedObservable.md) | Watch the values of an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables | EXTERNAL |

### @SchemaOrg

| Function | Description | Invocation |
|----------|-------------|------------|
| [`createSchemaOrg`](https://vue-schema-org.netlify.app/api/core/create-schema-org.html) | Create the schema.org manager instance. | EXTERNAL |
| [`useSchemaOrg`](https://vue-schema-org.netlify.app/api/core/use-schema-org.html) | Update schema.org reactively. | EXTERNAL |

### @Sound

| Function | Description | Invocation |
|----------|-------------|------------|
| [`useSound`](https://github.com/vueuse/sound#examples) | Play sound effects reactively. | EXTERNAL |

<!-- chapter:end slug=vueuse-functions -->

---

<!-- chapter:begin slug=web-design-guidelines position=19 -->

## 19. web-design-guidelines

- **Source:** https://github.com/antfu/skills/blob/main/skills/web-design-guidelines/SKILL.md
- **Raw:** https://raw.githubusercontent.com/antfu/skills/main/skills/web-design-guidelines/SKILL.md
- **Markdown:** https://skillsdocs.com/antfu/skills/web-design-guidelines.md
- **Licence:** MIT — https://spdx.org/licenses/MIT.html

Bundled files (1), referenced from this skill's directory:
  - `SYNC.md` — https://raw.githubusercontent.com/antfu/skills/main/skills/web-design-guidelines/SYNC.md

<!-- Verbatim upstream SKILL.md follows, YAML frontmatter included. -->

---
name: web-design-guidelines
description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
metadata:
  author: vercel
  version: "1.0.0"
  argument-hint: <file-or-pattern>
---

# Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

## How It Works

1. Fetch the latest guidelines from the source URL below
2. Read the specified files (or prompt user for files/pattern)
3. Check against all rules in the fetched guidelines
4. Output findings in the terse `file:line` format

## Guidelines Source

Fetch fresh guidelines before each review:

```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

## Usage

When a user provides a file or pattern argument:
1. Fetch guidelines from the source URL above
2. Read the specified files
3. Apply all rules from the fetched guidelines
4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

<!-- chapter:end slug=web-design-guidelines -->