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.

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

Quality

Content

55%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is highly actionable with a clear sequenced workflow and verification checklist, but it is severely verbose with heavy repetition and is a monolithic single file with no progressive disclosure, dragging down conciseness and structure scores.

Suggestions

Deduplicate the repeated directives: state the 'one image per section' and 'avoid left-text/right-image default' rules once in their primary sections and reference them elsewhere rather than re-explaining them four-plus times.

Split the large option catalogs (section 2 combinatorial engine, section 11 component guidelines, section 15 default packs) into one-level-deep reference files in references/ and link to them, turning SKILL.md into a lean overview.

Remove the motivational/marketing framing ('elite frontend image art director', 'Awwwards-level', 'premium scrollscape') and the 21-item Clarity Check that restates earlier rules, keeping only the distinct verification criteria.

Dimension	Reasoning	Score
Conciseness	At nearly 1000 lines the body is highly verbose and padded: the 'one image per section' rule is repeated verbatim across the HARD OUTPUT RULE, section 5, section 17, and section 19, and the 'left-text/right-image is overused' bias is restated in at least four separate sections, matching the verbose/padded anchor rather than the mostly-efficient one.	1 / 3
Actionability	For an instruction-only image-generation skill the guidance is highly actionable: concrete option menus (theme paradigms, background modes, composition anchors, CTA variations, hero scales), explicit default section counts, worked Example 1/2/3 interpretations, and a specific 16-step response procedure give copy-ready direction.	3 / 3
Workflow Clarity	Section 19 lays out an explicit sequenced 16-step response procedure and section 17 provides a 21-point Clarity Check that functions as a pre-output verification checklist, with clear default-count rules in section 5; this is not a destructive/batch operation so the validate-fix-retry cap does not apply.	3 / 3
Progressive Disclosure	No bundle files exist (references/, scripts/, assets/ are absent) and the entire skill is a single monolithic ~980-line SKILL.md with all option menus, component guidelines, and example packs inline rather than split into one-level-deep reference files, which is a clear progressive-disclosure failure despite the good in-file section organization.	1 / 3
	Total	8 / 12 Passed

Description

67%

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 specific and distinctive with a clear niche, but it omits an explicit 'Use when...' trigger clause and has only partial coverage of natural trigger terms, capping completeness and trigger quality at 2.

Suggestions

Add an explicit 'Use when...' clause naming natural user phrases (e.g. 'Use when the user wants website design references, landing page comps, hero section mockups, or per-section web design images') to lift completeness to 3.

Broaden trigger-term coverage in the description itself to include common variations users actually say, such as 'web mockup', 'hero image', 'section comp', and 'design reference', rather than relying on the separate triggers field.

Trim the marketing-flavored framing ('Elite frontend image-direction skill', 'premium') slightly so the concrete capabilities dominate the description.

Dimension	Reasoning	Score
Specificity	The description lists multiple concrete actions including 'generate ONE separate horizontal image FOR EVERY section', 'Enforces composition variety', 'varied hero scales (giant / mid / mini minimalist)', 'narrative concept spine', and 'single consistent palette across all images', matching the anchor for multiple specific concrete actions.	3 / 3
Completeness	The 'what' is strong and detailed, but there is no explicit 'Use when...' clause or equivalent trigger guidance in the description text; the 'when' is only implied via 'Optimized for landing pages, marketing sites, and product comps', so per the judging guideline completeness is capped at 2.	2 / 3
Trigger Term Quality	It includes some relevant natural terms ('landing pages', 'marketing sites', 'product comps', 'website design references') but lacks coverage of common user phrasings like 'web design mockup', 'hero image', or 'section mockups', and the description itself does not surface the explicit trigger terms that live separately in the frontmatter triggers field.	2 / 3
Distinctiveness Conflict Risk	The niche is clearly distinct — frontend image-direction producing one horizontal reference image per website section — and the distinctive one-image-per-section rule makes it unlikely to trigger for the wrong skill.	3 / 3
	Total	10 / 12 Passed

Validation

87%

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

Validation for skill structure

Criteria	Description	Result
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
Commit: f2760fd

Reviewed: 3 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.