Vite Patterns
Comprehensive reference for Vite's config, plugins, HMR, and build setup. Covers the stuff that trips people up: dependency pre-bundling, the difference between dev and build modes, why VITE_ prefixed env vars aren't actually secret, and how to avoid shipping type errors to production since vite build doesn't run tsc. The plugin comparison table is genuinely useful, especially the callout that you need vite-plugin-checker if you want type safety. Good for anyone moving beyond the basic starter template or debugging why their proxy config isn't working. Treat the security section seriously, the loadEnv pitfall has burned people.
- skills.sh installs
- 5.8K
- GitHub stars
- 300.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add affaan-m/ecc --skill vite-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
Vite Patterns
Build tool and dev server patterns for Vite 8+ projects. Covers configuration, environment variables, proxy setup, library mode, dependency pre-bundling, and common production pitfalls.
When to Use
- Configuring
vite.config.tsorvite.config.js - Setting up environment variables or
.envfiles - Configuring dev server proxy for API backends
- Optimizing build output (chunks, minification, assets)
- Publishing libraries with
build.lib - Troubleshooting dependency pre-bundling or CJS/ESM interop
- Debugging HMR, dev server, or build errors
- Choosing or ordering Vite plugins
How It Works
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/affaan-m/ecc
- Categories
- Frontend Development, Backend & APIs, DevOps & CI/CD
- First seen
- Jul 14, 2026
More from affaan-m/ecc
All 263- Bun Runtime5.8K
- Agent Architecture Audit5.8K
- Nodejs Keccak2565.8K
- Security Scan5.8K
- Cpp Testing5.8K
- Django Tdd5.8K
- Dashboard Builder5.7K
- Redis Patterns5.7K
- Eval Harness5.7K
- Manim Video5.7K
- Content Engine5.7K
- Springboot Tdd5.7K
- Motion Patterns5.7K
- Configure Ecc5.7K
- Token Budget Advisor5.7K
- Investor Materials5.7K
- Agent Introspection Debugging5.7K
- Laravel Verification5.7K
- Marketing Campaign5.7K
- Motion Foundations5.7K
- Kotlin Testing5.7K
- Ai Regression Testing5.7K
- Dart Flutter Patterns5.7K
- Mysql Patterns5.7K
Recommended
More Frontend Development
linkedin-ghostwritingsamber/cc-skillsB2B LinkedIn ghostwriting — strategic interview, hook engineering, and post body. Use when the user wants to write LinkedIn content, create ghostwritten posts, 5.8Kskills.sh installs
git-guardrails-claude-codevinvcn/mattpocock-skills-zh-cn设置 Claude Code hooks，在危险 git commands（push、reset --hard、clean、branch -D 等）执行前阻止它们。适用于用户想防止破坏性 git 操作、添加 git safety hooks，或在 Claude Code 中阻止 git push/reset 时。5.7Kskills.sh installs
dart-flutter-patternsaffaan-m/eccProduction-ready Dart and Flutter patterns covering null safety, immutable state, async composition, widget architecture, popular state management frameworks (B5.7Kskills.sh installssetup-pre-commitvinvcn/mattpocock-skills-zh-cn在当前仓库设置 Husky pre-commit hooks，集成 lint-staged (Prettier)、类型检查和测试。适用于用户想添加 pre-commit hooks、设置 Husky、配置 lint-staged，或在提交时运行格式化、类型检查和测试时。5.7Kskills.sh installsecc-guideaffaan-m/eccGuide users through ECC's current agents, skills, commands, hooks, rules, install profiles, and project onboarding by reading the live repository surface before5.5Kskills.sh installs
android-device-automationweb-infra-dev/midscene-skillsVision-driven Android device automation using Midscene. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visi5.5Kskills.sh installs