🛠️ 開発・MCP コミュニティ

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.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o project-scaffolding.zip https://jpskill.com/download/19211.zip && unzip -o project-scaffolding.zip && rm project-scaffolding.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19211.zip -OutFile "$d\project-scaffolding.zip"; Expand-Archive "$d\project-scaffolding.zip" -DestinationPath $d -Force; ri "$d\project-scaffolding.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して project-scaffolding.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → project-scaffolding フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 5

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] project-scaffolding

プロジェクトスキャフォールディングウィザード

WebStorm/PyCharm のプロジェクトウィザードに匹敵する、プロフェッショナルグレードのプロジェクトスキャフォールディングです。SDK セットアップ、フレームワークオプション、データベース設定、リンティング、CI/CD を備えた完全に構成されたプロジェクトを作成します。

ウィザードのワークフロー

ユーザーが新しいプロジェクトを要求した場合、以下の対話型ワークフローに従ってください。

ステップ 1: プロジェクトタイプの選択

プロジェクトタイプメニューを表示します。ユーザーにカテゴリとタイプを選択するよう求めます。

カテゴリ	タイプ
静的ウェブサイト	HTML/CSS, HTML+Sass, HTML+Tailwind, ランディングページ, マルチページサイト
フロントエンドウェブ	React, Next.js, Vue, Nuxt, Svelte, Angular, Astro, Remix, Solid, Qwik, Preact
モバイル/デスクトップ	React Native, Expo, Flutter, Tauri, Electron, Ionic
バックエンド (JS/TS)	Express, NestJS, Fastify, Hono, Elysia, tRPC, Koa
バックエンド (Python)	FastAPI, Django, Django REST, Flask, Litestar
バックエンド (Go)	Gin, Fiber, Echo, Chi
バックエンド (Rust)	Axum, Actix, Rocket
バックエンド (Java)	Spring Boot, Quarkus, Ktor, Micronaut
バックエンド (その他)	Laravel, Rails, .NET Web API
ライブラリ	TypeScript NPM, Python PyPI, Go Module, Rust Crate
CLI ツール	Node CLI, Python CLI (Typer/Click), Go CLI (Cobra), Rust CLI (Clap)
拡張機能	Chrome Extension, Firefox Extension, VS Code Extension, Figma Plugin, Obsidian Plugin
サーバーレス	AWS Lambda, Cloudflare Workers, Vercel Functions, Supabase Functions
フルスタック	T3 Stack, MERN, PERN, MEAN
モノレポ	Turborepo, Nx Workspace, pnpm Workspace

ステップ 2: 基本設定

すべてのプロジェクトについて、以下を収集します。

プロジェクト名 (必須)
場所/ディレクトリ
説明
作成者名
ライセンス (MIT, Apache-2.0, GPL-3.0, ISC, Unlicense)

ステップ 3: フレームワーク固有のオプション

選択されたプロジェクトタイプに基づいて、詳細な設定オプションについては references/wizard-options.md を読み込みます。主な決定事項は次のとおりです。

言語/SDK バージョン - Node.js, Python, Go, Rust, Java のバージョン
パッケージマネージャー - npm, pnpm, yarn, bun, poetry, uv
CSS フレームワーク - Tailwind, CSS Modules, Styled Components
状態管理 - Zustand, Redux, Jotai, TanStack Query
データベース/ORM - PostgreSQL, SQLite, Prisma, SQLAlchemy, sqlc
認証 - NextAuth, JWT, OAuth2
テスト - Vitest, Jest, pytest, Playwright

ステップ 4: コード品質と DevOps

リンティング - ESLint, Ruff, golangci-lint, clippy
フォーマット - Prettier, Ruff, gofmt, rustfmt
コミット前フック - husky + lint-staged, pre-commit framework
CI/CD - GitHub Actions, GitLab CI
Docker - Dockerfile (マルチステージ), docker-compose
デプロイ - Vercel, Railway, Fly.io, AWS, セルフホスト

ステップ 5: プロジェクトの生成

scripts/scaffold.py またはネイティブの CLI ツールを使用して、プロジェクト構造を作成します。

CLI 統合

利用可能な場合は、ネイティブの CLI ツールを優先します。

フレームワーク	CLI コマンド
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` または start.spring.io
Go	`go mod init`
Rust	`cargo new`
Chrome Ext	`npm create plasmo@latest`
T3 Stack	`npx create-t3-app@latest`

クイックスタートの例

HTML/CSS ウェブサイト

mkdir my-website && cd my-website
touch index.html style.css
# またはボイラープレートを使用:
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 デスクトップアプリ

npm create tauri-app@latest my-app -- --template react-ts

Chrome 拡張機能

npm create plasmo@latest my-extension

会話例

シンプルな HTML/CSS ウェブサイト

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?

モバイルアプリ

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?

型安全なフルスタック

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 拡張機能

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.

利用可能なリソース

必要なものに基づいて参照ファイルを読み込みます。

リソース	読み込むタイミング	目的
`references

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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

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 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:

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

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

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。

📄 SKILL.md (8,160 bytes)
📎 references/best-practices.md (16,402 bytes)
📎 references/frameworks.md (17,813 bytes)
📎 references/wizard-options.md (18,000 bytes)
📎 scripts/scaffold.py (102,904 bytes)