code-generation

name	code-generation
description	Scaffolding, boilerplate generation, and project templates. Use for generating components, modules, APIs, and project structures.

⚡ Code Generation Skill

Component Generators

React Component

// Template: React Functional Component
import { FC } from 'react';
import styles from './${name}.module.css';

interface ${Name}Props {
  // Props here
}

export const ${Name}: FC<${Name}Props> = ({ }) => {
  return (
    <div className={styles.container}>
      {/* Content */}
    </div>
  );
};

API Route (Next.js)

// Template: Next.js API Route
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  try {
    const data = await fetchData();
    return NextResponse.json({ data });
  } catch (error) {
    return NextResponse.json({ error: 'Failed' }, { status: 500 });
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const result = await createItem(body);
    return NextResponse.json({ data: result }, { status: 201 });
  } catch (error) {
    return NextResponse.json({ error: 'Failed' }, { status: 500 });
  }
}

---

Project Scaffolding

Vite React Project

npx create-vite@latest my-app --template react-ts
cd my-app
npm install
npm run dev

Next.js Project

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

Express API

mkdir my-api && cd my-api
npm init -y
npm install express cors helmet dotenv
npm install -D typescript @types/express @types/node ts-node nodemon

---

File Structure Templates

Feature-Based (Recommended)

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api.ts
│   │   └── types.ts
│   └── users/
│       ├── components/
│       ├── hooks/
│       ├── api.ts
│       └── types.ts
├── shared/
│   ├── components/
│   ├── hooks/
│   └── utils/
└── app/

Layer-Based

src/
├── components/
├── pages/
├── hooks/
├── services/
├── utils/
└── types/

---

CRUD Generator Pattern

// Generate CRUD for any entity
interface CRUDTemplate {
  entity: string;
  fields: Field[];
  endpoints: {
    list: boolean;
    get: boolean;
    create: boolean;
    update: boolean;
    delete: boolean;
  };
}

// Generates:
// - API routes (GET, POST, PUT, DELETE)
// - Types/Interfaces
// - React hooks (useGet, useCreate, useUpdate, useDelete)
// - Form component
// - List component

---

Generation Checklist

• กำหนด folder structure
• สร้าง type definitions ก่อน
• Generate components จาก template
• เพิ่ม exports ใน index files
• Update routing ถ้าจำเป็น