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.

practice019 Bundle

Url To Code

Recreate an authorized live website or app URL as a faithful, runnable, frontend-only local implementation.

Sep 17
practice019 Bundle

Image To Code

Implement a selected image, screenshot, mockup, generated concept, or design frame as a faithful, responsive, interactive frontend in the target codebase.

Sep 17
practice019 Bundle

Report To Google Doc

Narrow conversion skill. Invoke only when the user explicitly asks to convert an existing local or blob-hosted HTML analytics report into a Google Doc, DOCX, or shareable document.

Sep 17
practice019 Bundle

Report To Google Slides

Narrow conversion skill. Invoke only when the user explicitly asks to convert an existing HTML analytics report into a native Google Slides deck.

Sep 17
jmagly Skill

Validate Component

Validate a single AIWG component (skill, agent, or command) for completeness and correctness

Sep 17
jmagly Skill

Validate Component 2

Validate a single AIWG component (skill, agent, or command) for completeness and correctness

Sep 17
jmagly Bundle

Civic Publish Gate

Run deterministic source, citation, freshness, privacy, meeting-certainty, accessibility, correction-state, and human-approval checks before civic publication.

Sep 17
jmagly Skill

Civic Newsroom Plan

Plan an evidence-bound civic newsroom workflow with provenance, privacy, citation, correction, accessibility, and human publication gates.

Sep 17
jmagly Skill

Color Accessibility

WCAG accessibility analysis for color palettes including contrast ratios, compliance checking, and remediation suggestions. Use when user needs to verify colors meet accessibility standards.

Sep 17
xpert-ai Bundle

Ripple

A Material-style ripple spreads from the point of contact. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.

Sep 17
xpert-ai Bundle

Toast Pop

A toast slides up from the bottom, holds, then fades away. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.

Sep 17
xpert-ai Bundle

Anim Flip

Flip — 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.

Sep 17
xpert-ai Bundle

Anim Tada

Tada — 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.

Sep 17
xpert-ai Bundle

Anim Flash

Flash — 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.

Sep 17
xpert-ai Bundle

Anim Hinge

Hinge — 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.

Sep 17
xpert-ai Bundle

Anim Jello

Jello — 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.

Sep 17
xpert-ai Bundle

Anim Pulse

Pulse — 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.

Sep 17
xpert-ai Bundle

Anim Shake

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.

Sep 17
xpert-ai Bundle

Anim Swing

Swing — 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.

Sep 17
xpert-ai Bundle

Shiny Text

A soft highlight sweeps across muted text — a quiet premium shimmer for one short label ("new", "pro", a CTA word). Keep the base text readable; one or two per view. Pure CSS; solid under reduced-motion.

Sep 17
xpert-ai Bundle

Anim Bounce

Bounce — 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.

Sep 17
xpert-ai Bundle

Anim Fadein

Fade In — 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.

Sep 17
xpert-ai Bundle

Anim Rollin

Roll In — 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.

Sep 17
xpert-ai Bundle

Anim Shakex

Shake X — 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.

Sep 17
xpert-ai Bundle

Anim Shakey

Shake Y — 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.

Sep 17
xpert-ai Bundle

Anim Wobble

Wobble — 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.

Sep 17
xpert-ai Bundle

Anim Zoomin

Zoom In — 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.

Sep 17
xpert-ai Bundle

Border Beam

Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion.

Sep 17
xpert-ai Bundle

Glitch Text

An RGB-split glitch flickers across a headline — a techy, edgy reveal. One short line; techy tones only. Pure CSS; steady under prefers-reduced-motion.

Sep 17
xpert-ai Bundle

Star Border

A soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.

Sep 17
xpert-ai Bundle

Bottom Sheet

A bottom sheet slides up over a dimmed backdrop, then dismisses. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.

Sep 17
xpert-ai Bundle

Button Press

A button that springs down on press and pops back — tactile tap feedback. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.

Sep 17
xpert-ai Bundle

Checkbox Pop

A checkbox that pops and draws its check on toggle. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.

Sep 17
xpert-ai Bundle

Anim Fadeout

Fade 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.

Sep 17
xpert-ai Bundle

Anim Flipinx

Flip In X — 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.

Sep 17
xpert-ai Bundle

Anim Flipiny

Flip In Y — 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.

Sep 17

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include url-to-code, image-to-code, report-to-google-doc. 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.