animated-glow-borderlisted
Install: claude install-skill Yaz-inc/yazinc-ai-toolkit
# Animated Glow Border
Add one reusable CSS border effect that belongs to the host design system and degrades safely.
## Workflow
1. Inspect the project theme. Identify the surface background, primary color, accent color, radius, and existing motion rules.
2. Choose bright arc colors for dark surfaces and saturated darker colors for light surfaces.
3. Apply the effect only to elements that need emphasis. Avoid turning a full interface into continuous visual noise.
4. Use a registered angle custom property, a conic gradient, and a masked pseudo-element so the gradient occupies only the border.
5. Keep content above the pseudo-element and make the effect ignore pointer events.
6. Add reverse motion with `animation-direction: reverse` when a paired or closing panel needs visual contrast.
7. Disable animation for `prefers-reduced-motion` and print.
8. Verify radius alignment, focus visibility, contrast, performance, and graceful static rendering.
## Core pattern
```css
:root {
--glow-edge: #67e8f9;
--glow-core: #8b5cf6;
}
@property --glow-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes glow-border-rotate {
to { --glow-angle: 360deg; }
}
.glow-border {
position: relative;
isolation: isolate;
border-radius: 24px;
}
.glow-border::after {
content: "";
position: absolute;
z-index: 3;
inset: -1px;
padding: 2px;
border-radius: inherit;
pointer-events: none;
background: conic-gradient(
from var(--glow-angle),