Hero image art direction
Skill TheGoat395/Codex-Skills/skills/hero-image-art-direction
Codex-first Agent Skills library for premium frontend, website, motion, accessibility, QA, and handoff workflows.
npx -y skills add TheGoat395/Codex-Skills --skill hero-image-art-directionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
Art-direct website hero imagery. Use for landing pages, homepages, product pages, portfolios, venue sites, editorial pages, and premium first viewports that need real or generated media, text-safe composition, responsive focal points, visual hierarchy, contrast, aspect ratios, and anti-generic image selection.
SKILL.md
2.2 KB, as published. Nobody here has run it
Hero Image Art Direction
Use this skill to make the first viewport immediately specific, inspectable, and composed.
Workflow
- Inspect the project, media assets, framework image/video APIs, responsive breakpoints, accessibility requirements, and verification commands.
- Read Hero Image Art Direction Guide for detailed direction before changing visuals or code.
- Define the media's job: proof, desire, navigation, instruction, atmosphere, conversion, or accessibility.
- Implement with stable dimensions, responsive crops, useful fallbacks, and real content hierarchy.
- 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, dark blurred filler, random gradients, and media that crops away the subject users need to inspect.
- Plan desktop, mobile, high-density, slow-network, reduced-motion, no-autoplay, failed-asset, and screen-reader states.
- Reserve layout space with dimensions, aspect-ratio, CSS constraints, or framework image components to avoid layout shift.
- Use meaningful alt text for informative images, empty alt for decorative images, captions/transcripts/tracks for media that needs them, and visible text for critical information.
- Before delivery, inspect rendered desktop and mobile media crops, verify assets load without 404s, and run available lint/build/test/browser checks.