frontend-imagegen-director

frontend-imagegen-director is a skill for Claude Code, Codex from JWCodeWrote/Agent_Skills_Plugin. It costs 62 tokens per session (1,612 once invoked), scanned A, original, no licence file.

A workflow for creating front-end visuals with image-generation tools and then building a web page from an approved visual. It first considers the project’s existing style and purpose.

In plain words
What is it for?
Use it to design and implement front-end pages when the project needs new imagery and the visual direction should fit its existing product.
Why use it?
It gives the agent a structured way to turn an unclear visual request into an agreed design and working page. This reduces the gap between a generated image and the final interface.

Skill for Claude CodeCodex

Which agent this was written for is unclear — body not stored (licence); the path alone says nothing.

Good fit Use it to design and implement front-end pages when the project needs new imagery and the visual direction should fit its existing product.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add JWCodeWrote/Agent_Skills_Plugin --skill frontend-imagegen-director
Clone the repo
git clone --depth 1 https://github.com/JWCodeWrote/Agent_Skills_Plugin

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for frontend-imagegen-director

README.md
[![agentmods](https://agentmods.dev/badge/skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director/github.svg)](https://agentmods.dev/skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director)
Your own site
<a href="https://agentmods.dev/skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director"><img src="https://agentmods.dev/badge/skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for frontend-imagegen-director

Your own site · 80×15
<a href="https://agentmods.dev/skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director"><img src="https://agentmods.dev/badge/skills/jwcodewrote/agent_skills_plugin/frontend-imagegen-director.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 62 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,612 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin unknown No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00062 $0.01612
Opus 5 $0.00031 $0.00806
Sonnet 5 $0.00012 $0.00322
Haiku 4.5 $0.00006 $0.00161

Measured 8d ago against content hash b2ed8ae5e955, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

frontend-imagegen-director scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

frontend-imagegen-director/SKILL.md · 201 lines

The source is not reproduced here

No licence file

A repository with no LICENSE is all rights reserved by default, so the body is not copied here. The metadata, the measurements and the link are.

Read it on GitHub

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 8d ago First seen · 201 lines · 62 tokens per session scan A b2ed8ae5e955

Subscribe to this mod's changes

frontend-imagegen-director is a skill published in the GitHub repository JWCodeWrote/Agent_Skills_Plugin (3 stars, last pushed 1mo ago), with no licence file. It adds 62 tokens to every session and 1,612 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

animation-reverse-engineering

Reverse-engineer any motion reference (a video from X/Twitter, Dribbble, a screen recording, a GIF) into production animation code through frame-level dissection. Use when the user shares a video/URL and says "implement this animation", "recreate this motion", "port this interaction", "how does this animate", "clone…

sendaifun/skills · 176 tokens

chrono-flow

A timeline-page generator that turns dated events and descriptions in JSON into an interactive HTML timeline. A timeline is a visual sequence of events, such as project milestones or company history.

serejaris/kimi-skills · 100 tokens

3d-web-experience

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences.

lingxling/awesome-skills-cn · 57 tokens

accessibility

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

addyosmani/web-quality-skills · 51 tokens

performance

Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

addyosmani/web-quality-skills · 49 tokens

core-web-vitals

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

addyosmani/web-quality-skills · 67 tokens