arabelatso/template-code-generator
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.
npx skills add https://github.com/ArabelaTso/Skills-4-SE --skill template-code-generatorGenerate boilerplate code and complete project skeletons automatically, accelerating development with battle-tested templates.
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.
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.
React/TypeScript SPA
Full-Stack Monorepo
FastAPI Application
Express/TypeScript API
Python CLI (Click)
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)
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)
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;
}
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)
Determine what to generate:
Choose appropriate template:
Adapt template to requirements:
Create the code:
Check generated code:
Match existing code style:
// Match naming: camelCase, PascalCase, snake_case
// Match structure: file organization, folder naming
// Match patterns: error handling, validation
Add type annotations:
// TypeScript
interface Props { ... }
function component(props: Props): JSX.Element { ... }
// Python
def function(param: str) -> dict[str, Any]: ...
Create test boilerplate with implementation:
src/
services/userService.ts
tests/
services/userService.test.ts
Apply same patterns across codebase:
Add comments explaining:
/**
* UserService handles all user-related operations.
* Uses repository pattern for data access.
*/
export class UserService {
// Implementation
}
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>
);
};
Request: "Generate CRUD endpoints for Product model"
Generate:
Request: "Create a new FastAPI backend with PostgreSQL"
Generate:
See template_patterns.md for:
See code_patterns.md for:
Take arabelatso/template-code-generator from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
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.