hmohamed01/claude-code-scaffolding-skill/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.

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:

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.

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:

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:

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

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.