# Shape Visual Attention

> 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.

- Skill: `amaledtuning/shape-visual-attention` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add amaledtuning/shape-visual-attention`
- Raw SKILL.md: https://api.skillmd.com/api/skills/amaledtuning/shape-visual-attention/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: amaledtuning (https://skillmd.com/u/amaledtuning)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/amaledtuning/shape-visual-attention

---


# 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

1. Identify the medium, audience, primary message, and the one element that must win first attention.
2. Read `references/principles.md` when the task involves visual hierarchy, composition, CTA visibility, contrast, grouping, icons, state cues, or color-coded meaning.
3. Diagnose the current attention path: first glance, second glance, supporting detail, and exit/action.
4. Strengthen the path with hierarchy, spacing, grouping, contrast, scale, alignment, affordance, and redundant state cues.
5. 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.