Agent Native

vite

This skill equips agents to work with Vite, a modern frontend build tool.

by SanityOfficial publisherNot reviewed

Identity proven by GitHub's verified organisation badge (sanity-io)

Agents
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, claude.ai and API
License
MIT (permissive)
Pin
a80a997pinned Oct 9, 2026
Context cost
about 700 tokenswhen the skill loads
GitHub stars
20on sanity-io/plugins
Scripts
None found

What it does

“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.”
The author's description, from SKILL.md

Generated summary from the skill's own text

This skill equips agents to work with Vite, a modern frontend build tool. It covers vite.config.ts configuration, the plugin API, SSR setup, and migration to Vite 8 with Rolldown bundler and Oxc transformer.

When to use it

  • Setting up or modifying vite.config.ts in projects
  • Developing Vite plugins or virtual modules
  • Building libraries or server-side rendering applications
  • Migrating existing Vite projects to version 8

When not to

  • Working with webpack, Parcel, or other non-Vite bundlers
  • Projects requiring CommonJS over native ESM modules

Install

These commands install from the publisher's repository and need no account.

skills CLI

npx skills add sanity-io/plugins --skill vite

Installs from the repository's default branch, which may have changed since the commit we checked.

GitHub CLI 2.90 or later

gh skill install sanity-io/plugins vite@a80a997e3d11d188f9639ac3efab1d8f93a276ef

Installs the commit we checked (a80a997).

Copy by hand

Download the folder at a80a997 and put it in .claude/skills/vite for Claude Code and in .agents/skills/vite for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

Skill folder on GitHub at a80a997

Claude Code plugin

/plugin install sanity@claude-plugins-official

The publisher's plugin in Claude's official marketplace. It may hold more than this skill, and we have not pinned it.

Copy for your agent

A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.

Prompt

Install the agent skill "vite" by Sanity.

Source, pinned to commit a80a997e3d11d188f9639ac3efab1d8f93a276ef:
https://github.com/sanity-io/plugins/tree/a80a997e3d11d188f9639ac3efab1d8f93a276ef/.agents/skills/vite

1. Download that folder at exactly this commit. Do not use the default branch.
2. Copy every file unchanged, keeping the folder structure, into .claude/skills/vite/ for Claude Code and .agents/skills/vite/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist.
3. Do not edit the files, and do not run any script in the folder unless I ask you to.
4. When you are done, list the files you copied and where you put them.

Listing and checks: https://www.agentnative.dev/skills/sanity/vite

SKILL.md at the pin

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

From sanity-io/plugins at a80a997, shown as plain text under its license: MIT (permissive). The license text is in LICENSE.

View SKILL.md on GitHub at a80a997

Files

8 files, 22 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.

Skill folder on GitHub at a80a997
All 24 skills from Sanity

More from Sanity

  • sanity-live-cache-components

    Integrates Sanity Live with Next.js Cache Components in next-sanity v13+ apps, setting up shared cached data fetching through sanityFetch, live content…

    Claude Code, Codex, Cursor +4 · about 4K tokens · pinned 6 days ago

  • content-experimentation-best-practices

    This skill provides guidance for designing and running content experiments using A/B and multivariate testing.

    Claude Code, Codex, Cursor +4 · about 360 tokens · pinned 6 days ago

  • content-modeling-best-practices

    Guides agents through structured content modeling principles for headless CMSes like Sanity, covering schema design, content reuse strategies, and field…

    Claude Code, Codex, Cursor +4 · about 340 tokens · pinned 6 days ago

  • portable-text-conversion

    Converts HTML and Markdown content into Portable Text blocks for Sanity using markdownToPortableText, htmlToBlocks, or manual construction.

    Claude Code, Codex, Cursor +4 · about 510 tokens · pinned 6 days ago

  • portable-text-serialization

    This skill enables rendering Portable Text content across multiple frameworks and output formats using the @portabletext library family.

    Claude Code, Codex, Cursor +4 · about 940 tokens · pinned 6 days ago

  • sanity-best-practices

    This skill provides best practices for Sanity headless CMS development across schema design, GROQ queries, framework integrations (Next.js, Nuxt, Astro…

    Claude Code, Codex, Cursor +4 · about 1.1K tokens · pinned 6 days ago

  • next-bundle-optimizer

    Audits Next.js applications to identify and reduce browser bundle size and initial-load work by analyzing routes, dependencies and client outputs.

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +4 · about 2.3K tokens · pinned 6 days ago

  • next-cache-components-optimizer

    Optimize Next.js routes to display meaningful UI instantly on initial load or client navigation by encoding the optimization goal as a failing…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +4 · about 5.6K tokens · pinned 6 days ago

  • next-partial-prefetching-adoption

    Enables Partial Prefetching in Next.js 16.3+ apps and guides adoption through auditing Link prefetch behavior, preserving UI in tests or manually, and…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +4 · about 6.7K tokens · pinned 6 days ago

  • remotion-interactivity

    This skill teaches how to structure Remotion code so the Studio IDE recognizes and makes it interactive.

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 2.4K tokens · pinned 6 days ago

  • remotion-interactivity

    This skill teaches how to structure Remotion video components to unlock Studio interactivity features like click selection, drag-and-drop, resizing, rotation…

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 4.8K tokens · pinned 6 days ago

  • remotion-maps

    This skill enables creating map-based animations with Remotion using four different mapping libraries: Mapbox, MapLibre, MapTiler, or CesiumJS.

    by RemotionOfficial publisher

    Contains scripts

    Claude Code, Codex, Cursor +3 · about 240 tokens · pinned 6 days ago

The skills listed here are third-party software, collected from public GitHub repositories as a catalog of recent skills and provided as is. Agent Native does not write or control them and is not responsible for any harm, loss or damage caused by installing or using them. Labels and checks describe what we saw at one commit and are not a guarantee. Read a skill's files before you run it. Terms of use