본문으로 건너뛰기
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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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 / 1,000자

이 양식은 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의 스킬 모두 보기

이 스킬의 문제 신고