Shape Visual Attention
Use this skill to direct what people notice first and what they understand at a glance. It applies to UI screens, slide decks, PDF pages, posters, image prompts, infographics, dashboards, forms, and marketing visuals.
Workflow
- Identify the medium, audience, primary message, and the one element that must win first attention.
- Read
references/principles.md when the task involves visual hierarchy, composition, CTA visibility, contrast, grouping, icons, state cues, or color-coded meaning.
- Diagnose the current attention path: first glance, second glance, supporting detail, and exit/action.
- Strengthen the path with hierarchy, spacing, grouping, contrast, scale, alignment, affordance, and redundant state cues.
- If implementing in a format, pair this skill with the relevant execution skill:
frontend-design/react for web UI, presentations for slides, documents for DOCX/PDF, imagegen for bitmap images, or figma for Figma work.
Output Expectations
Return concrete design actions, not abstract taste notes. Specify what should become dominant, what should recede, which cues should be redundant, and what must remain readable without relying on color alone.
Boundaries
Do not use this skill for purely technical implementation, general component installation, or long-form text readability unless visual attention is the core issue. Use improve-readability-information-design for dense text and typography-first problems.
1---2name: shape-visual-attention3description: Shape visual attention across websites, apps, presentations, PDFs, documents, posters, banners, images, and infographics. Use when Codex needs to make the most important element noticed first, strengthen visual hierarchy, salience, grouping, contrast, affordance, scan path, or ensure color is not the only carrier of meaning in a visual or interface.4---56# Shape Visual Attention78Use this skill to direct what people notice first and what they understand at a glance. It applies to UI screens, slide decks, PDF pages, posters, image prompts, infographics, dashboards, forms, and marketing visuals.910## Workflow11121. Identify the medium, audience, primary message, and the one element that must win first attention.132. Read `references/principles.md` when the task involves visual hierarchy, composition, CTA visibility, contrast, grouping, icons, state cues, or color-coded meaning.143. Diagnose the current attention path: first glance, second glance, supporting detail, and exit/action.154. Strengthen the path with hierarchy, spacing, grouping, contrast, scale, alignment, affordance, and redundant state cues.165. If implementing in a format, pair this skill with the relevant execution skill: `frontend-design`/`react` for web UI, `presentations` for slides, `documents` for DOCX/PDF, `imagegen` for bitmap images, or `figma` for Figma work.1718## Output Expectations1920Return concrete design actions, not abstract taste notes. Specify what should become dominant, what should recede, which cues should be redundant, and what must remain readable without relying on color alone.2122## Boundaries2324Do not use this skill for purely technical implementation, general component installation, or long-form text readability unless visual attention is the core issue. Use `improve-readability-information-design` for dense text and typography-first problems.
amaledtuning