前端代码规范走查:规范不该只活在文档里

规范检查 · 代码走查 · 无障碍兜底 · 3 场景 × 6 个可一键安装的真实 Skill

掘技出品

你是不是也遇到过这些问题

海外项目上线前突然被玩家狂喷「轮椅玩家根本玩不了」,复盘才发现漏掉了 WCAG 2.1 里最关键的操作容错设计——只关注色盲模式和高对比度是不够的。
小红书 · 游戏QA踩坑实录
代码审计就像给代码做全面体检:查漏洞、查风险、查不规范。但现实是 reviewer 永远不够用,大部分 PR 都是「看了眼 diff 就 Approve」。
小红书 · 代码审计从业者
前端编码规范文档写了三万字,新人入职第一周看完,第二周开始照旧乱写。规范这种东西,靠自觉是不行的,得有东西在提交时拦住你。
小红书 · 前端团队leader

这些散布在小红书 / 知乎 / 即刻 / X 上的真实心声,拼在一起就是大家做「自动化前端代码规范检查和代码走查」时的日常痛点。

懒人方案 · 推荐
装一次掘技,让 Agent 自己找 Skill
你要做的「自动化前端代码规范检查和代码走查」任务,对应的 Skill 觅游都有。但你不需要一个个找 —— 装了掘技(deep-skill-finder)后,Agent 接到任务会自动搜索觅游 50000+ Skill 库,把匹配当前任务的方法推荐给你。你只管说要做什么,匹配 Skill 的事交给 Agent。
复制口令 → 粘贴给 Claude Code / Codex / Cursor / WorkBuddy / CatPaw 等 · Agent 会自动完成安装:
请安装 deep-skill-finder 技能:从 https://www.meyo.life/skill-finder 下载技能压缩包,解压到本地技能目录并启用。

也可以往下看常用场景 Skill。想深入了解掘技 → meyo.life/skill

代码规范场景 × Skill 推荐

可以都装,也可以看名字挑 1 到 2 个装。不用担心装错,免费,不满意随时卸。

规范自动检查

让 Agent 按团队规范逐条核对代码

适合规范文档写了没人看的团队

React/TS 模块架构规范
按规则逐条核对导入、导出、类型、文件放置,可选跑 npm lint 验证,13679 次安装验证过的规范集
13679 人在用
识别项目类型自动选工具
识别项目类型后自动跑 ruff / ESLint 生成 Markdown 报告,可选自动修复格式问题
1015 人在用

提交前代码走查

PR 合并前自动生成分级审查报告

适合 reviewer 不够用的团队

6 维清单分级走查
按 severity-rubric 和正确性、类型安全、可访问性、架构、测试、风险 6 维清单审查变更,输出带文件行号的分级报告
120 人在用
多维评审出分级报告
从架构、类型安全、样式、可访问性等多维评审前端代码,生成 Markdown 分级报告存到本地
634 人在用

无障碍与走查兜底

WCAG 标准检查,别等上线被玩家喷

适合出海项目和维护老代码的人

axe-core / Pa11y 自动扫描
7 步流程配置 axe-core / Pa11y / Lighthouse 自动扫描,验证键盘导航和 ARIA 合规
2528 人在用
本地正则扫 95+ 模式
本地 shell 脚本扫描 HTML / JSX / Vue / Svelte,覆盖 WCAG 2.1 违规和缺失 ARIA
632 人在用

💬 加入掘技社群

和其他掘技用户交流「自动化前端代码规范检查和代码走查」经验 · 掘技团队会解答装配问题

加入掘技社群微信群二维码
进群备注你做的事

常见问题

Q: 团队已经有规范文档了,为什么还需要 Skill?
A: 规范文档的问题是它不会自己执行。frontend-module-standards 这类 Skill 把规范变成 Agent 可以逐条核对的检查项:你提交代码时它自动按规则核对导入、类型、文件放置,违规当场指出。文档管「知道」,Skill 管「做到」。
Q: Agent 走查和人工 review 比,靠谱吗?
A: 定位是互补不是替代。Agent 走查强在不知疲倦、覆盖稳定:6 维清单每条 PR 都全量过一遍,不会因为周五下午就放水;人工 review 仍然负责业务逻辑和产品判断。实践里常见组合是 Agent 先出分级报告,人只看 CRITICAL 和 HIGH。
Q: ESLint 我们项目早配了,装 Skill 还有什么用?
A: ESLint 抓的是静态规则违规,抓不到架构层面的坏味道和无障碍问题。frontend-code-review 会在 lint 之上从架构、类型安全、可访问性等维度再审一遍;scanning-accessibility 补上 WCAG 检查。多层防线各自管一段。
Q: 无障碍检查是不是只有出海团队才需要?
A: 不是。国内信息无障碍法规在逐步落地,政府和国企项目已经有强制要求;而且很多 WCAG 检查项(对比度、键盘可达、容错设计)本身就是可用性问题。accesslint 本地就能跑,成本很低,建议当默认项。
Q: 这些走查会不会很慢,拖垮提交节奏?
A: 不会。增量方案是主流:fecodereview 和 incremental-code-review 都只审 diff 新增行,秒级到分钟级完成。全量走查建议放在 CI 里夜间跑,提交时只跑增量。配合 ci_gate 的阈值退出码,低危警告不拦截。
Q: 不会写规则,能直接用这些 Skill 吗?
A: 能。这些 Skill 都自带规则集,开箱即用;有定制需求时再把团队规范文档喂给 Agent,让它按你的规则走查。先跑起来再调优,比从零写一套 lint 配置现实得多。
Q: 掘技在代码规范这件事里扮演什么角色?
A: 掘技(Deep Skill Finder)是技能发现引擎:你说「帮我走查这个 PR」「检查一下有没有违反无障碍规范」,它自动匹配并推荐对应的 Skill。你不需要记住哪个 Skill 管哪段——任务描述到位,工具它自己找。

相关阅读

GitHub 代码安全扫描:密钥与依赖漏洞排查 多 Agent 协作:组建你的 AI 团队 多 Agent 协作进阶玩法 开发者用 Codex 装什么 Skill 3 句触发词让 Codex 自动找 Skill Agent 主动找 Skill 是什么