vite-config
Generates vite.config.ts for building and serving the Vue 3 application. Configures dev server, API proxy, build format, and plugins.
Best use case
vite-config is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generates vite.config.ts for building and serving the Vue 3 application. Configures dev server, API proxy, build format, and plugins.
Teams using vite-config should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/vite-config/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How vite-config Compares
| Feature / Agent | vite-config | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generates vite.config.ts for building and serving the Vue 3 application. Configures dev server, API proxy, build format, and plugins.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Vite Config Skill ## Purpose Generate the `vite.config.ts` file for building and serving the Vue 3 application. ## Input Parameters Read from `copilot-instructions.md` and `docs/requirements/application-parameters.md`: - `application_id`: The application ID for style tag - `default_port`: The development server port - `api_base_path`: The base path for API proxy - `vite_build_format`: The build output format (system or es) ## Output Create the file: `vite.config.ts` ## Template See: `examples.md` in this directory for complete template and detailed examples. ## Notes - The proxy configuration should be updated with the actual backend service URL - The `appId` is imported from the global constants file - CSS is injected by JavaScript in build mode for single-spa compatibility - SVG loader is configured to preserve viewBox for proper scaling
Related Skills
vitest-testing
Vitest unit testing for TypeScript/JavaScript in Oh My Brand! theme. Test setup, Web Component testing, mocking patterns, and coverage. Use when writing unit tests for frontend code.
tailwind-configuration
Use when setting up or customizing Tailwind CSS configuration, theme customization, plugins, and build setup. Covers tailwind.config.js setup and content paths.
storybook-configuration
Use when setting up or configuring Storybook for a project. Covers main configuration, addons, builders, and framework-specific setup.
storybook-config
Generate and configure Storybook 9 for any framework with automatic detection, SOTA best practices, and platform-specific optimizations (Web, Tauri, Electron)
nodejs-javascript-vitest
Guidelines for writing Node.js and JavaScript code with Vitest testing Triggers on: **/*.js, **/*.mjs, **/*.cjs
n8n-node-configuration
Operation-aware node configuration guidance. Use when configuring nodes, understanding property dependencies, determining required fields, choosing between get_node detail levels, or learning common configuration patterns by node type.
laravel-vite
Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.
greptile-config
Generate production-ready Greptile AI code review configuration for any repository. Use this skill whenever the user mentions Greptile, AI code review setup, PR review configuration, automated code review rules, or wants to set up .greptile/ config files. Also trigger when someone says "set up code review", "configure PR reviews", "add review rules", or asks about Greptile configuration — even if they don't say "Greptile" explicitly but describe wanting AI-powered PR review automation. This skill analyzes the actual repository structure and produces tailored config, not generic boilerplate.
env-config-validator
Validate environment configuration files across local, staging, and production environments. Ensure required secrets, database URLs, API keys, and public variables are properly scoped and set. Use this skill when setting up environments, validating configuration, checking for missing secrets, auditing environment variables, ensuring proper scoping of public vs private vars, or troubleshooting environment issues. Trigger terms include env, environment variables, secrets, configuration, .env file, environment validation, missing variables, config check, NEXT_PUBLIC, env vars, database URL, API keys.
configure
Configure pattern-radar sources, weights, and domains.
configure-chatkit
This skill should be used when setting up OpenAI ChatKit in Next.js, adding domain allowlist to environment, building chat UI component, integrating with /api/chat endpoint, displaying history and tool calls visually, and integrating Better Auth session.
config-generate
Generate configuration files for development tools