CtrlK
BlogDocsLog inGet started
Tessl Logo

image-to-code

Implement a selected image, screenshot, mockup, generated concept, or design frame as a faithful, responsive, interactive frontend in the target codebase.

62

Quality

72%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./packages/opencode/src/skill/builtin/.bundle/product-design/workflows/image-to-code/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

85%

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 lean, well-structured workflow with strong validation checkpoints and clear navigation, scoring well on conciseness, workflow clarity, and progressive disclosure. Its main weakness is actionability, where several steps stay abstract rather than giving executable specifics.

Suggestions

Make asset-handling steps more actionable by naming concrete signals (e.g. how to detect reusable repo assets, or naming the available image-generation/icon tools) rather than 'Inventory every required asset'.

Tighten step 3-4 with a concrete fallback sequence (e.g. check package.json/framework, then scaffold) so the 'smallest runnable frontend' decision is less abstract.

DimensionReasoningScore

Conciseness

The body is lean, assumes Claude's competence, and avoids explaining concepts like React or frontend basics; every section (Preconditions, Workflow, Fidelity rules, Handoff) earns its place.

3 / 3

Actionability

It has concrete specifics (verify ~390 × 844, save design-qa.md, gate on 'final result: passed'), but many steps remain abstract direction ('Inventory every required asset', 'use its existing framework...conventions') without executable detail.

2 / 3

Workflow Clarity

A clear 9-step numbered sequence includes an explicit validation gate (run design-qa, fix blocking mismatches, hand off only when 'final result: passed') plus a fix feedback loop, matching the anchor for explicit checkpoints and error recovery.

3 / 3

Progressive Disclosure

Content is well-sectioned and references one-level-deep sibling files (../index/SKILL.md, ../design-qa/SKILL.md, ../../references/critical-overrides.md) that are clearly signaled inline; no bundle files exist to verify and none are nested.

3 / 3

Total

11

/

12

Passed

Description

60%

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 concrete and third-person with a clear domain, but it lacks an explicit 'Use when...' trigger clause and omits common user phrasings like 'image to code'. Adding trigger guidance would raise the completeness and trigger dimensions.

Suggestions

Append an explicit 'Use when...' clause naming natural user triggers, e.g. 'Use when the user wants to turn a selected image, screenshot, or mockup into code/a working frontend.'

Add common user phrasings such as 'image to code', 'screenshot to code', or 'convert design to code' to improve trigger term coverage.

Sharpen distinctiveness by contrasting with ideation/design skills, e.g. noting it applies once a visual already exists rather than for generating concepts.

DimensionReasoningScore

Specificity

It lists multiple concrete input types ("image, screenshot, mockup, generated concept, or design frame") and the concrete action of implementing them as a frontend, matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

It clearly states what the skill does, but there is no "Use when..." clause or equivalent explicit trigger guidance, so the 'when' is only implied, capping completeness at 2 per the rubric guideline.

2 / 3

Trigger Term Quality

Natural terms like "image", "screenshot", and "mockup" appear, but common user phrasings such as "image to code", "screenshot to code", or "convert design to code" are absent, leaving relevant variations missing.

2 / 3

Distinctiveness Conflict Risk

The visual-to-frontend niche is fairly specific, but without explicit triggers and with potential overlap against general frontend-building skills, it could still trigger for the wrong skill.

2 / 3

Total

9

/

12

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
XiaomiMiMo/MiMo-Code
Reviewed

Table of Contents

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.