ui-validate

ui-validate is a skill for Claude Code, Codex from kimsanguine/hplan. It costs 112 tokens per session (4,542 once invoked), scanned A, original, MIT.

A collection of independent checks for validating web interfaces. It measures visual hierarchy and accessibility, checks motion rules, detects visual drift across screens, tests common viewport sizes, and captures evidence for specified test cases.

In plain words
What is it for?
Run Playwright-based checks for WCAG AA contrast, layout hierarchy, CSS or Framer Motion transitions, screenshot and DOM drift, 375/768/1440-pixel layouts, and QA checklist test cases.
Why use it?
It replaces informal visual checking with repeatable reports and screenshots. Separate checks make it possible to identify whether a problem concerns hierarchy, animation, visual consistency, responsive behavior, or test evidence.

Skill for Claude CodeCodex

Part of the deliver plugin — 10 skills, 1 command shipped together

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.

agentmods
npx agentmods add skills/kimsanguine/hplan/ui-validate
Any agent
npx skills add kimsanguine/hplan --skill ui-validate
Clone the repo
git clone --depth 1 https://github.com/kimsanguine/hplan

Made for: Claude Code, Codex.

Or install deliver, the plugin that ships this one along with the rest of its 10 skills, 1 command.

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 ui-validate

README.md
[![agentmods](https://agentmods.dev/badge/skills/kimsanguine/hplan/ui-validate.svg)](https://agentmods.dev/skills/kimsanguine/hplan/ui-validate)
Your own site
<a href="https://agentmods.dev/skills/kimsanguine/hplan/ui-validate"><img src="https://agentmods.dev/badge/skills/kimsanguine/hplan/ui-validate.svg" alt="Measured on agentmods" height="20"></a>
Per session 112 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,542 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00112 $0.04542
Opus 5 $0.00056 $0.02271
Sonnet 5 $0.00022 $0.00908
Haiku 4.5 $0.00011 $0.00454

Measured 4d ago against content hash 081c8ba984b2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui-validate 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 4d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/pw_runner.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

deliver/skills/ui-validate/SKILL.md · 463 lines

How it starts

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

Core Goal

4종 UI 검증 check를 단일 인터페이스로 통합한다:

check 책임 출력 파일 LLM
--check hierarchy Playwright + DOM saliency + WCAG AA 시각 계층 측정 .design/hierarchy-report.json
--check motion CSS transition vs RESPECT.md motion_language 일관성 .design/motion-drift.md
--check drift N 화면 pHash + DOM 구조 시각 drift 감지 .design/ui-drift-report.md
--check mobile 375/768/1440px 브레이크포인트 Playwright 검증 mobile-check-report.md
--check tc-gate QA_CHECKLIST.md TC-ID별 Playwright 스크린샷 → harness/ui-evidence/ harness/ui-evidence/summary.json

⚠️ --check 인자 필수: 미명시 시 에러 출력 후 사용 가능한 check 목록 안내. auto-run 절대 금지.


Rule 5 준수 — 모든 측정이 결정론

검증 도구 LLM
fold_density, type_hierarchy, color_60_30_10, whitespace, cta_count Playwright DOM + pixel
WCAG AA contrast WebAIM relative luminance 알고리즘
CSS transition duration/easing 추출 정규식 + CSSOM
framer-motion props AST 파서
pHash 비교 imagehash library
색상 palette KMeans on screenshot
브레이크포인트 Playwright npx playwright test

실패 처리 원칙

  • 각 check는 독립 실패 가능 — 한 check 실패가 다른 check를 막지 않음
  • baseline 없으면 SKIP (FAIL 아님) — baseline 부재는 데이터 미비이지 위반이 아님
  • 타임아웃: 30초/check — 초과 시 해당 check SKIP + warning
  • **respect (--mode checkpoint·--mode brief)**는 이 스킬에 통합하지 않음

Trigger Gate

Use This Skill When

  • craft-lint 정적 검증 통과 후 런타임 측정 → --check hierarchy
  • 리디자인 후 motion 일관성 검증 → --check motion
  • 5+ 화면 생성 후 일관성 확인 → --check drift
  • ship 직전 모바일 브레이크포인트 검증 → --check mobile
  • qa-checklist 실행 후 TC-ID별 브라우저 스크린샷 증거 생성 → --check tc-gate [URL]

Route to Other Skills When

  • RESPECT.md 갱신 → deliver/respect --mode brief
  • ship 직전 종합 게이트 → deliver/respect --mode checkpoint
  • 디자인 토큰 갱신 → 프로젝트 DESIGN.md

Boundary Checks

  • --check 미명시 → 즉시 에러 + 사용 가능한 check 목록 출력 (auto-run 금지)
  • harness/QA_CHECKLIST.md 부재 → fail loud + "qa-checklist 먼저 실행하세요"
  • Playwright 미설치 → fail loud + 설치 안내
  • RESPECT.md 부재 시 hierarchy/motion → fail loud + "respect --mode brief 먼저"
  • DESIGN.md 부재 시 mobile → fail loud + "design-token 먼저"

Read the full file on GitHub · 463 lines

Files

What ships with it

1 file 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. 4d ago First seen · 463 lines · 112 tokens per session scan A 081c8ba984b2

Subscribe to this mod's changes

ui-validate is a skill published in the GitHub repository kimsanguine/hplan (2 stars, last pushed 19d ago), licensed MIT. It adds 112 tokens to every session and 4,542 once invoked, about $0.0006 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-08-31.

Related

Other skills, from other repositories

feature-verify

Feature verification (READ-ONLY, P0-P5). Use when: verifying feature behavior after deployment, validating API responses, diagnosing production issues, post-deploy smoke test. Not for: modifying data (use feature-dev), code review (use codex-review-fast), writing tests (use codex-test-gen), security audit (use…

sd0xdev/sd0x-harness · 75 tokens

post-dev-test

Post-development test completion. Use when: checking test coverage after feature-dev, writing missing integration/e2e tests. Not for: unit test generation (use codex-test-gen), test review (use test-review). Output: test files + coverage report.

sd0xdev/sd0x-harness · 55 tokens

verify

Verification loop — lint -> typecheck -> unit -> integration -> e2e.

sd0xdev/sd0x-harness · 17 tokens

check-coverage

Comprehensive assessment of Unit / Integration / E2E three-layer test coverage, identify gaps and provide actionable recommendations.

sd0xdev/sd0x-harness · 27 tokens

ios-test

Build, launch, and visually test iOS/SwiftUI apps in the Simulator using computer use. Automated screen navigation, crash log analysis, state testing (empty/error/loading), and memory leak detection. Use when you need to test an iOS app, run it in the Simulator, check for crashes, or verify UI flows.

yusufkaran/swiftui-autotest-skill · 69 tokens

swiftui-autotest-skill

AI-powered visual testing and accessibility setup for iOS/SwiftUI apps. Build, launch in Simulator, test with computer use, detect crashes, analyze memory leaks, and add accessibility identifiers — all from the terminal.

yusufkaran/swiftui-autotest-skill · 51 tokens