Code content audit and inspection. Automatically invoked during step 4 of the beauty command to comprehensively check the generated HTML presentation, ensure quality and integrity, implement one-vote veto system. 代码内容审核检验。在beauty命令的步骤4执行时自动调用,全面检查生成的HTML演示文稿,确保质量和完整性,实行一票否决制。
Audits generated HTML presentations for quality, integrity, and resource usage compliance, implementing a one-vote veto system.
npx claudepluginhub within-7/minto-plugin-toolsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
全面检查生成的 HTML 演示文稿,确保质量和完整性。
Comprehensively check the generated HTML presentation to ensure quality and integrity.
实行一票否决制 / Implement One-Vote Veto System:
内容完整性检验 / Content Integrity Check:必须100%保留原文所有章节、数据、结论,零遗漏 MUST preserve 100% of all original chapters, data, conclusions, zero omissions
代码质量检验 / Code Quality Check:必须符合HTML最佳实践,可访问可运行 MUST follow HTML best practices, be accessible and runnable
资源使用检验 / Resource Usage Check:必须验证步骤2和步骤3是否正确读取并使用了skill资源 MUST verify Steps 2 & 3 correctly read and used skill resources
发现问题立即回退 / Rollback Immediately on Issues:返回对应步骤重新执行,绝不将就 Return to corresponding step and re-execute, never compromise
步骤4.1:资源使用验证 / Step 4.1: Resource usage verification
↓
步骤4.2:内容完整性检查 / Step 4.2: Content integrity check
↓
步骤4.3:代码质量检查 / Step 4.3: Code quality check
↓
步骤4.4:功能验证 / Step 4.4: Functionality verification
↓
步骤4.5:生成最终报告 / Step 4.5: Generate final report
验证步骤2和步骤3是否正确读取并使用了skill资源。
Verify that Steps 2 & 3 correctly read and used skill resources.
□ 是否读取了 chart-selection-guide.md?
□ 是否识别了内容结构类型(9种类型之一)?
□ 是否根据决策树选择了对应的图表?
□ 是否记录了选择理由(关键词匹配)?
如果否 → 返回步骤2重新执行
□ 是否读取了 CHART_EXAMPLES_INDEX.md?
□ 每个选择的图表是否都有对应的示例文件?
□ 是否从示例文件中复制了代码?
□ 图表类型与内容是否匹配?
如果否 → 返回步骤2重新执行
□ 是否读取了 INSIGHT_VISUALIZATION_GUIDE.md?
□ 是否根据观点类型选择了可视化方式?
□ 是否避免了纯文本项目符号列表?
如果否 → 返回步骤2重新执行
□ 是否读取了 best-practices.md?
□ HTML结构是否符合语义化要求?
□ CSS是否遵循了设计原则?
□ 是否保持了内容完整性(不总结、不篡改)?
如果否 → 返回步骤3重新执行
□ 是否读取了 mckinsey-design-system.md?
□ 是否使用了定义的配色方案?
□ 字体大小是否符合规范?
□ 间距是否符合标准?
如果否 → 返回步骤3重新执行
□ 是否读取了 presentation-template.html?
□ HTML结构是否基于模板?
□ 导航功能是否完整?
□ 是否包含了模板中的所有必要组件?
如果否 → 返回步骤3重新执行
□ 每个图表的代码是否来自assets/示例文件?
□ 是否完整复制了CSS、HTML、JavaScript?
□ 是否根据实际数据进行了定制?
□ McKinsey配色是否保持一致?
如果否 → 返回步骤3重新执行
步骤2 - 幻灯片设计阶段:
□ 已读取:references/chart-selection-guide.md
□ 已读取:assets/CHART_EXAMPLES_INDEX.md
□ 已读取:assets/INSIGHT_VISUALIZATION_GUIDE.md
□ 已制作:图表选择决策表(内容类型 → 关键词 → 推荐图表 → 示例文件)
□ 已记录:每个图表的选择理由
□ 已复制:对应示例文件的代码
步骤3 - HTML生成阶段:
□ 已读取:references/best-practices.md
□ 已读取:references/mckinsey-design-system.md
□ 已读取:references/template-guide.md
□ 已读取:assets/presentation-template.html
□ 已读取:assets/TEMPLATE_USAGE_GUIDE.md
□ 已复制:所有选中图表的示例代码
□ 已应用:McKinsey配色和排版规范
□ 已保持:内容完整性(零篡改、零遗漏)
❌ 发现任何资源未读取或未使用 → 立即返回对应步骤重新执行
以下任一情况发生,必须回退:
1. 步骤2未读chart-selection-guide.md
→ 返回步骤2,读取资源后重新选择图表
2. 步骤2选择的图表与chart-selection-guide.md不符
→ 返回步骤2,根据指南重新选择
3. 步骤2未从assets/示例文件复制代码
→ 返回步骤2,读取示例文件后复制代码
4. 步骤3未读best-practices.md
→ 返回步骤3,读取资源后重新生成HTML
5. 步骤3生成的HTML不符合mckinsey-design-system.md规范
→ 返回步骤3,根据规范重新生成
6. 步骤3未基于presentation-template.html
→ 返回步骤3,使用模板重新生成
确保所有原文内容都已正确包含在HTML文件中,无遗漏、无错误。
使用工具提取文档的所有标题
推荐使用 Read 工具完整阅读文档,记录所有标题层级
创建一个对照表,逐项检查:
章节对照清单:
原文档章节 HTML幻灯片页面 状态
─────────────────────────────────────────────────────────
H1: [主标题] 页面1: 封面页 ✓
H2: [第一章标题] 页面3: 第一章章节首页 ✓
H3: [子章节1.1] 页面4: 内容页 ✓
H3: [子章节1.2] 页面5: 内容页 ✓
H3: [子章节1.3] 页面6: 内容页 ✓
H2: [第二章标题] 页面7: 第二章章节首页 ✓
H3: [子章节2.1] 页面8: 内容页 ✓
H3: [子章节2.2] 页面9: 内容页 ✓
H3: [子章节2.3] 页面10: 内容页 ✓
...
验证项目1:章节标题完整性
□ 所有H1标题是否包含?
□ 所有H2章节是否都有对应的页面?
□ 所有H3子章节是否都有对应的页面?
□ 章节顺序是否与原文一致?
□ 章节编号是否正确?
验证项目2:要点内容完整性
□ 所有要点是否都已包含?
□ 要点文字是否完整(未删减)?
□ 要点顺序是否与原文一致?
□ 子要点是否都已包含?
□ 是否有重复内容?
验证项目3:数据完整性
□ 所有数据点是否都已包含?
□ 数值是否准确(无错误)?
□ 单位是否正确?
□ 百分比是否正确?
□ 货币符号是否正确?
验证项目4:表格完整性
□ 所有表格是否都已包含?
□ 表格行数是否正确?
□ 表格列数是否正确?
□ 表格数据是否准确?
□ 表格标题是否正确?
验证项目5:结论完整性
□ 所有结论是否都已包含?
□ 结论文字是否完整?
□ 结论位置是否合理?
□ 是否有遗漏的结论?
验证项目6:图表完整性
□ 所有需要的图表是否都已生成?
□ 图表类型是否合适?
□ 图表数据是否准确?
□ 图表标题是否正确?
□ 图表标签是否清晰?
错误示例:
原文:平台A估值14-21亿美元,平台B估值150-200万美元,估值差距10-20倍
HTML:平台A估值14-21亿美元,平台B估值150-200万美元(省略了估值差距)
✅ 正确做法:
HTML:平台A估值14-21亿美元,平台B估值150-200万美元,估值差距10-20倍
错误示例:
原文:
1. 商业模式分析
2. 用户定位分析
3. 定价策略分析
HTML:商业模式、用户定位、定价策略分析(3个要点合并为1个)
✅ 正确做法:
HTML:
1. 商业模式分析
2. 用户定位分析
3. 定价策略分析
错误示例:
原文:市场份额从2022年的35%增长到2024年的65%,增长率30个百分点
HTML:市场份额增长到65%(省略了起始数据和增长率)
✅ 正确做法:
HTML:市场份额从2022年的35%增长到2024年的65%,增长率30个百分点
确保生成的HTML文件符合最佳实践,代码质量高,可访问可运行。
□ DOCTYPE声明正确(<!DOCTYPE html>)?
□ HTML标签正确闭合?
□ head标签包含所有必要元素?
□ body标签正确闭合?
□ 所有HTML标签都正确闭合?
□ 使用了语义化标签(nav, section, article等)?
□ 标题层级正确(h1 → h2 → h3)?
□ 列表使用正确(ul, ol, li)?
□ 表格使用正确(table, thead, tbody, tr, td)?
□ 表单元素使用正确(如有)?
□ 所有ID都是唯一的?
□ Class命名合理且一致?
□ ID和Class命名遵循命名规范?
□ 没有使用内联样式(除了特殊情况)?
□ CSS在style标签内?
□ CSS语法正确?
□ 没有语法错误?
□ CSS选择器正确?
□ CSS属性值正确?
□ 使用了定义的CSS变量?
□ 配色方案符合McKinsey标准?
□ 字体大小符合规范?
□ 间距符合标准?
□ 布局符合原则?
□ 包含媒体查询?
□ 媒体查询断点合理?
□ 平板端显示正常?
□ 手机端显示正常?
□ 横竖屏切换正常?
□ JavaScript在script标签内?
□ JavaScript语法正确?
□ 没有语法错误?
□ 变量命名合理?
□ 函数命名合理?
□ 导航功能正常?
□ 上一页/下一页按钮正常?
□ 键盘导航正常?
□ 全屏切换正常?
□ 图表初始化正常?
□ Chart.js CDN引用正确?
□ 所有图表都有对应的canvas元素?
□ Canvas ID唯一?
□ 图表配置正确?
□ 图表数据准确?
□ 图表选项合理?
□ 图片有alt属性(如有)?
□ 颜色对比度符合标准?
□ 字体大小合理?
□ 链接文本清晰?
□ 表单有标签(如有)?
□ CSS和JavaScript内联(减少HTTP请求)?
□ 没有冗余代码?
□ 没有未使用的CSS?
□ 没有未使用的JavaScript?
□ 图表配置优化?
实际运行HTML文件,验证所有功能是否正常工作。
□ HTML文件可以在浏览器中打开?
□ 文件加载速度正常?
□ 没有控制台错误?
□ 页面显示正常?
□ 上一页按钮正常工作?
□ 下一页按钮正常工作?
□ 页面计数器正确显示?
□ 第一页时上一页按钮禁用?
□ 最后一页时下一页按钮禁用?
□ 左箭头键可以上一页?
□ 右箭头键可以下一页?
□ 上箭头键可以上一页?
□ 下箭头键可以下一页?
□ 空格键可以下一页?
□ 全屏按钮正常工作?
□ 进入全屏正常?
□ 退出全屏正常?
□ 全屏下导航正常?
□ 所有图表都可见?
□ 图表宽度正常(不为0)?
□ 图表高度合理(400-500px)?
□ 图表位置正确?
□ 图表数据正确显示?
□ 图表标签清晰?
□ 图表图例正确?
□ 图表标题正确?
□ 鼠标悬停显示数据?
□ 图表动画正常?
□ 图表响应式缩放?
□ 多个图表都正常?
□ 1920x1080分辨率显示正常?
□ 1366x768分辨率显示正常?
□ 导航栏显示正常?
□ 内容布局正常?
□ 1024x768分辨率显示正常?
□ 768x1024分辨率显示正常?
□ 布局自动调整?
□ 字体大小合适?
□ 375x667分辨率显示正常?
□ 414x896分辨率显示正常?
□ 布局自动调整?
□ 字体大小合适?
□ 触摸操作正常?
□ Chrome浏览器正常?
□ Safari浏览器正常?
□ Firefox浏览器正常?
□ Edge浏览器正常?
□ 不同浏览器显示一致?
汇总所有验证结果,生成完整的验收报告。
# Beauty 命令执行完成报告
## 执行摘要
- 文档名称:[文档标题]
- 执行时间:[时间戳]
- 总耗时:[X分钟]
- 执行状态:[成功/失败]
## 步骤执行情况
### 步骤1:文档内容分析合并
- 执行状态:✅ 完成
- 文档类型:[报告/分析/方案/研究]
- 章节数量:[N个H2章节]
- 数据点数量:[N个]
- 关键结论:[N个]
### 步骤2:幻灯片内容转换与拆分
- 执行状态:✅ 完成
- 幻灯片总页数:[N]页
- 页面类型分布:
├─ 封面页:1页
├─ 目录页:[X]页
├─ 章节首页:[N]页
├─ 内容页:[M]页
└─ 结束页:1页
- 内容完整性:100%
- 分页合理性:每页≤8个要点
### 步骤3:HTML样式布局代码规划与生成
- 执行状态:✅ 完成
- 资源读取:4个必读资源100%读取完成
- 代码规划:N页全部规划完成
- 布局选择:平均匹配度92%(85%-100%)
- HTML生成:1200行代码,4个阶段100%完成
- 图表数量:X个Chart.js图表
- 验证结果:6项验证100%通过
- 文件大小:约60KB
- 质量评分:A+(完全符合McKinsey标准)
### 步骤4:代码内容审核检验
- 执行状态:✅ 完成
- 资源使用验证:✅ 通过
- 内容完整性检查:✅ 通过
- 代码质量检查:✅ 通过
- 功能验证:✅ 通过
- 总体验收:✅ 通过
## 验证结果详情
### 资源使用验证
- 步骤2资源:✅ 3个资源全部读取并正确使用
- 步骤3资源:✅ 4个资源全部读取并正确使用
- 回退触发:❌ 无
### 内容完整性检查
- 章节完整性:✅ 100%(N个H2章节全部包含)
- 要点完整性:✅ 100%(M个要点全部包含)
- 数据完整性:✅ 100%(K个数据点全部包含)
- 表格完整性:✅ 100%(L个表格全部包含)
- 结论完整性:✅ 100%(J个结论全部包含)
- 内容压缩:❌ 无
- 内容篡改:❌ 无
### 代码质量检查
- HTML结构:✅ 正确
- CSS样式:✅ 正确
- JavaScript代码:✅ 正确
- 可访问性:✅ 符合标准
- 性能优化:✅ 合理
- 语法错误:❌ 无
- 冗余代码:❌ 无
### 功能验证
- 基本功能:✅ 正常
- 图表显示:✅ 正常
- 响应式设计:✅ 正常
- 浏览器兼容性:✅ 良好
- 功能性问题:❌ 无
## 输出产物
1. 内容结构大纲(步骤1)
2. 幻灯片页面清单(步骤2)
3. 代码规划方案(步骤3)
4. 完整HTML文件(步骤3)
5. 验证报告(步骤4)
## 文件信息
- 文件名:[文档标题]_McKinsey风格演示文稿.html
- 文件大小:约60KB
- 总代码行数:约1200行
- 加载时间:<1秒(本地)
- 依赖项:Chart.js CDN(唯一外部依赖)
## 质量评分
- 内容完整性:A+(100%保留)
- 代码质量:A+(符合最佳实践)
- 设计质量:A+(完全符合McKinsey标准)
- 功能完整性:A+(所有功能正常)
- 总体评分:A+(优秀)
## 建议
- ✅ 可以直接使用
- ✅ 无需修改
- ✅ 符合McKinsey标准
## 下一步
1. 在浏览器中打开HTML文件查看效果
2. 使用键盘方向键或按钮进行导航
3. 点击全屏按钮进入演示模式
4. 如需修改,请返回对应步骤重新执行
---
报告生成时间:[时间戳]
执行状态:✅ 成功完成
以下任一情况发生,必须回退到对应步骤重新执行:
□ 文档分析不完整
□ 章节结构识别错误
□ 数据点遗漏
□ 结论遗漏
□ 资源未读取(chart-selection-guide.md等)
□ 图表选择错误
□ 内容被压缩或省略
□ 分页不合理
□ 页面遗漏
□ 资源未读取(best-practices.md等)
□ HTML结构错误
□ CSS样式错误
□ JavaScript代码错误
□ 图表配置错误
□ 响应式设计问题
发现问题
↓
确定回退目标步骤
↓
记录问题详情
↓
输出回退建议
↓
等待用户确认
↓
返回对应步骤重新执行
↓
重新验证
↓
通过后继续
✅ 步骤4:代码内容审核检验 - 100%完成
🎉 全部4步流程执行完成!
验证摘要:
├─ 资源使用验证:✅ 通过(X/Y项)
├─ 内容完整性检查:✅ 通过(X/Y项)
├─ 代码质量检查:✅ 通过(X/Y项)
├─ 功能验证:✅ 通过(X/Y项)
└─ 总体验收:✅ 通过(X/Y项)
质量评分:A+(优秀/良好/合格/不合格)
执行状态跟踪:
├─ 步骤1:✅ 完成(文档内容分析合并)
├─ 步骤2:✅ 完成(幻灯片内容转换与拆分)
├─ 步骤3:✅ 完成(HTML样式布局代码规划与生成)
└─ 步骤4:✅ 完成(代码内容审核检验)
输出产物:
1. 资源使用验证报告
2. 内容完整性验证报告
3. 代码质量验证报告
4. 功能验证报告
5. 最终验收报告
文件信息:
- 文件名:[文档标题]_McKinsey风格演示文稿.html
- 文件路径:[完整路径]
- 文件大小:约XXKB
- 总代码行数:约XXXX行
- 幻灯片页数:N页
- 图表数量:M个
建议:
✅ 可以直接使用
✅ 无需修改
✅ 符合McKinsey标准
🎯 下一步操作:
1. 在浏览器中打开HTML文件查看效果
2. 使用键盘方向键或按钮进行导航
3. 点击全屏按钮进入演示模式
4. 如需修改,请返回对应步骤重新执行
Beauty命令执行完成!
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.