gh-greyhaven-ai-claude-code-config-grey-haven-plugins-core/skills/project-scaffolding/examples/INDEX.md

Project Scaffolder Examples

Real-world examples of scaffolding production-ready projects with Grey Haven stack.

---

Quick Navigation

Scaffold Types

Example	Stack	Time	Files	Description
Cloudflare Worker API	Hono + TypeScript + D1	15 min	18	Production API with auth, logging, tests
React Component	React + TypeScript + Vitest	5 min	6	Reusable component with tests, stories
Python API	FastAPI + Pydantic + PostgreSQL	20 min	22	Async API with validation, migrations
Full-Stack App	React + Worker + D1	30 min	35	Complete app with frontend/backend

---

What's Included in Each Example

Structure

• Complete file tree - Every file that gets created
• Configuration files - Package management, tooling, deployment
• Source code - Production-ready starting point
• Tests - Pre-written test suites
• Documentation - README with next steps

Tooling

• Type Safety - TypeScript strict mode, Pydantic validation
• Testing - Vitest for TS/JS, pytest for Python
• Linting - ESLint, Prettier, Ruff
• CI/CD - GitHub Actions workflows
• Deployment - Cloudflare Pages/Workers config

---

Scaffold Comparison

When to Use Each

Use Case	Scaffold	Why
REST API	Cloudflare Worker	Fast, serverless, global edge deployment
GraphQL API	Cloudflare Worker	Hono supports GraphQL, D1 for persistence
Web App	Full-Stack	Frontend + backend in monorepo
Static Site	React Component	Build with Vite, deploy to Pages
Background Jobs	Python API	Long-running tasks, async processing
Data Pipeline	Python API	ETL, data validation with Pydantic

---

Quick Reference

Cloudflare Worker API

# Generate
scaffold-worker --name my-api

# Structure
my-api/
├── src/
│   ├── index.ts       # Hono app
│   ├── routes/        # API handlers
│   └── middleware/    # Auth, CORS
├── tests/
├── wrangler.toml
└── package.json

# Deploy
cd my-api && npm install && npm run deploy

React Component

# Generate
scaffold-component --name Button --path src/components

# Structure
src/components/Button/
├── Button.tsx         # Implementation
├── Button.test.tsx    # Tests
├── Button.stories.tsx # Storybook
└── Button.module.css  # Styles

Python API

# Generate
scaffold-python --name my-api

# Structure
my-api/
├── app/
│   ├── main.py        # FastAPI
│   ├── schemas/       # Pydantic
│   └── models/        # SQLAlchemy
├── tests/
├── pyproject.toml
└── alembic/

# Run
cd my-api && uv venv && uv pip install -e .[dev] && uvicorn app.main:app

Full-Stack App

# Generate
scaffold-fullstack --name my-app

# Structure
my-app/
├── frontend/          # React + Vite
├── backend/           # Worker
└── docs/

# Dev
cd my-app && npm install && npm run dev

---

Common Patterns

All Scaffolds Include

Configuration:

• ✅ TypeScript/Python type checking
• ✅ Linting (ESLint/Ruff)
• ✅ Formatting (Prettier)
• ✅ Testing framework
• ✅ Git ignore rules

Development:

• ✅ Local development server
• ✅ Hot reload
• ✅ Environment variables
• ✅ Debug configuration

Production:

• ✅ Build optimization
• ✅ Deployment configuration
• ✅ Error handling
• ✅ Logging setup

---

Grey Haven Conventions Applied

Naming

• Components: PascalCase (Button, UserProfile)
• Files: kebab-case for routes, PascalCase for components
• Variables: camelCase (userId, isActive)
• Constants: UPPER_SNAKE_CASE (API_URL, MAX_RETRIES)
• Database: snake_case (user_profiles, api_keys)

Structure

src/
├── routes/        # API endpoints or page routes
├── components/    # Reusable UI components
├── services/      # Business logic
├── utils/         # Pure helper functions
└── types/         # TypeScript type definitions

tests/             # Mirror src/ structure
├── routes/
├── components/
└── services/

Dependencies

• Package Manager: npm (Node.js), uv (Python)
• Frontend: Vite + React + TypeScript + TanStack
• Backend: Cloudflare Workers + Hono
• Database: PlanetScale PostgreSQL
• Testing: Vitest (TS), pytest (Python)
• Validation: Zod (TS), Pydantic (Python)

---

Metrics

Scaffold Generation Speed

Scaffold	Files Created	LOC	Time
Cloudflare Worker	18	~450	15 min
React Component	6	~120	5 min
Python API	22	~600	20 min
Full-Stack	35	~850	30 min

Developer Productivity Gains

Before Scaffolding:

• Setup time: 2-4 hours
• Configuration errors: Common
• Inconsistent structure: Yes
• Missing best practices: Often

After Scaffolding:

• Setup time: 5-30 minutes
• Configuration errors: Rare
• Consistent structure: Always
• Best practices: Built-in

Time Savings: 80-90% reduction in project setup time

---

Next Steps

After scaffolding:

1. Review generated code - Understand structure and conventions
2. Customize for your needs - Modify templates, add features
3. Run tests - Verify everything works: npm test or pytest
4. Start development - Add your business logic
5. Deploy - Use provided deployment configuration

---

Total Examples: 4 complete scaffold types Coverage: Frontend, backend, full-stack, component Tooling: Modern Grey Haven stack with best practices