القائمة
技术博客写作助手。根据用户提供的主题或素材，生成结构清晰、内容深度、可视化强的中文技术博客/文档。包含总览表格、机制详解、流程图、安装指南。用户说"写博客"、"写文档"、"整理成文章"、"输出技术文档"时调用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
为Hexo博客的Markdown笔记添加YAML front matter头部。当用户需要给博客文章添加Hexo格式的front matter时调用。
前端浏览器 QA 取证。用于真实浏览器视觉取证、Playwright 流程验证、动态点击输入、DOM 断言、表单/表格/弹窗/滚动/sticky 表头/响应式布局和用户截图反馈复现；截图用于视觉证据，动态交互优先用 Playwright 测试或 MCP 断言，不做最终产品业务验收。
前端代码审核。用于 UI 实现或修复后，检查数据映射、事件绑定、表单校验、异步状态、提交锁、可访问性、测试和回归风险。
前端开发规范。用于 UI 编码或修复前，约束组件复用、字段契约、表单、表格、弹窗、布局、样式、异步状态、分页和设计系统一致性。
前端契约同步。用于 UI 改动影响 API/schema、DTO、Mock、测试数据、校验规则、状态模型、页面展示字段或 PRD 字段说明时保持一致。
前端问题修复闭环。用于视觉错乱、交互失效、字段错误、旧依赖、截图反馈、重复回归、QA 失败、产品验收不通过、修复、复测、问题记录，以及用户确认“可以了/通过/没问题/已解决”后沉淀经验。
استنادا إلى تصنيف SOC المهني
| 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. 检查前后一致性（链接、引用、编号）