Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

gradient-text

Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

gradual-blur

A soft progressive blur fades content out toward an edge — a premium "more below" affordance for a scrolling list/section. Keep the readable content above the blur. Degrades gracefully where backdrop-filter is unsupported.

466 repo starsObserved in 1 repos
Design

grainient

A distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

image-trail

Thumbnails trail behind the cursor and fade — a gallery/portfolio hero flourish. One trail area per page; heavy on content pages. Off on touch and under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

iridescence

A living GPU shader background rendered in dependency-free WebGL — a distinctive, marketing-grade hero backdrop. One per view; put a scrim behind text. Renders a static frame under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

kinetic-headline

Stagger a headline's words (or letters) in on load, one after another. Use for a single hero headline or a title card in a launch video. Honors prefers-reduced-motion. One per screen; never use on body copy or must-read content.

466 repo starsObserved in 1 repos
Design

light-rays

A distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

lightfall

A distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

lightning

A distinctive GPU shader background rendered in dependency-free WebGL — a marketing-grade hero backdrop. One per view; scrim behind text. Renders a static frame under prefers-reduced-motion.

466 repo starsObserved in 1 repos
Design

like-burst

Add a celebratory particle burst to a like / favorite / reaction button. A delight micro-interaction that fires on user tap only (never on load), bursts on the "like" transition (not un-like), and ships a prefers-reduced-motion fallback. Use when a small, earned moment of positive feedback will feel good — and only one such moment per screen.

466 repo starsObserved in 1 repos
Design