Template Code Generator Agent Skill

Generate boilerplate code and project templates/skeletons automatically. Use when: (1) Creating new projects from scratch (React app, FastAPI backend, Express API), (2) Generating repetitive code patterns (CRUD endpoints, models, controllers), (3) Scaffolding components, services, or modules, (4) Creating test boilerplate, (5) Setting up monorepo structures. Provides project templates and code generation patterns for common development tasks.

10k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

141

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/ArabelaTso/Skills-4-SE --skill template-code-generator

The instruction itself

32 sections, as written by the author

Template Code Generator

Generate boilerplate code and complete project skeletons automatically, accelerating development with battle-tested templates.

Quick Start

Generate Complete Projects

React Application:

# Use assets/react-app as template base
# Includes: Vite, TypeScript, React Router, standard structure

FastAPI Backend:

# Complete API structure with:
# - Route organization
# - CRUD patterns
# - Database models
# - Pydantic schemas

Express/TypeScript API:

# Production-ready structure:
# - Controllers/Services pattern
# - Middleware setup
# - Error handling
# - Type safety

See template_patterns.md for complete project structures.

Generate Code Patterns

CRUD Endpoints:

// Generates complete REST endpoints with validation
router.get('/', controller.getAll);
router.post('/', validate(schema), controller.create);
router.put('/:id', validate(schema), controller.update);
router.delete('/:id', controller.delete);

React Components:

// Functional component with TypeScript props
export const ComponentName: React.FC<Props> = ({ prop1, prop2 }) => {
  return <div>{/* content */}</div>;
};

See code_patterns.md for all code generation patterns.

Project Templates

Web Applications

React/TypeScript SPA

Vite build system
React Router setup
Custom hooks (useFetch, useAuth)
Component structure (common, layout, pages)
Type-safe API client
Environment configuration

Full-Stack Monorepo

Turborepo setup
Frontend (React) + Backend (Express/FastAPI)
Shared packages (types, utils, UI components)
Coordinated build pipeline

Backend Services

FastAPI Application

Modular API structure (v1 routing)
CRUD base classes
Pydantic schemas
Database models (SQLAlchemy/Prisma)
Dependency injection
Authentication/Authorization setup

Express/TypeScript API

MVC architecture
Service layer pattern
Middleware (auth, validation, error handling)
TypeORM/Prisma integration
Request/response typing

CLI Tools

Python CLI (Click)

Command structure
Subcommands pattern
Configuration management
Progress indicators
Installation via setuptools

Code Generation Patterns

Classes and Models

TypeScript Interface + Class:

interface User {
  id: number;
  email: string;
  name: string;
}

class UserModel implements User {
  constructor(
    public id: number,
    public email: string,
    public name: string
  ) {}

  toJSON(): User {
    return { id: this.id, email: this.email, name: this.name };
  }
}

Python Dataclass:

@dataclass
class User:
    id: int
    email: str
    name: str
    created_at: datetime = field(default_factory=datetime.now)

    def to_dict(self) -> dict:
        return asdict(self)

API Endpoints

REST CRUD (Express):

class UserController {
  async getAll(req: Request, res: Response) {
    const users = await userService.findAll();
    res.json(users);
  }

  async create(req: Request, res: Response) {
    const user = await userService.create(req.body);
    res.status(201).json(user);
  }

  // ... getById, update, delete
}

FastAPI Endpoints:

@router.get("/", response_model=List[User])
def read_users(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
    return crud_user.get_multi(db, skip=skip, limit=limit)

@router.post("/", response_model=User)
def create_user(user_in: UserCreate, db: Session = Depends(get_db)):
    return crud_user.create(db, obj_in=user_in)

Components

React Functional Component:

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

export const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => {
  return (
    <button className={`btn btn-${variant}`} onClick={onClick}>
      {label}
    </button>
  );
};

Custom Hook:

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue] as const;
}

Tests

Jest Test Suite:

describe('UserService', () => {
  it('should create user', async () => {
    const userData = { email: '[email protected]', name: 'Test' };
    const user = await userService.create(userData);
    expect(user.email).toBe(userData.email);
  });

  it('should throw on duplicate email', async () => {
    await expect(userService.create({ email: '[email protected]' }))
      .rejects.toThrow();
  });
});

Pytest Suite:

class TestUserService:
    def test_create_user(self, db_session):
        user_data = UserCreate(email="[email protected]", name="Test")
        user = crud_user.create(db_session, obj_in=user_data)
        assert user.email == user_data.email

    def test_duplicate_email_raises_error(self, db_session):
        with pytest.raises(ValueError):
            crud_user.create(db_session, obj_in=duplicate_data)

Generation Workflow

1. Identify Need

Determine what to generate:

Complete project: Use project templates
Specific pattern: Use code generators
Boilerplate: Combine templates + patterns

2. Select Template/Pattern

Choose appropriate template:

Frontend: React app template
Backend: FastAPI or Express template
Full-stack: Monorepo template
Code: Specific pattern (CRUD, component, test)

3. Customize

Adapt template to requirements:

Replace placeholder names
Add/remove features
Configure dependencies
Update structure

4. Generate

Create the code:

Copy template structure
Generate code patterns
Fill in details
Add configurations

5. Verify

Check generated code:

Syntax correctness
Type safety
Dependencies installed
Tests passing

Best Practices

1. Follow Project Conventions

Match existing code style:

// Match naming: camelCase, PascalCase, snake_case
// Match structure: file organization, folder naming
// Match patterns: error handling, validation

2. Include Type Safety

Add type annotations:

// TypeScript
interface Props { ... }
function component(props: Props): JSX.Element { ... }

// Python
def function(param: str) -> dict[str, Any]: ...

3. Generate Tests Alongside Code

Create test boilerplate with implementation:

src/
  services/userService.ts
tests/
  services/userService.test.ts

4. Use Consistent Patterns

Apply same patterns across codebase:

Error handling approach
Validation strategy
Naming conventions
File structure

5. Document Generated Code

Add comments explaining:

/**
 * UserService handles all user-related operations.
 * Uses repository pattern for data access.
 */
export class UserService {
  // Implementation
}

Common Scenarios

Scenario 1: New React Component

Request: "Create a UserCard component that displays user info"

Generate:

interface UserCardProps {
  user: {
    name: string;
    email: string;
    avatar?: string;
  };
  onEdit?: () => void;
}

export const UserCard: React.FC<UserCardProps> = ({ user, onEdit }) => {
  return (
    <div className="user-card">
      {user.avatar && <img src={user.avatar} alt={user.name} />}
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {onEdit && <button onClick={onEdit}>Edit</button>}
    </div>
  );
};

Scenario 2: CRUD Endpoints

Request: "Generate CRUD endpoints for Product model"

Generate:

Routes file with all endpoints
Controller with CRUD methods
Service layer implementation
Validation schemas
Test suite

Scenario 3: New Project

Request: "Create a new FastAPI backend with PostgreSQL"

Generate:

Complete project structure
Database configuration
Initial models and schemas
CRUD base classes
Authentication setup
Docker configuration
Tests setup

Reference Documentation

Project Templates

See template_patterns.md for:

React/TypeScript Application
FastAPI Backend
Express/TypeScript API
Python CLI Tool
Full-Stack Monorepo
Complete file structures and core files

Code Patterns

See code_patterns.md for:

Class generators (TypeScript, Python)
API endpoint patterns (REST, GraphQL)
Component generators (React, Vue)
Test generators (Jest, pytest)
Database models (TypeORM, SQLAlchemy)
Service classes
Middleware patterns
Validation schemas (Zod, Pydantic)

Other skills for the same job

different authors, same section of the catalogue

MCP Builder

by anthropics

vendor ×13

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

774 tokens

Finishing A Development Branch

by ZhanlinCui

×7

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

Vercel React Native Skills

by vercel-labs

vendor ×6

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

39k tokens

Vercel React Best Practices

by ratacat

×5

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification

1k tokens

How to use it

Copy the folder

Take arabelatso/template-code-generator from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.