一键导入
front-end-engineering-report
审查前端项目的工程化配置质量,基于审查结果和模板生成可视化的HTML报告。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
审查前端项目的工程化配置质量,基于审查结果和模板生成可视化的HTML报告。
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
生成可读性报告。当用户请求为项目源代码生成可读性报告时,使用此功能。输出名为 readability-report.html 的单页 HTML 文件作为可读性报告,该报告集成了 Node.js 脚本和 HTML 模板。
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
| name | front-end-engineering-report |
| description | 审查前端项目的工程化配置质量,基于审查结果和模板生成可视化的HTML报告。 |
| license | Complete terms in LICENSE.txt |
.nvmrc 文件package.json 的 engines 字段、 packageManager 字段 和 preinstall 钩子| 等级 | 分数范围 | 说明 |
|---|---|---|
| 完整 | 90-100 | 配置文件存在且规则完善 |
| 部分 | 50-89 | 配置存在但不完整 |
| 缺失 | 0-49 | 未配置该项功能 |
使用 Explore agent 并行探索:
读取各配置文件内容,整理为以下数据结构:
{
categories: [
{
name: "类别名称", // 固定值: "代码质量" | "Git 工作流" | "版本管理" | "文档质量"
icon: "fa-icon", // Font Awesome icon class,如 "fa-code" | "fa-git" | "fa-cubes" | "fa-file-text-o"
configs: [
{
name: "配置项名称", // 类别下的具体配置项名称
tool: "工具名称", // 使用的工具名称,如 "Biome" | "ESLint" | "Husky" | "Commitlint" 等
status: "complete|partial|missing", // 只能是这三个值之一
score: 0 - 100, // 数字类型,0 到 100 之间的整数
files: ["配置文件路径"], // 字符串数组,相关配置文件的相对路径
description: "说明", // 配置状态的文字描述
},
],
},
];
}
重要约束说明:
固定类别结构:必须包含以下 4 个类别,类别名称和 icon 不可随意更改:
代码质量 (icon: "fa-code") - 包含语法校验、代码格式化等配置Git 工作流 (icon: "fa-git") - 包含提交规范、pre-commit hook 等配置版本管理 (icon: "fa-cubes") - 包含 Node.js 版本锁定、包管理器约束等文档质量 (icon: "fa-file-text-o") - 包含 README.md 等文档status 字段约束:只能是 "complete"、"partial" 或 "missing" 三个值之一,不能使用其他值
score 字段约束:必须是 0-100 的整数,且与 status 字段对应:
complete → 90-100partial → 50-89missing → 0-49.cqm/engineering/,如果不存在.cqm/engineering/engineering-report.html.claude\skills\front-end-engineering-report\template\engineering-report-template.html