teachingai/vite
skills/build-skills/vite/SKILL.md
Guidance for Vite using the official Guide, Config Reference, and Plugins pages. Use when the user needs Vite setup, configuration, or plugin selection details.
$ install --global
skillsauthnpx skillsauth add teachingai/full-stack-skills viteInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 8:43 AM5.3s39 files scanned
SKILL.md
- name:
- vite
- description:
- Guidance for Vite using the official Guide, Config Reference, and Plugins pages. Use when the user needs Vite setup, configuration, or plugin selection details.
- license:
- Complete terms in LICENSE.txt
When to use this skill
Use this skill whenever the user wants to:
- Follow Vite Guide topics from getting started to performance
- Configure Vite using the official config reference
- Select or understand Vite plugins from the official plugins page
- Use Vite CLI, HMR API, or JavaScript API
- Handle SSR, backend integration, or deployment scenarios in Vite
How to use this skill
- Identify the topic from the user request.
- Open the matching guide example file in
examples/guide/. - If configuration is needed, open the matching file in
examples/config/. - If plugin selection is needed, open
examples/plugins.md. - Follow official docs verbatim and keep output consistent with the referenced page.
- Validate: Run
npm run buildto verify config changes compile;npm run previewto test production output.
Guide mapping (one-to-one with https://cn.vitejs.dev/guide/)
Introduction
examples/guide/getting-started.md→ https://cn.vitejs.dev/guide/examples/guide/philosophy.md→ https://cn.vitejs.dev/guide/philosophy.htmlexamples/guide/why-vite.md→ https://cn.vitejs.dev/guide/why.html
Guide
examples/guide/features.md→ https://cn.vitejs.dev/guide/features.htmlexamples/guide/cli.md→ https://cn.vitejs.dev/guide/cli.htmlexamples/guide/using-plugins.md→ https://cn.vitejs.dev/guide/using-plugins.htmlexamples/guide/dep-pre-bundling.md→ https://cn.vitejs.dev/guide/dep-pre-bundling.htmlexamples/guide/assets.md→ https://cn.vitejs.dev/guide/assets.htmlexamples/guide/build.md→ https://cn.vitejs.dev/guide/build.htmlexamples/guide/static-deploy.md→ https://cn.vitejs.dev/guide/static-deploy.htmlexamples/guide/env-and-mode.md→ https://cn.vitejs.dev/guide/env-and-mode.htmlexamples/guide/ssr.md→ https://cn.vitejs.dev/guide/ssr.htmlexamples/guide/backend-integration.md→ https://cn.vitejs.dev/guide/backend-integration.htmlexamples/guide/troubleshooting.md→ https://cn.vitejs.dev/guide/troubleshooting.htmlexamples/guide/performance.md→ https://cn.vitejs.dev/guide/performance.htmlexamples/guide/migration.md→ https://cn.vitejs.dev/guide/migration.html
APIs
examples/guide/api-plugin.md→ https://cn.vitejs.dev/guide/api-plugin.htmlexamples/guide/api-hmr.md→ https://cn.vitejs.dev/guide/api-hmr.htmlexamples/guide/api-javascript.md→ https://cn.vitejs.dev/guide/api-javascript.html
Environment API
examples/guide/api-environment.md→ https://cn.vitejs.dev/guide/api-environment.htmlexamples/guide/api-environment-instances.md→ https://cn.vitejs.dev/guide/api-environment-instances.htmlexamples/guide/api-environment-plugins.md→ https://cn.vitejs.dev/guide/api-environment-plugins.htmlexamples/guide/api-environment-frameworks.md→ https://cn.vitejs.dev/guide/api-environment-frameworks.htmlexamples/guide/api-environment-runtimes.md→ https://cn.vitejs.dev/guide/api-environment-runtimes.html
Config mapping (one-to-one with https://cn.vitejs.dev/config/)
examples/config/configuring-vite.md→ https://cn.vitejs.dev/config/examples/config/shared-options.md→ https://cn.vitejs.dev/config/shared-options.htmlexamples/config/server-options.md→ https://cn.vitejs.dev/config/server-options.htmlexamples/config/build-options.md→ https://cn.vitejs.dev/config/build-options.htmlexamples/config/preview-options.md→ https://cn.vitejs.dev/config/preview-options.htmlexamples/config/dep-optimization-options.md→ https://cn.vitejs.dev/config/dep-optimization-options.htmlexamples/config/ssr-options.md→ https://cn.vitejs.dev/config/ssr-options.htmlexamples/config/worker-options.md→ https://cn.vitejs.dev/config/worker-options.html
Plugins mapping (one-to-one with https://cn.vitejs.dev/plugins/)
examples/plugins.md→ https://cn.vitejs.dev/plugins/
Inline Quick Start
# Create a new Vite project
npm create vite@latest my-app -- --template react-ts
# Install and run
cd my-app && npm install
npm run dev # Dev server with HMR
npm run build # Production build
npm run preview # Preview production build
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
build: {
sourcemap: true,
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] },
},
},
},
});
Best Practices
- Use
defineConfigfor TypeScript type hints and autocomplete - Configure proxy in
server.proxyfor API calls during development - Use
build.rollupOptions.output.manualChunksfor vendor splitting - Enable source maps in development; disable in production for smaller builds
- Use
import.meta.envfor environment variables (prefix withVITE_)
Resources
- Guide: https://cn.vitejs.dev/guide/
- Config: https://cn.vitejs.dev/config/
- Plugins: https://cn.vitejs.dev/plugins/
Keywords
Vite, build tool, dev server, HMR, config, plugins, SSR, CLI, dependency pre-bundling, assets
Related Skills
teachingai/agent-browser
tools
VerifiedTrustedCommunity
Automates browser interactions via CLI using agent-browser by Vercel Labs. Covers navigation, clicking, form filling, snapshots, refs-based selectors, agent mode with JSON output, session management, and CDP integration. Use when the user needs to automate web browsing, scrape pages, fill forms, or integrate browser automation into AI agent workflows.
379SKILL.mdUpdated May 12, 2026
teachingai/canvas-design
testing
VerifiedTrustedCommunity
Creates museum-quality visual art as .png or .pdf by first generating a design philosophy manifesto, then expressing it on canvas with precise composition, color palettes, and typography. Use when the user asks to create a poster, art piece, visual design, or static creative piece. Outputs original designs using design-forward principles.
379SKILL.mdUpdated May 12, 2026
teachingai/brand-guidelines
development
VerifiedTrustedCommunity
Applies Anthropic brand colors (dark #141413, orange #d97757, blue #6a9bcc, green #788c5d), Poppins headings, and Lora body text to artifacts such as presentations, documents, or visuals. Use when the user needs Anthropic brand styling, brand color application, corporate typography, or visual formatting following Anthropic design standards.
379SKILL.mdUpdated May 12, 2026
teachingai/algorithmic-art
development
VerifiedTrustedCommunity
Creates gallery-quality algorithmic art using p5.js with seeded randomness, interactive parameter controls, and seed navigation, outputting a single self-contained HTML artifact with Anthropic branding. Use when the user requests generative art, algorithmic art, flow fields, particle systems, or code-based visual art using p5.js.
379SKILL.mdUpdated May 12, 2026