Agent skill
verify-ui
Build assets, run server, and get visual approval before committing observable changes.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/verify-ui
SKILL.md
When to use
- Before committing any changes that affect observable UI behavior
- This includes: templates, components, styles, handlers, models surfaced in UI, migrations
- When CLAUDE.md or
/commitskill directs you here
Prerequisites
- Changes to verify should already be implemented (not staged/committed yet)
Workflow
-
Build static assets:
- Run
templ generateto regenerate templ files - Run
make cssto rebuild Tailwind CSS - Report any errors and stop if build fails
- Run
-
Database migrations (if applicable):
- Check for pending migrations:
make migrate-status - If pending, ask user before running:
make migrate - Skip if no database changes
- Check for pending migrations:
-
Start server:
- Run
go run ./cmd/tfo-webappin background - Wait for server to be ready (check output for listening message)
- Report the URL (typically http://localhost:8080)
- Run
-
Request visual inspection:
- Tell user: "Server running at http://localhost:8080 - please verify the UI"
- Use AskUserQuestion to get approval:
- "Does the UI look correct?"
- Options: "Yes, looks good" / "No, needs changes"
-
Handle response:
- If approved: Stop server, report ready to commit
- If not approved: Stop server, ask what needs to change, do NOT proceed to commit
-
Cleanup:
- Always stop the background server when done
Output
- Commands run and their outcomes
- Server URL for inspection
- User's verification decision
- Clear next step (proceed to commit or fix issues)
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?