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.
-
yunusemrgrl Bundle React DoctorRun after making React changes to catch issues early. Use when reviewing code, finishing a feature, or fixing bugs in a React project.
-
prorise-cool Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Audited -
luismpenholato Bundle Angular Frontend Clean Architecture 2Angular 21 standalone frontend with Clean Architecture, vertical slice (pages by feature), signals, OnPush, and ng-zorro. Use when creating or refactoring Angular apps, adding pages, components, services, directives, pipes, or when the user mentions Angular frontend, standalone components, or signals.
-
luismpenholato Bundle React Nextjs Antd Clean Architecture 2React 19 + Next.js 16 App Router, TypeScript, Ant Design, TanStack Query, Axios, React Hook Form, Zod — Clean Architecture frontend with vertical slice by feature. Use when creating or refactoring Next.js apps, admin panels, SaaS frontends, CRUDs, forms, layouts and frontend architecture.
-
tanstack Skill Custom ExtensionsImplement MarkdownExtension block parsers, inline and document transforms, HTML hooks, and portable ComponentNode output. Load when adding deterministic custom syntax or rendering behavior across HTML, React, and Octane.
-
voidmatcha Bundle Playwright Test Generator 2Use this skill to generate new Playwright end-to-end tests from scratch — for a page, a user flow, a form, or a component — taking them from zero to reviewed, passing specs. Reach for it whenever someone wants to add, write, create, or scaffold Playwright E2E coverage, fill coverage gaps for uncovered routes, or bootstrap the first e2e test for a project and set up its conventions. It explores live pages only on local/disposable or externally isolated approved non-production targets to discover real selectors, proposes a scenario plan for approval, generates Page Object or flat specs that match the existing project style, then runs an e2e review and the suite before handing back. Do not use it for debugging an existing failing Playwright test (use playwright-debugger), reviewing or auditing tests that already pass (use e2e-reviewer), generating Cypress tests, or writing unit, component, or integration tests with Jest, Vitest, or Testing Library.
-
canonical Bundle Svelte Core BestpracticesGuidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
-
hapelee Bundle Legado Compose Migration 2Guide Legado Android UI migration from XML/View/RecyclerView/DialogFragment screens to Jetpack Compose and Material 3, and guide new Compose-first screens using standard Android architecture. Use when creating, migrating, rewriting, reviewing, or planning a Legado screen, Activity, Fragment, dialog, adapter, navigation destination, or settings page, especially when MainActivity navigation, MVI/UDF, StateFlow/SharedFlow, Koin ViewModels, domain/usecase boundaries, edge-to-edge insets, predictive back, or existing Compose component conventions matter.
-
hapelee Bundle Legado Compose Migration 3Guide Legado Android UI migration from XML/View/RecyclerView/DialogFragment screens to Jetpack Compose and Material 3, and guide new Compose-first screens using standard Android architecture. Use when creating, migrating, rewriting, reviewing, or planning a Legado screen, Activity, Fragment, dialog, adapter, navigation destination, or settings page, especially when MainActivity navigation, MVI/UDF, StateFlow/SharedFlow, Koin ViewModels, domain/usecase boundaries, edge-to-edge insets, predictive back, or existing Compose component conventions matter.
-
nominal-io Skill Add Instrument Driver 2Scaffold a new instrument driver for a vendor/model from its programming reference (SCPI/programming manual/API SDK as a PDF, doc, HTML file, or website URL) and wire it into the repo per AGENTS.md conventions. Use when asked to "add a driver for <vendor> <model>", "write a driver from this manual/datasheet", or similar. Produces the driver module, registration, mocked-transport tests, and doc updates on a tracking branch.
-
nullpond Bundle Minimax PDF 2Professional PDF solution. Create PDFs using HTML+Paged.js (academic papers, reports, documents). Process existing PDFs using Python (read, extract, merge, split, fill forms). Supports KaTeX math formulas, Mermaid diagrams, three-line tables, citations, and other academic elements. Also use this skill when user explicitly requests LaTeX (.tex) or native LaTeX compilation.
-
imgoodbai Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
-
shanirez Bundle Pick UI LibraryPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
-
emdash-cms Bundle Building Emdash Site 2Build and customize EmDash CMS sites on Astro. Use when creating pages, defining collections, writing seed files, querying content, rendering Portable Text, setting up menus/taxonomies/widgets, configuring deployment, or any task involving an EmDash-powered Astro site. Assumes basic Astro knowledge but provides all EmDash-specific patterns.
-
breverdbidder Skill Playwright Best PracticesProvides guidance for writing, debugging, and maintaining Playwright tests in TypeScript. Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file upload/download, date/time mocking, WebSockets, geolocation, permissions, multi-tab/popup flows, mobile/responsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup/teardown, test annotations (skip/fixme/slow), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas/WebGL, service workers/PWA, test coverage, i18n/localization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.
Audited -
denysdovhan Bundle Home Assistant CardUse when creating, reviewing, debugging, or maintaining Home Assistant custom Lovelace cards or card editors, including custom elements, Web Components, hass data, setConfig, getCardSize/getGridOptions, getConfigElement/getConfigForm, window.customCards, resource registration, HACS card packages, entity display, service calls, translations, or frontend build validation.
-
rimagination Bundle Easyslides 2Canonical EasySlides entry point for creating, distilling, editing, reviewing, and exporting editable academic PPTX presentations. Use whenever the user explicitly says EasySlides/easyslides or asks for PPTX distillation, a content-free reusable template, template/component/symbol extraction, template reuse, thesis-defense or research slides, slide reconstruction, native PowerPoint preview, or visual QA, including 蒸馏PPT、提取PPT模板、 拆分组件与符号资产、复用模板、论文汇报PPT和答辩PPT。
148 -
tamiror6 Skill Shopify App API PatternsFrontend-backend communication patterns in Shopify Remix apps. Use when adding pages that need backend data, creating data mutations, using loaders and actions, handling authenticated requests, or managing session and authentication in routes.
-
tamiror6 Skill Shopify Polaris Web ComponentsUse Shopify Polaris Web Components (s-* custom elements) for App Home UI. Use when building App Home surfaces (not embedded apps), designing UI with s-page, s-section, s-stack, s-box, s-button, and other s-* components. Do not use @shopify/polaris React - App Home requires Web Components.
-
tristanmanchester Bundle Clipboard Memory 3Recall what the user copied on this Mac via the local clipmem archive — text, commands, URLs, file paths, HTML, images, PDFs. Triggers on requests like "what was that command I copied?", "the URL I copied from Safari", "find that snippet before I restarted", or any paraphrase involving copy, paste, or clipboard. Offers ranked recall, chronological timeline, lexical / FTS search, raw-byte export for binary content, cursor pagination, and filters by app, kind, time window, and content shape. Use before reaching for generic web or repo search whenever the user is trying to recover something they previously had on the clipboard.
-
tristanmanchester Bundle Clipboard Memory 4Recall what the user copied on this Mac via the local clipmem archive — text, commands, URLs, file paths, HTML, images, PDFs. Triggers on requests like "what was that command I copied?", "the URL I copied from Safari", "find that snippet before I restarted", or any paraphrase involving copy, paste, or clipboard. Offers ranked recall, chronological timeline, lexical / FTS search, raw-byte export for binary content, cursor pagination, and filters by app, kind, time window, and content shape. Use before reaching for generic web or repo search whenever the user is trying to recover something they previously had on the clipboard.
-
willmusubi Bundle Mufy Character Card Generator 2Mufy 平台角色卡一站式生成器。根据用户需求生成完整角色卡,包含8大模块内容、美化CSS代码、以及带内联样式的输出模块。输出格式直接对应Mufy字段,可一键复制粘贴。
-
xiaotianfotos Bundle Tutor一对一辅导老师技能,用于解答数学题,生成HTML讲解文档和带配音的Manim动画视频。 核心工作流:数学分析 → HTML可视化 → 分镜脚本 → TTS音频 → 验证更新 → 脚手架 → Manim代码 → 渲染验证 触发条件:学生粘贴数学题图片、需要教学视频、需要HTML讲解资料
-
layoutit Bundle Polycss 2Build 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.
-
mfish-qf Skill Frontend Crud 2---
-
mfish-qf Skill Add Screen Component 2在摸鱼低代码自助大屏中新增自定义组件,包括创建组件 Vue 文件、数据定义文件、配置面板文件,并在 ComUtils.ts 中注册枚举、在 index.ts 中注册导出。当用户提到"大屏新增组件"、"自助大屏添加组件"、"screen 新增组件"、"添加大屏自定义组件"时使用此 skill。
-
spillwavesolutions Bundle Orca CLIUse the public `orca` CLI to operate Orca-managed worktrees, folder contexts, terminals, repos, automations, artifacts, skill sharing, worktree comments, and the browser embedded inside the Orca app. Use when the user says "$orca-cli", "use orca cli", "Orca worktree", "child worktree", "cardStatus", "spawn codex/claude in a worktree", "read/wait/send Orca terminal", "terminal send", "full handoff", "handover", "give this to another agent", "another worktree", "Orca browser", "orca artifacts", "share HTML/Markdown", "public artifact link", "share skills", or "control the browser inside Orca". Prefer this over raw `git worktree`, ad hoc PTYs, Playwright, or Computer Use when the task touches Orca-managed state. Use Computer Use for browser windows, webviews, or desktop UI outside Orca's embedded browser.
-
overdrive-consulting Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications.
-
ruilisi Skill DiscordUse when you need to control Discord via the discord tool: send messages, react, manage threads/pins/search, create/edit/delete channels, fetch permissions, set bot presence, or handle moderation.
-
2233admin Bundle Backend PatternsBackend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
-
ekovegeance Bundle NextjsNext.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
-
eugenp Skill Codename One 2Build and modify Codename One cross-platform mobile apps (Java 17, Maven, ParparVM/Android/iOS/JavaScript). Use when the project contains a `common/codenameone_settings.properties`, depends on `com.codenameone:codenameone-core`, edits CSS files under `common/src/main/css/`, calls `cn1:run`, `cn1:test`, `cn1:build`, references `com.codename1.ui.*` / `com.codename1.testing.*`, or when the user asks to build a UI, write screen tests, generate screenshots, or compare to Swing/HTML/Android.
-
huyquocvq-lang Skill Portfolio Site 2Work on the Jenny Tang React+Vite portfolio site: edit content, routes, per-project pages, styles, and mandatory documentation sync. Use when modifying this portfolio repo, adding projects, changing homepage sections, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation.
-
leohuang0423 Bundle Research Feishu Report Cocreate 2Contract-first topic-report cocreation for creator-first evidence gathering, non-consensus synthesis, reader-first reporting, structured dossiers, optional Feishu or HTML delivery, and local-only synthesis packets.
-
leohuang0423 Bundle Research Feishu Report Cocreate 3Use for high-standard topic reports that need creator-first evidence, non-consensus synthesis, reader-first structure, structured dossiers, optional Feishu or HTML delivery, or bounded local-only synthesis.
-
liangxp1990 Bundle Mp Weixin Skills 2微信公众号文章管理工具。用于管理微信公众号文章的发布和更新。使用场景:需要将文章发布到微信公众号草稿箱时;需要更新已有草稿内容时;需要上传图片素材到微信素材库时。核心功能:通过 AI 将文档转换为微信公众号 HTML,然后使用 Python 脚本调用微信 API 完成素材上传和草稿管理。
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 add-instrument-driver, legado-compose-migration, react-doctor. 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.