img-to-frontend

Use when the user wants an end-to-end premium visual design workflow for any type of website or web page created directly from images.

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/img-to-frontend/SKILL.md

Quality

Content

73%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is a well-structured, actionable workflow with strong sequencing and validation feedback loops, and it correctly offloads the iteration checklist to a single one-level-deep reference. Its main weakness is redundancy around the image gate and a body length that could be trimmed by leaning more on the reference.

Suggestions

Collapse the repeated image-gate guidance: state the non-negotiable gate once in 'Non-Negotiable Image Gate' and reference it from the Overview and Core Workflow instead of restating it.

Move the detailed failure-mode list and the granular build-prompt inclusions into `references/visual-iteration-checklist.md`, keeping SKILL.md as a tighter overview.

Tighten the Quality Bar section since its guidance largely restates the Implementation step.

Dimension	Reasoning	Score
Conciseness	The body avoids explaining concepts Claude already knows, but the image-first gate is restated three times (Overview, 'Non-Negotiable Image Gate', and Core Workflow step 1) and the Quality Bar repeats implementation guidance, so it is mostly efficient with notable redundancy.	3 / 5
Actionability	Instruction-only but highly concrete: 'Invoke `$imagegen`', 'Generate four distinct' images, 'one image-generation call per concept', and specific screenshot widths (reference viewport, wide desktop, constrained desktop/tablet, mobile), with detailed build-prompt inclusions; minor gaps keep it at anchor 4.	4 / 5
Workflow Clarity	Seven steps are clearly sequenced (Design Exploration through Verification) with explicit checkpoints (Selection Pause, image gate) and a feedback loop (compare screenshot, identify largest mismatch, patch, re-run, repeat), plus a verification checklist, matching anchor 5.	5 / 5
Progressive Disclosure	One well-signaled one-level-deep reference ('Load `references/visual-iteration-checklist.md`' with explicit trigger conditions, verified to exist) and clear section structure, but the body is long with inline detail (failure-mode lists, build-prompt inclusions) that could partially live in the reference, fitting anchor 4.	4 / 5
	Total	16 / 20 Passed

Description

66%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is well-formed with an explicit 'Use when...' trigger and a distinct niche, but the capability phrasing ('end-to-end premium visual design workflow') is abstract and the trigger terms lean on internal vocabulary rather than natural user phrasings.

Suggestions

Replace the generic 'workflow' verb with concrete actions the user can expect, e.g. 'Generate website design images, translate a chosen image into a build prompt, and implement it as real frontend code.'

Add natural trigger terms users actually say, such as 'turn this image into a webpage', 'replicate this screenshot as code', or 'design a website from an image'.

Make the 'when' clause point to external triggers rather than restating the skill, e.g. 'Use when the user provides an image or screenshot of a website and wants it built as real frontend code.'

Dimension	Reasoning	Score
Specificity	Names the domain ('visual design workflow for any type of website or web page created directly from images') but the action verb is the generic 'workflow' rather than a list of concrete operations, matching anchor 3.	3 / 5
Completeness	Both 'what' (end-to-end visual design workflow from images) and an explicit 'Use when...' clause are present, but the 'when' is somewhat circular ('when the user wants' the workflow itself) rather than naming concrete external triggers, fitting anchor 4.	4 / 5
Trigger Term Quality	Contains relevant keywords ('website', 'web page', 'design', 'images') but omits natural user phrasings like 'turn this image into a webpage' or 'replicate this screenshot', so coverage has gaps rather than being comprehensive.	3 / 5
Distinctiveness Conflict Risk	The image-to-frontend niche with the 'created directly from images' qualifier is clearly distinct from other skills and unlikely to trigger for the wrong skill, matching anchor 5.	5 / 5
	Total	15 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: am-will/codex-skills
Path: skills/img-to-frontend/SKILL.md
Commit: 9f954c3

Reviewed: 20 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.