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.

64

Quality

75%

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

88%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 lean, well-sequenced workflow with explicit QA validation and feedback loops, and it appropriately delegates detail to referenced skills. Minor gaps: actionable specifics mostly live in external skill references, and reference navigation could be more explicit.

Suggestions

Add a short "References" section grouping the cross-skill links (index, critical-overrides, user-context, design-qa) so navigation is explicit rather than buried in prose.

Inline one or two concrete commands (e.g., the actual preview/dev command pattern) to raise actionability without bloating the overview.

Clarify the re-verify feedback loop after fixing mismatches (e.g., 're-run design-qa until it passes') to make the recovery cycle explicit.

DimensionReasoningScore

Conciseness

The body is lean: tight numbered steps, bullets, and guardrails with no padding or explanation of concepts Claude already knows; every sentence carries instructional weight.

5 / 5

Actionability

Concrete guidance abounds ("verify around 390 × 844", "run `../design-qa/SKILL.md`", "Save `design-qa.md`... records `final result: passed`"), but it delegates most executable detail to referenced skills rather than providing copy-paste-ready commands.

4 / 5

Workflow Clarity

A clear 9-step sequence with an explicit validation gate (design-qa must record `final result: passed`), a fix-and-reverify feedback loop, and a step-1 inspection checklist for error recovery.

5 / 5

Progressive Disclosure

Well-organized into Preconditions, Workflow, Fidelity rules, and Handoff with clearly signaled one-level-deep references to sibling skills, but references are inline in prose rather than gathered in a dedicated navigation section.

4 / 5

Total

18

/

20

Passed

Description

61%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 clearly states what the skill does with a rich enumeration of input visual types, but omits any explicit "when to use" trigger guidance, which caps completeness. Trigger-term coverage is good but missing common synonyms.

Suggestions

Add an explicit "Use when..." clause naming concrete triggers (e.g., 'Use when the user shares a screenshot, mockup, or design frame to reproduce as code').

Include common synonyms like "wireframe", "prototype", or "Figma export" alongside the existing visual-target list.

Consider naming a second concrete action (e.g., "inspect and reproduce") to broaden specificity beyond the single verb "Implement".

DimensionReasoningScore

Specificity

"Implement a selected image, screenshot, mockup, generated concept, or design frame as a faithful, responsive, interactive frontend" names the domain and one concrete action with strong modifiers, but does not enumerate several distinct actions; not comprehensive enough for 4.

3 / 5

Completeness

The "what" is explicit (implement a visual target as a frontend), but there is no "Use when..." clause or equivalent explicit trigger guidance, which caps completeness at 3 per the guidelines.

3 / 5

Trigger Term Quality

"image, screenshot, mockup, generated concept, or design frame" covers natural terms users say, though common synonyms like "wireframe", "prototype", or tool names (Figma) are missing.

4 / 5

Distinctiveness Conflict Risk

The image-to-code niche is mostly distinct from other skills with clear visual-target triggers; minor overlap risk with general frontend skills, but lacks the explicit "Use when" phrasing that would warrant 5.

4 / 5

Total

14

/

20

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.