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.

Quality

92%

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

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

The body is highly actionable and workflow-rich, with executable examples and strong validation/failure-recovery guidance. Its main weakness is progressive disclosure: everything lives inline in a long SKILL.md with no reference files to split out the prop surface or diagnosis material.

Suggestions

Move the 'Complete Customization Surface' prop table into a references/ file (e.g. REFERENCE.md) and link to it from a brief inline summary, reducing SKILL.md length and aiding navigation.

Extract 'Failure Diagnosis' into a separate TROUBLESHOOTING.md reference, keeping only a short pointer plus the most common symptom in SKILL.md.

Tighten explanatory prose such as 'The wrapper measures the child, paints the metal ring on top, and keeps the child interactive' to lift conciseness toward a 5.

Dimension	Reasoning	Score
Conciseness	The body is dense and avoids explaining concepts Claude already knows (no 'what is WebGL' padding), with every section earning its place; a few explanatory sentences such as 'The wrapper measures the child, paints the metal ring on top...' could be trimmed, keeping it just below a 5.	4 / 5
Actionability	Provides copy-paste-ready, executable TSX/CSS examples (baseline button, active-state toggle with hooks, card, sizing, reflections), a concrete prop table with defaults, and exact install commands covering the common cases.	5 / 5
Workflow Clarity	Clear sequence from 'Inspect Before Editing' through install, baseline, patterns, an 11-step 'Verification' checklist, and 'Failure Diagnosis' with feedback loops (symptom -> fix), including explicit validation steps (lint, typecheck, build, tests, git diff --check).	5 / 5
Progressive Disclosure	Well-organized with clear section headers, but at ~313 lines all content is inlined in SKILL.md with no bundle files or one-level-deep references; the full prop table and Failure Diagnosis are candidates for separate reference files that would aid navigation.	3 / 5
	Total	17 / 20 Passed

Description

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

The description is concise yet comprehensive: it states concrete actions, enumerates natural trigger surfaces and states, names the specific package and component, and uses third-person voice throughout. It explicitly covers both what the skill does and when to invoke it.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Add and tune animated liquid-metal WebGL borders' plus 'troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance' — giving comprehensive coverage of capabilities.	5 / 5
Completeness	Explicitly answers both 'what' ('Add and tune animated liquid-metal WebGL borders with the React metal-fx package') and 'when' ('Use when buttons... need a metallic active, selected, hover, focus, or premium border; when implementing...; or when troubleshooting...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Covers natural UI terms users would say — 'buttons, icon controls, chips, tabs, cards', 'active, selected, hover, focus, or premium border' — alongside synonyms and the component/package names, with no common variations missing.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear niche tied to the named 'metal-fx' package and 'MetalFx component from metal.jakubantalik.com', making overlap with unrelated skills minimal.	5 / 5
	Total	20 / 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/liquid-metal-border/SKILL.md
Commit: 321c769

Reviewed: ~8 hours 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.