DOCSEARCHbyAlgolia
Submit Docs

antfu/skills

repository·main·Indexed 26 days ago

https://github.com/antfu/skills

A curated collection of markdown-based Agent Skills reflecting Anthony Fu's preferences and best practices. It includes hand-maintained skills, skills generated from official documentation for the Vue, Nuxt, Vite, Pinia, Vitest, UnoCSS, and pnpm ecosystems, and vendored skills for tools like Slidev and tsdown. The repository serves as a proof-of-concept for syncing agent knowledge bases and includes a CLI for installing skills into projects or globally.

Tokens
516.6K
Snippets
2K
Records
2.6K
Agent score
90%

What's inside antfu-skills

  1. Overview of Nitro server toolkit

    main

    Nitro is a framework-agnostic and deployment-agnostic server toolkit powered by H3 v2, unstorage, and Vite/Rolldown/Rollup. It is used to build and deploy web servers to various runtimes including Node.js, Bun, Deno, Cloudflare, Vercel, and Netlify. It is the engine that powers Nuxt but can also be used standalone.

    Key Capabilities:

    • Filesystem routing: Uses H3 v2 event handlers with dynamic params and method suffixes.
    • Route rules: Declarative configuration for caching, headers, redirects, proxying, and auth.
    • Caching: Built-in layer using unstorage KV (supports cached handlers, functions, and SWR).
    • Runtime config: Configurable via NITRO_* environment variables.
    • Advanced features: Tasks (on-demand/cron), WebSockets/SSE, SQL database layer (via db0), and OpenAPI auto-documentation.
    • Extensibility: Support for plugins, lifecycle hooks, and custom server entries.

  2. Overview of Nuxt Core Capabilities

    main

    Nuxt is a full-stack Vue framework designed for server-side rendering (SSR), file-based routing, and auto-imports. It utilizes the Nitro server engine, allowing for universal deployment across Node.js, serverless, and edge platforms.

    Key core areas include:

    • Routing: File-based routing with support for dynamic routes, named views, and middleware.
    • Data Fetching: Built-in composables like useFetch, useAsyncData, and $fetch.
    • Modules: A powerful system for extending functionality using Nuxt Kit utilities.
    • Deployment: Platform-agnostic deployment via Nitro (Vercel, Netlify, Cloudflare, etc.).

  4. Overview of Vitest

    main

    Vitest is a fast unit testing framework powered by Vite. It provides a Jest-compatible API with native ESM, TypeScript, and JSX support out of the box. It shares the same configuration, transformers, resolvers, and plugins as your Vite application, making it highly efficient for Vite-based projects.

    Key Features:

    • Vite-native: Uses Vite's transformation pipeline for fast HMR-like test updates.
    • Jest-compatible: Acts as a drop-in replacement for most Jest test suites.
    • Smart watch mode: Only reruns tests affected by changes based on the module graph.
    • Native Support: Built-in support for ESM, TypeScript, and JSX without extra configuration.
    • Parallel Execution: Uses multi-threaded workers for faster testing.
    • Built-in Coverage: Supports coverage reporting via V8 or Istanbul.
    • Utilities: Includes snapshot testing, mocking, and spy utilities.

  5. Overview of VitePress

    main

    VitePress is a Static Site Generator (SSG) built on Vite and Vue 3. It converts Markdown content into static HTML that functions as a Single Page Application (SPA) for fast navigation. It is optimized for documentation, blogs, and marketing sites.

    Key Features:

    • File-based routing using .md files.
    • Direct use of Vue components within Markdown.
    • Fast Hot Module Replacement (HMR) with updates typically under 100ms.
    • A default theme specifically optimized for documentation.
    • Built-in search capabilities (supporting both local search and Algolia).

    Project Structure Checklist:

    • .vitepress/config.ts: Contains the main site configuration.
    • .vitepress/theme/: Contains custom theme extensions and configurations.
    • public/: Directory for static assets served as-is.

  6. Overview of Pinia State Management

    main
    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, providing first-class TypeScript support and devtools integration. Use Pinia when defining stores, working with state, getters, and actions, or implementing store patterns in Vue applications.

  7. Overview of antfu/skills collection

    main

    The antfu/skills repository is a curated collection of Agent Skills designed for AI agents. It is categorized into three main types:

    Hand-maintained Skills

    Opinionated skills reflecting Anthony Fu's personal preferences and best practices (e.g., antfu, antfu-design).

    Skills Generated from Official Documentation

    Unopinionated skills generated from official docs and fine-tuned for modern stacks like Vue, Nuxt, Vite, Pinia, Vitest, UnoCSS, and pnpm.

    Vendored Skills

    Skills synced from external repositories, including official skills for slidev, tsdown, turborepo, and vueuse-functions, as well as various best-practice guides.

  8. Overview of antfu design skill

    main

    The antfu-design skill is a UnoCSS design system implementation. It provides class-first semantic tokens with dual light/dark mode support. It is designed for:

    • Tooling and Devtools UIs: Using semantic tokens.
    • Product and Marketing Surfaces: Utilizing design-read, anti-slop, and micro-interaction polish.

    Note: This README is for human reference. Agents should use SKILL.md and the references/ directory for the actual skill implementation.

  9. Overview of pnpm Core Features

    main

    pnpm is a fast, disk-efficient package manager that uses a content-addressable store to deduplicate packages. Its core capabilities include:

    • CLI Commands: Managing lifecycle via install, add, remove, update, run, dlx/pnx, and workspace-specific commands.
    • Workspaces: Full monorepo support including filtering, the workspace: protocol, and shared lockfiles.
    • Store Management: Utilizing a content-addressable store and virtual store with various node linker modes.
    • Strict Dependency Resolution: Enforces strictness by default to prevent phantom dependencies.

  10. Use the Advanced Pattern Vocabulary for UI design reasoning

    main
    The advanced-pattern-vocabulary provides a set of named UI patterns to help reason about and implement sophisticated designs. This is a vocabulary of concepts, not a component library. Use these names to identify and request specific design patterns when the design requirements justify them. Most standard tooling UIs do not require these patterns.

  11. Understand Vitest default reporter selection

    main

    When the reporters configuration is unset, Vitest automatically selects reporters based on the environment:

    • default: Used for normal terminal runs (provides a summary and collapses passing files).
    • minimal (alias agent): Automatically selected when an AI coding agent is detected. It only outputs failed tests and errors to minimize token usage.
    • github-actions: Automatically added when the GITHUB_ACTIONS environment variable is set to 'true'.

  12. Understand Turborepo Caching Mechanics

    main

    Turborepo uses a content-addressed caching system based on a fingerprint of inputs. The core equation is:

    fingerprint(inputs) → stored outputs

    If the inputs (files, environment variables, configuration, etc.) have not changed, Turborepo restores the stored outputs from the cache instead of re-running the task. On a cache hit, Turborepo extracts the archived outputs to their original locations and replays the logged stdout/stderr to the terminal, displaying FULL TURBO.