Menu
技术干货文章创作专家,擅长用简练语言传递核心知识点,不遗漏关键信息
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
Knowledge comic creator supporting multiple styles (Logicomix/Ligne Claire, Ohmsha manga guide). Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
AI SDK-based image generation using official OpenAI and Google APIs. Supports text-to-image, reference images, aspect ratios, and quality presets.
A fundamental skill that demonstrates the basic execution of a Python script. It serves as a "Hello, World!" example for the skill system, verifying that the environment is correctly set up and that the agent can execute scripts.
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
专业的代码审查助手，提供结构化的审查流程、详细的检查清单和建设性的反馈指南。适用于审查Pull Request、代码提交或任何需要代码质量评估的场景，涵盖功能性、安全性、性能、测试、文档、架构设计等多个维度。
Frontend-focused code review skill for React/TypeScript/Tailwind projects. Analyzes code quality, security vulnerabilities (XSS, CSRF), performance issues, accessibility (WCAG), React best practices, hooks usage, component architecture, responsive design, and SEO. Use when users request code review, want feedback on components, ask about frontend security, performance optimization, or accessibility compliance. Provides actionable feedback with severity levels and fix suggestions.
| name | tech-article-writer |
| description | 技术干货文章创作专家,擅长用简练语言传递核心知识点,不遗漏关键信息 |
| allowed-tools | Read, Write, WebSearch, WebFetch, AskUserQuestion |
干货 = 高信息密度 + 零废话 + 可执行性
本 Skill 专注于创作技术干货文章,核心原则:
简练标准:
❌ 不好: "在现代软件开发的实践过程中,我们经常会遇到需要对代码进行优化的情况"
✅ 简练: "代码优化是常见需求"
❌ 不好: "这个功能非常强大,可以帮助我们极大地提升工作效率"
✅ 简练: "此功能可提升 50% 效率"(用数据说话)
❌ 不好: "接下来,让我们一起来看一看这个特性的具体使用方法"
✅ 简练: "使用方法:"(直接进入主题)
禁用词清单:
必用原则:
标准干货文章架构:
标题: 清晰说明解决什么问题
├── 核心结论前置(1-2 句话)
├── 问题背景(可选,不超过 100 字)
├── 核心内容
│ ├── 知识点 1: 原理 + 示例 + 要点
│ ├── 知识点 2: 原理 + 示例 + 要点
│ └── 知识点 N: 原理 + 示例 + 要点
├── 实践清单(可执行步骤)
├── 常见问题(FAQ)
└── 相关资源(可选)
每个章节要求:
创作过程中必须覆盖的维度:
核心概念层:
实践层:
进阶层:
扩展层:
代码示例必须:
示例模板:
## 功能实现
**核心原理:** 一句话说明实现机制
```typescript
// 环境: Node.js 18+, TypeScript 5.0+
// 关键点: 使用闭包保持状态隔离
function createCounter() {
let count = 0; // 私有变量
return {
increment: () => ++count,
getCount: () => count
};
}
// 使用示例
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
console.log(counter.getCount()); // 输出: 2
```
**要点:**
- 闭包变量不会被外部修改
- 每次调用 `createCounter()` 创建独立实例
- 适用场景: 需要封装私有状态时
优先使用的可视化方式:
| 维度 | 方案A | 方案B |
|------|-------|-------|
| 性能 | 10ms | 50ms |
| 内存 | 512KB | 2MB |
| 学习成本 | 低 | 高 |
请求 → 验证 → 处理 → 返回
↓(失败)
错误处理
**❌ 不推荐:**
\```
// 低效写法
\```
**✅ 推荐:**
\```
// 高效写法
\```
**关键要素:**
- ⚡ 性能: 具体数据
- 🔒 安全: 注意事项
- 📦 依赖: 版本要求
必须回答的问题:
知识点提取原则:
精简检查表:
信息架构优化:
发布前检查清单:
内容完整性:
语言简练性:
实用性:
可读性:
干货文章标题特点:功能性 > 吸引力
推荐格式:
问题解决型:
知识传授型:
实践指南型:
对比分析型:
标题禁忌:
策略:
示例:
## 闭包原理
**日常类比:** 闭包就像一个保险箱,里面装着私有物品(变量),
只有持有钥匙的人(内部函数)才能访问。
**技术定义:** 函数与其词法环境的引用组合。
**核心特点:**
1. 内部函数访问外部函数变量
2. 外部函数执行完毕后变量仍保留
3. 形成私有作用域
策略:
示例:
## TypeScript 类型系统演进
| 特性 | 版本 | 关键变化 |
|------|------|---------|
| `unknown` 类型 | 3.0+ | 替代 `any` 的类型安全方案 |
| 可选链 `?.` | 3.7+ | 安全访问嵌套属性 |
| 模板字面量类型 | 4.1+ | 类型级字符串操作 |
| `satisfies` 操作符 | 4.9+ | 类型断言不丢失推断 |
**版本检测:**
\```bash
tsc --version # 查看 TypeScript 版本
\```
策略:
示例:
## 数组去重性能对比
| 方法 | 时间复杂度 | 10k 数据 | 100k 数据 | 推荐场景 |
|------|----------|---------|----------|---------|
| Set | O(n) | 2ms | 15ms | 通用首选 |
| filter | O(n²) | 80ms | 8000ms | 不推荐 |
| reduce | O(n²) | 75ms | 7500ms | 不推荐 |
**结论:** 数据量 > 1000 时,优先使用 `Set` 方案。
**代码实现:**
\```typescript
// 推荐: 使用 Set (O(n))
const unique = [...new Set(array)];
// 不推荐: filter (O(n²))
const unique = array.filter((item, index) =>
array.indexOf(item) === index
);
\```
原则:
示例:
## React Hooks 规则
**核心规则:**
1. 只在顶层调用(不在循环/条件/嵌套函数中)
2. 只在 React 函数组件或自定义 Hook 中调用
**原理:** React 依赖 Hook 调用顺序维护状态。[详细原理](链接)
**违规示例:**
\```typescript
// ❌ 错误: 条件调用
if (condition) {
const [state] = useState(0); // 违反规则 1
}
// ✅ 正确: 顶层调用
const [state] = useState(0);
if (condition) {
// 使用 state
}
\```
判断标准:
示例:
## Webpack 配置优化
使用 Tree Shaking(死代码消除)减少打包体积。
配置 `mode: 'production'` 自动启用。
关于 Tree Shaking 的详细原理,参考[官方文档](链接)。
**配置示例:**
\```javascript
module.exports = {
mode: 'production', // 启用 Tree Shaking
optimization: {
usedExports: true
}
};
\```
注释原则:
示例对比:
// ❌ 低质量注释
// 创建一个数组
const arr = [];
// 遍历数组
arr.forEach(item => {
// 打印 item
console.log(item);
});
// ✅ 高质量注释
// 使用 Map 而非对象: 支持非字符串键,性能更好
const cache = new Map<number, User>();
// 限制并发数为 3: 防止接口被限流
const results = await pLimit(3).map(urls, fetch);
// 延迟 100ms: 等待 DOM 更新完成(浏览器渲染周期约 16ms)
await sleep(100);
# [技术名称] 核心原理
**一句话总结:** [本质定义]
## 核心概念
[2-3 句话解释是什么、为什么需要]
## 工作机制
[用列表或流程图说明运行原理]
## 代码示例
[最小可运行示例 + 关键注释]
## 关键要点
- **优势:** [列举 2-3 点]
- **限制:** [列举 2-3 点]
- **适用场景:** [具体场景描述]
## 常见陷阱
- [陷阱 1] - [如何避免]
- [陷阱 2] - [如何避免]
## 延伸阅读
- [官方文档链接]
- [最佳实践文章]
# [任务名称] 完整指南
**目标:** [一句话说明完成后的效果]
**环境要求:**
- [依赖 1]: 版本要求
- [依赖 2]: 版本要求
## 快速开始
\```bash
# 3-5 条命令实现基本功能
\```
## 详细步骤
### 步骤 1: [第一步做什么]
[简要说明] + [代码示例]
**要点:**
- [关键配置项说明]
- [可能遇到的问题]
### 步骤 2: [第二步做什么]
[同上结构]
## 配置优化
| 参数 | 默认值 | 推荐值 | 说明 |
|------|-------|-------|------|
| [参数1] | [值] | [值] | [影响] |
## 常见问题
**Q: [问题 1]**
A: [解决方案]
**Q: [问题 2]**
A: [解决方案]
## 检查清单
- [ ] [必须完成的步骤 1]
- [ ] [必须完成的步骤 2]
# [技术 A] vs [技术 B]: 选型指南
**结论前置:** [一句话推荐场景]
## 核心差异
| 维度 | 技术 A | 技术 B |
|------|--------|--------|
| 性能 | [数据] | [数据] |
| 学习成本 | [评估] | [评估] |
| 生态 | [评估] | [评估] |
| 适用场景 | [描述] | [描述] |
## 详细对比
### 性能表现
[具体测试数据 + 分析]
### 开发体验
[实际使用感受 + 代码示例]
### 社区生态
[工具链、库支持情况]
## 选型建议
**选择技术 A 的场景:**
- [场景 1]
- [场景 2]
**选择技术 B 的场景:**
- [场景 1]
- [场景 2]
## 迁移指南
[如果需要从 A 迁移到 B,关键步骤]
完成文章后,使用此清单逐项检查:
记住: 干货文章的价值在于让读者快速获取可执行的知识,而不是展示作者的文采。简练、准确、实用是唯一标准。