CtrlK
BlogDocsLog inGet started
Tessl Logo

text-in-images

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid images of text. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

56

Quality

65%

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 ./skills/text-in-images/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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 body is a lean, well-structured overview with a clear Check→Fix→Explain sequence and a verified, clearly signaled one-level-deep reference file. Its main weaknesses are the triple-statement of the same accessibility rationale and a templated Code Review section whose focus/keyboard checks do not fit this rule.

Suggestions

Deduplicate the resize/translate/screen-reader rationale — it appears in the intro, the Quick Reference bullet, and the Explain section; state it once and let the other sections add new information.

Re-scope the Code Review section to this rule (e.g., flag <img> elements whose alt text duplicates visible text, verify the text is real DOM text) instead of generic roles/focus/keyboard checks.

Name a concrete verification step or tool (e.g., browser DevTools accessibility pane) in place of the vague "browser accessibility tooling or assistive tech".

DimensionReasoningScore

Conciseness

The same rationale is stated three times: the intro ("Text in images can't be resized by users with low vision, translated automatically, read by screen readers without alt text, or reflowed when zoomed"), the Quick Reference bullet ("Images of text can't be resized, translated, or read by screen readers"), and the Explain section ("Explain how images of text cannot be resized by users, are not readable by screen readers without alt text, cannot reflow on zoom"). Anchor 3: mostly efficient but includes unnecessary repetition that could be tightened.

3 / 5

Actionability

For an instruction-only skill the guidance is concrete: "Replace text images with real HTML text styled with CSS. If images of text are necessary, provide equivalent text in alt attributes. Consider using SVG with embedded text for scalable typography." Anchor 4 rather than 5 because verification guidance stays vague ("browser accessibility tooling or assistive tech" names no specific tool) and no example is shown inline.

4 / 5

Workflow Clarity

A clear Check→Fix→Explain→Code Review sequence covers the single task unambiguously, and the skill is under 50 lines so the simple-skill exception could apply. Held at anchor 4 because the Code Review section's checks ("roles, labels, focus behavior, or keyboard interactions") do not map coherently to the text-in-images rule and verification tooling is left unspecified.

4 / 5

Progressive Disclosure

The body is a concise overview and the single external reference is clearly signaled and one level deep: "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`." The referenced file exists (references/rule.md, 186 lines including HTML/CSS code examples), matching anchor 5: clear overview, well-signaled one-level-deep references, appropriate split.

5 / 5

Total

16

/

20

Passed

Description

58%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 includes an explicit "Use when..." trigger and several concrete review actions, but the 'what' describes a generic accessibility review procedure rather than this skill's actual capability, and it omits the natural trigger phrases users would say. Distinctiveness rests almost entirely on the rule name inserted into shared boilerplate.

Suggestions

State the actual capability in the 'what' clause, e.g., "Identifies images that present text content and guides replacing them with real HTML text styled with CSS, providing alt-text equivalents when images are unavoidable."

Add natural trigger terms such as "images of text", "text in images", or "text in a banner image" instead of relying on the rule-name phrase "Avoid images of text".

Drop or re-scope the generic keyboard-behavior/focus-flow/screen-reader inspection clause; those checks belong to other accessibility rules and inflate conflict risk with sibling skills.

DimensionReasoningScore

Specificity

Lists several concrete review actions ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output"), but none describe this skill's actual capability regarding images of text (identifying images containing text, replacing them with real HTML text). The uncovered core task is a larger gap than anchor 4's "minor gaps", so it sits at anchor 3: domain named, actions present but not comprehensive.

3 / 5

Completeness

Both 'when' ("Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid images of text") and 'what' ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") are present, satisfying anchor 4. Not anchor 5 because the 'what' is a generic accessibility-review procedure that never states what the skill does about images of text.

4 / 5

Trigger Term Quality

Contains relevant keywords ("rendered HTML", "interactive components", "design-system patterns") but relies on the rule-name phrase "Avoid images of text" rather than the natural variations a user would say, such as "images of text", "text in images", or "alt text". This matches anchor 3: some relevant keywords but missing common variations or synonyms.

3 / 5

Distinctiveness Conflict Risk

Only the embedded rule name ("Avoid images of text") differentiates this description from sibling accessibility skills that would share the same templated review boilerplate ("Check native semantics first, then inspect keyboard behavior, focus flow..."). Somewhat specific but real overlap risk with similar accessibility skills, matching anchor 3 rather than 2 because the rule name does carve a niche.

3 / 5

Total

13

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.