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.
Web & Frontend
1,641 skills
inference-sh Javascript Sdk
Integrate 250+ AI models into JavaScript/TypeScript apps with streaming, file uploads, and agent tooling.
584 · bundle
inference-sh Text To Speech
Convert text to natural speech using multiple TTS models via the inference.sh CLI, with support for emotion steering, voice cloning, and multi-speaker dialogue.
584
inference-sh Og Image Design
Design Open Graph and social sharing images with platform-specific specs, text placement, and branding guidelines. Generate images via HTML-to-image or AI, and configure OG meta tags for Facebook, Twitter, LinkedIn, and more.
584
owl-listener Component Spec
Creates detailed component specifications for design systems, covering anatomy, variants, states, accessibility, and usage guidelines.
1.7k
leonxlnx Redesign Existing Projects
Audits and upgrades existing websites and apps to premium quality by identifying generic AI patterns and applying high-end design standards without breaking functionality.
adobe Page Prep
Detects and removes disruptive overlays (cookie banners, modals, paywalls, login walls) from webpages before screenshots, scraping, or browser automation.
142 · bundle
adobe Page Reduce
Reduces a webpage to a structural skeleton by tokenizing content in the browser and applying LLM reasoning to collapse repeated patterns.
142 · bundle
adobe Page Collect
Extract structured resources (icons, metadata, text, forms, videos, social links) from any webpage using playwright-cli.
142 · bundle
openclaw Session Viewer
Render Codex, Claude Code, OpenClaw, or Pi session JSONL transcripts as a searchable, shareable single-file HTML viewer.
9.1k · bundle
nextlevelbuilder Slides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
· bundle
jakubantalik Transitions Dev
Provides portable CSS transitions for common UI patterns like dropdowns, modals, tooltips, and skeleton loaders. Each transition is a drop-in snippet with semantic CSS custom properties and a prefers-reduced-motion guard.
· bundle
heygen Hyperframes
Creates, edits, and renders videos and animations from HTML compositions using the HyperFrames framework, handling project state, input adaptation, and workflow routing.
· bundle
heygen Hyperframes Animation
Provides atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) for composing animations with HyperFrames.
· bundle
op7418 Guizang Ppt Skill
Generates a single-file horizontal-scroll web PPT with WebGL backgrounds, section covers, data hero cards, and image grids in two visual styles: 'e-magazine × e-ink' or 'Swiss International Style'.
· bundle
nexu-io Pricing Page
Generates a standard SaaS pricing page with three tiers, feature comparison table, and FAQ section.
· bundle
nexu-io Motion Frames
Creates a hero frame with looping CSS animations including a rotating type ring, animated globe, ticking timer, and parallax labels.
· bundle
nexu-io Web Proto Soft
Creates Apple-style soft UI prototypes with squircle cards, spring motion, and ambient mesh backgrounds.
· bundle
nexu-io Frame Logo Outro
Generates a video outro frame with a logo assembled from geometric blocks, glow bloom animation, tagline reveal, and CTA, using pure CSS/SVG.
· bundle
nexu-io Frame Glitch Title
Generates a single-file HTML page with a cyberpunk glitch-art title frame, featuring chromatic aberration, scanlines, noise grain, and data-corruption animations.
· bundle
nexu-io Deck Open Slide Canvas
Creates a 1920×1080 presentation deck with React-like component layout, strict typography and color constraints, and no template restrictions.
· bundle
zhaoxuya520 Dsl Vm Reverse
Reverse-engineers custom JavaScript-based WASM virtual machines and risk-control engines by identifying DSL VM patterns, extracting opcodes, analyzing constant tables, and tracing exported functions through static analysis and runtime injection.
12.8k
autoclaw-cc Xiaohongshu Skills
Automates Xiaohongshu (Little Red Book) operations including authentication, content publishing, search, social interaction, and composite workflows via a CLI tool.
1.8k · bundle
clockless-org HTML Anything
Transforms ideas, files, folders, URLs, or exported data into polished single-file HTML pages with auto-selected design systems.
136 · bundle
yu-0312 Ppt Creater Skill
Turns messy documents, meeting transcripts, reports, or raw data into a polished, design-conscious HTML presentation through a structured workflow that filters content, defines style specs, and generates slides, with optional theme research and cross-session resume support.
26 · bundle
leejpsd Typescript React Nextjs Patterns
Provides production-grade TypeScript guidance for React and Next.js, covering type narrowing, component props, generics, runtime validation, data fetching, state management, performance, accessibility, and code review.
18 · bundle
ecnu-icalk Remotion Best Practices
Provides domain-specific guidance for building videos with Remotion, covering captions, FFmpeg operations, audio visualization, and a wide range of composition techniques.
559 · bundle
ecnu-icalk Baoyu Post To X
Posts text, images, videos, and long-form articles to X (Twitter) using a real Chrome browser to bypass anti-bot detection.
559 · bundle
ecnu-icalk Java Jsoup
Parses betting odds HTML tables with Java and Jsoup, extracting company names, odds values, and change timestamps using specific CSS selectors.
559
tinh2 I18N
Sets up internationalization by extracting hardcoded user-facing strings to locale files, auto-detecting the framework, configuring the appropriate i18n library, handling pluralization, formatting, and RTL support.
13
tinh2 SEO
Audits and fixes technical SEO, on-page metadata, structured data, Core Web Vitals, llms.txt, and AI-search optimization for ChatGPT, Perplexity, and AI Overviews, including E-E-A-T signals and programmatic SEO.
13
tinh2 Dead Code
Finds and safely removes dead code across a codebase: unreachable paths, unused exports, functions, variables, CSS selectors, dependencies, env vars, and commented-out blocks. Builds an import graph, verifies no dynamic references, and runs build and tests after cleanup.
13
pranavnagrecha Lwc Record Picker
Guides using the lightning-record-picker base component for single-record selection in LWC, covering display-info, matching-info, graph-QL filters, and accessibility.
15 · bundle
pranavnagrecha Lwc In Flow Screens
Build, review, or troubleshoot Lightning Web Components that run inside Salesforce Flow screens, covering @api properties, FlowAttributeChangeEvent, validate(), and navigation events.
15 · bundle
comeonoliver Pinia
Manage Vue application state with Pinia, covering store definition, state, getters, actions, plugins, testing, SSR, and Nuxt integration.
61
comeonoliver Opencli
Turns websites into CLI commands, reusing an existing Chrome login session for browser-backed data extraction and structured output.
61
lingxling SEO
Runs a broad SEO audit covering technical SEO, on-page SEO, schema, sitemaps, content quality, AI search readiness, and GEO, with a weighted health score and prioritized action plan.
253 · bundle
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 page-reduce, hyperframes-animation, page-collect. Rankings shift as installs change; sort this page by "Most downloaded" 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 add <owner>/<name>, or copy the file into your agent's skills directory.