From qe-framework
Configures Vite projects, writes plugins, sets up SSR, and migrates to Vite 8 with Rolldown. References Vite-specific APIs and environment configuration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/qe-framework:QviteThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Based on Vite 8 beta (Rolldown-powered). Vite 8 uses Rolldown bundler and Oxc transformer.
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.
vite.config.ts| Topic | Description | Reference |
|---|---|---|
| Configuration | vite.config.ts, defineConfig, conditional configs, loadEnv | core-config |
| Features | import.meta.glob, asset queries (?raw, ?url), import.meta.env, HMR API | core-features |
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | core-plugin-api |
| Topic | Description | Reference |
|---|---|---|
| Build & SSR | Library mode, SSR middleware mode, ssrLoadModule, JavaScript API | build-and-ssr |
| Topic | Description | Reference |
|---|---|---|
| Environment API | Vite 6+ multi-environment support, custom runtimes | environment-api |
| Rolldown Migration | Vite 8 changes: Rolldown bundler, Oxc transformer, config migration | rolldown-migration |
/**
* @description Standard Vite config with Vue + common plugins
* @param env - Environment variables from loadEnv
* @returns {import('vite').UserConfig} Vite configuration object
*/
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
plugins: [vue()],
resolve: { alias: { '@': '/src' } },
server: { port: 3000 },
build: { target: 'esnext', outDir: 'dist' },
}
})
/**
* @description Virtual module plugin with error boundary
*/
function virtualModulePlugin() {
const moduleId = 'virtual-module'
const resolvedId = '\0' + moduleId
return {
name: 'virtual-module',
resolveId(id) { return id === moduleId ? resolvedId : null },
load(id) {
try {
if (id === resolvedId) return `export const value = 'data'`
} catch (e) { this.error(`Failed to load virtual module: ${e.message}`) }
},
handleHotUpdate({ file }) { if (file.includes('virtual')) console.log(`Updated: ${file}`) },
}
}
export default defineConfig({
ssr: {
target: 'node',
noExternal: ['vue-router'],
},
build: {
ssr: 'src/entry-server.ts',
ssrManifest: true,
},
define: {
__SSR__: true,
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},
})
Use JSDoc for all Vite config exports and plugin functions:
/**
* @description What this config/plugin does
* @param {Object} options - Configuration options
* @param {string} options.name - Plugin name
* @returns {import('vite').Plugin | import('vite').UserConfig}
*/
Required checks (run in CI/pre-commit):
eslint --ext .ts,.tsx,.js,.jsx src/tsc --noEmit (TypeScript verification)prettier --check .Vite-specific rules:
require() or module.exports (ESM only)import.meta.glob)import.meta.envVITE_* prefix; others require explicit envPrefix in configpackage-lock.json; use npm audit regularlyvite.config.ts via server middleware or SSR templatesourcemap: false in build config)server.cors and server.proxy rules; avoid { origin: '*' }import.meta.env.VITE_API_URL, never hardcode in code| Wrong ❌ | Correct ✅ | Why |
|---|---|---|
import * as _ from 'lodash' | import { debounce } from 'lodash-es' | Enable tree-shaking |
| All code in single bundle | Use rollupOptions.output.manualChunks | Smaller chunks = faster load |
devDependencies in prod | Conditional imports: if (process.env.NODE_ENV === 'development') | Reduce bundle size |
const API = 'https://api.prod.com' | const API = import.meta.env.VITE_API_URL | Env config, not code |
| Magic strings in config | define: { '__VERSION__': JSON.stringify(pkg.version) } | Single source of truth |
npx claudepluginhub inho-team/qe-framework --plugin qe-frameworkCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.