How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill visual-content-directorBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
text
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:
bash
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
