Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
xpert-ai Bundle Anim Zoominup 2Zoom In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Gradient Text 2
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.
- xpert-ai Bundle Anim Backoutup 2
Back Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Bounceout 2
Bounce Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeoutup 2
Fade Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Headshake 2
Head Shake — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Heartbeat 2
Heart Beat — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Rotateout 2
Rotate Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Slideinup 2
Slide In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Zoomoutup 2
Zoom Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Fx Confetti 2
Confetti fires across the frame — for wins and reveals. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
- xpert-ai Bundle Fx Firework 2
Fireworks launch and burst — a festive hero moment. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
- xpert-ai Bundle Shimmer Button 2
Make one primary CTA feel premium: a soft band of light sweeps across it (slowly at rest, faster on hover). Reserve for the single primary button; keep it subtle. Pure CSS; the sweep stops (solid button) under prefers-reduced-motion. Do not use on secondary/destructive buttons or many at once.
- xpert-ai Bundle Anim Backindown 2
Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Backinleft 2
Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Bounceinup 2
Bounce In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeindown 2
Fade In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeinleft 2
Fade In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Rubberband 2
Rubber Band — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Slideoutup 2
Slide Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Zoomindown 2
Zoom In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Zoominleft 2
Zoom In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Fx Shockwave 2
An expanding shockwave ripple — an impactful beat. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
- xpert-ai Bundle Fx Starfield 2
A slow drifting starfield — a calm cosmic backdrop. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.
- xpert-ai Bundle Card Lift Hover 2
Lift a clickable card toward the viewer on hover with a deepening shadow — a tactile, responsive cue. Pure CSS, no JS. Only use on actually-clickable cards (motion implies clickability). Honors prefers-reduced-motion (static). Avoid on very dense grids where many lifts feel noisy.
- xpert-ai Bundle Electric Border 2
A jittery electric outline traces a card — an energetic accent for one hero element. One per view. Pure CSS; a static solid outline remains under prefers-reduced-motion.
- xpert-ai Bundle Anim Backinright 2
Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Backoutdown 2
Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Backoutleft 2
Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Bounceoutup 2
Bounce Out Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeinright 2
Fade In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeinupbig 2
Fade In Up Big — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeoutdown 2
Fade Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeoutleft 2
Fade Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Slideindown 2
Slide In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Slideinleft 2
Slide In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include anim-zoominup, gradient-text, anim-backoutup. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.