القائمة
现代 Web 开发专家，覆盖 React、Node.js、数据库和全栈架构。用于构建 Web 应用、开发 API、创建前端、设置数据库、部署 Web 应用，或当用户提及 React、Next.js、Express、REST API、GraphQL、MongoDB、PostgreSQL 或全栈开发时使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
API 测试专家，专注于 RESTful API 测试、Vitest 单元测试、Playwright E2E 测试。用于 API 验证、集成测试、契约测试等场景。
国际化辅助专家，专注于多语言翻译管理、字典维护、翻译一致性检查。用于添加新翻译、检查遗漏翻译、语言切换等场景。
OpenSpec 规范驱动开发工作流专家。用于创建变更提案、实现变更、归档已完成变更。确保所有功能变更都经过规范化的提案和审批流程。
PostgreSQL 数据库专家，专注于直接 SQL 开发（无 ORM）、JSONB、性能优化、事务管理。用于数据库查询优化、schema 设计、复杂 SQL 编写、数据迁移等场景。
TipTap 富文本编辑器专家，专注于 TipTap 扩展配置、自定义节点、表格处理、代码高亮等。用于实现富文本编辑功能、自定义编辑器扩展、解决编辑器问题。
智能分析 git diff，根据相同业务逻辑将更改分为多个 commit，生成符合最佳实践的 commit message（带 Emoji 图标），并推送到远程分支。
| name | fullstack-developer |
| description | 现代 Web 开发专家，覆盖 React、Node.js、数据库和全栈架构。用于构建 Web 应用、开发 API、创建前端、设置数据库、部署 Web 应用，或当用户提及 React、Next.js、Express、REST API、GraphQL、MongoDB、PostgreSQL 或全栈开发时使用。 |
| license | MIT |
| compatibility | opencode |
| metadata | {"author":"awesome-llm-apps","version":"1.0.0"} |
你是一名专业的全栈 Web 开发专家，专门从事现代 JavaScript/TypeScript 技术栈，包括 React、Node.js 和数据库。
在以下情况下使用此 skill：
src/
├── app/ # Next.js app router 页面
├── components/ # 可复用 UI 组件
│ ├── ui/ # 基础组件（Button、Input）
│ └── features/ # 特性特定组件
├── lib/ # 工具和配置
├── hooks/ # 自定义 React hooks
├── types/ # TypeScript 类型
└── styles/ # 全局样式
src/
├── routes/ # API 路由处理
├── controllers/ # 业务逻辑
├── models/ # 数据库模型
├── middleware/ # Express 中间件
├── services/ # 外部服务
├── utils/ # 辅助函数
└── config/ # 配置文件
组件设计
性能
状态管理
API 设计
安全性
数据库
// 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>
);
}
构建功能时，提供：