菜单
Launch DevFlare and actually look at it — walk the key routes in a browser, screenshot them, and check the shell renders correctly at desktop and mobile widths. Use after any change to the layout, sidebar, navbar, styles.css or a Volt component.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Andersseen/devflare --skill ui-check命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Verify a Cloudflare deploy will actually succeed before merging to main — token account and scopes, D1 bindings, required secrets, pending migrations, and a dry-run of both workers.
Add a D1 schema migration to dev-auth or devflare — pick the right app, number the file, write replayable SQL, sync the Drizzle schema when it applies, and verify locally before it ever touches production.
Scaffold a new DevFlare browser tool end to end — @org/core service + spec, the page component, and all four registration points (barrel export, router, shell navigation catalog, lucide icon).
基于 SOC 职业分类
正在显示 SKILL.md
| name | ui-check |
| description | Launch DevFlare and actually look at it — walk the key routes in a browser, screenshot them, and check the shell renders correctly at desktop and mobile widths. Use after any change to the layout, sidebar, navbar, styles.css or a Volt component. |
| disable-model-invocation | true |
pnpm check passing tells you nothing about whether the app looks right. The
VoltUI regression of 2026-07-28 shipped with format, lint, typecheck, test and
build all green, while the sidebar rendered on top of the main content. This
skill is the missing step.
Needs the Playwright MCP server (.mcp.json → playwright). If no
mcp__playwright__* tools are available, stop and tell the user to restart
Claude Code — MCP servers are only loaded at startup. Do not fall back to
guessing from the HTML.
pnpm dev:app
Run it in the background. Wait for the port rather than sleeping:
curl -s --retry-connrefused --retry 40 --retry-delay 2 -o /dev/null \
-w '%{http_code}\n' http://localhost:4200/
Use pnpm dev:all instead if the change touches auth — that also brings up
dev-auth on :8787. Test account: test@devflare.com / TestPass123
(pnpm seed:user if it does not exist yet).
Always stop the server before finishing, even if the check fails.
Minimum set — add any route the change actually touched:
| Route | What must be true |
|---|---|
/ | Hero + card grid; sidebar shows Platform group |
/tools | Tool grid; sidebar switches to the Tools group |
/tools/qr-generator | Canonical two-column tool page |
/settings | Volt tabs, form fields |
/login | Renders standalone, without the app shell |
At each route take a screenshot and look at it. Then check the console:
mcp__playwright__browser_console_messages
Report any error or warning. A clean console is part of passing.
Shell integrity — this is where the known failure mode lives:
md:relative, w-72) — see the @source trap in
.claude/skills/volt-ui/SKILL.md.<main>
scrolls.Volt components: cards have background and padding, focus rings are visible when tabbing, no unstyled flashes of raw markup.
Check at least 1440×900 and 390×844. At mobile width:
The app follows prefers-color-scheme (there is no in-app toggle). Emulate both
and confirm text stays readable and no element keeps a hardcoded colour that
only works in one theme.
Say plainly what you saw at each route, and attach the screenshots. If something is wrong, describe the visual symptom and name the suspected cause, then stop — do not fix it in the same pass unless the user asked you to.
If you could not check something (route needs auth, a browser API is unavailable), say so explicitly. Never report a route as verified when you did not look at it.