frontend-verify

仓库创建 2026年7月25日最近提交 4 天前SkillHot 收录 3 天前

这个 Skill 做什么

在真实浏览器里验证前端改动：对不同视口截图、抓取控制台错误并生成 accessibility 快照，发现问题就修复再复验，直到页面通过检查为止。修改 UI、上线前或页面“看着怪”时用，默认只检查 diff 涉及的路由。工作流程是 capture → review → fix → re-capture，推荐用 Playwright CLI 输出可复现的证据。

▸ 展开 SKILL.md 英文原文

Verifies frontend changes in a real browser — screenshots at multiple viewports, console errors, accessibility snapshot — then fixes what it finds and re-verifies. Scopes to routes touched by the current diff when no URL is given. Use after changing UI code, before shipping a frontend change, when a page "looks wrong", or when asked whether something actually works in the browser. Trigger: "check the UI", "does this look right", "screenshot the page", "verify the frontend", "review the design", "test it in the browser".

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/makieali/claude-code-engineer/main/skills/frontend-verify/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/makieali/claude-code-engineer/main/skills/frontend-verify/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Frontend Verify — Look At It, Then Fix It

A frontend change that passed unit tests and was never opened in a browser is unverified.
This closes that loop: **capture → review → fix → re-capture** until clean.

**Use the CLI, not the MCP.** Playwright CLI writes screenshots and accessibility snapshots
to disk and lets you read only what you need. The MCP streams them into context — roughly
4× the tokens for the same task. Claude Code has filesystem access, so the CLI is the right
tool. See `references/setup.md` if it isn't installed.

## Step 1: Scope

**URL given?** Use it.

**No URL, on a feature branch?** Diff-aware mode:

```bash
~/.claude/skills/frontend-verify/scripts/changed-routes.s

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有