Skill
Frontend
Skill
/ui-screenshot-composition
Arrange readable product screenshot evidence.
Install
$ npx -y skills add TheGoat395/Codex-Skills --skill ui-screenshot-composition --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/ui-screenshot-composition
Context preview
The summary Claude sees to decide when to auto-load this skill.
Arrange readable product screenshot evidence.
SKILL.md
ui-screenshot-composition.SKILL.mdname: ui-screenshot-composition description: "Arrange readable product screenshot evidence."
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.
Scoped execution
Apply the [shared web contract](../website-operating-rules/references/scoped-web-contract.md) once when execution crosses phases; reuse it if already read. Load only the specialist guidance relevant to the requested surface and deliverable.
Ships withcodex-skills
An unofficial, open-source, Codex-first Agent Skills library for premium frontend, website, design-engineering, and reliable agent workflows.
Get the whole plugin
Stats
132
Stars
48
Forks
Active
Maintenance
Python
Language
MIT
License
2d ago
Last commit
4mo ago
Created
3h ago
Added
Other skills on codex-skills.
Skill
Skill
Skill
Skill
Skill