UI Screenshot Composition

Arrange readable product screenshot evidence.

TheGoat395 13da97b 3 files · 4.3 KB Updated

File contents

UI Screenshot Composition

Use this skill to turn UI screenshots into a designed evidence system, not a pile of framed rectangles.

Workflow

  1. Inspect the project, media assets, framework image/video APIs, responsive breakpoints, accessibility requirements, and verification commands.
  2. Read UI Screenshot Composition Guide for detailed direction before changing visuals or code.
  3. Define the media's job: proof, desire, navigation, instruction, atmosphere, conversion, or accessibility.
  4. Implement with stable dimensions, responsive crops, useful fallbacks, and real content hierarchy.
  5. Inspect rendered desktop and mobile states, then refine crop, contrast, loading, labels, captions, and polish.

Scoped execution

Apply the shared web contract once when execution crosses phases; reuse it if already read. Load only the specialist guidance relevant to the requested surface and deliverable.

TheGoat395/Codex-Skills/tree/main/skills/ui-screenshot-composition commit 13da97bb01

Frequently asked questions

npx skillmds@latest add thegoat395/ui-screenshot-composition