project-scaffolding
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.
Best use case
project-scaffolding is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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.
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.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "project-scaffolding" skill to help with this workflow task. Context: 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.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/project-scaffolding/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How project-scaffolding Compares
| Feature / Agent | project-scaffolding | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
SKILL.md Source
# 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: | Category | Types | |----------|-------| | **Static Websites** | 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 ```bash mkdir my-website && cd my-website touch index.html style.css # Or use boilerplate: npx degit h5bp/html5-boilerplate my-website ``` ### HTML + Tailwind (CDN) ```html <!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) ```bash npx create-t3-app@latest my-app ``` ### Expo (React Native) ```bash npx create-expo-app@latest my-app --template tabs ``` ### Tauri Desktop App ```bash npm create tauri-app@latest my-app -- --template react-ts ``` ### Chrome Extension ```bash 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 14 (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: | Resource | When to Load | Purpose | |----------|--------------|---------| | `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 | **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 | Category | Recommendation | |----------|----------------| | JS Runtime | Node.js 22 LTS | | Package Manager | pnpm | | Python Version | 3.12 | | Go Version | 1.23 | | Rust Edition | 2021 | | Java Version | 21 LTS | | 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 |
Related Skills
project-to-obsidian
将代码项目转换为 Obsidian 知识库。当用户提到 obsidian、项目文档、知识库、分析项目、转换项目 时激活。 【激活后必须执行】： 1. 先完整阅读本 SKILL.md 文件 2. 理解 AI 写入规则（默认到 00_Inbox/AI/、追加式、统一 Schema） 3. 执行 STEP 0: 使用 AskUserQuestion 询问用户确认 4. 用户确认后才开始 STEP 1 项目扫描 5. 严格按 STEP 0 → 1 → 2 → 3 → 4 顺序执行 【禁止行为】： - 禁止不读 SKILL.md 就开始分析项目 - 禁止跳过 STEP 0 用户确认 - 禁止直接在 30_Resources 创建（先到 00_Inbox/AI/） - 禁止自作主张决定输出位置
project-map-builder
生成或更新用户指定文件夹的 PROJECT_MAP.md。适用于用户要求目录地图/项目地图/代码仓概览/文件夹级说明/更新已有 PROJECT_MAP.md 的场景。必须先询问要扫描的文件夹范围，禁止默认全仓库扫描；支持单目录或多目录（合并或分别生成）。
systems-programming-rust-project
You are a Rust project architecture expert specializing in scaffolding production-ready Rust applications. Generate complete project structures with cargo tooling, proper module organization, testing
startup-business-analyst-financial-projections
Create detailed 3-5 year financial model with revenue, costs, cash flow, and scenarios
projection-patterns
Build read models and projections from event streams. Use when implementing CQRS read sides, building materialized views, or optimizing query performance in event-sourced systems.
hig-project-context
Create or update a shared Apple design context document that other HIG skills use to tailor guidance. Use when the user says 'set up my project context,' 'what platforms am I targeting,' 'configure HIG settings,' or when starting a new Apple platform project.
helm-chart-scaffolding
Design, organize, and manage Helm charts for templating and packaging Kubernetes applications with reusable configurations. Use when creating Helm charts, packaging Kubernetes applications, or implementing templated deployments.
cc-skill-project-guidelines-example
Project Guidelines Skill (Example)
azure-ai-projects-ts
Build AI applications using Azure AI Projects SDK for JavaScript (@azure/ai-projects). Use when working with Foundry project clients, agents, connections, deployments, datasets, indexes, evaluations, or getting OpenAI clients.
azure-ai-projects-py
Build AI applications using the Azure AI Projects Python SDK (azure-ai-projects). Use when working with Foundry project clients, creating versioned agents with PromptAgentDefinition, running evaluations, managing connections/deployments/datasets/indexes, or using OpenAI-compatible clients. This is the high-level Foundry SDK - for low-level agent operations, use azure-ai-agents-python skill.
azure-ai-projects-java
Azure AI Projects SDK for Java. High-level SDK for Azure AI Foundry project management including connections, datasets, indexes, and evaluations. Triggers: "AIProjectClient java", "azure ai projects java", "Foundry project java", "ConnectionsClient", "DatasetsClient", "IndexesClient".
azure-ai-projects-dotnet
Azure AI Projects SDK for .NET. High-level client for Azure AI Foundry projects including agents, connections, datasets, deployments, evaluations, and indexes. Use for AI Foundry project management, versioned agents, and orchestration. Triggers: "AI Projects", "AIProjectClient", "Foundry project", "versioned agents", "evaluations", "datasets", "connections", "deployments .NET".