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.
-
samgalanakis Bundle Pilcrow 2Make your clanker your editor. A prose linter, a set of editor commands anchored in classical style guides (Strunk, Williams, Zinsser, Pinker, Orwell, King), and project commands for voice capture and drafting. Use when reviewing, polishing, drafting, or auditing markdown, HTML, or plain-text prose. AI-tell detection is one feature among many.
-
samhvw8 Bundle Frontend Audit 2Visual design verification loop for matching a goal PNG to a live render. Use when the user shares a design mock / goal image and asks to match the UI to it, asks to "iterate on this design" or "match this 1:1", or calls out visual drift in a previous UI iteration. Provides histogram color sampling, shape inspection (radius/border/shadow/bg-mode/fill-vs-context), computed-style checking on the live render, snap, and side-by-side diff. After every UI change the assistant MUST snap the live render and Read the snap with the Read tool before reporting the change done — skipping that is the
-
sebastienros Skill Dashboard Testing 2Guide for writing tests for the Aspire Dashboard. Use this when asked to create, modify, or debug dashboard unit tests or Blazor component tests.
-
semkoo Skill Niko Table Best Practices 2Integrate and use Niko Table (shadcn-compatible data tables with TanStack Table) and the editable Data Grid. Use when the user mentions Niko Table, niko-table.com, data table with shadcn, TanStack Table, building a sortable or filterable table, faceted filters, advanced filter menu, row or column drag-and-drop, server-side pagination, server-side grid, infinite scroll, Drizzle ORM, nuqs, URL state, shareable or bookmarkable table, row expansion, tree table, row selection, editable spreadsheet grid, useDataGrid, DataGrid cell editors, clipboard/fill handle, useGridChanges, or any shadcn-compatible data grid — even if they don't name Niko Table explicitly. Prefer this skill whenever the task involves a data table or editable grid in a React/shadcn project so the model follows Niko Table structure, imports, and patterns.
-
shadcn-labs Bundle Ink 2Comprehensive Ink skill for building CLI applications with React. Covers components (Text, Box, Static, Transform), hooks (useInput, useApp, useFocus), Flexbox layout, testing, and accessibility.
-
shenhao-stu Skill Clone Website 2Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
-
shift-labs-ai Bundle Markit 2Convert files and URLs to Markdown. Supports PDF, DOCX, PPTX, XLSX, HTML, EPUB, CSV, JSON, GitHub URLs, images, audio, ZIP, and more. Use when you need to extract content from any document format.
-
sikandarjodd Bundle Svelte5 Best Practices 2Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.
-
spacezephyr Bundle Space Wechat Layout 2微信公众号排版。Use when the user asks to turn an article, Markdown draft, longform post, essay, newsletter, review, or Chinese article into a WeChat Official Account-ready HTML layout with local preview, selectable Claude/OpenAI/Google-inspired styles, and a button to copy rich HTML for pasting into the WeChat editor.
-
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.
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 pilcrow, frontend-audit, dashboard-testing. 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.