hjemmesidekongen/vite-patterns
plugins/smedjen/skills/vite-patterns/SKILL.md
Vite configuration, plugins, HMR, build optimization, and environment variables.
tools
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add hjemmesidekongen/ai vite-patternsInstall 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 5, 2026, 5:30 PM15.7s3 files scanned
SKILL.md
- name:
- vite-patterns
- description:
- >
- user_invocable:
- false
- interactive:
- false
- model_tier:
- senior
- depends_on:
- []
- reads:
- []
- writes:
- []
- type:
- data_validation
- - name:
- manual_chunks_defined_for_large_deps
- verify:
- Large third-party dependencies (>50kB) are split into named chunks in build.rollupOptions
- fail_action:
- Add manualChunks to prevent monolithic vendor bundle
- on_fail:
- Vite configuration has structural issues — fix before shipping
- on_pass:
- Vite configuration follows best practices
- origin:
- smedjen
- inspired_by:
- original
- ported_date:
- 2026-03-10
- iteration:
- 1
- changes:
- New discipline skill for smedjen
Vite Patterns
Vite's two-phase architecture (dev server via native ESM, production build via Rollup) means the rules for dev and prod differ. Configure them independently.
Config Structure
vite.config.ts is the single source of truth. Use defineConfig() for type safety. Split large configs with helper functions rather than a single deeply nested object. Conditional logic based on mode or command goes at the top level, not scattered through the config.
Plugins run in order — transform plugins that produce virtual modules should come before plugins that consume them. Use enforce: 'pre' or enforce: 'post' only when ordering matters and you can't control it via position.
Plugin Ecosystem
The plugin API (resolveId, load, transform) mirrors Rollup's. Vite-specific additions: configureServer for dev middleware, transformIndexHtml for HTML injection, handleHotUpdate for custom HMR.
For framework integrations, use official plugins: @vitejs/plugin-react, @vitejs/plugin-vue, @vitejs/plugin-svelte. Prefer official over community alternatives for core framework support — the APIs differ subtly.
Environment Variables
Only VITE_-prefixed variables are injected into client bundles via import.meta.env. All other .env variables stay server-side. Use .env.local for secrets — it is gitignored by default.
Mode determines which .env file loads: development → .env.development, production → .env.production. Override with --mode staging.
Build Optimization
Production builds go through Rollup. Code splitting is automatic for dynamic imports. Manual chunk grouping via build.rollupOptions.output.manualChunks controls vendor bundle structure — use it to isolate large deps and improve long-term caching.
Tree shaking works at the module graph level. Side-effect-free packages need "sideEffects": false in their package.json. For internal code, avoid barrel re-exports that import more than needed.
See references/process.md for full API details, proxy config, CSS handling, library mode, SSR, optimizeDeps, multi-page apps, worker support, and anti-patterns.
Related Skills
hjemmesidekongen/brand-strategy
development
VerifiedTrustedCommunity
Creates a brand from scratch through market research and interactive sparring. Runs competitive research via Perplexity, then guides the user through positioning, audience, voice, values, and content pillars. Produces the full brand guideline set at .ai/brand/{name}/. Use when building a new brand, defining brand strategy for a product, or when /våbenskjold:create is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-loader
testing
VerifiedTrustedCommunity
Loads brand guidelines from .ai/brand/{name}/ and makes them available to the current context. Progressive disclosure: L1 confirms brand exists, L2 loads summary, L3 loads specific files on demand. Use when a downstream skill or user needs brand context, or when /våbenskjold:apply is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-evolve
documentation
VerifiedTrustedCommunity
Guided reinvention of an existing brand guideline. Loads current brand from .ai/brand/{name}/, identifies what to keep vs change, and walks the user through targeted evolution. Preserves brand equity while updating positioning, voice, or values. Use when refreshing a brand or when /våbenskjold:evolve is invoked.
SKILL.mdUpdated Apr 5, 2026
hjemmesidekongen/brand-audit
development
VerifiedTrustedCommunity
Codifies an existing brand from materials, samples, and references. Analyzes provided content to extract voice patterns, values, and positioning. Produces the same guideline format as brand-strategy. Use when a brand already exists but isn't documented, or when /våbenskjold:audit is invoked.
SKILL.mdUpdated Apr 5, 2026