CtrlK
BlogDocsLog inGet started
Tessl Logo

css-border-gradient

Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.

70

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

93%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 exemplary single-file pattern skill: fully executable code in three variants with clear selection criteria, terse opinionated defaults, taste guardrails, and a validation checklist. The only structural weakness is that the application procedure is implied through criteria and checks rather than presented as an explicit sequence.

DimensionReasoningScore

Conciseness

The body is lean throughout: defaults are telegraphic ("Width: `1px`; use `2px` only for large hero cards", "subtle beats shiny"), pattern selectors are single-purpose lines ("Use this when the surface has a solid or translucent fill"), and it never explains CSS concepts Claude already knows. Every token earns its place, matching the top anchor.

5 / 5

Actionability

Three complete, copy-paste-ready examples cover the common cases: the border-box/padding-box CSS pattern, the mask-composite pseudo-element pattern for surfaces with complex backgrounds, and a Tailwind arbitrary-property one-liner for one-offs. Each variant ships with explicit selection criteria, matching the fully-executable anchor.

5 / 5

Workflow Clarity

The decision flow is unambiguous (surface fill type selects the pattern; one-offs use the Tailwind shortcut) and the "Quick Checks" section provides concrete validation checkpoints (no double border, radius match, focus accessibility). It falls short of a 5 because the procedure is conveyed through scattered criteria and a checklist rather than an explicit sequenced workflow, and the body exceeds the under-50-line simple-skill exception.

4 / 5

Progressive Disclosure

The skill is a single self-contained file with no bundle directories, and nothing in it warrants extraction: the three short patterns, taste rules, and quick checks are all core content that would be harder to use if split into references. Sections are clearly headed and scoped, which is the appropriate structure for a skill with no need for external references.

5 / 5

Total

19

/

20

Passed

Description

78%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 with an explicit what, an explicit 'Use when' clause full of natural trigger surfaces, and effective self-scoping against loud-glow alternatives. Its main gaps are a single-action what (no enumeration of the concrete pattern variants) and a few missing natural synonyms that would sharpen trigger matching and distinctiveness.

Suggestions

Enumerate the concrete treatments in the description (e.g., 'via CSS border-box layering, mask-composite pseudo-elements, or Tailwind arbitrary properties') to lift specificity from naming one action to listing several.

Add common user synonyms such as 'gradient outline' or 'glowing border (subtle)' to the trigger clause to broaden natural matching and further distinguish it from generic card-styling skills.

DimensionReasoningScore

Specificity

"Apply subtle gradient-border treatments for premium web surfaces" names the domain and a single concrete action, but the description does not list several distinct actions or the pattern variants (those live only in the body). This matches the anchor for naming a domain with 1-2 concrete actions but not comprehensive coverage, and falls short of the several-actions anchor above.

3 / 5

Completeness

The what is explicit ("Apply subtle gradient-border treatments for premium web surfaces") and the when is explicit with concrete trigger surfaces ("Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight"). Both are answered clearly in third person, matching the top anchor exactly.

5 / 5

Trigger Term Quality

Natural trigger phrases are present ("cards, pricing panels, nav bars, modals, buttons, or hero surfaces", "edge highlight", "without a loud glow") and map well to what users would say. A few common synonyms and variations (e.g., "outline", "ring", "glow effect", "border highlight") are missing, so it falls just below the comprehensive-coverage anchor.

4 / 5

Distinctiveness Conflict Risk

The niche is well carved out — "subtle", "refined edge highlight", and "without a loud glow" distinguish it from glow/neon or general animation styling skills. However, the trigger surfaces (cards, buttons, modals) are generic UI terms that closely related design/styling skills could also claim, giving minor overlap risk rather than a fully distinct trigger set.

4 / 5

Total

16

/

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