progressive-blur

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.

Quality

85%

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

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.

A highly actionable, well-structured skill whose copy-paste-ready snippets and clear workflow make it immediately usable. The main weakness is token duplication from two near-identical full CSS blocks that could be collapsed into one parameterized example.

Suggestions

Replace the two near-identical full snippets with a single snippet plus an explicit 'flip direction' instruction (or a small reference file), to reduce token duplication while keeping copy-paste usability.

Consider moving one full variant into a references/ file and signaling it from the body to satisfy progressive disclosure at the top anchor.

Dimension	Reasoning	Score
Conciseness	Lean prose with no over-explanation of concepts Claude already knows, but the two near-identical ~100-line CSS snippets (top vs bottom differ only in inset/height and gradient direction) represent notable token duplication that could be DRY'd given the 'Customization knobs' already document the flip.	4 / 5
Actionability	Two fully executable, copy-paste-ready HTML/CSS snippets cover the common top and bottom cases, and the 'Customization knobs' give concrete parameters, matching the top anchor for copy-paste-ready guidance.	5 / 5
Workflow Clarity	The simple-skill exception applies: a clear 3-step sequence (confirm placement, provide snippet, offer tweaks) plus a 'Questions to ask when specs are missing' section makes the single action unambiguous, with no destructive/batch operations requiring validation.	5 / 5
Progressive Disclosure	Well-organized into clear sections (Workflow, Usage checklist, Top blur, Bottom blur, Customization knobs, Common pitfalls, Questions) with no nested references, but the skill exceeds 50 lines by inlining two large duplicate code blocks that a reference file or a single parameterized snippet could have handled.	4 / 5
	Total	18 / 20 Passed

Description

82%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, well-targeted description that clearly states both capability and explicit trigger conditions with natural synonyms. The only notable issue is the use of imperative ('Create') second-person voice instead of the recommended third-person voice, which lowers the specificity score.

Suggestions

Rewrite in third-person voice to match the recommended style, e.g. 'Creates a layered CSS progressive blur ...' instead of 'Create a layered CSS progressive blur ...'.

Add one or two more concrete actions (e.g. 'tune blur strength and step count') to broaden the specificity coverage beyond a single create action.

Dimension	Reasoning	Score
Specificity	Names the domain ('layered CSS progressive blur (top or bottom)') and the concrete mechanism ('multiple backdrop-filter masks') but states essentially one action with parameters rather than a list of distinct actions; the imperative 'Create' is second-person voice, triggering the -1 specificity penalty from a base of 4.	3 / 5
Completeness	Explicitly answers both what ('Create a layered CSS progressive blur ... using multiple backdrop-filter masks') and when ('Use when asked for ...') with concrete trigger phrases, matching the top anchor.	5 / 5
Trigger Term Quality	Includes natural phrases a user would say — 'progressive blur', 'gradient blur overlay', and 'stepped blur masks' — giving good keyword coverage with synonyms, though a few common variants (e.g. 'frosted glass edge') are absent.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (layered CSS progressive blur) with specific, distinctive triggers that are unlikely to fire for unrelated skills.	5 / 5
	Total	17 / 20 Passed

Validation

100%

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

Validation for skill structure

No warnings or errors.

Repository: MengTo/Skills
Path: agent-skills/web-design/progressive-blur/SKILL.md
Commit: 4c716b5

Reviewed: 1 day 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.