image-to-code

Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.

Quality

61%

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/image-to-code-skill/SKILL.md

Quality

Content

48%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 skill defines a clear image-first workflow with concrete variation mechanics and a self-check checklist, but it is a monolithic, severely repetitive document that pads the same directives across many sections and inlines everything instead of using reference files.

Suggestions

Collapse the repeated image-first, no-crop, anti-nested-box, and hero-cleanliness rules into a single authoritative statement; cut the largely redundant final-goal (section 38) and response-behavior (section 36) re-lists.

Move the long enumerated reference material (variation engine options, section packs, extraction-item lists, anti-slop catalog) into separate reference files and link to them from SKILL.md to enable progressive disclosure.

Add concrete implementation guidance (suggested tech stack, component/code patterns for the signature components) so the actionable parts are executable rather than purely aesthetic direction.

Dimension	Reasoning	Score
Conciseness	At ~1228 lines the body is heavily padded by repetition: the image-first order is restated in sections 2, 3, 4, 10, 11, 36, and 38, the no-crop rule in 5, 6, 28, 36, and 38, anti-nested-box in 16, 29, 36, and 38, and hero cleanliness across 14, 15, 36, and 38, with the final-goal section largely re-listing everything. It does not over-explain known concepts, but the directive repetition is severe enough to fall below the midpoint.	2 / 5
Actionability	There are genuinely concrete, actionable parts (the combinatorial variation engine with explicit option lists, the 4/8/12-section packs, the 1-image-per-section rule), but a large share of the body is subjective feel-direction ('feel premium, art-directed, readable', 'let simplicity do part of the design work') with no code, commands, or verifiable implementation specifics.	3 / 5
Workflow Clarity	The image-first sequence is clearly laid out (sections 10 and 36 give numbered order) with an explicit 21-item clarity checklist (section 35) and feedback loops ('If something is unclear, generate another image before coding', section 28's missing-detail resolution order), but the validation is subjective self-checking rather than objective checkpoints and the sequence is diluted by repetition.	4 / 5
Progressive Disclosure	The body is well-sectioned with 38 numbered headers, but no bundle files exist and all content is inlined into one ~1228-line file; material that clearly belongs in separate references (the variation engine, section packs, anti-slop lists, extraction checklists) is not split out, so structure is present but navigation and file separation are weak.	3 / 5
	Total	12 / 20 Passed

Description

75%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.

A specific, well-scoped description that conveys both the workflow and the niche, but it is a verbose run-on sentence that mixes productive actions with a long string of 'avoid' clauses rather than a clean what/when statement.

Suggestions

Split into a concise 'what' sentence plus an explicit 'Use when ...' clause naming natural triggers (website, landing page, hero section, redesign, mockup).

Move the Codex-specific 'avoid' directives (compressed boards, cropping, nested cards) into the body so the description stays lean and trigger-focused.

Dimension	Reasoning	Score
Specificity	Lists many concrete actions ('generate the design image(s) itself, deeply analyze them, then implement the website', 'generate fresh standalone images ... instead of cropping old ones', 'keep the hero clean'), approaching comprehensive coverage, but the single run-on sentence is padded with negative 'avoid X' clauses that dilute the productive action list.	4 / 5
Completeness	Clearly answers 'what' (generate images, analyze, implement) and gives a present-but-buried 'when' ('For visually important web tasks'), which is equivalent explicit trigger guidance so the missing-'Use when' cap at 3 does not apply; however the 'when' is not cleanly separated and could be more explicit.	4 / 5
Trigger Term Quality	Contains natural terms a user would say ('website', 'web tasks', 'design image', 'hero', 'section', 'image-to-code') with good coverage, but leans on jargon ('Codex', 'compressed boards', 'section-specific images') and misses common variations like 'landing page', 'mockup', or 'frontend'.	4 / 5
Distinctiveness Conflict Risk	It carves a fairly specific niche ('website image-to-code skill for Codex' with an image-first workflow) with distinct triggers and minimal conflict risk, though 'visually important web tasks' is broad enough to overlap slightly with general web-development skills.	4 / 5
	Total	16 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (1229 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: Leonxlnx/taste-skill
Path: skills/image-to-code-skill/SKILL.md
Commit: e79ca9e

Reviewed: 5 days 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.