跳到正文
cccskills
免费在 GitHub 公开

visual-polish-qa

Refine rendered finish at accepted viewports.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(3)

  • SKILL.md2.5 KB
  • agents/openai.yaml234 B
  • references/polish-checklist.md1.4 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Visual Polish QA

Principle

Inspect affected rendered output after implementation. Fix observed weaknesses within authorization and recheck affected behavior; stop when acceptance is met. An analysis-only review reports findings without edits.

Required Loop

  1. Start or locate the dev server when the project needs one.
  2. Open the site in a browser or capture screenshots when tooling is available.
  3. Check the accepted target viewports; route a systematic breakpoint problem to responsive-visual-polish-qa.
  4. Inspect hero, navigation, major sections, interactive states, forms, media, and footer.
  5. Fix obvious visual defects and weak polish.
  6. Run relevant required checks; repeat or broaden only after changes, failures or an unresolved risk.
  7. Report what was checked and what could not be checked.

What To Look For

  • Text overflow, awkward line breaks, cramped labels, clipped buttons.
  • Elements overlapping or drifting outside their intended layout.
  • Hero media that is too dark, blurry, cropped, generic, or disconnected from the subject.
  • Repetitive card grids and generic spacing.
  • Typography that lacks hierarchy or scale discipline.
  • Weak button states, missing focus styles, inert hover states.
  • Motion that is too fast, too busy, inaccessible, or unrelated to hierarchy.
  • Mobile layouts that simply stack without composition.
  • Desktop layouts that stretch content too wide.
  • Forms that look unstyled or have poor error/empty/loading states.

Fix Biases

  • Prefer fewer, stronger visual moves.
  • Tighten spacing before adding decoration.
  • Improve copy specificity before adding sections.
  • Use real media, generated bitmap imagery, or purposeful 3D when visuals matter.
  • Make controls clear with icons and labels where appropriate.
  • Preserve accessibility while polishing motion and visual style.

Verification

Use Playwright, browser tools, screenshots, or the in-app browser when available. For canvas/WebGL/Three.js work, verify that the canvas is nonblank, framed correctly, and active across desktop and mobile.

Read references/polish-checklist.md for the detailed pass.

Scope and evidence

Inspect affected visual finish using relevant viewports and states from the shared evidence matrix. A four-viewport matrix is a useful broad-review starting point, not mandatory for every local edit. Route breakpoint defects to $responsive-visual-polish-qa.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Audit semantic and keyboard accessibility.

中文简介正在准备中。当前显示原文说明。

TheGoat395/Codex-Skills1292026年9月11日 更新

Finish accessibility and performance details.

中文简介正在准备中。当前显示原文说明。

TheGoat395/Codex-Skills1292026年9月11日 更新

Evaluate agent and skill behavior or routing.

中文简介正在准备中。当前显示原文说明。

TheGoat395/Codex-Skills1292026年9月11日 更新

Design memory provenance and tenant isolation.

中文简介正在准备中。当前显示原文说明。

TheGoat395/Codex-Skills1292026年9月11日 更新

Resolve agent ownership and handoff design.

中文简介正在准备中。当前显示原文说明。

TheGoat395/Codex-Skills1292026年9月11日 更新

Define coherent motion timing and rhythm.

中文简介正在准备中。当前显示原文说明。

TheGoat395/Codex-Skills1292026年9月11日 更新

查看 TheGoat395 的全部技能

报告此技能的问题