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:
- •Project Level: Full project scaffold
- •Module Level: Feature module template
- •File Level: Single file template
- •Config Level: Configuration file
- •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)
code
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:
typescript
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:
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)
code
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:
typescript
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:
typescript
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)
code
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:
python
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
typescript
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
typescript
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)
json
{
"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)
code
# 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
- •Modularity: Keep templates modular and composable
- •Documentation: Always include README with setup instructions
- •Environment: Use .env files for configuration
- •Types: Include TypeScript types/interfaces
- •Testing: Include test setup and examples
- •Linting: Include linter and formatter configs
- •Git: Proper .gitignore from the start
- •Security: Don't commit secrets or credentials
Output Format
When providing a template:
code
## ${TemplateName}
**Purpose**: ${purpose}
**Technology**: ${stack}
**Folder Structure**:
${structure}
code
**Setup Instructions**:
1. ${step1}
2. ${step2}
**Key Files**:
- `${file1}`: ${description}
- `${file2}`: ${description}
**Usage**:
```bash
${commands}
code
## 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