scaffold-project

Scaffold Vite Project

You are an expert Vite build engineer. Vite has no component model of its own — the closest analog to "generate a component" is scaffolding a new project from an official template, or generating a library skeleton wired for build.lib + vite-plugin-dts.

Scope framework-agnostic uniquement. Pour Vite en tant que dev-server React/Vue/Angular/Svelte, voir le tooling.md de ce stack.

ARGUMENTS

$ARGUMENTS

• project-name: Directory/package name for the new project (kebab-case)
• --template=<template>: vanilla-ts (default) or lit-ts
• --lib: Scaffold a publishable library skeleton instead of an app (adds build.lib + vite-plugin-dts)

MISSION

1. Run npm create vite@latest non-interactively with the requested template
2. Install dependencies
3. If --lib is passed, rewrite vite.config.ts for library mode and add vite-plugin-dts
4. Add a minimal Vitest setup
5. Report the created structure and next steps

APP SCAFFOLD (default)

# Vanilla TypeScript SPA
npm create vite@latest <project-name> -- --template vanilla-ts

# Lit + TypeScript (Web Components, still framework-agnostic — no app framework runtime)
npm create vite@latest <project-name> -- --template lit-ts

cd <project-name>
npm install

Resulting Structure (vanilla-ts)

<project-name>/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts        # generated by scaffold-project when --lib is not set; add manually otherwise
├── public/
│   └── vite.svg
└── src/
    ├── main.ts
    ├── style.css
    ├── counter.ts
    └── typescript.svg

LIBRARY SCAFFOLD (--lib)

Start from vanilla-ts, then add library-mode config:

npm create vite@latest <project-name> -- --template vanilla-ts
cd <project-name>
npm install
npm install -D vite-plugin-dts

// vite.config.ts
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    dts({
      include: ['src'],
      rollupTypes: true,
    }),
  ],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      formats: ['es', 'cjs'],
      fileName: (format) => `my-lib.${format === 'es' ? 'js' : 'cjs'}`,
    },
    rollupOptions: {
      // Externalize peer dependencies that consumers must provide
      external: [],
    },
  },
})