ui-screenshot-composition
Compose UI screenshots inside website layouts. Use for product sections, feature blocks, app showcases, case studies, dashboards, mockup stacks, detail crops, callout overlays, annotation systems, responsive screenshot art direction, and avoiding generic SaaS screenshot-card sections.
npx skills add TheGoat395/Codex-Skills --skill ui-screenshot-composition --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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](references/ui-screenshot-composition-guide.md) 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. ## Always Protect - Inspect before coding: framework, image/video components, asset folders, CMS or source content, styling system, responsive breakpoints, performance checks, accessibility checks, and available browser QA commands. - Treat images and video as content strategy, not decoration: every asset should reveal the real product, person, venue, object, interface, proof, or mood needed by the page. - Avoid generic stock-like visuals
- Workflow
- Always Protect
What does the ui-screenshot-composition skill do?
Compose UI screenshots inside website layouts. Use for product sections, feature blocks, app showcases, case studies, dashboards, mockup stacks, detail crops, callout overlays, annotation systems, responsive screenshot art direction, and avoiding generic SaaS screenshot-card sections.
How do I install it?
Run `npx skills add TheGoat395/Codex-Skills --skill ui-screenshot-composition --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TheGoat395/Codex-Skills, a repository with 115 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.