⚡ 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
majiayu000