Run any Skill in Manus with one click

ui-visual-review

Stars2

Forks0

UpdatedJune 26, 2026 at 06:49

Captures screenshots of key UI flows after E2E tests pass, runs an agent-side first-pass diff (regressions, console errors, layout shifts), then surfaces a checklist for the user's final approval. Use after E2E tests pass on a UI track (csr-*, ssr-*, full). Adapts the GoalTrack screenshot-review pattern into a repeatable workflow.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

uzysjung

uzysjung/uzys-agent-harness

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software Quality Assurance Analysts and TestersComputer and Mathematical Occupations·SOC 15-1253

SKILL.md

readonly

More from this repository

same repository

model-orchestration

uzysjung/uzys-agent-harness

Apply the fixed model-role and thinking-effort policy whenever work is delegated to subagents or a model/effort choice is made: the orchestrator (top-tier model) DIRECTLY sets service direction, reviews plan/spec documents (with multi-persona-review), improves shipped features, and hunts performance/security problems; plan/spec/planning documents are AUTHORED by Opus, which also owns core implementation and V&V, at xhigh or above; repetitive implementation and E2E tests go to Sonnet at high or above — never delegate below those effort floors. Use whenever you are about to spawn an Agent/Task/Workflow worker, pick a model for a subtask, set a thinking/effort level, assign verification, or hand off orchestration because the current model's quota is exhausted. Trigger on "위임해", "에이전트로 돌려", "오케스트레이션", "모델 역할분담", "어떤 모델로", "effort 얼마로", "thinking level", "서브에이전트", or in English "delegate this", "spawn an agent for", "which model should", "route this task", "verify with", "orchestrate". Fire even when the user does

2026-07-072

gh-issue-workflow

uzysjung/uzys-agent-harness

Treats GitHub Issues as the async backlog + decision channel between user and AI agent. Use when a non-blocking todo / bug / decision needs to persist beyond the chat session. Enforces 5-section body template (Background / Given / Decision / AC / Next) so issues become reusable agent context, not just sticky notes.

2026-06-262

north-star

uzysjung/uzys-agent-harness

Defines and enforces a project's long-term direction (North Star Statement, NSM, Will/Won't, 4-gate decision heuristic). Use when starting a new project, when scope creep is suspected, or when a non-obvious feature request needs prioritization. Sits one layer above SPEC/PRD — answers 'why and where to', not 'what and how'.

2026-06-262

gap-analysis-e2e

uzysjung/uzys-agent-harness

Two-mode chained gap analysis. DETECT scans the current service end-to-end through three lenses — north-star alignment, correctness (bugs), and user-perspective (UX) — and enumerates concrete, severity-ranked gaps. Then BENCHMARK researches how reference/benchmark services actually solved each high-ranked gap and PROPOSES a closing approach. Use when the user says any of: "북극성 기준으로 부족한 점", "사용자 관점에서 부족한 점", "다른 벤치마크 서비스는 이 부분을 어떻게 해결했는지", "갭분석", "레퍼런스 서비스랑 비교해서 부족한 점 찾아줘" — or the English equivalents: "gap analysis", "what are we missing vs the ideal/north-star", "benchmark against reference services". Fires for both Korean and English phrasing. NOT for a whole-codebase multi-dimension audit (use ultracode-service-audit) or single-artifact prose review (use multi-persona-review) — this is the narrower gap-vs-benchmark loop.

2026-06-212

multi-persona-review

uzysjung/uzys-agent-harness

A panel-review skill that critiques ONE artifact (launch post, README, doc, markdown, plan, design) via 3-5 disjoint user-perspective personas running in parallel, then synthesizes deduped, severity-ranked improvement points (P0/P1/P2). Use when the user says "작성글을 사용자 관점의 페르소나를 여러명 만들어서 (손넷 모델정도로) 피드백 받아바", "다면 리뷰 해볼까", "페르소나로 리뷰", "여러 관점으로 피드백", or in English "multi-persona review", "review this from different user perspectives", "get persona feedback on this post/README/doc", "panel review this artifact". Lighter than a full service audit — point it at ONE artifact, not a whole codebase. NOT for a whole-codebase multi-dimension audit (use ultracode-service-audit) or a single-axis gap-vs-benchmark loop (use gap-analysis-e2e).

2026-06-212

ultracode-service-audit

uzysjung/uzys-agent-harness

Run a multi-agent, adversarially-verified full-service audit across 7 dimensions (code / UX / scalability / planning+north-star / security / promotion / extensible), separating findings into confirmed / unverified / rejected and producing a priority-ranked, M-numbered milestone roadmap (as many milestones as the findings warrant). Use when the user says "ultracode 전체 서비스 점검", "전체 서비스를 점검하자", "코드·UX·확장성·기획·북극성지표·보안·홍보 문제점을 파악하고 우선순위에 따라 개선", "다차원 서비스 감사", or in English "audit the whole service / full multi-dimensional service audit / find code, UX, scalability, planning, security, and marketing problems and prioritize fixes". The heavyweight superset audit — orchestrate it as a Workflow with fan-out finders and an adversarial verify pass. NOT for a single-artifact prose/README review (use multi-persona-review) or a single-axis gap-vs-benchmark loop (use gap-analysis-e2e) — those are the lighter siblings.

2026-06-212

name	ui-visual-review
description	Captures screenshots of key UI flows after E2E tests pass, runs an agent-side first-pass diff (regressions, console errors, layout shifts), then surfaces a checklist for the user's final approval. Use after E2E tests pass on a UI track (csr-, ssr-, full). Adapts the GoalTrack screenshot-review pattern into a repeatable workflow.

UI Visual Review

Purpose

E2E 테스트가 PASS 했어도 시각적 회귀(layout shift, 색상/간격 변화, 빈 화면, 잘림)는 functional test가 못 잡는다. 본 skill은:

핵심 사용자 화면을 자동 캡처
이전 baseline과 diff
에이전트가 명백한 regression 1차 판정
사용자가 최종 승인 → 새 baseline 채택 또는 수정 요청

GoalTrack의 docs/screenshots/ 수동 패턴(mvp-home / v3-search / v4-wiki 등)을 자동화한 형태.

When to Invoke

트리거	행동
E2E 테스트 PASS + UI Track(csr-/ssr-/full)	본 skill 호출 권유
UI 변경 PR review	visual diff 결과 review 입력으로
의도적 디자인 변경 후 baseline 갱신	"approve all" 옵션
Track이 data/tooling/executive	skip — UI 없음

Pre-conditions

Playwright 또는 chrome-devtools MCP 사용 가능 (UI Track 설치 시 기본 포함)
앱이 로컬에서 기동 가능 (예: pnpm dev, docker-compose up)
핵심 화면 URL 리스트가 정의됨 (없으면 본 skill 첫 실행 시 사용자 질의)

Process

1. 화면 리스트업 (한 번만)

docs/visual-pages.json 부재 시 사용자에게 핵심 화면을 묻는다 (5-10개 권장):

{
  "base_url": "http://localhost:3000",
  "pages": [
    { "id": "login", "path": "/login", "wait_for": "form" },
    { "id": "home", "path": "/", "wait_for": "main", "auth": "user1" },
    { "id": "detail", "path": "/items/sample", "auth": "user1" },
    { "id": "settings", "path": "/settings", "auth": "user1" }
  ],
  "viewports": [
    { "name": "desktop", "width": 1440, "height": 900 },
    { "name": "mobile",  "width": 375,  "height": 812 }
  ]
}

auth 키는 docs/visual-auth.example.json(별도 시크릿)에서 매핑.

2. 캡처

각 page × viewport 조합으로 스크린샷 캡처. chrome-devtools MCP 사용 예:

for page in pages:
  navigate_page({url: base_url + page.path})
  wait_for({text: page.wait_for})
  take_screenshot({fullPage: true})
  → 저장: docs/screenshots/<branch-or-date>/<page.id>__<viewport.name>.png

저장 경로 규칙: docs/screenshots/<phase>/<page_id>__<viewport>.png. phase는 git branch 이름 또는 YYYY-MM-DD-HHmm.

3. Diff (baseline 대비)

baseline 위치: docs/screenshots/baseline/. 첫 실행이면 현재 캡처가 baseline.

비교 방식 (간단 → 정밀 순):

L1 (해시): sha256 비교. 같으면 PASS, 다르면 L2.
L2 (pixelmatch): pixelmatch 또는 ImageMagick compare -metric AE. threshold(예: 0.5%) 이내 PASS.
L3 (시각 검토): L2 fail 시 에이전트가 두 이미지를 LLM 입력으로 보고 차이 서술.

L1만 구현해도 50% 가치. L2는 의존성 추가.

4. 에이전트 1차 리뷰 (자동)

L2/L3 fail이거나 차이가 임계 이상이면 에이전트가 다음 휴리스틱으로 명백한 regression 판정:

시그널	분류
빈 화면 / 흰 페이지	REGRESSION
콘솔 에러 (chrome-devtools `list_console_messages`)	REGRESSION
핵심 컴포넌트(navbar, main content) 누락	REGRESSION
색상/간격 미세 변화	CHANGED (사용자 판단)
의도된 카피/레이아웃 변경	EXPECTED (커밋 메시지 매칭)

5. 결과 보고

docs/visual-review-<phase>.md 생성:

# Visual Review — 2026-04-20

## Summary
- 8 pages × 2 viewports = 16 captures
- PASS (no diff): 12
- CHANGED (review needed): 3
- REGRESSION: 1

## REGRESSION
- `home__desktop`: 콘솔 에러 "Cannot read properties of undefined" + main 영역 빈 화면

## CHANGED
- `login__mobile`: 버튼 색상 변경 (의도 추정 — git diff에 button.primary 수정 발견)
- `settings__desktop`: spacing 변화

## PASS
- (생략)

6. 사용자 승인 게이트

사용자가 docs/visual-review-<phase>.md 보고 다음 중 결정:

REGRESSION 있음 → 수정 후 재실행 (Revision Gate)
CHANGED만 있음 → 항목별 approve 또는 reject. approve 시 baseline 업데이트
PASS만 있음 → 자동 baseline 업데이트 가능

Output

docs/screenshots/<phase>/*.png — 캡처본
docs/screenshots/baseline/*.png — 승인된 baseline
docs/visual-review-<phase>.md — diff 리포트

Integration with Workflow

E2E 테스트 후: UI Track + docs/visual-pages.json 존재 시 PASS 후 본 skill 자동 호출 권유
Review 시: visual-review-.md 가 있으면 review 입력으로 흡수. REGRESSION 1건이라도 있으면 차단
Revision loop 중: REGRESSION → 수정 → 재캡처 → 재diff 로 포함

Anti-Patterns

사용자 승인 없이 baseline 자동 갱신 — 의도하지 않은 regression이 영구화. 항상 명시적 approve 필요
모든 페이지 다 캡처 (50+) — 노이즈 폭증. 핵심 5-10개로 시작
viewport 1개만 — mobile 깨짐 놓침. desktop + mobile 최소 2개
L3(LLM 시각 비교) 매번 호출 — 비용. L1/L2에서 못 거른 것만 L3
screenshots/ 디렉토리 git에 커밋 X — 회귀 비교 불가. docs/screenshots/baseline/은 커밋, <phase>/는 gitignore

Examples

GoalTrack 프로젝트의 수동 패턴 (참고):

docs/screenshots/mvp-home-empty.png, mvp-home-list.png — 같은 화면 다른 상태
crypto-365d-after-fix.png, crypto-365d-round2.png — 수정 round별 보존
shared_portfolio.png, shared_simulation.png — 기능별 핵심 화면

본 skill은 그 패턴을 자동화 + diff + 에이전트 사전 판정 추가.