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.

nexu-io Bundle

Fx Gradient Blob

Soft drifting gradient blobs — a warm ambient glow. 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.

Sep 17
nexu-io Bundle

Fx Sparkle Trail

A trail of sparkles — a light, delightful accent. 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.

Sep 17
nexu-io Bundle

Anim Fadeoutrightbig

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

Sep 17
nexu-io Bundle

Anim Fadeouttopright

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

Sep 17
nexu-io Bundle

Anim Rotateinupright

Rotate In Up 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.

Sep 17
nexu-io Bundle

Anim Rotateoutupleft

Rotate Out Up 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.

Sep 17
nexu-io Bundle

Fx Letter Explode

Letters fly in from everywhere and settle into the word. 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.

Sep 17
nexu-io Bundle

Fx Magnetic Field

Field lines bending around poles — a hypnotic 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.

Sep 17
nexu-io Bundle

Fx Particle Burst

A bright particle burst from the center — a celebratory accent. 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.

Sep 17
nexu-io Bundle

Anim Fadeinbottomleft

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

Sep 17
nexu-io Bundle

Anim Lightspeedinleft

Light Speed 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.

Sep 17
nexu-io Bundle

Anim Rotateindownleft

Rotate In Down 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.

Sep 17
nexu-io Bundle

Anim Rotateoutupright

Rotate Out Up 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.

Sep 17
nexu-io Bundle

Fx Knowledge Graph

Linked nodes drifting — a data / AI 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.

Sep 17
nexu-io Bundle

Anim Fadeinbottomright

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

Sep 17
nexu-io Bundle

Anim Fadeoutbottomleft

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

Sep 17
nexu-io Bundle

Anim Lightspeedinright

Light Speed 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.

Sep 17
nexu-io Bundle

Anim Rotateindownright

Rotate In Down 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.

Sep 17
nexu-io Bundle

Anim Rotateoutdownleft

Rotate Out Down 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.

Sep 17
nexu-io Bundle

Fx Typewriter Multi

Multi-line typewriter — types lines in sequence. 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.

Sep 17
nexu-io Bundle

Anim Fadeoutbottomright

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

Sep 17
nexu-io Bundle

Anim Rotateoutdownright

Rotate Out Down 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.

Sep 17
nexu-io Bundle

Fx Counter Explosion

A number counts up then bursts — for a big stat. 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.

Sep 17
dnyoussef Bundle

React Specialist

React Specialist

Sep 17
dnyoussef Bundle

Wcag Accessibility

Wcag Accessibility

Sep 17
dnyoussef Bundle

Frontend Specialists

Frontend Specialists

Sep 17
fluxonlab Skill

IOS Hig Review

Use when you need to review iOS interfaces against platform conventions, navigation, accessibility, and touch ergonomics.

Sep 17
fluxonlab Skill

Web Component Design

Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

Sep 17
fluxonlab Skill

Webapp Testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Sep 17
fluxonlab Skill

Python Design Patterns

Python design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance. Use this skill when designing a new service or component from scratch and choosing how to layer responsibilities, when refactoring a God class or monolithic function that has grown too large, when deciding whether to add a new abstraction or live with duplication, when evaluating a pull request for structural issues like tight coupling or leaking internal types, when choosing between inheritance and composition for a new class hierarchy, or when a codebase is becoming hard to test because of entangled I/O and business logic.

Sep 17
fluxonlab Skill

React State Management

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

Sep 17
fluxonlab Bundle

Tailwind Design System

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Sep 17
fluxonlab Skill

Web Design Review

Use when you need to review web design quality, hierarchy, layout, copy density, and product fit.

Sep 17
fluxonlab Skill

Visual Polish Pass

Use when you need to perform final visual polish checks for alignment, rhythm, affordances, and professional finish.

Sep 17
fluxonlab Skill

Android Material Review

Use when you need to review Android interfaces against Material conventions, navigation, accessibility, and device behavior.

Sep 17
fluxonlab Skill

Accessibility Audit

Use when you need to audit semantic HTML, keyboard navigation, focus, contrast, labels, and screen reader basics.

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 fx-gradient-blob, fx-sparkle-trail, anim-fadeoutrightbig. 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.