Menu
技术博客写作助手。根据用户提供的主题或素材，生成结构清晰、内容深度、可视化强的中文技术博客/文档。包含总览表格、机制详解、流程图、安装指南。用户说"写博客"、"写文档"、"整理成文章"、"输出技术文档"时调用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
为Hexo博客的Markdown笔记添加YAML front matter头部。当用户需要给博客文章添加Hexo格式的front matter时调用。
前端浏览器 QA 取证。用于真实浏览器视觉取证、Playwright 流程验证、动态点击输入、DOM 断言、表单/表格/弹窗/滚动/sticky 表头/响应式布局和用户截图反馈复现；截图用于视觉证据，动态交互优先用 Playwright 测试或 MCP 断言，不做最终产品业务验收。
前端代码审核。用于 UI 实现或修复后，检查数据映射、事件绑定、表单校验、异步状态、提交锁、可访问性、测试和回归风险。
前端开发规范。用于 UI 编码或修复前，约束组件复用、字段契约、表单、表格、弹窗、布局、样式、异步状态、分页和设计系统一致性。
前端契约同步。用于 UI 改动影响 API/schema、DTO、Mock、测试数据、校验规则、状态模型、页面展示字段或 PRD 字段说明时保持一致。
前端问题修复闭环。用于视觉错乱、交互失效、字段错误、旧依赖、截图反馈、重复回归、QA 失败、产品验收不通过、修复、复测、问题记录，以及用户确认“可以了/通过/没问题/已解决”后沉淀经验。
| name | blog-writer |
| description | 技术博客写作助手。根据用户提供的主题或素材，生成结构清晰、内容深度、可视化强的中文技术博客/文档。包含总览表格、机制详解、流程图、安装指南。用户说"写博客"、"写文档"、"整理成文章"、"输出技术文档"时调用。 |
# {标题}
[徽章/标签行]
一句话概述（30字以内，点明受众和价值）
---
## 前置依赖（如有）
- 依赖的系统/框架
- 配套工具表格
---
## 总览
| 模块/功能 | 用途 | 触发/使用方式 |
|-----------|------|---------------|
| {A} | ... | ... |
| {B} | ... | ... |
---
## {模块1} 机制详解
**目标：** 一句话说明这个模块要解决什么问题
**触发条件：**
- 条件1
- 条件2
**核心机制：**
1. 步骤1 — 说明
2. 步骤2 — 说明
**关键设计：**
- 设计点A：为什么这样设计
- 设计点B：解决了什么痛点
---
## {模块2} 机制详解
（同上结构）
---
## 协作关系 / 架构图
模块A ──→ 模块B ──→ 模块C │ │ │ │ 输入 │ 处理 │ 输出 ▼ ▼ ▼
---
## 安装/使用
```bash
# 安装命令
project/
├── ...
MIT © {作者}
## 内容深度要求
| 内容类型 | 必须包含 | 可选补充 |
|----------|----------|----------|
| 功能介绍 | 目标、触发条件、核心流程 | 边界情况、性能数据 |
| 机制详解 | 步骤分解、角色/组件定义、决策逻辑 | 源码链接、实现细节 |
| 对比说明 | 表格对比（维度 vs 选项） | 优劣分析、选型建议 |
| 安装指南 | 命令、路径、验证方式 | 常见问题、故障排查 |
## 可视化规范
**表格使用场景：**
- 多选项对比
- 参数/配置说明
- 角色职责划分
- 阈值/规则定义
**流程图使用场景：**
- 工作流/协作关系
- 状态转换
- 决策分支
**代码块使用场景：**
- 安装命令
- 配置示例
- 目录结构
- API 调用
## 语言风格
- 用**加粗**标记关键概念和结论
- 用 `代码格式` 标记技术术语、文件名、命令
- 用 emoji 辅助表达状态（🟢 简单 / 🔴 复杂 / ⛔ 禁止 / ✅ 正确）
- 段落不超过 3 行，长句拆短
- 每个章节开头用一句话总结该节核心信息
## 迭代扩展支持
当用户要求"追加内容"或"扩展文档"时：
1. 保持原有结构不变
2. 在对应章节追加新行/新段落
3. 更新总览表格，添加新条目
4. 更新协作关系图，纳入新模块
5. 检查前后一致性（链接、引用、编号）