本文へ移動
cccskills
無料GitHub で公開

vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

インストール方法を見る

含まれるファイル(8)

  • SKILL.md3.1 KB
  • GENERATION.md134 B
  • references/build-and-ssr.md3.2 KB
  • references/core-config.md2.7 KB
  • references/core-features.md3.8 KB
  • references/core-plugin-api.md3.7 KB
  • references/environment-api.md2.3 KB
  • references/rolldown-migration.md2.7 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Vite

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.

Preferences

  • Use TypeScript: prefer vite.config.ts
  • Always use ESM, avoid CommonJS

Core

TopicDescriptionReference
Configurationvite.config.ts, defineConfig, conditional configs, loadEnvcore-config
Featuresimport.meta.glob, asset queries (?raw, ?url), import.meta.env, HMR APIcore-features
Plugin APIVite-specific hooks, virtual modules, plugin orderingcore-plugin-api

Build & SSR

TopicDescriptionReference
Build & SSRLibrary mode, SSR middleware mode, ssrLoadModule, JavaScript APIbuild-and-ssr

Advanced

TopicDescriptionReference
Environment APIVite 6+ multi-environment support, custom runtimesenvironment-api
Rolldown MigrationVite 8 changes: Rolldown bundler, Oxc transformer, config migrationrolldown-migration

Quick Reference

CLI Commands

vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build

Common Config

import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [],
	resolve: { alias: { '@': '/src' } },
	server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
	build: { target: 'esnext', outDir: 'dist' }
});

Official Plugins

  • @vitejs/plugin-vue - Vue 3 SFC support
  • @vitejs/plugin-vue-jsx - Vue 3 JSX
  • @vitejs/plugin-react - React with Oxc/Babel
  • @vitejs/plugin-react-swc - React with SWC
  • @vitejs/plugin-legacy - Legacy browser support

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Bun

無料

Use when building, running, testing, or bundling JavaScript/TypeScript applications. Reach for Bun when you need to execute scripts, manage packages, run tests, or bundle code for production. Bun is a drop-in replacement for Node.js with integrated package manager, test runner, and bundler.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads/downloads, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

日本語の概要は準備中です。原文の説明を表示しています。

human-kit/ui172026年10月11日 更新

human-kit のスキルをすべて見る

このスキルの問題を報告する