bootstrap

name	bootstrap
description	Initialize projects from scratch with modular scaffolds (Next.js, Vite, Svelte, Python, etc.)
category	Build & Deploy
status	active

Bootstrap

Purpose

Rapidly scaffold complete, production-ready project structures across multiple tech stacks using official and community tools—Next.js (full-stack React), Vite (frontend bundler), degit (git-based templates), and language-specific generators (Python Cookiecutter, Ruby Rails)—with minimal manual setup.

When to Use

• Starting new projects (Next.js apps, Vite SPAs, full-stack Node/Python/Ruby applications)
• Standardizing project structure across teams via custom templates
• Quickly prototyping ideas from curated starter templates
• Need TypeScript, linting, testing configured automatically
• Bootstrapping monorepos or multi-package workspaces

Do NOT use when: Migrating existing projects (bootstrap tools create new projects), setting up single-file utilities, or when custom architecture incompatible with scaffolding templates.

Workflow

1. Select scaffold tool based on stack:

   • create-next-app → Full-stack React with App Router, TypeScript, Tailwind, ESLint
   • npm create vite@latest → Frontend-only (React, Vue, Svelte, Lit, Solid, etc.)
   • degit user/repo → Clone curated templates without Git history
   • cookiecutter template → Python project generation (Django, FastAPI, etc.)
   • rails new → Ruby on Rails full-stack apps

2. Run generator with options:

   • Use interactive prompts or pass flags (--typescript, --tailwind, --eslint)
   • Accept defaults or customize (directory structure, import aliases, linters)
   • Generators install dependencies automatically (npm/pnpm/yarn/bun)

3. Review generated structure:

   • Verify all config files (tsconfig.json, package.json, ESLint, Tailwind)
   • Check Git initialization and .gitignore
   • Run npm run dev to confirm dev server works

4. Customize for project needs:

   • Update package.json metadata (name, version, author, license)
   • Add project-specific environment variables (.env.local)
   • Extend generated configs (ESLint rules, TypeScript paths)
   • Add custom scaffolding (GitHub Actions workflows, Docker)

Key Concepts

create-next-app

Official Next.js scaffolding tool. Prompts for TypeScript, Tailwind CSS, ESLint, App Router, src/ directory, and custom import aliases. Installs Next.js 16+, React 19, with sensible defaults. Includes AGENTS.md guidance for AI coding agents.

create-vite

Lightweight, frontend-focused scaffolding supporting 18+ templates (React, Vue, Svelte, Solid, Lit, Preact, etc.). TypeScript variants available. No server-side rendering; ideal for SPAs and static site generation frameworks.

degit

Fast Git repository copying without history. Clones specific branches, tags, commits via syntax like degit user/repo#v1.0.0 my-project. Supports degit.json for post-clone actions (remove files, add files). Local caching for repeated installs.

Cookiecutter (Python)

Template engine for Python projects. Prompt-based variable substitution during generation. Popular for Django, FastAPI, ML projects. Templates live in GitHub; cookiecutter gh:user/repo generates projects.

Language-specific Generators

Rails (rails new), Django (django-admin startproject), Cargo (cargo new, Rust), Go (go mod init). Each language's ecosystem provides official scaffolding respecting language conventions.

Example

Next.js with defaults:

npx create-next-app@latest my-app --yes
cd my-app && npm run dev

Next.js with custom options:

npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --src-dir \
  --import-alias '@/*'

Vite React:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app && npm install && npm run dev

degit from custom template:

degit gh:sveltejs/template my-svelte-app
cd my-svelte-app && npm install && npm run dev

Python FastAPI via Cookiecutter:

cookiecutter gh:tiangolo/fastapi-project-template

Common Pitfalls

• Running bootstrap in existing directory with content; always create new directory
• Accepting defaults then immediately changing config; review scaffolded setup before starting
• Not committing scaffolded structure to Git before modifications; losing ability to track changes
• Ignoring generated .gitignore; sensitive files (.env, node_modules) end up in repo
• Custom import aliases not reflected in ESLint config; paths work in IDE but fail at build time
• Not updating package.json metadata; version mismatches cause confusion in monorepos
• Assuming scaffolded tests work; most generators create placeholder tests requiring implementation

References

• create-next-app — Official Next.js scaffolding with App Router, TypeScript, Tailwind
• create-vite — Frontend scaffolding across 18+ template options
• degit — Fast Git-based project copying with template customization
• Cookiecutter — Python project generation via templates

---

Canonical Bootstrap Workflow (project orchestration)

Shared workflow for /ck:bootstrap family commands (/ck:bootstrap, /ck:bootstrap auto, /ck:bootstrap fast). Each command is a variant that selects which phases to include and how to interact with the user.

Role

Elite software-engineering expert — system architecture + technical decision-making. Operate by YAGNI / KISS / DRY trinity.

Shared 10-Phase Pipeline

Phase 0 — Git Init Check Git is initialized; if not, use git-manager subagent to init (main branch).

Phase 1 — Research Multiple researcher subagents in parallel → explore request, validate ideas, identify challenges, find best solutions. Reports ≤150 lines + citations.

Phase 2 — Tech Stack planner + researcher subagents in parallel → find best-fit stack. Write to ./docs.

Phase 3 — Planning planner subagent → detailed implementation plan following the planning skill's progressive disclosure structure (plans/<YYMMDD-HHmm>-<slug>/plan.md + per-phase files).

Phase 4 — Wireframe & Design ui-ux-designer + researcher subagents in parallel → design plan + wireframes. Outputs:

• ./docs/design-guidelines.md
• ./docs/wireframe/*.html
• Logo via ai-multimodal skill if not provided
• Screenshots via chrome-devtools skill → ./docs/wireframes/
• Predict Google Fonts + sizes (avoid defaulting to Inter/Poppins)

Phase 5 — Implementation Main agent implements plan step by step. ui-ux-designer for frontend. ai-multimodal for asset generation/analysis. ImageMagick for image edits. Type-check + compile.

Phase 6 — Testing Real tests, no fake data to pass. tester subagent runs tests. Failures → debugger subagent for root cause → main agent fixes → repeat until pass.

Phase 7 — Code Review code-reviewer subagent → critical issues → main agent improves → tester re-runs → repeat until pass.

Phase 8 — Documentation docs-manager subagent updates canonical doc set (see docs-manager agent for the list). project-manager subagent creates ./docs/project-roadmap.md.

Phase 9 — Onboarding Step-by-step user configuration. Ask one question at a time, wait for answer.

Phase 10 — Final Report Summary + getting-started guide + next steps. Ask user about commit/push → git-manager subagent.

Variant Differences

Variant	User interaction	Approval gates	Speed tier
/ck:bootstrap	High — ask questions 1-by-1, wait for tech-stack/plan/design approvals	Multiple (tech stack · plan · design · final commit)	Ultrathink
/ck:bootstrap auto	Medium — minimal questions, design approval only	Design + final commit	Ultrathink
/ck:bootstrap fast	Low — parallel research+planning, no design approval	Final commit only (no push)	Think hard

Shared Notes

• Brutal honesty — if unrealistic / over-engineered / problematic, say so directly.
• Consider all stakeholders — end users, devs, ops, business.
• Sacrifice grammar for concision in reports. List unresolved questions at end.
• Auto-activate companion skills as needed: tanstack, react-specialist, deploy, project-organization, etc.