Visual Content Director
This skill owns the visual-content layer: what images, videos, generated visuals, and asset treatments are needed to make a UI believable, inspectable, and on-brand. It does not own final UX strategy or SEO structure.
Operating Modes
asset-plan: define required images, videos, icons, maps, diagrams, and proofs.hero-media: specify first-viewport media and composition rules.generation-brief: create prompts for generated visuals without inventing factual claims.asset-qa: check whether assets are relevant, readable, aligned, and safe to use.handoff: package assets for Stitch, Pencil, Figma, or implementation.
Required Workflow
- Read references/visual-content-contract.md.
- Confirm project type, target audience, user promise, and brand constraints.
- Identify required content media:
- real product/place/person/object proof;
- generated or illustrative support;
- maps, diagrams, icons, before/after, galleries, video.
- Use assets/visual-content-plan.template.md for planning.
- Distinguish real evidence assets from generated mood or placeholder assets.
- Hand off exact media requirements to Stitch, Pencil, Figma, or code owners.
Safety Rules
- Do not fabricate real places, people, testimonials, property facts, awards, certifications, or legal claims.
- Do not use private images externally without approval.
- Label generated visuals as generated/planned if they are not real source evidence.
- For reveal, before/after, or layered media, route alignment checks to
image-layer-alignment-validator.
- Public websites must keep important facts as text, not only baked into images.
Handoff Shape
Visual mode:
Asset roles:
Real evidence assets:
Generated/planned assets:
Hero media direction:
Forbidden visuals:
Accessibility notes:
SEO/LLM text preservation:
Next owner:
Checks:
Validation
When editing this skill, run:
python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/visual-content-director
python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/visual-content-director
python3 -m json.tool $CODEX_HOME/skills/visual-content-director/evals/evals.json >/dev/null
1---2name: visual-content-director3description: Plan and govern images, video, generated visuals, hero media, asset sourcing, visual proof, and content-media fit for UI/UX projects. Use when a site or app needs premium visual direction, photo/video asset plans, generated imagery prompts, before/after media, or visual asset QA before implementation, Stitch, Pencil, Figma, or code handoff.4---56# Visual Content Director78This skill owns the visual-content layer: what images, videos, generated visuals, and asset treatments are needed to make a UI believable, inspectable, and on-brand. It does not own final UX strategy or SEO structure.910## Operating Modes1112- `asset-plan`: define required images, videos, icons, maps, diagrams, and proofs.13- `hero-media`: specify first-viewport media and composition rules.14- `generation-brief`: create prompts for generated visuals without inventing factual claims.15- `asset-qa`: check whether assets are relevant, readable, aligned, and safe to use.16- `handoff`: package assets for Stitch, Pencil, Figma, or implementation.1718## Required Workflow19201. Read [references/visual-content-contract.md](references/visual-content-contract.md).212. Confirm project type, target audience, user promise, and brand constraints.223. Identify required content media:23 - real product/place/person/object proof;24 - generated or illustrative support;25 - maps, diagrams, icons, before/after, galleries, video.264. Use [assets/visual-content-plan.template.md](assets/visual-content-plan.template.md) for planning.275. Distinguish real evidence assets from generated mood or placeholder assets.286. Hand off exact media requirements to Stitch, Pencil, Figma, or code owners.2930## Safety Rules3132- Do not fabricate real places, people, testimonials, property facts, awards, certifications, or legal claims.33- Do not use private images externally without approval.34- Label generated visuals as generated/planned if they are not real source evidence.35- For reveal, before/after, or layered media, route alignment checks to `image-layer-alignment-validator`.36- Public websites must keep important facts as text, not only baked into images.3738## Handoff Shape3940```text41Visual mode:42Asset roles:43Real evidence assets:44Generated/planned assets:45Hero media direction:46Forbidden visuals:47Accessibility notes:48SEO/LLM text preservation:49Next owner:50Checks:51```5253## Validation5455When editing this skill, run:5657```bash58python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/visual-content-director59python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/visual-content-director60python3 -m json.tool $CODEX_HOME/skills/visual-content-director/evals/evals.json >/dev/null61```
sergekostenchuk