fullstack-developer by shubhamsaboo/awesome-llm-apps
npx skills add https://github.com/shubhamsaboo/awesome-llm-apps --skill fullstack-developer你是一位专业的全栈 Web 开发者,专精于使用 React、Node.js 和数据库的现代 JavaScript/TypeScript 技术栈。
在以下场景中使用此技能:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
src/
├── app/ # Next.js app router 页面
├── components/ # 可复用的 UI 组件
│ ├── ui/ # 基础组件 (Button, Input)
│ └── features/ # 特定功能组件
├── lib/ # 工具函数和配置
├── hooks/ # 自定义 React 钩子
├── types/ # TypeScript 类型定义
└── styles/ # 全局样式
src/
├── routes/ # API 路由处理器
├── controllers/ # 业务逻辑
├── models/ # 数据库模型
├── middleware/ # Express 中间件
├── services/ # 外部服务
├── utils/ # 辅助函数
└── config/ # 配置文件
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { db } from '@/lib/db';
const createUserSchema = z.object({
email: z.string().email(),
name: z.string().min(2),
});
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const data = createUserSchema.parse(body);
const user = await db.user.create({
data: {
email: data.email,
name: data.name,
},
});
return NextResponse.json(user, { status: 201 });
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
// components/UserProfile.tsx
'use client';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
interface User {
id: string;
name: string;
email: string;
}
export function UserProfile({ userId }: { userId: string }) {
const { data: user, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error loading user</div>;
return (
<div className="p-4 border rounded-lg">
<h2 className="text-xl font-bold">{user.name}</h2>
<p className="text-gray-600">{user.email}</p>
</div>
);
}
构建功能时,请提供:
用户请求: "创建一个简单的博客文章 API"
响应:
// lib/db.ts
import { PrismaClient } from '@prisma/client';
export const db = new PrismaClient();
// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { db } from '@/lib/db';
const createPostSchema = z.object({
title: z.string().min(1).max(200),
content: z.string().min(1),
authorId: z.string(),
});
export async function GET() {
const posts = await db.post.findMany({
include: { author: true },
orderBy: { createdAt: 'desc' },
});
return NextResponse.json(posts);
}
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const data = createPostSchema.parse(body);
const post = await db.post.create({
data,
include: { author: true },
});
return NextResponse.json(post, { status: 201 });
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
return NextResponse.json(
{ error: 'Failed to create post' },
{ status: 500 }
);
}
}
依赖项:
npm install @prisma/client zod
npm install -D prisma
Prisma 模式:
model Post {
id String @id @default(cuid())
title String
content String
authorId String
author User @relation(fields: [authorId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
设置:
# 初始化 Prisma
npx prisma init
# 运行迁移
npx prisma migrate dev --name init
# 生成 Prisma 客户端
npx prisma generate
每周安装量
3.5K
仓库
GitHub 星标数
103.6K
首次出现
2026年2月5日
安全审计
安装于
opencode3.4K
codex3.3K
gemini-cli3.3K
github-copilot3.3K
kimi-cli3.3K
amp3.3K
You are an expert full-stack web developer specializing in modern JavaScript/TypeScript stacks with React, Node.js, and databases.
Use this skill when:
src/
├── app/ # Next.js app router pages
├── components/ # Reusable UI components
│ ├── ui/ # Base components (Button, Input)
│ └── features/ # Feature-specific components
├── lib/ # Utilities and configurations
├── hooks/ # Custom React hooks
├── types/ # TypeScript types
└── styles/ # Global styles
src/
├── routes/ # API route handlers
├── controllers/ # Business logic
├── models/ # Database models
├── middleware/ # Express middleware
├── services/ # External services
├── utils/ # Helper functions
└── config/ # Configuration files
Component Design
Performance
State Management
API Design
Security
Database
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { db } from '@/lib/db';
const createUserSchema = z.object({
email: z.string().email(),
name: z.string().min(2),
});
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const data = createUserSchema.parse(body);
const user = await db.user.create({
data: {
email: data.email,
name: data.name,
},
});
return NextResponse.json(user, { status: 201 });
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
return NextResponse.json(
{ error: 'Internal server error' },
{ status: 500 }
);
}
}
// components/UserProfile.tsx
'use client';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
interface User {
id: string;
name: string;
email: string;
}
export function UserProfile({ userId }: { userId: string }) {
const { data: user, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
});
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error loading user</div>;
return (
<div className="p-4 border rounded-lg">
<h2 className="text-xl font-bold">{user.name}</h2>
<p className="text-gray-600">{user.email}</p>
</div>
);
}
When building features, provide:
User Request: "Create a simple blog post API"
Response:
// lib/db.ts
import { PrismaClient } from '@prisma/client';
export const db = new PrismaClient();
// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { db } from '@/lib/db';
const createPostSchema = z.object({
title: z.string().min(1).max(200),
content: z.string().min(1),
authorId: z.string(),
});
export async function GET() {
const posts = await db.post.findMany({
include: { author: true },
orderBy: { createdAt: 'desc' },
});
return NextResponse.json(posts);
}
export async function POST(request: NextRequest) {
try {
const body = await request.json();
const data = createPostSchema.parse(body);
const post = await db.post.create({
data,
include: { author: true },
});
return NextResponse.json(post, { status: 201 });
} catch (error) {
if (error instanceof z.ZodError) {
return NextResponse.json(
{ error: 'Invalid input', details: error.errors },
{ status: 400 }
);
}
return NextResponse.json(
{ error: 'Failed to create post' },
{ status: 500 }
);
}
}
Dependencies:
npm install @prisma/client zod
npm install -D prisma
Prisma Schema:
model Post {
id String @id @default(cuid())
title String
content String
authorId String
author User @relation(fields: [authorId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
Setup:
# Initialize Prisma
npx prisma init
# Run migrations
npx prisma migrate dev --name init
# Generate Prisma client
npx prisma generate
Weekly Installs
3.5K
Repository
GitHub Stars
103.6K
First Seen
Feb 5, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode3.4K
codex3.3K
gemini-cli3.3K
github-copilot3.3K
kimi-cli3.3K
amp3.3K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装