菜单
专业的 JavaScript 和 TypeScript 开发技能，涵盖现代 ES6+、TypeScript、Node.js、Express、React、测试框架和最佳实践。使用此技能开发 JavaScript/TypeScript 应用、构建 React/Node.js 项目、实现 RESTful API，或需要现代 JS/TS 开发模式指导时使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Expert Git skills covering interactive rebase, worktree management, reflog recovery, bisect debugging, advanced workflows, commit message best practices, and clean history management. Use this skill when needing advanced Git operations, cleaning commit history, managing multiple worktrees, recovering lost commits, debugging with bisect, or implementing sophisticated Git workflows.
Go language development skill focusing on Fiber web framework, Cobra CLI, GORM ORM, Clean Architecture, and concurrent programming. Use this skill when building Go web applications, developing CLI tools with Cobra, implementing RESTful APIs with Fiber, or need guidance on Go architecture design and performance optimization.
Skill for summarizing the current session's context, including completed tasks, technical decisions, and next steps. Use this skill when you need to create a handover document for a new session, switch contexts without losing critical information, or document what was accomplished before ending a session.
Provides core Swift 6+ language development capabilities, covering concurrency, macros, model design, and business logic. Use this skill when writing ViewModel, Service, or Repository layer code, defining data models, implementing algorithms, writing unit tests, or fixing concurrency warnings and data races.
Specialized in building user interfaces using modern SwiftUI, covering NavigationStack, Observation framework, and SwiftData integration. Use this skill when writing SwiftUI view files, designing app navigation, handling animations and transitions, or binding ViewModel data to the interface.
System architecture design skill covering architecture patterns, distributed systems, technology selection, and enterprise architecture documentation. Use this skill when designing system architectures, evaluating technology stacks, planning distributed systems, or creating architecture decision records and documentation.
| name | javascript-typescript |
| description | 专业的 JavaScript 和 TypeScript 开发技能，涵盖现代 ES6+、TypeScript、Node.js、Express、React、测试框架和最佳实践。使用此技能开发 JavaScript/TypeScript 应用、构建 React/Node.js 项目、实现 RESTful API，或需要现代 JS/TS 开发模式指导时使用。 |
你是一位拥有 10 年以上经验的 JavaScript 和 TypeScript 专家开发者，擅长使用最新的 ECMAScript 标准、TypeScript、Node.js 生态系统和前端框架构建现代化、可扩展的应用程序。
project/
├── src/
│ ├── controllers/ # 路由控制器
│ ├── services/ # 业务逻辑
│ ├── repositories/ # 数据访问层
│ ├── models/ # 数据模型（TypeScript 接口/类型）
│ ├── middleware/ # Express 中间件
│ ├── routes/ # 路由定义
│ ├── utils/ # 工具函数
│ ├── config/ # 配置
│ ├── types/ # TypeScript 类型定义
│ └── index.ts # 入口点
├── tests/
│ ├── unit/
│ ├── integration/
│ └── e2e/
├── package.json
├── tsconfig.json
├── jest.config.js
└── .env.example
project/
├── src/
│ ├── components/ # React 组件
│ │ ├── common/ # 可重用组件
│ │ └── features/ # 特定功能组件
│ ├── hooks/ # 自定义 React hooks
│ ├── contexts/ # React contexts
│ ├── services/ # API 服务
│ ├── store/ # 状态管理
│ ├── types/ # TypeScript 类型
│ ├── utils/ # 工具函数
│ ├── styles/ # 全局样式
│ ├── App.tsx
│ └── main.tsx
├── public/
├── tests/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── .env.example
// tsconfig.json (后端 - Node.js)
{
"compilerOptions": {
"target": "ES2022",
"module": "commonjs",
"lib": ["ES2022"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "**/*.test.ts"]
}
// tsconfig.json (前端 - React)
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
Express API 模式（模型、Repository、Service、控制器、路由、中间件）：参见 references/express-api-patterns.md React 组件与 TypeScript（自定义 Hook、React 组件、Context API）：参见 references/react-patterns.md 测试模式（Jest 配置、单元测试、集成测试）：参见 references/testing-patterns.md
// ✅ 好的做法：强类型
interface User {
id: string;
email: string;
name: string;
}
function getUser(id: string): Promise<User> {
// ...
}
// ✅ 好的做法：类型守卫
function isUser(obj: unknown): obj is User {
return (
typeof obj === 'object' &&
obj !== null &&
'id' in obj &&
'email' in obj &&
'name' in obj
);
}
// ❌ 坏的做法：使用 any
function getUser(id: any): any {
// 失去类型安全
}
// ✅ 好的做法：正确的错误处理
async function fetchData(): Promise<Data> {
try {
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
logger.error('Failed to fetch data:', error);
throw error;
}
}
// ❌ 坏的做法：未处理的 promise 拒绝
async function fetchData() {
const response = await fetch('/api/data');
return await response.json(); // 没有错误处理！
}
// ✅ 好的做法：不可变操作
const users = [user1, user2, user3];
const updatedUsers = users.map(u =>
u.id === targetId ? { ...u, name: newName } : u
);
// ✅ 好的做法：不可重新赋值的值使用 const
const MAX_RETRIES = 3;
const config = { timeout: 5000 } as const;
// ❌ 坏的做法：直接修改状态
users[0].name = 'New Name'; // 直接修改
// ✅ 好的做法：解构
const { id, name, email } = user;
const [first, second, ...rest] = items;
// ✅ 好的做法：展开运算符
const newUser = { ...user, name: 'New Name' };
const combined = [...array1, ...array2];
// ✅ 好的做法：可选链
const userName = user?.profile?.name ?? 'Anonymous';
// ✅ 好的做法：空值合并
const port = process.env.PORT ?? 3000;
// ✅ 好的做法：多个项目使用命名导出
export class UserService {}
export interface User {}
export const USER_ROLES = ['admin', 'user'] as const;
// ✅ 好的做法：主模块导出使用默认导出
export default class App {}
// ❌ 坏的做法：随意混合命名和默认导出
// ✅ 好的做法：使用 Promise.all 进行并行操作
const [users, posts, comments] = await Promise.all([
fetchUsers(),
fetchPosts(),
fetchComments(),
]);
// ✅ 好的做法：使用 Promise.allSettled 处理失败
const results = await Promise.allSettled([
fetchData1(),
fetchData2(),
fetchData3(),
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log(result.value);
} else {
console.error(result.reason);
}
});
// ❌ 坏的做法：本可以并行时使用顺序执行
const users = await fetchUsers();
const posts = await fetchPosts(); // 可以并行运行！