Installs into .claude/skills of the current project.
Are you the author of Visual Evidence Gate?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/hashgraph-online-visual-evidence-gate)
---
name: visual-evidence-gate
description: Use after requirements are approved and before UI implementation when a product feature needs Pencil or Figma visual design evidence.
---
# Visual Evidence Gate
This skill turns Pencil/Figma images into a machine-reviewable handoff contract. It is the bridge between requirement approval, visual design, and HeroUI implementation.
## Input Artifacts
- `00-stage.json`
- `00-artifact-registry.json`
- Product, IA, interaction, state, frontend/HeroUI, and acceptance contracts
- `10-visual-confirmation-plan.md`
- Pencil or Figma exports and approval record
## Output Artifact
- `docs/full-stack-development/requirements/<feature-slug>/04-visual/visual-evidence.md`
## Required MCP Tool
- `generate_design_board_inventory`
- `review_visual_evidence`
- `review_stage_gate`
## Hard Stops
- Do not start Pencil/Figma until requirement approval and the visual-design stage gate pass.
- Do not start UI implementation from a single screenshot, chat approval, or desktop-only export.
- Do not accept visual approval without desktop, mobile, component-detail, and state-matrix boards.
- Do not reuse stale visuals after `00-stage.json.latestChangeId` changes.
- Do not let `approvals.visualDesignApproved: true` bypass `review_visual_evidence`.
## Pressure Test Responsibility
- Desktop-only export must block.
- Missing component-detail coverage must block.
- Missing state-matrix coverage must block.
- Missing user approval record must block.
- Stale change id must block after a requirement change.
## Next Gate
- `implementation` may start only when `review_visual_evidence.status` is `pass` and `review_stage_gate` also passes for `targetStage: "implementation"`.
