Project Scaffolding Wizard
Professional-grade project scaffolding comparable to WebStorm/PyCharm project wizards. Creates fully configured projects with SDK setup, framework options, database configuration, linting, and CI/CD.
Version Freshness
All dependency versions live in assets/versions.json — never hardcode a version in generated
output or in scripts/scaffold.py. Treat that manifest as the only source of truth.
Before recommending frameworks in Step 3, check how stale it is:
python3 scripts/scaffold.py --version-status
- Under 30 days — proceed without comment.
- 30–90 days — proceed, and mention the manifest's age once when presenting version-sensitive
choices.
- Over 90 days — say so before recommending, and offer to refresh:
python3 scripts/refresh_versions.py (dry run; add --apply to write).
Never guess at current versions or "update" the manifest from memory. Registry facts come only
from refresh_versions.py, which queries npm and PyPI directly. If the refresh cannot run
(no network), state that the versions may be stale rather than substituting recalled numbers.
Wizard Workflow
When a user requests a new project, follow this interactive workflow:
Step 1: Project Type Selection
Present the project type menu. Ask the user to select a category and type:
| Category |
Types |
| Static Websites |
HTML5 (no CSS), HTML/CSS, HTML+Sass, HTML+Tailwind, Landing Page, Multi-page Site |
| Frontend Web |
React, Next.js, Vue, Nuxt, Svelte, Angular, Astro, Remix, Solid, Qwik, Preact |
| Mobile/Desktop |
React Native, Expo, Flutter, Tauri, Electron, Ionic |
| Backend (JS/TS) |
Express, NestJS, Fastify, Hono, Elysia, tRPC, Koa |
| Backend (Python) |
FastAPI, Django, Django REST, Flask, Litestar |
| Backend (Go) |
Gin, Fiber, Echo, Chi |
| Backend (Rust) |
Axum, Actix, Rocket |
| Backend (Java) |
Spring Boot, Quarkus, Ktor, Micronaut |
| Backend (Other) |
Laravel, Rails, .NET Web API |
| Libraries |
TypeScript NPM, Python PyPI, Go Module, Rust Crate |
| CLI Tools |
Node CLI, Python CLI (Typer/Click), Go CLI (Cobra), Rust CLI (Clap) |
| Extensions |
Chrome Extension, Firefox Extension, VS Code Extension, Figma Plugin, Obsidian Plugin |
| Serverless |
AWS Lambda, Cloudflare Workers, Vercel Functions, Supabase Functions |
| Full-Stack |
T3 Stack, MERN, PERN, MEAN |
| Monorepos |
Turborepo, Nx Workspace, pnpm Workspace |
Step 2: Basic Configuration
Gather for ALL projects:
- Project name (required)
- Location/directory
- Description
- Author name
- License (MIT, Apache-2.0, GPL-3.0, ISC, Unlicense)
Step 3: Framework-Specific Options
Load references/wizard-options.md for detailed configuration options based on the selected project type. Key decisions include:
- Language/SDK version - Node.js, Python, Go, Rust, Java versions
- Package manager - npm, pnpm, yarn, bun, poetry, uv
- CSS framework - Tailwind, CSS Modules, Styled Components
- State management - Zustand, Redux, Jotai, TanStack Query
- Database/ORM - PostgreSQL, SQLite, Prisma, SQLAlchemy, sqlc
- Authentication - NextAuth, JWT, OAuth2
- Testing - Vitest, Jest, pytest, Playwright
Step 4: Code Quality & DevOps
- Linting - ESLint, Ruff, golangci-lint, clippy
- Formatting - Prettier, Ruff, gofmt, rustfmt
- Pre-commit hooks - husky + lint-staged, pre-commit framework
- CI/CD - GitHub Actions, GitLab CI
- Docker - Dockerfile (multi-stage), docker-compose
- Deployment - Vercel, Railway, Fly.io, AWS, self-hosted
Step 5: Generate Project
Use scripts/scaffold.py or native CLI tools to create the project structure.
CLI Integration
Prefer native CLI tools when available:
| Framework |
CLI Command |
| Next.js |
npx create-next-app@latest |
| React (Vite) |
npm create vite@latest -- --template react-ts |
| Vue |
npm create vue@latest |
| Nuxt |
npx nuxi@latest init |
| Astro |
npm create astro@latest |
| Remix |
npx create-remix@latest |
| SvelteKit |
npm create svelte@latest |
| Solid |
npm create solid@latest |
| Expo |
npx create-expo-app@latest |
| React Native |
npx @react-native-community/cli init |
| Flutter |
flutter create |
| Tauri |
npm create tauri-app@latest |
| NestJS |
npx @nestjs/cli new |
| Spring Boot |
spring init or start.spring.io |
| Go |
go mod init |
| Rust |
cargo new |
| Chrome Ext |
npm create plasmo@latest |
| T3 Stack |
npx create-t3-app@latest |
Quick Start Examples
HTML/CSS Website
mkdir my-website && cd my-website
touch index.html style.css
# Or use boilerplate:
npx degit h5bp/html5-boilerplate my-website
HTML + Tailwind (CDN)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<h1 class="text-3xl font-bold">Hello World</h1>
</body>
</html>
T3 Stack (Next.js + tRPC + Prisma)
npx create-t3-app@latest my-app
Expo (React Native)
npx create-expo-app@latest my-app --template tabs
Tauri Desktop App
npm create tauri-app@latest my-app -- --template react-ts
Chrome Extension
npm create plasmo@latest my-extension
Example Conversations
Simple HTML/CSS Website
User: Create a simple website with HTML and CSS
Claude: I'll create a static HTML/CSS website:
- Multi-page (Home, About, Contact)
- Mobile-first responsive CSS
- BEM naming convention
- Live Server for development
Structure:
my-website/
├── index.html
├── about.html
├── contact.html
├── css/style.css
├── js/main.js
└── images/
Shall I create this?
Mobile App
User: Create a mobile app for iOS and Android
Claude: I recommend Expo for the easiest setup:
- TypeScript
- Expo Router (file-based navigation)
- NativeWind (Tailwind for RN)
- Tab navigation template
Ready to scaffold?
Full-Stack with Type Safety
User: Create a full-stack app with type-safe API
Claude: I recommend the T3 Stack:
- Next.js 16 (App Router)
- tRPC (type-safe API)
- Prisma (type-safe ORM)
- Tailwind CSS
- NextAuth.js
- PostgreSQL with docker-compose
This gives you full type safety from database to frontend!
Chrome Extension
User: Build a Chrome extension
Claude: What features do you need?
- Popup UI
- Content script (modifies pages)
- Background service worker
- Side panel
Tech stack: React + Vite + TypeScript + Manifest V3
I recommend using Plasmo framework for easier development.
Recording Observations
This skill improves from real usage. Append a line to assets/observations.md when — and only
when — one of these happens during a scaffolding session:
| Trigger |
Example line |
| User rejects a recommended default |
`2026-09-12 |
| Requested framework or option is missing |
`2026-09-12 |
| Generated project fails to install or start |
`2026-09-12 |
| A template is wrong for the pinned major |
`2026-09-12 |
Format: DATE | TAG | project-type | one-line factual description. Record only what actually
happened — never speculation about what users might want. Do not log successful, unremarkable
scaffolds; a log of routine successes carries no signal and buries the real findings.
Use the scaffolding-maintainer skill to act on the accumulated log.
Available Resources
Load reference files based on what you need:
| Resource |
When to Load |
Purpose |
assets/versions.json |
Always, via v()/req() in scaffold.py |
Single source of truth for every dependency version |
references/wizard-options.md |
During Step 3 (gathering user preferences) |
Configuration choices and defaults for each framework |
references/frameworks.md |
When generating code |
Project structures, code examples, configuration files |
references/best-practices.md |
For architecture decisions |
Directory organization, naming conventions, patterns |
scripts/scaffold.py |
For custom scaffolding |
Python engine when CLI tools aren't suitable |
scripts/refresh_versions.py |
When the manifest is stale |
Queries npm/PyPI for current versions |
Workflow:
- Present options from
wizard-options.md to gather user preferences
- Use
frameworks.md for code patterns and project structure when generating
- Consult
best-practices.md for architecture decisions
Default Recommendations
Runtime and SDK versions are not listed here — they live in assets/versions.json under
runtimes and are reported by python3 scripts/scaffold.py --version-status. Read them from
there so this table cannot drift out of sync with what the scaffolder actually generates.
| Category |
Recommendation |
| Package Manager |
pnpm |
| CSS Framework |
Tailwind CSS |
| State (React) |
Zustand + TanStack Query |
| ORM (Node) |
Prisma |
| ORM (Python) |
SQLAlchemy 2.0 |
| ORM (Go) |
sqlc |
| Testing (JS) |
Vitest |
| Testing (Python) |
pytest |
| E2E Testing |
Playwright |
| Linting (JS) |
ESLint + Prettier |
| Linting (Python) |
Ruff |
| CI/CD |
GitHub Actions |
| Containerization |
Multi-stage Dockerfile |
1---2name: project-scaffolding3description: IDE-grade project scaffolding wizard for creating new projects with comprehensive configuration. Supports 70+ project types: HTML/CSS websites, React, Next.js, Vue, Astro, Remix, React Native, Flutter, Expo, FastAPI, Django, Express, NestJS, Go/Gin, Rust/Axum, Spring Boot, Hono, Elysia, Chrome Extensions, VS Code Extensions, Tauri desktop apps, serverless functions, and more. Provides WebStorm/PyCharm-level project creation with interactive SDK selection, framework configuration, database setup, and DevOps tooling. Use when: creating a new project, setting up a framework application, initializing a codebase, scaffolding boilerplate, building extensions, creating mobile/desktop/web apps, setting up monorepos, or making static websites/landing pages.4---56# Project Scaffolding Wizard78Professional-grade project scaffolding comparable to WebStorm/PyCharm project wizards. Creates fully configured projects with SDK setup, framework options, database configuration, linting, and CI/CD.910## Version Freshness1112All dependency versions live in `assets/versions.json` — never hardcode a version in generated13output or in `scripts/scaffold.py`. Treat that manifest as the only source of truth.1415Before recommending frameworks in Step 3, check how stale it is:1617```bash18python3 scripts/scaffold.py --version-status19```2021- **Under 30 days** — proceed without comment.22- **30–90 days** — proceed, and mention the manifest's age once when presenting version-sensitive23 choices.24- **Over 90 days** — say so before recommending, and offer to refresh:25 `python3 scripts/refresh_versions.py` (dry run; add `--apply` to write).2627Never guess at current versions or "update" the manifest from memory. Registry facts come only28from `refresh_versions.py`, which queries npm and PyPI directly. If the refresh cannot run29(no network), state that the versions may be stale rather than substituting recalled numbers.3031## Wizard Workflow3233When a user requests a new project, follow this interactive workflow:3435### Step 1: Project Type Selection3637Present the project type menu. Ask the user to select a category and type:3839| Category | Types |40|----------|-------|41| **Static Websites** | HTML5 (no CSS), HTML/CSS, HTML+Sass, HTML+Tailwind, Landing Page, Multi-page Site |42| **Frontend Web** | React, Next.js, Vue, Nuxt, Svelte, Angular, Astro, Remix, Solid, Qwik, Preact |43| **Mobile/Desktop** | React Native, Expo, Flutter, Tauri, Electron, Ionic |44| **Backend (JS/TS)** | Express, NestJS, Fastify, Hono, Elysia, tRPC, Koa |45| **Backend (Python)** | FastAPI, Django, Django REST, Flask, Litestar |46| **Backend (Go)** | Gin, Fiber, Echo, Chi |47| **Backend (Rust)** | Axum, Actix, Rocket |48| **Backend (Java)** | Spring Boot, Quarkus, Ktor, Micronaut |49| **Backend (Other)** | Laravel, Rails, .NET Web API |50| **Libraries** | TypeScript NPM, Python PyPI, Go Module, Rust Crate |51| **CLI Tools** | Node CLI, Python CLI (Typer/Click), Go CLI (Cobra), Rust CLI (Clap) |52| **Extensions** | Chrome Extension, Firefox Extension, VS Code Extension, Figma Plugin, Obsidian Plugin |53| **Serverless** | AWS Lambda, Cloudflare Workers, Vercel Functions, Supabase Functions |54| **Full-Stack** | T3 Stack, MERN, PERN, MEAN |55| **Monorepos** | Turborepo, Nx Workspace, pnpm Workspace |5657### Step 2: Basic Configuration5859Gather for ALL projects:60- **Project name** (required)61- **Location/directory**62- **Description**63- **Author name**64- **License** (MIT, Apache-2.0, GPL-3.0, ISC, Unlicense)6566### Step 3: Framework-Specific Options6768Load `references/wizard-options.md` for detailed configuration options based on the selected project type. Key decisions include:6970- **Language/SDK version** - Node.js, Python, Go, Rust, Java versions71- **Package manager** - npm, pnpm, yarn, bun, poetry, uv72- **CSS framework** - Tailwind, CSS Modules, Styled Components73- **State management** - Zustand, Redux, Jotai, TanStack Query74- **Database/ORM** - PostgreSQL, SQLite, Prisma, SQLAlchemy, sqlc75- **Authentication** - NextAuth, JWT, OAuth276- **Testing** - Vitest, Jest, pytest, Playwright7778### Step 4: Code Quality & DevOps7980- **Linting** - ESLint, Ruff, golangci-lint, clippy81- **Formatting** - Prettier, Ruff, gofmt, rustfmt82- **Pre-commit hooks** - husky + lint-staged, pre-commit framework83- **CI/CD** - GitHub Actions, GitLab CI84- **Docker** - Dockerfile (multi-stage), docker-compose85- **Deployment** - Vercel, Railway, Fly.io, AWS, self-hosted8687### Step 5: Generate Project8889Use `scripts/scaffold.py` or native CLI tools to create the project structure.9091## CLI Integration9293Prefer native CLI tools when available:9495| Framework | CLI Command |96|-----------|-------------|97| Next.js | `npx create-next-app@latest` |98| React (Vite) | `npm create vite@latest -- --template react-ts` |99| Vue | `npm create vue@latest` |100| Nuxt | `npx nuxi@latest init` |101| Astro | `npm create astro@latest` |102| Remix | `npx create-remix@latest` |103| SvelteKit | `npm create svelte@latest` |104| Solid | `npm create solid@latest` |105| Expo | `npx create-expo-app@latest` |106| React Native | `npx @react-native-community/cli init` |107| Flutter | `flutter create` |108| Tauri | `npm create tauri-app@latest` |109| NestJS | `npx @nestjs/cli new` |110| Spring Boot | `spring init` or start.spring.io |111| Go | `go mod init` |112| Rust | `cargo new` |113| Chrome Ext | `npm create plasmo@latest` |114| T3 Stack | `npx create-t3-app@latest` |115116## Quick Start Examples117118### HTML/CSS Website119```bash120mkdir my-website && cd my-website121touch index.html style.css122# Or use boilerplate:123npx degit h5bp/html5-boilerplate my-website124```125126### HTML + Tailwind (CDN)127```html128<!DOCTYPE html>129<html lang="en">130<head>131 <meta charset="UTF-8">132 <meta name="viewport" content="width=device-width, initial-scale=1.0">133 <title>My Website</title>134 <script src="https://cdn.tailwindcss.com"></script>135</head>136<body class="bg-gray-100">137 <h1 class="text-3xl font-bold">Hello World</h1>138</body>139</html>140```141142### T3 Stack (Next.js + tRPC + Prisma)143```bash144npx create-t3-app@latest my-app145```146147### Expo (React Native)148```bash149npx create-expo-app@latest my-app --template tabs150```151152### Tauri Desktop App153```bash154npm create tauri-app@latest my-app -- --template react-ts155```156157### Chrome Extension158```bash159npm create plasmo@latest my-extension160```161162## Example Conversations163164### Simple HTML/CSS Website165```166User: Create a simple website with HTML and CSS167168Claude: I'll create a static HTML/CSS website:169170- Multi-page (Home, About, Contact)171- Mobile-first responsive CSS172- BEM naming convention173- Live Server for development174175Structure:176my-website/177├── index.html178├── about.html179├── contact.html180├── css/style.css181├── js/main.js182└── images/183184Shall I create this?185```186187### Mobile App188```189User: Create a mobile app for iOS and Android190191Claude: I recommend Expo for the easiest setup:192193- TypeScript194- Expo Router (file-based navigation)195- NativeWind (Tailwind for RN)196- Tab navigation template197198Ready to scaffold?199```200201### Full-Stack with Type Safety202```203User: Create a full-stack app with type-safe API204205Claude: I recommend the T3 Stack:206207- Next.js 16 (App Router)208- tRPC (type-safe API)209- Prisma (type-safe ORM)210- Tailwind CSS211- NextAuth.js212- PostgreSQL with docker-compose213214This gives you full type safety from database to frontend!215```216217### Chrome Extension218```219User: Build a Chrome extension220221Claude: What features do you need?222223- Popup UI224- Content script (modifies pages)225- Background service worker226- Side panel227228Tech stack: React + Vite + TypeScript + Manifest V3229230I recommend using Plasmo framework for easier development.231```232233## Recording Observations234235This skill improves from real usage. Append a line to `assets/observations.md` when — and only236when — one of these happens during a scaffolding session:237238| Trigger | Example line |239|---------|--------------|240| User rejects a recommended default | `2026-09-12 | default-rejected | react | user chose Jest over Vitest, wanted existing-team familiarity` |241| Requested framework or option is missing | `2026-09-12 | missing-option | backend | user asked for Encore.ts, not in wizard` |242| Generated project fails to install or start | `2026-09-12 | broken-output | nextjs | npm install failed, eslint-config-next peer conflict` |243| A template is wrong for the pinned major | `2026-09-12 | template-drift | react | template used legacy API removed in current major` |244245Format: `DATE | TAG | project-type | one-line factual description`. Record only what actually246happened — never speculation about what users might want. Do not log successful, unremarkable247scaffolds; a log of routine successes carries no signal and buries the real findings.248249Use the `scaffolding-maintainer` skill to act on the accumulated log.250251## Available Resources252253Load reference files based on what you need:254255| Resource | When to Load | Purpose |256|----------|--------------|---------|257| `assets/versions.json` | Always, via `v()`/`req()` in scaffold.py | Single source of truth for every dependency version |258| `references/wizard-options.md` | During Step 3 (gathering user preferences) | Configuration choices and defaults for each framework |259| `references/frameworks.md` | When generating code | Project structures, code examples, configuration files |260| `references/best-practices.md` | For architecture decisions | Directory organization, naming conventions, patterns |261| `scripts/scaffold.py` | For custom scaffolding | Python engine when CLI tools aren't suitable |262| `scripts/refresh_versions.py` | When the manifest is stale | Queries npm/PyPI for current versions |263264**Workflow:**2651. Present options from `wizard-options.md` to gather user preferences2662. Use `frameworks.md` for code patterns and project structure when generating2673. Consult `best-practices.md` for architecture decisions268269## Default Recommendations270271Runtime and SDK versions are **not listed here** — they live in `assets/versions.json` under272`runtimes` and are reported by `python3 scripts/scaffold.py --version-status`. Read them from273there so this table cannot drift out of sync with what the scaffolder actually generates.274275| Category | Recommendation |276|----------|----------------|277| Package Manager | pnpm |278| CSS Framework | Tailwind CSS |279| State (React) | Zustand + TanStack Query |280| ORM (Node) | Prisma |281| ORM (Python) | SQLAlchemy 2.0 |282| ORM (Go) | sqlc |283| Testing (JS) | Vitest |284| Testing (Python) | pytest |285| E2E Testing | Playwright |286| Linting (JS) | ESLint + Prettier |287| Linting (Python) | Ruff |288| CI/CD | GitHub Actions |289| Containerization | Multi-stage Dockerfile |
hmohamed01