本文へ移動
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.

インストール方法を見る

含まれるファイル(7)

  • SKILL.md3.3 KB
  • references/build-and-ssr.md4.0 KB
  • references/core-config.md2.8 KB
  • references/core-features.md3.8 KB
  • references/core-plugin-api.md3.8 KB
  • references/environment-api.md2.3 KB
  • references/rolldown-migration.md2.8 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

Cross-Skill References

  • Testing → Use vitest skill (Vite-native testing)
  • Vue projects → Use vue skill for component patterns
  • Library bundling → Use tsdown skill for TypeScript libs

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Add, update, or retire an AI provider model option for the BYOK theme generator (OpenAI, Anthropic, Google) and verify the provider requests native structured output for it. Use when model lists go stale or a new provider/model is requested.

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

mattycraig/nuxt-theme-builder92026年9月29日 更新

Add a new interactive design tool under /tools (like the color converter or contrast checker) — component, page, navigation, route lists, SEO, and tests. Use when building a new utility tool.

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

mattycraig/nuxt-theme-builder92026年9月29日 更新

Write and register a new Learning Hub article (Nuxt Content markdown under content/learn) with valid frontmatter, navigation entry, route list entry, and accurate product details. Use when adding or substantially rewriting a learn guide, reference, or tip.

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

mattycraig/nuxt-theme-builder92026年9月29日 更新

Add a new component showcase, block, or template preview page and register it everywhere it must appear (navigation, command palette, route lists, SEO, source view). Use when adding anything under /components, /blocks, or /templates.

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

mattycraig/nuxt-theme-builder92026年9月29日 更新

Checklist for adding or changing a field on ThemeConfig (a new design token, per-mode setting, or export option) end to end — schema, defaults, store + history, CSS apply, export, editor UI, AI, and tests. Use whenever ThemeConfig's shape changes.

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

mattycraig/nuxt-theme-builder92026年9月29日 更新

Audit websites for SEO, performance, security, technical, content, and 15 other issue cateories with 230+ rules using the squirrelscan CLI. Returns LLM-optimized reports with health scores, broken links, meta tag analysis, and actionable recommendations. Use to discover and asses website or webapp issues and health.

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

mattycraig/nuxt-theme-builder92026年9月29日 更新

mattycraig のスキルをすべて見る

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