Claude MarketplacesSubmit
affaan-m avatar

Vite Patterns

affaan-m/everything-claude-code

This is your reference when configuring vite.config.ts, debugging HMR issues, or setting up environment variables and dev proxies. It covers the essentials: dependency pre-bundling, the difference between dev and build modes, plugin ordering, and library mode configuration. The security section on VITE_ prefixed variables is worth reading even if you've shipped Vite apps before. Most people don't realize those vars are statically inlined at build time and fully visible in production bundles. Also flags the critical gap that vite build doesn't type-check, so type errors ship silently unless you add vite-plugin-checker or run tsc in CI.

skills.sh installs
1.7K
GitHub stars
229.1K
last updated
Jul 14, 2026
View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill vite-patterns --agent claude-code

Installs 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.ts or vite.config.js
  • Setting up environment variables or .env files
  • 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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/affaan-m/everything-claude-code
First seen
Jun 3, 2026

More from affaan-m/everything-claude-code

All 256

Recommended

1juliusbrussee avatarcavemanjuliusbrussee/cavemanUltra-compressed communication mode. Cuts output tokens 65% (measured) by speaking like caveman while keeping full technical accuracy. Supports intensity levels618.3Kskills.sh installs
2mattpocock avatargrill-memattpocock/skillsA relentless interview to sharpen a plan or design.1.5Mskills.sh installs
3shadcn avatarimproveshadcn/improveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on s40Kskills.sh installs
4obra avatarsystematic-debuggingobra/superpowersUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes326.7Kskills.sh installs
5forrestchang avatarkarpathy-guidelinesforrestchang/andrej-karpathy-skillsBehavioral guidelines to reduce common LLM coding mistakes through explicit assumptions, simplicity, and verifiable success criteria.17.9Kskills.sh installs
6vercel-labs avatarfind-skillsvercel-labs/skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express int4.3Mskills.sh installs