Files

SKILL.mdagentsreferences

Install

Install the containing plugin

/plugin install web-design-skills@llm-skills

Invoke this skill after installation

/web-design-skills:vite

Download vite-skill.zip

This skill is bundled inside web-design-skills. Install the plugin once, then Claude Code can use any of its included skills. Browse the full plugin repository at github.com/alisonaquinas/llm-web-design-skills.

SKILL.md

name: vite description: > review, design, scaffold, refactor, and troubleshoot vite based web projects and toolchains. use when the user asks for vite app structure, dev server behavior, bundling, plugins, env variables, aliasing, asset handling, test integration, or migration guidance.

Vite

Use this skill to keep Vite work grounded in maintainable architecture, predictable delivery, and framework-appropriate conventions.

Intent Router

Need	Load
core conventions, structure, review priorities, and common red flags for Vite	`references/best-practices.md`
setup, migration, testing, build, delivery, and day-two workflow guidance for Vite	`references/workflows.md`

Quick Start

Confirm Vite version and framework plugin stack, dev-server versus build-time problem scope, artifact type: app, library, or docs site, and deployment target and env strategy.
Identify whether the task is greenfield scaffolding, incremental refactoring, troubleshooting, migration planning, or code review.
Apply the defaults in references/best-practices.md before proposing custom architecture.
Prefer the smallest change set that improves clarity, safety, operability, and long-term maintainability.

Workflow

identify whether the problem is in dev, build, preview, or tests
keep alias and env naming aligned across tools
separate functional correctness from performance tuning
verify preview and production-like behavior after config changes

Typical Focus Areas

Vite version and framework plugin stack
dev-server versus build-time problem scope
artifact type: app, library, or docs site
deployment target and env strategy

Outputs to Prefer

summarize framework host, artifact type, and deployment constraints first
group findings by config, plugins, env handling, assets, and preview behavior
prefer solving the correct layer: dev server, build, test, or deploy

First Response Pattern

restate Vite version, plugin stack, and whether the problem is in dev, build, preview, or tests before suggesting changes
anchor the plan at the affected config seam such as aliases, plugins, env, or asset handling
name the verification loop up front: npm run dev, npm run build, and either npm run preview or npm run test for the changed path

Common Requests

Review this Vite config for plugin order, aliasing, asset handling, preview behavior, and `import.meta.env` safety in a React or Vue app where `npm run dev` works but `npm run build` or `npm run preview` drifts from local behavior.

Help migrate this frontend project from webpack or CRA to Vite with minimal churn while preserving plugin behavior, Vitest coverage, path aliases, and preview parity for the current deployment target.

Safety Notes

preserve externally visible behavior unless the user explicitly requests a redesign or a breaking change
avoid style-only churn when the current repository already has working conventions and automation