CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

dither-background

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overlays.

Quality

90%

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

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.

An excellent, fully executable skill body: complete working code with production-quality touches (DPR, reduced motion, cleanup), clear tuning guidance, and a verification checklist. The only improvements are trimming minor cross-section redundancy and considering splitting the canvas recipe into a bundled script file.

DimensionReasoningScore

Conciseness

The body is directive throughout with no explanations of concepts Claude already knows — the canvas recipe, tuning knobs, and avoid list are all instruction, not tutorial. It sits at 4 rather than 5 because of minor trimmable redundancy: the 'Use When' section restates the frontmatter description, and 'Visual Target', 'Avoid', and 'Quick Checks' each repeat the tiny-grain / monochrome / vignette points in slightly different words.

4 / 5

Actionability

The skill provides copy-paste-ready HTML markup, CSS, and a complete executable JS recipe — including DPR clamping, a prefers-reduced-motion guard, resize handling, an options object, and a returned cleanup function — with the actual wiring invocation shown at the end. This matches the 'fully executable; copy-paste ready' anchor.

5 / 5

Workflow Clarity

This is a simple single-purpose skill whose single action is unambiguous: drop in the markup, apply the CSS, call initDitherBackground with the tuning options. The 'Tuning Knobs' section guides iteration and the 'Quick Checks' section acts as an explicit verification checklist, satisfying the simple-skill exception for a full score. There are no destructive or batch operations, so no validation cap applies.

5 / 5

Progressive Disclosure

The body is well-organized with clear section headers and no buried or nested references, and no bundle files exist to mis-link. It scores 4 rather than 5 because the ~150-line inline canvas recipe is substantial content that could be split into a scripts/ asset, leaving SKILL.md as a leaner overview; the rubric reserves reference-free top marks for much shorter skills.

4 / 5

Total

18

/

20

Passed

Description

87%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.

A strong description that explicitly states what the skill produces and when to use it, with concrete visual terminology and a distinctive niche. The only gap is a handful of missing natural synonyms a user might use when requesting this effect.

DimensionReasoningScore

Specificity

The description names concrete deliverable specifics — 'Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering' — going beyond the anchor-3 level of a bare domain-plus-action. It stays at 4 rather than 5 because it centers on a single 'create' action with descriptive attributes rather than multiple distinct concrete actions.

4 / 5

Completeness

It explicitly answers both questions: the 'what' is 'Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering', and the 'when' is an explicit 'Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses... behind framed UI, hero content, or data overlays' with concrete trigger phrases. This matches the anchor-5 example's structure exactly.

5 / 5

Trigger Term Quality

Natural trigger phrases are well covered: 'dither field', 'bayer-style ordered dithering', 'monochrome', 'background', 'waves or cloud masses', 'hero content', 'data overlays', 'framed UI'. A few natural synonyms users might say (e.g. 'noise', 'grain', 'retro pixel background') are absent, matching the 'good coverage, a few natural terms missing' anchor rather than the comprehensive anchor 5.

4 / 5

Distinctiveness Conflict Risk

'Bayer-style ordered dithering' plus 'dark monochrome procedural background' carves out a clear niche with distinct triggers; virtually no other skill would fire on these phrases. It clearly fits the 'clear niche with distinct triggers; minimal conflict risk' anchor and not the minor-overlap anchor 4.

5 / 5

Total

18

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

MengTo/Skills

Path

agent-skills/web-design/dither-background/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.