Code Template Library

Purpose

Provide a comprehensive library of:

• Project scaffolds (starter templates)
• File templates (components, models, controllers)
• Configuration templates
• Common patterns and architectures
• Framework-specific boilerplate

When to Use

Invoke this skill when:

• Starting a new project
• Adding a new feature/module
• Setting up development environment
• Creating standardized file structures
• Teaching project organization

Instructions

Step 1: Identify Template Need

Determine what template is required:

1. Project Level: Full project scaffold
2. Module Level: Feature module template
3. File Level: Single file template
4. Config Level: Configuration file
5. Architecture Level: Folder structure

Step 2: Select Technology Stack

Identify the stack:

• Frontend: React, Vue, Angular, Svelte, Next.js
• Backend: Express, NestJS, Django, Flask, Spring Boot
• Full Stack: MERN, MEAN, JAMstack
• Mobile: React Native, Flutter
• Desktop: Electron, Tauri

Step 3: Choose Template Complexity

Select appropriate level:

• Minimal: Bare bones, maximum flexibility
• Standard: Common features, best practices
• Complete: Full-featured, production-ready

Step 4: Generate Template

Create template with:

• Proper folder structure
• Configuration files
• Example files
• Documentation (README)
• Setup instructions

Project Templates

React + TypeScript + Vite (Modern Frontend)

my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── components/
│   │   ├── ui/
│   │   │   └── Button.tsx
│   │   └── layout/
│   │       ├── Header.tsx
│   │       └── Footer.tsx
│   ├── hooks/
│   │   └── useLocalStorage.ts
│   ├── lib/
│   │   └── utils.ts
│   ├── pages/
│   │   ├── Home.tsx
│   │   └── About.tsx
│   ├── services/
│   │   └── api.ts
│   ├── types/
│   │   └── index.ts
│   ├── App.tsx
│   ├── App.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .eslintrc.cjs
├── .gitignore
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md

Key Files:

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
})

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Express + TypeScript (Backend API)

my-api/
├── src/
│   ├── config/
│   │   ├── database.ts
│   │   └── environment.ts
│   ├── controllers/
│   │   └── user.controller.ts
│   ├── middleware/
│   │   ├── auth.middleware.ts
│   │   ├── error.middleware.ts
│   │   └── validation.middleware.ts
│   ├── models/
│   │   └── user.model.ts
│   ├── routes/
│   │   ├── index.ts
│   │   └── user.routes.ts
│   ├── services/
│   │   └── user.service.ts
│   ├── types/
│   │   └── express.d.ts
│   ├── utils/
│   │   ├── logger.ts
│   │   └── validators.ts
│   ├── app.ts
│   └── server.ts
├── tests/
│   ├── unit/
│   └── integration/
├── .env.example
├── .eslintrc.js
├── .gitignore
├── jest.config.js
├── package.json
├── tsconfig.json
└── README.md

Key Files:

src/app.ts:

import express, { Application } from 'express';
import cors from 'cors';
import helmet from 'helmet';
import morgan from 'morgan';
import routes from './routes';
import { errorMiddleware } from './middleware/error.middleware';
import { logger } from './utils/logger';

const app: Application = express();

// Middleware
app.use(helmet());
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(morgan('combined', { stream: { write: message => logger.info(message.trim()) }}));

// Routes
app.use('/api', routes);

// Error handling
app.use(errorMiddleware);

export default app;

src/server.ts:

import app from './app';
import { config } from './config/environment';
import { logger } from './utils/logger';

const PORT = config.port || 3000;

app.listen(PORT, () => {
  logger.info(`Server running on port ${PORT}`);
  logger.info(`Environment: ${config.env}`);
});

Python FastAPI (Modern Python API)

my-fastapi-app/
├── app/
│   ├── api/
│   │   ├── v1/
│   │   │   ├── endpoints/
│   │   │   │   ├── __init__.py
│   │   │   │   └── users.py
│   │   │   └── router.py
│   │   └── __init__.py
│   ├── core/
│   │   ├── __init__.py
│   │   ├── config.py
│   │   ├── security.py
│   │   └── dependencies.py
│   ├── db/
│   │   ├── __init__.py
│   │   ├── base.py
│   │   └── session.py
│   ├── models/
│   │   ├── __init__.py
│   │   └── user.py
│   ├── schemas/
│   │   ├── __init__.py
│   │   └── user.py
│   ├── services/
│   │   ├── __init__.py
│   │   └── user_service.py
│   ├── __init__.py
│   └── main.py
├── tests/
│   ├── __init__.py
│   └── test_users.py
├── .env.example
├── .gitignore
├── requirements.txt
├── pyproject.toml
└── README.md

Key Files:

app/main.py:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from app.api.v1.router import api_router
from app.core.config import settings

app = FastAPI(
    title=settings.PROJECT_NAME,
    version="1.0.0",
    openapi_url=f"{settings.API_V1_STR}/openapi.json"
)

# CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=settings.ALLOWED_ORIGINS,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Include routers
app.include_router(api_router, prefix=settings.API_V1_STR)

@app.get("/health")
async def health_check():
    return {"status": "healthy"}

File Templates

React Component Template

import { FC } from 'react';
import styles from './${ComponentName}.module.css';

interface ${ComponentName}Props {
  ${prop1}: ${Type1};
  ${prop2}?: ${Type2};
}

/**
 * ${ComponentName} - ${description}
 */
export const ${ComponentName}: FC<${ComponentName}Props> = ({
  ${prop1},
  ${prop2} = ${defaultValue}
}) => {
  return (
    <div className={styles.${componentName}}>
      {/* Component content */}
    </div>
  );
};

Express Controller Template

import { Request, Response, NextFunction } from 'express';
import { ${Service} } from '../services/${service}';

export class ${Controller}Controller {
  /**
   * Get all ${resources}
   */
  async getAll(req: Request, res: Response, next: NextFunction): Promise<void> {
    try {
      const ${resources} = await ${Service}.findAll();
      res.json({ success: true, data: ${resources} });
    } catch (error) {
      next(error);
    }
  }

  /**
   * Get ${resource} by ID
   */
  async getById(req: Request, res: Response, next: NextFunction): Promise<void> {
    try {
      const { id } = req.params;
      const ${resource} = await ${Service}.findById(id);
      if (!${resource}) {
        res.status(404).json({ success: false, error: '${Resource} not found' });
        return;
      }
      res.json({ success: true, data: ${resource} });
    } catch (error) {
      next(error);
    }
  }

  /**
   * Create new ${resource}
   */
  async create(req: Request, res: Response, next: NextFunction): Promise<void> {
    try {
      const ${resource} = await ${Service}.create(req.body);
      res.status(201).json({ success: true, data: ${resource} });
    } catch (error) {
      next(error);
    }
  }

  /**
   * Update ${resource}
   */
  async update(req: Request, res: Response, next: NextFunction): Promise<void> {
    try {
      const { id } = req.params;
      const ${resource} = await ${Service}.update(id, req.body);
      res.json({ success: true, data: ${resource} });
    } catch (error) {
      next(error);
    }
  }

  /**
   * Delete ${resource}
   */
  async delete(req: Request, res: Response, next: NextFunction): Promise<void> {
    try {
      const { id } = req.params;
      await ${Service}.delete(id);
      res.status(204).send();
    } catch (error) {
      next(error);
    }
  }
}

Configuration Templates

package.json (Node.js)

{
  "name": "${project-name}",
  "version": "1.0.0",
  "description": "${description}",
  "main": "dist/index.js",
  "scripts": {
    "dev": "tsx watch src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint src --ext .ts",
    "lint:fix": "eslint src --ext .ts --fix",
    "format": "prettier --write \"src/**/*.ts\""
  },
  "keywords": [],
  "author": "${author}",
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.0.0",
    "jest": "^29.0.0",
    "prettier": "^3.0.0",
    "tsx": "^4.0.0",
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "${dependency}": "${version}"
  }
}

.gitignore (Comprehensive)

# Dependencies
node_modules/
vendor/
__pycache__/
*.pyc
.venv/
venv/
env/

# Build outputs
dist/
build/
*.egg-info/
target/

# Environment variables
.env
.env.local
.env.*.local

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# OS
.DS_Store
Thumbs.db

# Logs
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Testing
coverage/
.nyc_output/
.pytest_cache/

# Misc
.cache/
*.tmp

Best Practices

1. Modularity: Keep templates modular and composable
2. Documentation: Always include README with setup instructions
3. Environment: Use .env files for configuration
4. Types: Include TypeScript types/interfaces
5. Testing: Include test setup and examples
6. Linting: Include linter and formatter configs
7. Git: Proper .gitignore from the start
8. Security: Don't commit secrets or credentials

Output Format

When providing a template:

## ${TemplateName}

**Purpose**: ${purpose}

**Technology**: ${stack}

**Folder Structure**:

${structure}

**Setup Instructions**:
1. ${step1}
2. ${step2}

**Key Files**:
- `${file1}`: ${description}
- `${file2}`: ${description}

**Usage**:

${commands}

Related Skills

• snippet-generator: For individual code snippets
• project-scaffolder: For generating full projects
• config-generator: For creating configuration files
• boilerplate-cleaner: For removing unnecessary boilerplate