beam-glow-states

Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.

Quality

89%

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

78%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 dense, executable skill body with strong code examples, a full prop API table, and a solid verification checklist. It is slightly verbose in places and its progressive disclosure is undermined by a REFERENCES.md link that points to a non-existent file, with bulk reference content inlined rather than split out.

Suggestions

Create the referenced REFERENCES.md (or remove the dangling link) so the single external reference is real and navigable.

Move the large 'API reference' prop table and the CSS snippets into a separate reference file, keeping SKILL.md a lean overview with one-level-deep pointers.

Tighten 'Respect the wrapper' and 'Keep it restrained', which overlap with guidance already implied by the per-state wiring sections, to improve token efficiency.

Dimension	Reasoning	Score
Conciseness	Mostly lean and assumes competence — it skips explaining what React or animations are and jumps to code — but the 'Respect the wrapper' and 'Keep it restrained' sections restate some guidance that could be trimmed. Noticeably above the midpoint but not maximally lean.	4 / 5
Actionability	Copy-paste ready TSX/CSS throughout, a complete prop API table with types and defaults, concrete numeric ranges for strength/duration, and an executable useReducedMotion hook — fully executable with common cases covered.	5 / 5
Workflow Clarity	Clear sequencing: install/import, choose effect, wire per state, resolve overlapping states, reduced-motion fallback, then a dedicated 'Verify' checklist with explicit test cases. Minor validation gaps (no explicit build/lint verification command) keep it just below a 5.	4 / 5
Progressive Disclosure	Well-organized with section headers, and it points to a one-level-deep REFERENCES.md as a links-only source list, but that referenced file does not exist in the bundle — the inline API table and CSS are bulk content that could live in separate reference files, and the dangling reference is not clearly signaled.	3 / 5
	Total	16 / 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.

A strong, third-person description that names the package, lists concrete actions and covered states, and gives an explicit 'Use when' trigger with natural surface terms. Both the 'what' and 'when' are clearly answered with minimal conflict risk.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions and coverage areas: 'Create React loading, processing, selected, current, focus, and pressed states ... includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails' — comprehensive and concrete rather than abstract.	5 / 5
Completeness	Explicitly answers both: 'what' ('Create React ... states with the border-beam package's animated edge glow') and 'when' ('Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam').	5 / 5
Trigger Term Quality	Surfaces natural user-facing terms users actually say — 'card, button, input, tab, option, task panel, or agent surface' — alongside the package name, giving comprehensive trigger coverage.	5 / 5
Distinctiveness Conflict Risk	Carves a clear niche (border-beam animated edge glow for specific React UI surfaces) with distinct, low-overlap triggers; unlikely to fire for unrelated skills.	5 / 5
	Total	20 / 20 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 1 missing	Warning

	Total	15 / 16 Passed

Repository: MengTo/Skills
Path: agent-skills/web-design/beam-glow-states/SKILL.md
Commit: 321c769

Reviewed: 9 days 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.