本文へ移動
cccskills
無料GitHub で公開

visual-qa

Use when a website needs rendered screenshot review, Playwright visual regression, multi-viewport checks, horizontal overflow detection, console-error checks, focus/state inspection, or a repeatable visual QA evidence set.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.8 KB
  • agents/openai.yaml224 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Visual QA

Evidence first

Do not critique only source code. Render the real interface.

Default sequence

  1. ensure the target app runs;
  2. settle the intended capture state: await fonts, promote/decode lazy media, and disable nondeterministic motion;
  3. assert that critical content is visible before accepting a baseline, including in reduced-motion or JavaScript-failure states;
  4. capture all configured viewports;
  5. inspect full-page composition and first viewport separately;
  6. test critical interactive states;
  7. inspect keyboard focus and sticky/fixed overlays;
  8. inspect utility/micro text at native screenshot scale—technically present text can still be functionally illegible;
  9. test reduced-motion mode;
  10. check horizontal overflow and console/page errors;
  11. use Playwright visual baselines for stable views;
  12. hand screenshots to $design-critic without implementation justification.

Defect format

For each issue record:

  • severity: blocker / major / moderate / minor;
  • viewport/state;
  • observed evidence;
  • design/UX impact;
  • likely root cause;
  • recommended correction scope: system / section / component / micro.

Stability

Visual baselines are environment-sensitive. Keep the comparison environment consistent and only update baselines after reviewing the diff. A passing pixel comparison is not evidence when its baseline recorded hidden critical content or media that had not finished decoding.

Use scripts/capture-screenshots.mjs and tests/visual.spec.ts as starters.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use for release-level accessibility and performance review, including WCAG 2.2 AA, keyboard/focus, target size, reduced motion, semantic controls, Core Web Vitals, images/fonts/JavaScript, and animation or 3D performance budgets.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use to audit a generated or heavily templated interface for generic AI aesthetics, unjustified trend patterns, component-registry residue, vague copy, repetitive motion, novelty theater, or visual decisions that lack brand/UX rationale.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when a website needs a strong visual point of view, distinct concept routes, composition, typography, color/materiality, imagery direction, spatial rhythm, or a memorable signature idea.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when deciding whether to implement UI from native HTML/CSS, accessible primitives, shadcn-style source components, or visual component registries such as 21st.dev, Aceternity, React Bits, Motion Primitives, Magic UI, or Animate UI.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use after substantial web projects or repeated design defects to convert evidence into reusable skill improvements through root-cause analysis, regression scenarios, and controlled proposals without silently changing the core OS.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Use when the design concept calls for Three.js or React Three Fiber 3D, WebGL/WebGPU, Rive, Spline, Theatre.js, SVG, canvas, shaders, particle systems, or other immersive creative-web techniques.

日本語の概要は準備中です。原文の説明を表示しています。

Lrinvl1203/world-class-web-design-os82026年10月2日 更新

Lrinvl1203 のスキルをすべて見る

このスキルの問題を報告する