project-scaffolding（项目脚手架）

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.

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:

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:

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.

Available Resources

Load reference files based on what you need:

Workflow:

1. Present options from wizard-options.md to gather user preferences
2. Use frameworks.md for code patterns and project structure when generating
3. Consult best-practices.md for architecture decisions

Default Recommendations