#601

Globales Ranking · von 601 Skills

vite AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill vite

39

Installationen

Vite

Overview

Vite is a next-generation frontend build tool that provides instant dev server start via native ES modules and optimized production builds via Rollup. It supports TypeScript, JSX, CSS preprocessors, and static assets out of the box with zero configuration.

When to use: Single-page apps, multi-page apps, library publishing, SSR applications, monorepo packages, any modern frontend project needing fast dev feedback and optimized builds.

When NOT to use: Legacy browsers requiring ES5 output without transpilation, projects locked to Webpack-specific loaders with no Vite equivalents, non-JavaScript build pipelines.

Quick Reference

Pattern API Key Points
Config file defineConfig({}) Type-safe config with IDE support
Conditional config defineConfig(({ command, mode }) => ({})) Different config per command/mode
Path alias resolve.alias Map @/ to src/
Dev proxy server.proxy Forward API requests to backend
HMR config server.hmr WebSocket host/port/protocol
HTTPS dev server.https Pass TLS cert/key options
Build target build.target ES module target for output
Manual chunks build.rollupOptions.output.manualChunks Control code splitting
Library mode build.lib Publish ES/CJS/UMD packages
SSR build build.ssr + ssr options Server-side rendering config
Env variables import.meta.env.VITE_* Client-exposed env vars
loadEnv loadEnv(mode, root, prefix) Load env vars in config
CSS modules css.modules Scoped CSS class names
Preprocessors css.preprocessorOptions Sass/Less/Stylus options
PostCSS css.postcss Inline or external PostCSS config
Static assets import url from './img.png' Returns resolved public URL
Plugin { name, transform, load } Hook-based plugin system
Virtual module resolveId + load hooks Generate modules at build time
Multi-page build.rollupOptions.input Multiple HTML entry points

Common Mistakes

Mistake Correct Pattern
Exposing secrets via VITE_ prefix Only prefix client-safe vars with VITE_; use loadEnv in config for server-only secrets
Using process.env in client code Use import.meta.env.VITE_* (Vite replaces at build time)
Modifying rollupOptions.input without resolve() Always use path.resolve() or import.meta.dirname for absolute paths
Not externalizing peer deps in library mode Add React/Vue to rollupOptions.external to avoid bundling
Creating QueryClient-style singletons in SSR Ensure per-request state in SSR to avoid cross-request leaks
Inline PostCSS config alongside postcss.config.js Use one or the other; inline config disables config file search
Setting base without trailing slash base should be /path/ with trailing slash or full URL
Using __dirname in ESM config Use import.meta.dirname (Node 21+) or fileURLToPath

Delegation

  • Plugin discovery: Use Explore agent
  • Build analysis: Use Task agent
  • Config review: Delegate to code-reviewer agent

If the vitest-testing skill is available, delegate test configuration and Vitest setup to it.
If the tailwind skill is available, delegate Tailwind CSS configuration and utility patterns to it.
If the react-patterns skill is available, delegate React component patterns and hooks to it.
If the typescript-patterns skill is available, delegate TypeScript configuration and type patterns to it.
If the pnpm-workspace skill is available, delegate monorepo workspace configuration to it.

References

Installationen

Installationen 39
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
zeroleaks Safe
Bewertung: 93
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install vite by running npx skills add oakoss/agent-skills --skill vite in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für vite, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport