proofline
TR

visual-proof

Purpose

Measures UI states with existing browser tools, including an optional design audit and source lint, and records judged concerns separately.

Source Skill purpose

When to use it

Use visual-proof when a UI change needs evidence from a browser already available in the project or machine. It measures the changed screens, states and viewports against written thresholds for overflow, visible controls, contrast, target size, focus and public-page behavior. A screenshot with a hash accompanies each measurement. For complex work it also records judged observations about hierarchy and typography separately from measurements. A state counts only when it actually renders, and missing browser tooling yields an unsupported result rather than a pass.

Source Skill purpose

How it works

Steps of the skill, in source orderEach numbered step follows the skill definition and links to its source.1. Define the visual scopeFlow2. Detect browser toolingFlow3. Serve local pagesFlow4. Write the measurement configFlow5. Measure each stateFlow6. Judge complex layoutsFlow7. Validate the reportFlow
Steps of the skill, in source order

Source Flow

  1. Define the visual scope Read the task, UI spec and diff; list changed screens, states, viewports and criteria.

    Source Flow

  2. Detect browser tooling Find an installed browser or existing browser-test dependency before choosing the measurement path.

    Source Flow

  3. Serve local pages Open static files or a local project server, without accessing deployed or third-party pages.

    Source Flow

  4. Write the measurement config Describe the local base URL, viewports, screens and reachable states in a config file.

    Source Flow

  5. Measure each state Run the browser probe and save threshold values with screenshots and hashes.

    Source Flow

  6. Judge complex layouts For COMPLEX or CRITICAL work, record visual judgments and the 14-point critique; run source lint and include snapshot regression when available.

    Source Flow

  7. Validate the report Run the visual validator and report the measured verdict with any unsupported checks.

    Source Flow

Key rules

  • Use only browser tooling already present in the project or machine; never install a new runner.

    Source Hard rules

  • Load only local project pages, never a deployed site or a third-party URL.

    Source Hard rules

  • Keep measurements separate from visual judgments; only measured checks can close the gate.

    Source Hard rules

  • Prove each state by rendering its unique selector; an unseen state is not measured.

    Source Hard rules

  • Measure the optional design group and run source lint; report unmeasured items with their reasons.

    Source Hard rules

Output and gate

Output

  • Save a machine report, screenshots, a readable report, configuration and ledger for the visual review.

    Source Output and gate rule

  • A successful result has no blocking measured rows.

    Source Output and gate rule

  • When browser tooling is unavailable, report unsupported checks rather than claiming a pass.

    Source Output and gate rule

Gate

  • Successful measurements and no blocking rows yield a pass.

    Source Output and gate rule

  • A measured error, an unsuccessful public-page check or a written-criterion violation yields a fail.

    Source Output and gate rule

  • Missing tooling yields unsupported, with the unproven checks named explicitly.

    Source Output and gate rule

Source

Source Skill definition

← All skills