skills/vite/SKILL.md
Use when setting up Vite projects - provides dev server, HMR, build configuration, library mode, and plugin authoring patterns
npx skillsauth add onmax/claude-config viteInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Next-gen frontend build tool with native ESM dev server and Rolldown-powered builds.
npm create vite@latest my-app
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
},
})
vite # Dev server
vite build # Production build
vite preview # Preview build
| Task | File | | --------------------------------------- | ------------------------------------- | | Config file, options, CLI, plugins | config.md | | ESM, CSS, assets, env vars, glob import | features.md | | Dev server, HMR, workers, performance | dev.md | | Production, library mode, SSR, chunking | build.md | | JS API, plugin authoring, module graph | advanced.md |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
vitest skill (Vite-native testing)vue skill for component patternstsdown skill for TypeScript libsdevelopment
Iterative writing loop. Gemini 3 Pro writes, Claude Agent SDK reviews autonomously. Use for blog posts, docs, technical content needing quality iteration.
documentation
Conversational PRD writer - interview, scope, write, then create Linear/GitHub issue. Use when planning a new feature or product requirement.
tools
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
development
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.