CtrlK
BlogDocsLog inGet started
Tessl Logo

image-first-grid-layout

Create an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.

49

Quality

53%

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 ./agent-skills/web-design/image-first-grid-layout/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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 well-organized, self-contained design-direction skill with specific visual directives and no unnecessary concept explanations. Its main weaknesses are cross-section redundancy, an empty Workflow section, and the lack of concrete implementation values that would make the guidance fully actionable.

Suggestions

Fill the empty '## Workflow' section with a short sequenced process (e.g. establish the full-bleed image stage → overlay the grid scaffold → anchor content blocks → tune gradient/grid visibility → verify readability) to improve workflow clarity.

Collapse the overlapping guidance across Scope, Visual target, Implementation guidance, and Recommended patterns into a single authoritative section to remove redundancy and tighten token use.

Add a few concrete implementation values or tokens (gradient opacity ranges, grid column counts, suggested spacing, accent derivation method) to move the guidance from directional to actionable.

DimensionReasoningScore

Conciseness

The directives are mostly efficient and avoid explaining basic concepts, but the full-bleed-image / guide-rail / anchored-content / restrained-palette ideas recur across Scope, Visual target, Implementation guidance, and Recommended patterns, and the '## Workflow' header is empty — so not every token earns its place.

2 / 3

Actionability

It names specific visual treatments ('translucent dark fills, thin borders, and small moving highlight sweeps', 'split-column scaffold', 'additive streaks'), which is more concrete than vague direction, but provides no measurable values, tokens, or code, so it stays directional rather than copy-paste ready.

2 / 3

Workflow Clarity

Content is organized thematically rather than as a sequenced process, and the '## Workflow' section is present but empty; there is no ordered set of steps to follow, so it sits at the steps-listed-but-incomplete anchor rather than a clear sequenced workflow.

2 / 3

Progressive Disclosure

At roughly 50 lines with no need for external references (no references/scripts/assets bundle exists), the skill is well-organized into clearly labeled sections (Scope, Visual target, Implementation guidance, Recommended patterns, Tuning knobs, Avoid), which satisfies the simple-skill allowance for progressive disclosure.

3 / 3

Total

9

/

12

Passed

Description

50%

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 concretely names the design domain and its key visual elements, but functions as a single composite action with no explicit 'Use when…' trigger guidance. Adding natural trigger terms and a when-to-use clause would lift completeness and trigger quality.

Suggestions

Append a 'Use when…' clause naming natural user triggers, e.g. 'Use when building an image-led or full-bleed photography grid layout, an immersive cinematic hero, or an overlay-driven design system.'

Reframe the lead as multiple distinct concrete actions (e.g. 'Build full-bleed image stages, overlay measured grid guides, anchor content blocks, and add restrained technical overlays') to push specificity toward 3.

Add common natural variations users would say ('immersive image hero', 'photography-led layout', 'cinematic grid') to broaden trigger coverage.

DimensionReasoningScore

Specificity

It names a concrete domain and lists specific elements ('full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays'), but relies on a single composite verb ('Create') rather than multiple distinct concrete actions like the score-3 anchor ('Extract… fill forms… merge documents').

2 / 3

Completeness

It clearly states what the skill does, but contains no 'Use when…' clause or equivalent explicit trigger guidance; per the judging guidelines a missing trigger clause caps completeness at 2.

2 / 3

Trigger Term Quality

Terms like 'image-led grid design system' and 'full-bleed photography' are semi-natural for a design-literate user, but they lean specialized and lack common variations or explicit trigger phrasing a user would actually say.

2 / 3

Distinctiveness Conflict Risk

The image-first grid niche is fairly distinctive, but without explicit triggers it could still overlap with sibling visual-layout or design-system skills, so it does not reach the clearly-differentiated score-3 anchor.

2 / 3

Total

8

/

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
MengTo/Skills
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.