Skills Guide

UI Verification Before Commit

VerifiedSafe

Builds project assets, starts a local server, and prompts the user to verify the UI visually before committing. Helps catch UI regressions before they are committed. Used when changes affect templates, components, styles, or other observable UI behavior.

Download and use
Sby Skills Guide Bot
TestingIntermediate
6/2/2026
Claude Code
#verify-ui#visual-approval#templ#tailwind-css#go

Recommended for

Claude CodeTest generationQA / test engineer

Automated summary

This skill builds static assets, starts the server, and requests visual approval before committing observable UI changes.

Strengths

  • Integrates visual verification into the commit workflow.
  • Automates build and migration steps.
  • Reduces risk of deploying unverified UI changes.
  • Works with Go projects using Templ and Tailwind CSS.

Limitations

  • Requires the server to be accessible locally on port 8080.
  • Depends on human approval, which can slow down the process.
  • Does not cover automated testing (e.g., UI tests).
When to use it

Use this skill before every commit that modifies observable UI behavior (components, templates, styles, migrations).

When not to use it

Do not use for purely backend changes or when no visual impact exists, nor when human verification is unavailable (e.g., CI/CD).

Security analysis

Safe
Quality score90/100

The skill runs local build commands and a local development server; no destructive, exfiltrating, or obfuscated actions. User is prompted before database migrations. It is safe for its intended use.

No concerns found

How this analysis is made

Examples

Verify UI before commit
I have changes to the homepage template and some CSS. Please verify the UI before I commit.
Build and check UI
Run the verify-ui workflow for my current changes.

name: verify-ui description: Build assets, run server, and get visual approval before committing observable changes.

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 /commit skill directs you here

Prerequisites

  • Changes to verify should already be implemented (not staged/committed yet)

Workflow

  1. Build static assets:

    • Run templ generate to regenerate templ files
    • Run make css to rebuild Tailwind CSS
    • Report any errors and stop if build fails

  2. Database migrations (if applicable):

    • Check for pending migrations: make migrate-status
    • If pending, ask user before running: make migrate
    • Skip if no database changes

  3. Start server:

    • Run go run ./cmd/tfo-webapp in background
    • Wait for server to be ready (check output for listening message)
    • Report the URL (typically http://localhost:8080)

  4. 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"

  5. 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

  6. 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)

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/ui-verification-before-commit-mmbizip5' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/ui-verification-before-commit-mmbizip5/download' --output '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md.part' && mv '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md.part' '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

Original excerpt: Prerequisites
  • Changes to verify should already be implemented (not staged/committed yet)

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md' && test -s '.skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/verify-ui' && cp -R '.skill-downloads/ui-verification-before-commit-mmbizip5' '.claude/skills/verify-ui'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/ui-verification-before-commit-mmbizip5'

openskills read 'ui-verification-before-commit-mmbizip5'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/ui-verification-before-commit-mmbizip5/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

ClickHouse Performance Comparison

Testing

Evaluate ClickHouse performance test results, check PR performance changes, compare with history, and assess whether a result is actionable.

Claude CodeintermediateSafe 49,547
Skills Guide Bot

Analyze CI Performance Reports

Testing

Analyze CI performance comparison reports for a ClickHouse PR. Cross-references master history to distinguish real regressions from flaky tests.

Claude CodeintermediateSafe 49,516
Skills Guide Bot

Santa Method

Testing

Multi-agent adversarial verification with two independent reviewers. Output is checked twice and iteratively fixed until both pass before shipping.

Claude CodeCodexCursorintermediateSafe 244,766
Skills Guide Bot