CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

imagegen-frontend-web

Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.

59

Quality

74%

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/imagegen-frontend-web/SKILL.md
SKILL.md
Quality
Evals
Security

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 body is exceptionally actionable for an image-direction skill, with an explicit 16-step workflow, validation checklist, and error-recovery loops, and its section structure is easy to navigate. Its main weakness is redundancy: the core output rule and hero-bias guidance are each repeated verbatim in 3-4 places across 1012 lines, wasting context. No bundle references exist, so all guidance is inline, which is mostly appropriate but leaves some catalogs that could be split out.

Suggestions

State the one-image-per-section rule once (the HARD OUTPUT RULE preamble) and reference it from §5, §17, and §19 instead of repeating it verbatim four times.

Merge the duplicated hero-composition guidance — the "HERO COMPOSITION BIAS — READ FIRST" section and §4 "Hero Composition Bias" list nearly identical alternatives; keep one canonical list.

Fix the duplicated step numbering in §19 (two consecutive steps are numbered "5") and move the component catalog (§11) and slop lists (§8) into a reference file to reduce inline bulk.

DimensionReasoningScore

Conciseness

The 1012-line body restates the same rules multiple times: the one-image-per-section rule appears in the "HARD OUTPUT RULE" preamble, again in §5 "IMAGE COUNT & PAGE SLICING" ("THIS IS THE PRIMARY OUTPUT RULE"), again in the §17 checklist items 19-20, and again in §19 step 16; the hero composition alternatives are listed nearly verbatim twice (the "HERO COMPOSITION BIAS" preamble and §4). Multiple padded passages ("Whitespace is a design tool. Use it deliberately. Do not let spacing become random.") add no instruction, matching anchor 2 ("several unnecessary explanations or padded sections") rather than 1 since almost all content is skill-specific rather than explaining things Claude already knows.

2 / 5

Actionability

As an instruction-only skill, guidance is fully concrete and directive: exact numeric dials ("DESIGN_VARIANCE: 8"), enumerated one-pick options (theme paradigms, 12 background modes, 3 hero scales, 3 site packs with named sections), brief-to-direction mappings for specific user words ("minimalist", "editorial", "SaaS"), and three worked interpretation examples (§20) covering the common cases. The guidance is unambiguous enough to execute without inference, meeting the anchor-5 standard for instruction-only skills; not scored lower because no code is expected for an image-direction skill.

5 / 5

Workflow Clarity

§19 lays out a numbered 16-step response workflow (infer site type → commit to section count aloud → choose scales/anchors per section → generate all labeled images, "Do not stop early"), backed by an explicit 21-item pre-output validation checklist (§17) and a feedback loop for error recovery ("If the count is wrong, regenerate the missing sections"; §18's "Reject the set if" criteria). Validation checkpoints and recovery loops are present for this batch multi-image operation, matching anchor 5; the only blemish is a duplicated step number ("5." appears twice in §19), which is a typo rather than a validation gap.

5 / 5

Progressive Disclosure

No bundle files exist, and the body has a genuinely navigable structure: READ FIRST sections up top, 21 numbered and clearly titled sections, and a cross-referenced system (§1 references §2, §19 references §5/§17/§18). Most content is appropriately placed for a single-shot prompt skill, though the ~1000-line monolith with no external references means catalogs like the 12 signature components, slop lists, and default site packs could arguably live in reference files — a minor organization gap that keeps it at anchor 4 rather than 5's ideal split or 3's poorly-signaled inline bulk.

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 communicates a concrete and fairly distinctive capability with a memorable critical output rule, but its front-loading of hype language ("Elite", "premium") dilutes specificity, and it lacks any explicit 'Use when...' trigger guidance, capping completeness. Trigger coverage is good but misses common synonyms like mockup or wireframe.

Suggestions

Add an explicit trigger clause, e.g. "Use when generating website design references, landing page comps, hero sections, or section mockups for developers or coding models to recreate."

Trim hype words ("Elite", "premium, conversion-aware") and replace jargon like "narrative concept spine" and "second-read moments" with plain descriptions of what the skill actually does.

Add common user phrasings as trigger terms ("mockup", "website mockup", "hero section", "web design") to strengthen keyword coverage.

DimensionReasoningScore

Specificity

The description lists several concrete behaviors — "generate ONE separate horizontal image FOR EVERY section", "A landing page with 8 sections produces 8 images", "single consistent palette across all images", "varied hero scales (giant / mid / mini minimalist)" — but opens with buzzword padding ("Elite frontend image-direction skill", "premium, conversion-aware") and drifts into jargon ("narrative concept spine", "second-read moments") that are less concrete, so it sits between anchors 4 and 5 rather than clearly at 5.

4 / 5

Completeness

The "what" is clear (generates per-section website design reference images with enforced variety and palette consistency), but there is no "Use when..." clause or equivalent explicit trigger guidance — only the weakly implied "Optimized for landing pages, marketing sites, and product comps" — which caps completeness at 3 per the rubric guidelines. It is not a 4 because the 'when' is not an explicit usage trigger, and not a 2 because the 'what' is concrete and detailed.

3 / 5

Trigger Term Quality

Includes natural phrases users would say such as "landing page", "marketing sites", "website design references", "sections", and "hero", giving good keyword coverage, but misses common variations like "mockup", "wireframe", "web design", "hero section", or "UI design", which keeps it below the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

The per-section image rule and frontend-reference framing give it a clear niche distinct from generic image-generation or design-critique skills, but "website design references" and "landing page" could overlap with adjacent web-design/brand-styling skills, so minor overlap risk remains rather than minimal.

4 / 5

Total

15

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (1013 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository

nexu-io/open-design

Path

skills/imagegen-frontend-web/SKILL.md

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.