Use when ClawHub UI changes need visual proof, before/after comparison, new-feature screenshots, temporary Playwright scenarios, or Crabbox desktop recordings.
复制安装指令,让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "clawhub-ui-proof" 技能: 1. 下载 https://raw.githubusercontent.com/openclaw/clawhub/main/.agents/skills/clawhub-ui-proof/SKILL.md 2. 保存为 ~/.claude/skills/clawhub-ui-proof/SKILL.md 3. 装好后重载技能,告诉我可以用了
Use proof:ui for human-readable UI evidence. The agent should write a
temporary scenario for the feature instead of manually clicking through the UI.
--mode before-after for bug fixes, regressions, changed copy, changed
layout, or anything where main-vs-candidate comparison helps. This is the
default and runs baseline origin/main plus the candidate worktree.--mode feature for new pages, new workflows, or new UI states that do
not exist on main. This runs only the candidate lane.--seed-command '<command>' when the scenario needs fixtures.--dev-auth or explicit --env KEY=VALUE entries
only for scenarios that need development auth controls.proof:ui to inspect contributor-provided screenshots, videos, or
logs. Review those artifacts directly and cite what they prove or fail to
prove.Create a temporary scenario under .artifacts/proof-scenarios/:
export default async function scenario({ baseURL, expect, page, proof }) {
await proof.step("01 skills list", async () => {
await page.goto(`${baseURL}/skills`);
await expect(page.getByText("Skills")).toBeVisible();
});
}
Each proof.step() captures a screenshot after the step. The runner compares
origin/main to the current worktree by default in before-after mode.
Dry-run the plan first. Before/after mode is the default:
bun run proof:ui -- --mode before-after --scenario .artifacts/proof-scenarios/my-fix.pw.ts --dry-run
For new feature proof, run candidate-only:
bun run proof:ui -- --mode feature --scenario .artifacts/proof-scenarios/my-feature.pw.ts --dry-run
Run real desktop proof on a Crabbox-owned provider:
bun run proof:ui -- --mode before-after --scenario .artifacts/proof-scenarios/my-fix.pw.ts --provider hetzner
Run proof with seeded lane-local Convex fixtures:
bun run proof:ui -- --mode before-after --seed-command 'bunx convex run --no-push devSeed:seedNixSkills' --scenario .artifacts/proof-scenarios/my-fix.pw.ts --provider hetzner
Artifacts are written under .artifacts/clawhub-ui-proof/<timestamp>/ with
screenshots, videos when available, summary.json, and report.md. Feature
mode has only candidate artifacts. Promote only broadly useful scenarios into
committed e2e/proofs/.
When UI proof should appear on a GitHub PR, publish the completed proof run instead of posting local paths:
bun run proof:publish -- --proof-dir .artifacts/clawhub-ui-proof/<timestamp> --target-pr <number>
proof:publish copies the selected screenshots, video preview GIFs when
present, MP4s, summary.json, and report.md to the qa-artifacts branch,
then upserts a marker-backed PR comment with inline screenshots/previews and
linked MP4s. Use --dry-run first when drafting or checking the comment body.
When proof images or screenshots should appear in GitHub issues, share
here.now links instead of uploading image attachments directly to GitHub.
Include a short note about what the linked image proves.
Sets up Convex auth, identity mapping, and access control. Use for login, auth providers, users tables, protected functions, or roles in a Convex app.
Routes general Convex requests to the right project skill. Use when the user asks which Convex skill to use or gives an underspecified Convex app task.
Use for ClawHub staff moderation actions with the repo-local clawhub-mod tool: unhide skills, ban or unban users, change roles, and verify moderation state.
Use when reviewing, triaging, validating, or discussing ClawHub GitHub issues or pull requests, including author context, CI, UI proof, evidence, labels, close decisions, and maintainer handoff.
Builds reusable Convex components with isolated tables and app-facing APIs. Use for new components, reusable backend modules, integrations, or component boundary work.
Plans Convex schema and data migrations with widen-migrate-narrow and @convex-dev/migrations. Use for breaking schema changes, backfills, table reshaping, or zero-downtime rollouts.