重要提示:本站仅作 Skill 资源导航与收录,正文以 GitHub 原仓库为准,版权归原项目所有。
以下为摘要预览,完整内容请查看 GitHub 原文。
Front-End Checklist Global Audit
This skill connects one entry point to all 385 Front-End Checklist rules.
Use MCP retrieval instead of trying to recall rules from memory.
Workflow
- Start with
review_code for pasted code, file contents, or focused code review.
- Use
audit_url for a public page when you need rendered HTML audited quickly.
- Narrow or expand scope with
search_rules, list_categories, get_workflow, or get_quick_reference.
- For each issue, use
get_rule, fix_rule, or explain_rule to give exact remediation.
- If a checklist is a better fit than ad hoc search, use
get_checklist_rules.
Audit Stance
- Be conservative. Prefer fewer, stronger findings over speculative breadth.
- Only report an issue when the code or markup shown supports it directly.
- In small component or route audits, prefer the strongest 1-2 supported findings over listing every possible enhancement.
- Do not infer business intent from a snippet alone. Example: do not assume a field is required unless the code or surrounding copy makes that explicit.
- Do not treat
alt="" as an issue by default; empty alt can be correct for decorative images.
- When an image is exp…
以下为摘要预览,完整内容请查看 GitHub 原文。
Front-End Checklist 全局审计
本技能通过单一入口连接全部 385 条 Front-End Checklist 规则。
应使用 MCP 检索,而不是尝试从记忆中回忆规则。
工作流程
- 对粘贴的代码、文件内容或聚焦的代码评审,从
review_code 开始。
- 当你需要快速审计已渲染的 HTML 时,对公开页面使用
audit_url。
- 使用
search_rules、list_categories、get_workflow 或 get_quick_reference 收窄或扩大范围。
- 针对每个问题,使用
get_rule、fix_rule 或 explain_rule 给出精确的修复建议。
- 如果清单比对临时搜索更合适,请使用
get_checklist_rules。
审计立场
- 保持审慎。宁可少而强,也不要宽泛而推测。
- 仅在代码或标记直接支持时报告问题。
- 在小组件或路由审计中,优先给出最强的 1-2 个有据可查的发现,而不是列出所有可能的改进项。
- 不要仅凭代码片段推测业务意图。例如:除非代码或周围文案明确表明,否则不要假设某个字段是必填的。
- 默认情况下不要把
alt="" 视为问题;空 alt 对于装饰性图片可能是正确的。
- 当一张图片明确是装饰性的时,除非片段显示出具体问题而非假设性优化,否则应优先给出零发现。
- 如果你看到像
<img ... alt="" aria-hidden="true"> 这样孤立的装饰性图片,除非片段同时显示布局不稳定的真实证据,否则应将其视为零问题模式。
- 当片段本身合理时,不要将低置信度的偏好性调整当作发现提出。宁可保持沉默,也不要进行薄弱的挑剔。
- 不要仅凭
autocomplete="off" 本身将其视为缺陷,除非片段显示出更强的用户伤害或安全原因。
- 在链接预览卡片中,当附近可见文本已经标明目标时,装饰性的预览图片和 favicon 可能是安全的。
- 除非片段包含真正的文档上下文(如
<html>、<head> 或 <body>),否则不要将 React 或 JSX 片段视为完整的 HTML 文档。
- 在审查 Next.js 或由元数据驱动的页面文件时,先考虑
metadata、viewport 和 generateMetadata API,再断言 head 标签的缺失。
覆盖检查清单
- 表单:检查 label、可访问的按钮名称、明确的按钮类型、
autocomplete 提示、密码字段的 autocomplete,以及代码中明确体现的验证语义。
- 图片:检查
width/height、loading、`srcs…