CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

css-alpha-masking

Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.

Quality

92%

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

92%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 tight, fully actionable skill body: copy-paste CSS for both fade directions, explicit customization knobs, pitfalls, and clarifying questions, with no filler. Only minor cross-section redundancy keeps it from a perfect conciseness score.

Suggestions

Consolidate the -webkit-mask-image fallback note so it appears once (either the checklist or Pitfalls) to save tokens.

Fold the 'Questions to ask when specs are missing' into workflow step 1 to remove the overlap.

DimensionReasoningScore

Conciseness

Lean and non-pedagogical with every section short, but minor redundancy: the -webkit-mask-image fallback appears in both the Usage checklist and Common Pitfalls, and the 'Questions to ask' section overlaps workflow step 1. Fits anchor 4 (minor instances that could be trimmed) rather than 5.

4 / 5

Actionability

Two fully executable, copy-paste-ready CSS snippets cover both common cases (horizontal and vertical fades), plus concrete customization knobs ('to left', stop values, 'rgba(0,0,0,0.2)').

5 / 5

Workflow Clarity

A simple single-purpose skill whose action is unambiguous: confirm direction/stops, provide the snippet, offer tweaks, with clarifying questions listed. No destructive or batch operations, so no validation cap applies.

5 / 5

Progressive Disclosure

Under 50 lines with no need for external references; the body is organized into clear, well-labeled sections and no bundle files exist, so there are no buried or broken references.

5 / 5

Total

19

/

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 concise, third-person description that clearly states what the skill does and when to use it, with specific property names and explicit trigger phrases. Its only weaknesses are a single-action framing and a few missing natural synonyms in the trigger terms.

Suggestions

List a couple of distinct actions (e.g., 'Apply and customize CSS alpha masks') to reach full capability coverage.

Add common user phrasings to the trigger clause, such as 'fade out', 'gradient mask', or 'soft/feathered edges'.

DimensionReasoningScore

Specificity

Names the domain, exact technique, both fade directions, and both CSS properties ('Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image)'), but centers on a single action rather than the multiple distinct actions of the 5 anchor.

4 / 5

Completeness

Explicitly answers both what ('Apply CSS alpha masking with linear-gradient...') and when ('Use when asked for alpha masks, fade edges, or CSS mask gradients'), matching the anchor-5 pattern of concrete trigger phrases in third-person voice.

5 / 5

Trigger Term Quality

'Use when asked for alpha masks, fade edges, or CSS mask gradients' gives good natural phrases, but misses common variations users would say such as 'fade out', 'soft edges', 'gradient mask', or 'vignette'.

4 / 5

Distinctiveness Conflict Risk

A clear niche with distinct triggers (alpha masks, fade edges, CSS mask gradients) and named CSS properties; only minimal overlap risk with a generic CSS-gradients skill.

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/css-alpha-masking/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.