css-skills

Pure CSS hover effects and micro-interaction patterns for Claude Code.
Zero JS · Zero dependencies · No SSR issues · Auto-matches your design style.

▶ Live Interactive Demo →

What it does

Two Claude Code skills that detect your existing design style and automatically apply matching CSS effects — no manual picking required.

Skill	Trigger condition	Solves
css-hover-effects	:hover	"This UI feels flat and unclickable"
css-micro-fx	:focus / :active / state change	"Users don't know if their action worked"

Why not just use Framer Motion / GSAP?

	css-skills	Motion (Framer)	GSAP
Bundle size	0 KB	32 KB gzipped	69 KB min
SSR / Next.js	No issues	Hydration conflicts	Needs config
Framework	Any	React only	Any
Learning curve	None	Medium	High
Use case	Hover + feedback	Complex animation	Timeline animation

These skills don't replace GSAP or Motion — they handle the lightweight layer those libraries are overkill for.

Install

claude install github.com/dabaibian/css-skills

---

css-hover-effects

100+ hover patterns across 7 categories, auto-matched to your design style.

Style → Effect mapping (automatic)

Your design style	Claude picks
Minimal (Notion / Linear / Vercel)	Float, Underline From Center, Border Fade
Bold (Stripe / agencies)	Sweep, Shutter In, Glow, Pop
Playful (consumer apps)	Pop, Wobble, Bubble, Jelly
Corporate (B2B / dashboards)	Background Fade, subtle Float
Dark Premium (Raycast / dev tools)	Glow, Shadow Radial, Float Shadow

Effect categories

• 2D Transitions — Float, Grow, Pop, Wobble, Buzz, Bob, Pulse...
• Background — Sweep, Shutter In, Radial Out, Background Fade...
• Border — Underline From Center/Left, Border Fade, Ripple, Reveal...
• Shadow & Glow — Float Shadow, Glow, Shadow Radial...
• Icons — Icon Float, Spin, Forward, Grow...
• Speech Bubbles — Bubble Top/Right/Bottom/Left with tooltip content
• Curls — Page-curl at any corner

---

css-micro-fx

Functional feedback patterns for forms, buttons, loaders and links.

Effect categories

Input focus

• Bars — bottom border slides in from center (universal)
• Highlight — soft background tint on focus
• Glow — glowing focus ring (dark/bold styles)
• Label Float — label animates above input on focus

Button click / hover

• Bubble — ripple from click point
• Jelly — elastic squish on active
• Shine — light sweep on hover
• Slide — background slides in on hover
• Press — depth press on click
• Pulse — persistent attention ring (CTA only)

Loading states

• Pillars — 5-bar wave (fits inside buttons)
• Overline — top-of-page progress bar
• Dots — three-dot pulse (chat / AI "thinking")
• Ring — classic circular spinner

Completion

• Strikethrough — line draws through completed task text

Text links

• Underline Draw — line draws in on hover
• Underline Slide Out — reverse surprise underline
• Color Shift — text color transitions to accent

---

Usage example

Claude automatically detects your style and applies effects. You just ask:

"Add hover effects to the nav links and feature cards"
→ Claude reads your CSS, detects MINIMAL style, applies
  Underline From Center to nav + Float to cards

"The form inputs feel flat"
→ Claude applies fx-input-bars to all inputs, matches accent color

"Show a loading state on the submit button"
→ Claude adds fx-loader-pillars and wires it to the submit handler

Accessibility

All effects include prefers-reduced-motion support. Claude adds this block automatically:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Attribution

Pattern library derived from:

• Hover.css by Ian Lunn — MIT License
• cssfx by jolaleye — MIT License

Both modernized with CSS custom properties and updated syntax.

License

MIT © dabaibian

---

友情链接

• LINUX DO 社区 — 凝聚全网的高质量技术与资源分享社区。