preview-spec

preview-spec is a skill for Claude Code from mthines/agent-skills. It costs 223 tokens per session (3,154 once invoked), scanned A, original, MIT.

A tool for attaching step-by-step UI checks to a pull request and running them against its live preview deployment.

In plain words
What is it for?
It is for checking visual changes in pull requests using browser test runners such as Playwright or an in-session Chrome runner.
Why use it?
It turns a reviewer's click-through check into a repeatable test with a pass-or-fail result.

Skill for Claude Code

Written for Claude Code: allowed-tools in frontmatter. Also seen: mentions subagents; names the AskUserQuestion tool.

Part of the mthines-agent-skills plugin — 55 skills, 4 agents shipped together

Good fit It is for checking visual changes in pull requests using browser test runners such as Playwright or an in-session Chrome runner.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/mthines/agent-skills/preview-spec
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add mthines/agent-skills --skill preview-spec
Clone the repo
git clone --depth 1 https://github.com/mthines/agent-skills

Made for: Claude Code.

Or install mthines-agent-skills, the plugin that ships this one along with the rest of its 55 skills, 4 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for preview-spec

README.md
[![agentmods](https://agentmods.dev/badge/skills/mthines/agent-skills/preview-spec/github.svg)](https://agentmods.dev/skills/mthines/agent-skills/preview-spec)
Your own site
<a href="https://agentmods.dev/skills/mthines/agent-skills/preview-spec"><img src="https://agentmods.dev/badge/skills/mthines/agent-skills/preview-spec/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for preview-spec

Your own site · 80×15
<a href="https://agentmods.dev/skills/mthines/agent-skills/preview-spec"><img src="https://agentmods.dev/badge/skills/mthines/agent-skills/preview-spec.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 223 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,154 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00223 $0.03154
Opus 5 $0.00112 $0.01577
Sonnet 5 $0.00045 $0.00631
Haiku 4.5 $0.00022 $0.00315

Measured 3d ago against content hash 797b27e155f3, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

preview-spec scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/testing/preview-spec/SKILL.md · 147 lines

How it starts

The opening of the file, as written. The whole thing — 147 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Preview Spec

Attach an executable UI verification spec to a pull request, then run it against the live preview deployment.

A reviewer verifies a UI change by clicking through the preview. preview-spec turns that click-through into an artifact an agent can follow: a short spec in the PR description, run against the deployed preview by aw-tester, reporting pass or fail.

This SKILL.md is a thin index. Detailed procedures live in rules/*.md and templates/*.md. Each operation loads only what it needs.

What this skill reuses

This skill owns three things and reuses the rest.

Concern Owner
The spec grammar (WHEN/THEN/AND, the locator mini-grammar, url:, network:) aw-testerspecs.md.template. This skill references it and never forks it.
The spec-run contract (locator ladder, auth semantics, verdict schema) spec-run-contract.md — the engine-agnostic contract both runners implement.
The runners + the compact verdict Two, one contract: aw-tester (Playwright sub-agent) and aw-tester-chrome (in-session Chrome). run --driver picks one.
The browser context (base_url, auth, fixtures) aw-target.ymlaw-target.yml.template.
The two-way lessons loop aw-tester-lessons (locator friction, existing) + preview-spec-lessons (navigation / spec-quality friction, new). See rules/memory.md.
Embedding the spec in the PR body (marker + collapsed block, ceiling exemption) this skill — rules/spec-format.md.
Resolving the PR's preview URL (GitHub deployments API) this skill — rules/preview-url-resolution.md.
The author + run orchestration this skill — this file + rules/runner.md.

Read the full file on GitHub · 147 lines

Files

What ships with it

7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago Changed · +19 lines 797b27e155f3
  2. 7d ago Changed 68f85d3a3fcf
  3. 8d ago First seen · 128 lines · 223 tokens per session scan A 353eb5660ff8

Subscribe to this mod's changes

preview-spec is a skill published in the GitHub repository mthines/agent-skills (13 stars, last pushed yesterday), licensed MIT. It adds 223 tokens to every session and 3,154 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

tdd-workflow

Runs the full TDD workflow for a TypeScript/JavaScript feature — user journeys to test cases, unit tests (Jest/Vitest + Testing Library), API/integration tests, Playwright E2E, and a coverage gate wired into CI. Use when building a Next.js/React/Node feature end to end, not just a single unit test, or when asked to…

shennawardana23/skillme · 92 tokens

e2e-testing

Guides Playwright end-to-end test design — Page Object Model, CI configuration, and flaky test diagnosis. Use when writing browser-based end-to-end tests, debugging a test that fails intermittently, setting up Playwright CI configuration, or reviewing E2E test code for race conditions and arbitrary waits.

shennawardana23/skillme · 66 tokens

browser-testing-with-devtools

Use Chrome DevTools MCP to inspect, debug, and verify anything that runs in a browser — DOM structure, console errors, network requests, performance traces, and accessibility. Use when building or fixing browser UI, diagnosing a runtime bug that isn't visible from source code alone, or verifying a fix actually works…

shennawardana23/skillme · 80 tokens

specification-compliance-review

Use this skill when an implementation is described as partial, passing, or complete and the task is to determine whether it actually satisfies an explicit specification. This is not a generic code review and not a re-run of the test suite. The central question is: does every normative requirement have both a correct…

AtlasOmnia/hermes-custom-pack · 35 tokens

test-conversion-reviewer

Reviewer for converting unit tests to browser tests for Project Bedrock. Invoke this when the user needs to review their work while removing complex Browser dependencies from tests.

chromium/chromium · 37 tokens

actionbook-web-test

Run browser-based web tests against websites using Actionbook CLI. Activate when the user wants to test a website workflow, run smoke tests, verify a user flow, check if a web application works, run regression tests, or validate browser-based interactions. Supports test definition, execution, assertion, reporting, and…

actionbook/actionbook · 71 tokens