Skills for agentic development

Drop-in workflows a coding agent runs in your repo: the loop that takes a ticket to a merged PR, and the visual testing that keeps the UI honest. Free to copy, no account needed.

Agentic development

The loop that takes a ticket to a merged PR: implement, review, verify, ship - each step a skill.

Factory

The umbrella loop: it clarifies the ask, triages the change to run only the steps it needs, implements to your conventions, then drives it to a green, review-clean PR by composing the other skills. A one-line fix skips the design and e2e steps; a cross-cutting change gets both. It never auto-merges; the terminal state is ready for you to click merge.

OrchestrationEnd to end

Design

Drafts a design for a feature, has Claude and Codex critique it in parallel against a rubric, then one architect pass checks every critique and revises the design, looping until a round comes back clean. A critique only counts if it quotes the design and names the requirement it breaks, so taste gets dropped.

ArchitectureMulti-model

Review loop

Runs a multi-model review over your working tree, applies the verified fixes, and re-reviews, because the fix that clears one issue often introduces the next. It stops once a round finds nothing that matters, and sweeps for missing stories, tests and stale comments in one pass instead of one per round.

ReviewMulti-model

/review-multi-model

Multi-model review

Runs your diff through two independent reviewers in parallel - a Claude reviewer and OpenAI Codex - then verifies every finding against the actual code and merges them into one de-duplicated report, tagged by which models agreed. Optional one-shot fix.

ReviewCodex + Claude

E2E verify

Starts your app and drives the real thing with Playwright, so 'it's done' means the feature actually works in the product. This is the check that catches a component and an endpoint that each pass their own tests but don't talk to each other.

Babysit a PR

Opens the PR from your branch, then polls CI and reacts to every failure - reading the logs, fixing locally, pushing - until every check is green and the PR is ready to merge. It never approves or merges; that stays a human step.

Tuning the loop

Make the system better at its own job: turn corrections into rules, and grade finished runs so the next one starts higher.

Add rule

Turns a correction - yours in the terminal, or a reviewer's on a PR - into a durable convention line and, when it's mechanical, a real lint guard that goes red next time. A rule isn't real until something can go red on it.

RulesGuardrails

Evaluate a run

Hands a finished session to a fresh model that never saw it and asks how well the loop actually ran: did it follow the process, honor the conventions, write real tests, ask at the right moments. Then it routes each finding to a durable fix.

Visual testing

Make screenshot regression testing work with agents: author stories, kill flake, triage diffs.

VitestStorybookPlaywrightScreenshots

Making UI changes

A coding agent will change one button and reflow a page it never opened. This is the discipline that stops it: reuse before you create, add the story or capture in the same change, check the blast radius on anything shared, and prove the change with a visual test before calling it done. Wire it into your AGENTS.md / CLAUDE.md so the agent reads it on every UI change.

AuthoringAgentsGuardrail

VitestStorybookPlaywright

Set up visual testing

End-to-end onboarding: detect or scaffold the capture path, install the CLI and wire it into CI, and author the first stories the economical, deterministic way from the start.

SetupCIOnboarding

8×fewer snapshots

Write economical visual tests

Every per-snapshot tool renders and bills per story or test, so the snapshot count is the cost and the noise surface. This collapses an exploding variant matrix into a handful of shots while keeping full coverage.

CostCoverageSnapshots

Deterministic Storybook stories

Focuses only on the run-to-run variation the capturer cannot neutralize from outside your app: the clock, infinite JS animations, live data, and non-Math.random randomness. It deliberately skips what UI Verify already handles for you.

StorybookDeterminismFlake

Deterministic Playwright captures

For @uiverify/playwright archive-replay captures: whatever the page was at capture time is baked in forever, so the fix is to drive the page to one canonical state before the snapshot. A symptom-to-lever checklist for the variation you probably have.

PlaywrightDeterminismFlake

Deterministic Vitest captures

For @uiverify/vitest archive-replay captures: the DOM your browser-mode test renders is baked into a static archive at test time, so the fix for a flaky diff is to drive the component to one canonical state before the snapshot. A symptom-to-lever checklist for the variation you probably have.

VitestDeterminismFlake

VitestStorybookPlaywright

Triage a build from your agent

When a build comes back changed, your agent does the review from the terminal over the UI Verify MCP: read what changed, look at the pixels when a number is ambiguous, then summarize the real regressions or accept baselines in bulk.

MCPAgentsReview

VitestStorybookPlaywrightScreenshots

Check visual changes mid-edit

The agent edit-loop check: render just the components you are touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR, posting a check, or moving a baseline. Works for every capture method.

PreviewEdit loopAgents

VitestStorybook

Implement a Figma design

Your agent builds the page as a Storybook story (or a Vitest browser-mode test) with the Figma export as its baseline, then fixes it one section at a time until UI Verify's diff shows it matches the design. It stops before accepting, so you decide when to lock it in.

FigmaDesign to codeMCP

Install

Install all of them, or just one

On Claude Code they come as two plugins from one marketplace: uiverify for visual testing, uiverify-workflow for the agentic loop. In any other agent, one npx command copies the folders. Want a single skill? Each detail page has a one-line install for that skill alone. Every one is a plain SKILL.md, no runtime code.

terminal

npx skills add uiverify/uiverify

One command, any agent - Cursor, Codex, Copilot, Claude Code. Run npx skills update to pull the latest.

Built by the team behind UI Verify

The tool these skills were built for

UI Verify snapshots every component and page on every pull request, then an AI judge tells an intended change from a real regression. See how it works.

See how UI Verify works

© 2026 UI Verify