| name | hero-image-art-direction |
| description | 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. |
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.
