Skip to content
cccskills
FreePublished on GitHub

visual-polish-qa

Refine rendered finish at accepted viewports.

The English summary is being prepared. Showing the original description.

See how to install

Files included (3)

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

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Audit semantic and keyboard accessibility.

The English summary is being prepared. Showing the original description.

TheGoat395/Codex-Skills129Updated Sep 11, 2026

Finish accessibility and performance details.

The English summary is being prepared. Showing the original description.

TheGoat395/Codex-Skills129Updated Sep 11, 2026

Evaluate agent and skill behavior or routing.

The English summary is being prepared. Showing the original description.

TheGoat395/Codex-Skills129Updated Sep 11, 2026

Design memory provenance and tenant isolation.

The English summary is being prepared. Showing the original description.

TheGoat395/Codex-Skills129Updated Sep 11, 2026

Resolve agent ownership and handoff design.

The English summary is being prepared. Showing the original description.

TheGoat395/Codex-Skills129Updated Sep 11, 2026

Define coherent motion timing and rhythm.

The English summary is being prepared. Showing the original description.

TheGoat395/Codex-Skills129Updated Sep 11, 2026

See all skills by TheGoat395

Report a problem with this skill