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.

demerzels-lab Bundle

Lb Motion Skill

Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)

10 Sep 17
demerzels-lab Bundle

Generate Presentation

Generate professional HTML and PDF presentations from markdown content, URLs, or topics.

10 Sep 17
demerzels-lab Bundle

Animation Gen

Generate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.

10 Sep 17
demerzels-lab Bundle

Component Gen

Generate React components from plain English descriptions. Use when you need UI components fast.

10 Sep 17
demerzels-lab Bundle

Custom Smtp Sender

A skill to send emails with support for markdown, HTML.

10 Sep 17
demerzels-lab Bundle

Local Web Search Skill

Free local web search via DuckDuckGo HTML scraping with no API key.

10 Sep 17
demerzels-lab Bundle

Markdown Exporter

Convert Markdown text to DOCX, PPTX, XLSX, PDF, PNG, HTML, IPYNB, MD, CSV, JSON, JSONL, XML files, and extract code.

10 Sep 17
demerzels-lab Bundle

Materials Workbench

Materials editor workbench — React UI and Express server to render JSON schemas to images and generate schemas.

10 Sep 17
demerzels-lab Bundle

Sparkle Vpn

Control Sparkle VPN - start and stop VPN connections using Mihomo core directly.

10 Sep 17
demerzels-lab Bundle

Web Architecture

Multi-agent orchestration for complex TypeScript/Next.js/Convex projects.

10 Sep 17
demerzels-lab Bundle

Calibre Catalog Read

Read Calibre catalog data via calibredb over a Content server, and run one-book analysis workflow that writes HTML.

10 Sep 17
demerzels-lab Bundle

Next Cache Components

Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag.

10 Sep 17
demerzels-lab Bundle

Shelly Landing Gen

Generate complete, responsive HTML landing pages from a product name, tagline, and description.

10 Sep 17
demerzels-lab Bundle

Lb Tailwindcss Skill

Complete Tailwind CSS documentation.

10 Sep 17
demerzels-lab Bundle

React Native Logs CLI

Use rn-logs to read React Native Metro logs via CDP without MCP overhead.

10 Sep 17
demerzels-lab Bundle

Cognitive Clarity

Cognitive accessibility linter for outbound messages.

10 Sep 17
demerzels-lab Bundle

Fosmvvm React View Generator

Generate React components that render FOSMVVM ViewModels.

10 Sep 17
demerzels-lab Bundle

Wasm Spa Autofix React Imports

Meticulously detect and fix missing React/TSX imports, undefined components, and bundler runtime errors in the WASM.

10 Sep 17
demerzels-lab Bundle

Web Markdown Navigator

Fetch webpages and return clean markdown instead of raw HTML.

10 Sep 17
demerzels-lab Bundle

Sr Next Clerk Expert

Senior-level Clerk authentication expertise for Next.js 15/16+ applications.

10 Sep 17
demerzels-lab Bundle

Colorkit

Expert guidance on ColorKit, a Swift library for advanced color manipulation, conversion, and accessibility.

10 Sep 17
demerzels-lab Bundle

Agent Hq

Deploy the Agent HQ mission-control stack (Express + React + Telegram notifier / Jarvis summary) so other Clawdbot.

10 Sep 17
demerzels-lab Bundle

Webcli

Browse the web, read page content, click buttons, fill forms, take screenshots, and get accessibility snapshots.

10 Sep 17
demerzels-lab Bundle

Context Viz

Visualize the current context window usage — token estimates per component (system prompt, tools, workspace files.

10 Sep 17
demerzels-lab Bundle

Pencil To Code

Export .pen design to React/Tailwind code.

10 Sep 17
demerzels-lab Bundle

Web Bundling

Bundle web applications into single HTML files for distribution.

10 Sep 17
demerzels-lab Bundle

Query Dbpedia

Transform natural language questions into SPARQL queries for DBpedia and generate beautiful HTML results pages.

10 Sep 17
demerzels-lab Bundle

Agent Browser

Headless browser automation CLI optimized for AI agents with accessibility tree snapshots.

10 Sep 17
demerzels-lab Bundle

Voice Email

Send emails via natural voice commands - designed for accessibility.

10 Sep 17
demerzels-lab Bundle

Dynamic UI

Render tables, charts, stats, cards, and dashboards as images using HTML templates and wkhtmltoimage.

10 Sep 17
demerzels-lab Bundle

Finally Offline

Browse culture articles and generate personalized HTML newsletters via MCP.

10 Sep 17
op0ai Skill

Web Design Guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Sep 17
jimmylv Bundle

Vercel React Best Practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Sep 17
appsflyersdk Skill

React Doctor

Use when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.

Sep 17
shanirez Bundle

Animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

Sep 17
getsentry Bundle

Shadcn

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

845 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 lb-motion-skill, generate-presentation, animation-gen. 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.