Hero Image Art Direction
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.
Install
$ agentstack add skill-thegoat395-codex-skills-hero-image-art-direction ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
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](references/hero-image-art-direction-guide.md) 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.
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: TheGoat395
- Source: TheGoat395/Codex-Skills
- License: MIT
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.