agentleFS
Sign inStart free
rpraharajrpraharaj/ai-engineer/skills/verify-ui/SKILL.md

verify-ui

Skill1 starsChanged 15 days agoMITView on GitHub

Exercise a UI change the way a user would — the changed flow, shared routes that read the same state, empty/error/loading states, and desktop plus narrow viewports. Use when the change touches UI, layout, CSS, routes, views, or client state, when ready-to-merge dispatches it, or the user asks to verify the UI. Do not stop at a single screenshot.

6 other projects use a version of this, 1 of them edited.

Adopted by

Most recently taken up by

The file

We split this skill into the rules it gives an agent

5 rules. 0 are common, 2 are distinctive, and 3 are very specific to this project.

  • 0

    Common

    Most of the 4 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Read AGENTS.md if present.

    line 14
  2. Very specific:

    Follow engineering-bar Shared procedures for scope and evidence, reusing the caller's recorded scope when provided.

    line 18
  3. Distinctive:

    If there is no UI in the diff, report n/a and stop.

    line 20
  4. Distinctive:

    Use the first that exists in this session:

    line 24
  5. Very specific:

    If the user asked to fix fails, use implement-change and re-run this skill.

    line 61

“Common” is measured: kept by at least 6 in 10 of the 4 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Verify UI

Prove the changed UI still works for a person. A render or screenshot of the happy path is not enough. Do not add features.

Read AGENTS.md if present. Load engineering-bar (paths in that skill) and apply the UI section.

Collect

Follow engineering-bar Shared procedures for scope and evidence, reusing the caller's recorded scope when provided. Inventory routes, screens, components, CSS, and client state this change touches.

If there is no UI in the diff, report n/a and stop.

How to drive it

Use the first that exists in this session:

  1. A browser or device preview tool
  2. This repo's existing UI/e2e runner from AGENTS.md / CI
  3. The running app (Run in AGENTS.md) plus curl/script against the pages
  4. A render or component test this repo already has

Use engineering-bar shared evidence rules for what each method can prove. Record a result per applicable flow, state, viewport, and accessibility requirement. HTTP or render checks may supply partial evidence; they cannot substitute for unexercised browser interaction or layout. If an applicable requirement cannot be exercised, overall status is unverified unless another check has failed. List the exact remaining steps; do not invent a browser harness.

Exercise

Walk as a user, not as the author. Cover every item that applies:

  1. Changed flow — click, type, submit, navigate the feature end to end
  2. Shared surfaces — every route or screen that reads the same state, data, or component
  3. Edge states — empty, error, loading, permission-denied, and flag/route variants this change can hit
  4. Viewports — a desktop width and a narrow (~375px) width when layout or CSS changed
  5. Bar UI — new controls have a name, are keyboard-reachable, and are not unreadable; no layout jump from missing sizes

Hunt regressions. A change that works on one screen and breaks another is a fail.

Mobile/native: use this repo's simulator, preview, or device script if one exists; otherwise unverified for device chrome.

Output

## Verify UI: pass | fail | unverified | n/a

- Surfaces:
- How driven:
- Exercised:
- Viewports:
- Bar UI:
- Fails:
- Not verified:

If the user asked to fix fails, use implement-change and re-run this skill.

Done

The output above. Do not claim the UI works if you only looked at code or one screenshot.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free