CtrlK
BlogDocsLog inGet started
Tessl Logo

liquid-metal-border

Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.

77

Quality

96%

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%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill body is lean, highly actionable, and clearly sequenced with validation checkpoints and error-recovery guidance. Its one weakness is progressive disclosure: a large, single-file skill with no external reference files despite material that could be split out.

Suggestions

Move the 'Complete Customization Surface' prop table into a references/ file (e.g. PROPS.md) and link to it from a brief summary, keeping SKILL.md as an overview.

Extract 'Failure Diagnosis' into a references/TROUBLESHOOTING.md referenced one level deep from the body, reducing inline length while preserving discoverability.

Consider pulling the full 'Active-State Pattern' and 'Static Border and Card Pattern' examples into an examples reference, leaving a minimal baseline example inline.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence, avoids explaining what React/WebGL are, and every section (Core Contract, prop table, tuning defaults) earns its place with actionable detail rather than padding.

3 / 3

Actionability

Provides copy-paste-ready install commands, named imports, full executable component examples with CSS, and a complete prop table with values and defaults — fully executable rather than pseudocode.

3 / 3

Workflow Clarity

Sequences Inspect → Install → baseline patterns → customization, then an 11-step Verification checklist and a Failure Diagnosis section with explicit error-recovery feedback loops (e.g. 'The focus ring disappeared: set normalizeHostStyles to false...').

3 / 3

Progressive Disclosure

Well-organized with clear sections, but all ~317 lines are inline with no bundle files (references/, scripts/, assets/ absent), and content that could be split out (the full prop reference, failure diagnosis) lives in SKILL.md rather than one-level-deep references — matching the 'content that should be separate is inline' anchor.

2 / 3

Total

11

/

12

Passed

Description

100%

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 is specific, trigger-rich, and clearly delineates both capability and use conditions in third person. It occupies a distinct niche tied to a concrete package, with no vague fluff or over-claims.

DimensionReasoningScore

Specificity

Names concrete actions ('Add and tune animated liquid-metal WebGL borders', 'troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance') across multiple specific surfaces, matching the anchor that lists several specific concrete actions.

3 / 3

Completeness

Explicitly answers what ('Add and tune animated liquid-metal WebGL borders with the React metal-fx package') and when via a clear 'Use when ...' clause with multiple triggers, satisfying the both-what-and-when anchor.

3 / 3

Trigger Term Quality

Covers natural terms a user would say — 'buttons, icon controls, chips, tabs, cards', 'active, selected, hover, focus, or premium border', 'presets, themes, strength, glow, reflections' — giving broad coverage of plausible phrasings rather than jargon alone.

3 / 3

Distinctiveness Conflict Risk

Scoped to the specific metal-fx package and liquid-metal border niche with a named component and domain (metal.jakubantalik.com), making it unlikely to trigger for unrelated skills.

3 / 3

Total

12

/

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.