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.
-
laststance Bundle Explain Diff HTML 2Use when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output.
-
layoutit Bundle Polycss 3Build PolyCSS scenes that render 3D meshes, primitive shapes, or custom polygons as DOM/CSS polygon elements. Use when asked to create, port, debug, or explain PolyCSS code in vanilla JavaScript, React, or Vue.
-
lexmount Bundle Browser CLI 2Operate Lexmount remote browsers with browser-cli. Use when a coding agent needs to create, list, inspect, keep alive, or close browser sessions; manage persistent contexts, pick reusable contexts, or detect locked contexts; guide authentication with auth status/scopes/token-info/refresh/logout/clear-credentials/connect-requirements/export-env/login; verify installation, environment, and API connectivity with doctor; discover installed commands/workflows; read packaged references with reference list/get; inspect packaged playbooks and case examples with example list/get; validate/run JSON/YAML browser case files; open pages, read page info, wait for selectors/states/roles/URLs/load/network/text/forms/dialogs/frames/console/fetch-XHR, act/click/type/fill/select/check/hover/press/scroll, inspect interactive/accessibility/page diagnostics, manage storage/cookies, navigate, screenshot, eval, snapshot, or verify credentials without custom Playwright.
-
lihanghang Bundle Android Native Dev 2Android native application development and UI design guide. Covers Material Design 3, Kotlin/Compose development, project configuration, accessibility, and build troubleshooting. Read this before Android native application development.
-
lingyichen-ai Bundle Multi Chart Draw 2支持多种图表类型的绘制工具,包括思维导图、流程图、数据可视化图表、数学函数图等;可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表,并导出为 PNG、SVG、HTML 等格式
-
liorvainer Bundle Nextra Writer 2Expert in creating clear, comprehensive technical documentation with Nextra (Next.js-based docs framework), MDX, and modern documentation patterns. Use for documentation sites that need Next.js integration.
-
lirantal Bundle Nodejs CLI Best Practices 2Guide and audit Node.js CLI application development against 37 established best practices covering UX, distribution, interoperability, accessibility, testing, error handling, development setup, analytics, versioning, and security. Use this skill when building, extending, reviewing, or scaffolding a Node.js CLI — including when someone says "audit my CLI", "review my CLI code", "I'm building a CLI tool", or asks about adding argument parsing, error handling, color output, STDIN, --json flags, exit codes, --version flags, or npm publishing. Applies even when best practices are not explicitly mentioned. Also trigger for "how should I implement X in my CLI" or "what's the right way to do Y in a Node.js CLI". Do NOT use for Node.js backend or API development with no CLI entry point.
-
liuchiawei Bundle Next Intl App Router 2Configures and uses next-intl for Next.js App Router with locale-based routing. Use when adding or changing i18n, locale routing, translations, next-intl plugin, middleware/proxy, or message files in Next.js App Router projects.
-
llmquant Bundle Quantmind Dev 2Contributor workflow for the QuantMind codebase. Covers contributor setup (environment + hooks), filing issues, commit format, pull request format, and component development across quantmind/ modules (etl, knowledge, configs, preprocess, rag, flows, mind, utils) with tests, examples, and verification. Use when setting up as a contributor, filing an issue, committing, opening a PR, or implementing/refactoring QuantMind code.
-
lottiefiles Bundle Creator Plugins UI 2Use when building or modifying plugin UI with @lottiefiles/creator-plugins-ui. Applies when adding React components in src/, using Button/Select/Slider/Dialog/Toast/NumberInput or other library components, setting up Tailwind CSS theming or dark mode, using the cn() utility, troubleshooting Base UI data attributes or missing styles, or updating the plugin UI theme to match Creator's interface theme.
-
lukewire129 Skill Nuri 3Build C# desktop UI applications with Nuri, a React-style MVU framework that renders platform-neutral virtual elements into native WPF and Avalonia controls. Use when creating or editing Nuri components, hooks (useState, useEffect, useStore, useMemo), keyed lists, routing, or animations, when scaffolding a XAML-free pure-C# desktop app, or when debugging Nuri rendering, lifecycle, or diagnostics output.
-
magebyte-zero Bundle Frontend Slides 2Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
-
makisuo Skill React Doctor 2Use when finishing a feature, fixing a bug, before committing React code, or when the user wants to improve code quality or clean up a codebase. Checks for score regression. Covers lint, dead code, accessibility, bundle size, architecture diagnostics.
-
maptiler Bundle Maptiler 2Expert coding skill for the full MapTiler platform — Cloud REST APIs, MapTiler SDK JS (built on MapLibre GL JS), native mobile SDKs, on-premise infrastructure, and vector tile schemas. USE WHEN the user wants to add a map to a web or mobile app, show locations or routes, display geographic data, build a store locator, create data visualizations on maps, add geocoding or address search, do reverse geocoding, look up elevation, do IP geolocation, fetch weather data, transform coordinates between CRS/EPSG, embed static map images, work with vector tilesets (Planet v4, Buildings, Contours, Outdoor, Ocean, Landcover, Cadastre), write MapLibre style expressions or data-driven styling, render 3D terrain, globe view, or 3D buildings extrusion, use satellite imagery, add markers, popups, heatmaps, or clustering, integrate maps in React, Vue, Svelte, Angular, Next.js, Leaflet, OpenLayers, Cesium, or deck.gl, build native maps on iOS (Swift), Android (Kotlin), Flutter, or React Native, self-host with MapTiler Server or
-
markheydon Bundle Mudblazor 2Guide for using the MudBlazor component library in Blazor applications. Use this when building or refactoring Blazor pages and components with MudBlazor. Covers setup, layout, component usage patterns, dialog and snackbar services, data grids, forms, colour pickers, theming, and optional bUnit examples. Also use when troubleshooting z-index, popup rendering, or styling issues.
-
mehdibha Skill React Grab 2Use when the user wants a hands-free loop where grabbing UI elements in the browser with React Grab feeds tasks to the agent automatically, with no copy-paste or manual handoff. Triggers: "watch react grab", "monitor my grabs", "auto-process react grab", "watch my clipboard for grabs". Not for a one-off paste of a single grab; this is the continuous, always-on loop.
-
microsoft Bundle Web Design Reviewer 2This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
2.7k -
midudev Skill Tailwind Animations 2Use the tailwind-animations npm package (CSS-only Tailwind CSS v4 plugin) to add ready-made animation utilities: fade, slide, zoom, flip, bounce, jelly, dialog entry/exit, scroll/view timelines, scroll-mask edge fades, duration/delay/steps/ iteration/fill-mode, and animate-slide-distance. Use when the user wants CSS animations with Tailwind, animate-* classes, motion utilities, dialog animations, scroll-driven CSS motion, scroll-mask fading edges, or to install/configure tailwind-animations. Triggers: "tailwind animations", "animate-fade-in", "animate-dialog", "scroll-mask", "slide-distance", "tailwind motion plugin", /tailwind-animations.
-
millionco Bundle Budge 2Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget on the page so the user can tweak the value before it is persisted. Covers atomic style changes, live preview, and cleanup. Triggers on single CSS value or single Tailwind utility class modifications.
-
monotykamary Bundle Macos Harness 2Control a whole Mac from one persistent Python session with screenshots, PID-targeted input, an animated virtual pointer, targeted Apple Accessibility, Apple Events, Browser Harness CDP, and filesystem access. Use for native, Electron, browser, dialog, file, or cross-app tasks without moving the physical cursor or forcing apps into the foreground.
-
morvanzhou Bundle Data Driven Product 2Data-driven product analysis and iteration decision tool. Collects data via GA4, GSC, Bing Webmaster, and Microsoft Clarity to provide pre-analysis (product/direction selection), post-analysis (optimize existing products), and decision analysis (upgrade or abandon), outputting interactive HTML reports.
-
sunfmin Skill Render UI Test 2Render project UI to PNG from a TEST — not a script, main(), or one-off exec method — with least code, by mocking data at the LOWEST seam so every real project code path runs. Builds a reusable render-glue helper for future tests. Use when asked to render or screenshot a component/page/view to an image, set up snapshot/visual tests, or "see what the UI looks like" without launching the app.
-
waynesutton Bundle Convex Self Hosting 2Integrate Convex static self hosting into existing apps using the latest upstream instructions from get-convex/self-hosting every time. Use when setting up upload APIs, HTTP routes, deployment scripts, migration from external hosting, or troubleshooting static deploy issues across React, Vite, Next.js, and other frontends.
-
wbh604 Skill Fund Manager Alpha 3基金经理深度行为审计引擎。逐笔买卖验尸(拿12个月后走势验对错)、独立决策取证(同门/全市场/热榜三把尺子)、K线战役回放、抄作业指数、被动减仓判定、造神检测、闸门时间轴、年底冲排名、一车多牌、开门批次,产出单文件交互 HTML 报告。当用户要求分析某只基金或基金经理、判断能不能买、经理水平如何、独立性如何、Alpha 是本事还是运气时使用。关键词:基金、基金经理、公募、Alpha、抱团、持仓分析、业绩归因、能不能买。
-
weifashi Bundle HTML Mockup 2一页 HTML 讲清一件事,写成自包含单文件放原型目录、走 8008 公网链接给人看。两种用法:(A) 需求原型——把一个需求的几个界面 + 规则说明 + 状态流转拼成一页,用来评审、拍板、贴 issue;(B) 改动汇报——把一次任务的全部代码改动讲成大白话:改了什么、动了哪些表字段、改了哪些原有业务规则、影响哪些业务点、怎么回滚。当用户说 '出个 X 的原型 / 效果图' / '画一下 X 长什么样' / '把这个需求画出来给我看' / '原型加一版 / 改一下原型' / '给 PM 看看 X 的样子',或做需求评审要配图时,走 A。当用户说 '总结一下当前任务的所有改动' / '这次改了什么' / '把改动讲清楚给我看' / '出个变更说明 / 交付报告 / 评审报告' / '动了哪些表 / 哪些业务规则' 时,走 B。多界面、要写说明文字、要画流转图或对比表的一律走这条;只有需要真能点、要对齐生产端真实组件样式、要入 git 给团队 review 时才不走这条。
-
winbigfox Skill Laravel PDF 2Generate PDFs from Blade views or HTML using spatie/laravel-pdf. Covers creating, formatting, saving, downloading, and testing PDFs with the Browsershot, Cloudflare, or DOMPDF driver.
-
xingyu4j Bundle Slidev 2Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.
-
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
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 explain-diff-html, polycss, browser-cli. 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.