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.
-
navorina-labs Skill Mailagent MCPTemporary inboxes for agent signup QA — create disposable addresses, wait for verification email, extract OTP or magic links. Use when automating signup, login, or email verification without parsing HTML manually.
-
nolangz Bundle Data2motion Lite 2Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reasoning and no image feedback.
-
nolly-studio Bundle Components Build 2Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.
-
oil-oil Bundle Mira 2Use this skill whenever an Agent needs a visual workspace for local Markdown, HTML, images, or videos. Trigger proactively when a task involves previewing images or videos, comparing multiple documents or generated outputs, organizing context across multiple turns, reviewing HTML made from documents, drafting prompts with file references, collecting visual evidence for AI, reading Markdown comments, or keeping task-specific files on a canvas. Also trigger when the user mentions Mira, canvas, visual context, local preview, file nodes, boards, comments, or copying context.
57 -
omacom Bundle Shadcn Svelte 2Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs.
-
onmax Bundle Hello World 2A minimal example skill demonstrating the agent-skills-server structure.
-
openwebf Bundle Webf API Compatibility 2Check Web API and CSS feature compatibility in WebF - determine what JavaScript APIs, DOM methods, CSS properties, and layout modes are supported. Use when planning features, debugging why APIs don't work, or finding alternatives for unsupported features like IndexedDB, WebGL, float layout, or CSS Grid.
-
othmanadi Bundle Plan It 2HTML-first persistent planning skill. Generates a single self-contained plan.html with interactive phases, drag-and-drop tickets, sliders, mockups, and embedded JSON state. Survives /clear via session catchup, tamper-protected by SHA-256, mirrors across 17 IDEs, ships 10 templates across Thariq's 9 categories, exports back to Markdown on demand. Use when asked to "plan it", "make me an html plan", "show me the plan", "render the plan", or when starting any multi-step task that needs a navigable artifact instead of a markdown wall.
-
outscal Bundle Remotion Best Practices 2Best practices for Remotion - Video creation in React
-
owl-listener Skill Contextual Help Design 2Design help systems and support patterns that work for people with cognitive disabilities. Use when designing help content, tooltips, onboarding, FAQs, support flows, documentation, or any context where users need guidance. Triggers on: help, support, FAQ, tooltip, onboarding, tutorial, guidance, stuck, confused, documentation, instructions.
1.7k -
pakco77 Bundle Pakco HTML 2Creates HTML decks, webpages, and social cards with pakco.html templates. Use for slides, PPT-style reports, visual web pages, or the style picker.
-
paolaoshi Bundle Detail Flow 2Build, redesign, polish, or review product detail pages for products, AI tools, models, SaaS features, developer products, plugins, ecommerce listings, and technical showcases. Use when the user provides a product image, reference image, screenshot, product concept, or existing page and asks for a detail page, ecommerce detail page, 8-screen product page, long-form sales page, model page, product feature page, visual polish, responsive frontend implementation, screenshot-based QA, or reusable workflow derived from an existing product page project.
-
pestphp Skill Pest Plugin Agent 2One-shot Pest verification CLI for Laravel and PHP agents. Use whenever the user wants to quickly check that a change actually works, including hitting a route, asserting a model relationship or factory, checking a queued job, mail, or notification fires, screenshotting a page, asserting visible content, testing a click or form submission, checking for JavaScript errors, asserting accessibility, doing visual regression, or testing responsive layouts. Triggers include "verify this works", "did my change break X", "screenshot the homepage", "check this route returns 200", "make sure the mail fires", "test the login form", "see if the page renders", "check it on mobile", "is the form working", or any one-off behavioral check on a Laravel app that does not warrant a permanent test file. Also use after any Blade, Livewire, CSS, or JS change to visually confirm the result. Load this skill FIRST — before any shell command or throwaway test — whenever the request is to verify something that works. Prefer `vendor/bin/
-
piaoxuemoli Skill Repo Sync 2Sync world-cup repo from GitHub, update nginx-served HTML, and reload. Used when pulling latest changes or deploying updates.
-
yappologistic Bundle Frontend Design Director 2Build, redesign, review, polish, and QA frontend UI/UX, React/Next/Vite components, landing pages, dashboards, forms, design systems, responsive layouts, accessibility, visual hierarchy, and non-generic product design.
-
nyaggah Bundle Bedframe 2Work in a Bedframe browser extension project. Use when the repository contains AGENTS.md, src/_config/bedframe.config.ts, src/manifests/*, or the task involves the Bedframe CLI, @bedframe/core, browser manifests, extension pages, Vite config, or release flow.
-
nyaggah Skill Bedframe Your Skill Name 2Replace with a description of what this skill does and when an agent should use it.
-
open-mercato Bundle System Extension 2Extend core modules using the Universal Module Extension System (UMES). Use when adding columns/fields/filters to existing tables/forms, enriching API responses, intercepting API routes, blocking/validating mutations, replacing UI components, injecting menu items, or reacting to domain events. Triggers on "extend", "add column to", "add field to", "inject into", "intercept", "enrich", "hook into", "customize", "override component", "add menu item", "react to event", "block mutation", "validate before save".
-
panel-ui Bundle Panelui 2Build React Native and Expo UIs with PanelUI — adding components, theming, composing overlays and forms, and debugging why something is unstyled. Applies when working in an Expo or React Native project that has panelui-native installed or a panelui.json, when the user mentions PanelUI, or when they ask for a bottom sheet, dialog, chart, chat transcript, form or any other screen UI in React Native.
-
posit-dev Bundle Shinyreact Build App 2Build a Shiny app whose UI is a React client (the ui.tsx pattern) using shinyreact for Python or R. Use when the user asks to build, extend, or debug a Shiny app with a React front end, mentions shinyreact, set_react_page(), page_react(), reactive_output, or the useShinyInput / useShinyOutputValue hooks, or wants a Shiny server that returns JSON to a client-owned UI instead of rendering HTML.
-
posit-dev Skill Shinyreact Convert App 2Convert an existing Shiny app (R or Python) to the shinyreact ui.tsx pattern — inspect the source, drive the running app in a browser, describe it in plain English, then port it against that description. Use when the user asks to port, convert, migrate, rewrite, or "React-ify" a Shiny app, or to reproduce an existing app's UI in React.
-
promovaweb Skill Wayfinder Development 2Use this skill for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes. ALWAYS use this skill when frontend code needs to call backend routes or controller actions. Trigger when: connecting any React/Vue/Svelte/Inertia frontend to Laravel controllers, routes, building end-to-end features with both frontend and backend, wiring up forms or links to backend endpoints, fixing route-related TypeScript errors, importing from @/actions or @/routes, or running wayfinder:generate. Use Wayfinder route functions instead of hardcoded URLs. Covers: wayfinder() vite plugin, .url()/.get()/.post()/.form(), query params, route model binding, tree-shaking. Do not use for backend-only task
-
promovaweb Skill Inertia React Development 2Develops Inertia.js v3 React client-side applications. Activates when creating React pages, forms, or navigation; using <Link>, <Form>, useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.
-
putdotio Bundle Putio Frontend Dev 2Develop or review end-user applications and shared frontend packages owned by put.io, including UI, state, tests, docs, test harnesses, and delivery. Use only for work in a put.io frontend repository or explicit requests for put.io frontend conventions. Do not use for unrelated frontend work, browser-only put.io inspection, SDK or API client work, or standalone putio CLI consumer operations; frontend test-harness auth setup remains in scope.
-
rcarmo Skill Frontend Bundling Via Bun Node 2Bundling via Bun/Node with Make targets for typecheck and bundling
-
revylai Bundle Revyl CLI Auth Bypass 2Set up test-only auth bypass for Revyl runs across Expo, React Native, native iOS, native Android, and Flutter apps.
-
sablier-labs Skill Sablier Design 2Create distinctive, production-grade React interfaces aligned with Sablier's dark-theme aesthetic. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that leverages the Sablier theme.
-
schalkneethling Bundle Calavera 2Compose, preview, and apply Calavera-managed JavaScript, TypeScript, CSS, and AI-tooling setup for existing or newly scaffolded projects. Use when the user asks to set up Calavera, choose tooling profiles or integrations, generate or apply calavera.config.json, install bundled skills/hooks/agents, inspect project-tooling options, run a Calavera dry run, or use the Calavera MCP server/Web UI workflow.
-
solar-luna Bundle Wechat Draft Publisher 2自动将 HTML 文章发布到微信公众号草稿箱,支持封面图上传、标题、作者和元数据管理。当用户说"推送到微信"、"发布到公众号草稿"、"上传到草稿箱"或提到微信文章发布时使用。
-
sugatoray Skill Postrboard 2Apply the Postrboard design language to frontend work. Quiet CSS for loud products, code-native, restrained, non-generic.
-
summersec Skill Context7 MCP 2This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
-
thestratcore Bundle Keynote Slides 2Build Keynote-style single-file HTML slide decks with brand-ready templates, minimal navigation, and Gemini nano banana media generation. Includes Narrative Engine integration for framework-driven deck creation with 17 proven storytelling structures and 5-agent review panel. Use when creating or editing slide decks, transforming content into presentations, or generating slide visuals.
-
vincelwt Bundle Opentui 2Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for terminal OpenTUI development tasks including components, layout, keyboard handling, animations, and testing. Do not use for Electrobun/desktop-web-only window chrome, CSS, or browser renderer work unless terminal OpenTUI behavior is also in scope.
-
vincelwt Skill Tui Testing 2Testing Gloomberb at every level: CLI commands for fast data/integration checks, OpenTUI's built-in test harness for component tests, and tmux for full end-to-end terminal TUI testing. Use this skill when you need to verify terminal TUI features, write OpenTUI regression tests, or smoke-test the terminal app. Do not use it for Electrobun/desktop-web-only visual or window chrome work unless tmux/OpenTUI coverage is explicitly needed.
-
vs4vijay Bundle Remotion Best Practices 2Best practices for Remotion - Video creation in React
-
webmaxru Bundle Cookieless Insights 2Instrument any static website (SPA) with cookieless Azure Application Insights Real User Monitoring — no cookie/GDPR banner, free tier only — using the @webmaxru/cookieless-insights package + CLI. Covers Azure setup, code wiring (incl. build step), a Portal dashboard, and a terminal engagement report. WHEN making a static site/SPA observable, "add analytics without a cookie banner", cookieless RUM, privacy-friendly analytics, Application Insights for a frontend/GitHub Pages/Static Web Apps/Netlify/S3, page views + engagement + geo + key events.
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 mailagent-mcp, data2motion-lite, components-build. 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.