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.
-
patchorbit Bundle DomscribeWork with Domscribe — the pixel-to-code bridge. Use when setting up, initializing, or configuring Domscribe for a project, OR when editing or modifying UI components (React, Vue, Next.js, Nuxt), implementing features from captured UI annotations, querying runtime context for source locations, exploring component structure, or when user mentions annotations, queued tasks, UI changes, props, state, DOM, or asks about how elements render at runtime.
-
openstatushq Bundle Openstatus CLIOpenStatus CLI for managing uptime monitors, incident reports, status pages, notifications, maintenance windows, synthetic tests, monitor response logs, and ad-hoc global HTTP checks. Use this skill whenever the user wants to monitor a website or API, set up uptime checks, create or manage monitors, inspect monitor response logs or debug why a check failed, report an incident, update a status page, view notifications, schedule maintenance, run synthetic tests, check latency or availability from around the world, run an ad-hoc speed check, define monitors as code, generate Terraform configuration, export to Terraform, log in or out, or use the openstatus command. Also trigger when the user says "is my site up", "check my endpoint", "speed check", "global latency", "latency from regions", "ad-hoc check", "test from multiple regions", "show monitor logs", "response logs", "why did my monitor fail", "see the failed requests", "create a status report", "set component impact", "monitor this URL", "run uptime tests"
-
ovohao Bundle Auto Paper CollecterPersonal research-paper radar. Fetches the latest papers and code repos for the user's keyword subscriptions across arXiv, Crossref (IEEE/ACM), Semantic Scholar, GitHub, HuggingFace, Papers with Code and RSS; deduplicates against history; then YOU (the assistant) expand the queries, filter for computer-science relevance, write Chinese summaries, detect hot sub-fields, and emit a Markdown + HTML digest (optionally emailed). Use when the user asks to "run my paper radar / 文献雷达", "check for new papers", "what's new in my topics", "今天有什么新论文 / 最新文献", "today's research digest", or to configure their keyword subscriptions / sources / schedule.
-
patrick-fu Bundle Frontend Harness SlidesBuild and revise iteration-safe HTML slide decks with polished visuals, motion, testing, and web/PDF/static delivery. Use only for HTML slide projects.
-
pbnicad Skill Sentiment Monitor舆情监控与深度分析。使用 opencli 从微博/知乎/B站/小红书/抖音采集真实用户反馈,深度分析评论内容(识别反串、抽象玩梗等),生成带ECharts可视化和可点击原文链接的HTML舆情报告。
-
pengxiaoan Skill Solidworks Build Mechanical ModelsPlan, create, automate, assemble, record, and validate parameterized SolidWorks mechanical models on Windows. Use for SolidWorks parts or assemblies (`.SLDPRT`, `.SLDASM`), complex mechanisms, feature-based or API-assisted modeling, VBScript/COM generation, component placement and mates, modeling-process screen recordings, rebuild verification, previews, and delivery QA. Apply when a user asks to draw, reproduce, modify, document, or record a rigorous SolidWorks workflow from dimensions, sketches, drawings, images, or a mechanical concept.
-
peppesilletti Bundle Feature PlanTurns a feature concept into a single self-contained interactive HTML planning artifact.
-
pdfnoodle Bundle PDF Best PracticesComprehensive guidelines for creating HTML that renders perfectly as PDF documents. Use when generating HTML for PDF conversion, handling page breaks, formatting tables for PDF, optimizing images for print, controlling content density, setting up colors and backgrounds for print, adding headers/footers/page numbers, or creating specific document types like invoices, reports, certificates, and letters. Also use when the user mentions 'HTML to PDF,' 'PDF generation,' 'print CSS,' 'page breaks,' 'PDF layout,' 'PDF tables,' 'PDF images,' 'content density,' 'print styles,' or 'pdfnoodle.'
-
pegasystems Bundle Pega Dx Component BuilderCreate or extend a Pega Constellation DX component in this UI gallery. Use for new custom components, config.json authoring, Storybook docs, Jest tests, component registration, and safe PCore or PConnect API integration that works on both Pega Platform and Launchpad (getMappedKey, CASE_INFO constants, capability checks).
-
perminder-klair Bundle Artifact DesignDesign and build polished visual artifacts such as websites, reports, dashboards, demos, documents, and interactive tools. Use before producing any user-facing artifact, including HTML or skill-directed Markdown. Applies across Claude Code, Codex, Cursor, Gemini, OpenCode, and other file-capable agents.
-
pestphp Skill Pest Plugin AgentOne-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/
-
peiiii Skill Gemigo CLIUse when someone needs to install, log in to, configure, or operate the GemiGo CLI (`gemigo`), especially for its current static-site publishing workflow, or when an agent must create or validate `gemigo.app.json` and run real CLI commands.
-
pencil20388-eng Bundle AI Website Building零代码基础的非技术人员(市场、运营、产品)用 AI 从零做出一个可交付给开发的官网/落地页原型的完整方法。覆盖前期调研(竞品+SaaS实践+模板)、分模块生成、逐块微调、设计规范、图片处理、移动端适配、避坑清单、省 token 策略、多 agent 备份、以及给开发交付。核心前提是先知道自己要什么再下指令,每做一个新页面都要重新调研。当用户想用 AI 做网站、做官网、做落地页、做首页原型、改版网站、生成 HTML 页面,或提到"不会写代码但想做个网页""让 AI 帮我做官网""做个产品介绍页"等场景时,使用此 skill。即使用户没有明确说"用 skill",只要任务涉及非技术人员用 AI 产出网页,都应主动套用本方法。
-
peterfei Bundle Frontend Dev Agent前端开发 Agent — UI 实现、组件构建、交互设计、性能优化、可访问性
-
piumalkulasekara Bundle PayhereBuild, review, and troubleshoot PayHere Sri Lanka payment integrations. Use when working with PayHere Checkout API, JavaScript SDK, Android/iOS/React Native/Flutter SDKs, Recurring API, Preapproval and Charging API, Authorize and Capture API, Refund or Retrieval APIs, sandbox testing, PayHere Links/Buttons, shopping-cart plugins, merchant onboarding, callbacks, hashes, OAuth tokens, or PayHere-specific payment status handling.
-
pixel-ju Bundle Wechat Mp Backup备份/导出用户自己的微信公众号全部历史文章(正文 Markdown + 全部图片 + 原始 HTML + 元数据),扫一次码即可、可断点续跑。当用户提到"公众号文章导出/备份/迁移/下载自己公众号的历史文章/公众号被封想把文章搬走"时使用。需要用户能用管理员微信扫码登录 mp.weixin.qq.com。Use when the user wants to export, back up or migrate all articles from their own WeChat Official Account.
-
pengelbrecht Bundle LucidaBuild professional slide decks from YAML and export to HTML or PDF. Use when users want to create presentations, slide decks, board decks, pitch decks, or quarterly reviews. Also use when users want to modify an existing Lucida deck, add slides, change themes, add logos, or export slides to PDF. Triggers on "create a deck", "make slides", "build a presentation", "quarterly review deck", "board deck", "pitch deck", "export slides to PDF", "lucida", or any task involving structured slide content.
-
phtn Bundle React To BeastAudit and port complete React applications to Beast BTSX → TSRX → Octane while preserving behavior, route contracts, and styling. Use for migrations from Vite, Create React App, React Router, TanStack Router, Remix, or Next.js. Tailwind is the default target; pure CSS is optional. Do not use for routine Beast authoring or unrelated React refactors.
-
piaoxuemoli Skill Colosseum DeploymentDeploy, update, roll back, and operate Colosseum (Next.js AI Arena) on a cloud server via Docker Compose + SQLite + Caddy, or on Vercel as a fallback. USE FOR: deploy colosseum, update production, rollback, backup, restore, server maintenance, production smoke, docker compose deploy, caddy config. DO NOT USE FOR: local development setup (use ops/dev/README.md), code-level feature implementation, LLM provider configuration.
-
petergyang Bundle Human ReviewOpen an HTML file, Markdown file, or localhost page in the browser so the user can edit text directly and leave comments on specific parts, then send all edits and comments back to you. Use after writing or updating something the user will read — specs, plans, reports, newsletter drafts, landing pages, slide decks, and locally running web pages.
-
peterpanstechland Bundle Wechat Publisher微信公众号图文发布:Markdown/HTML 一键转公众号排版、上传素材、创建/管理草稿、提交发布与状态查询。当用户提到微信公众号、公众号文章、写公众号、发推文、图文消息、微信草稿等操作时使用此 skill。
-
pgraeff Bundle Frontend Design ProDesign, build, review, and polish production frontend and mobile interfaces with distinctive visual direction, searchable UX and design-system guidance, responsive and accessibility rules, stack-specific recommendations, and concise product copy. Use whenever creating or changing pages, components, layouts, styling, interaction, navigation, motion, charts, visual assets, UI copy, or frontend usability in web, Flutter, React Native, SwiftUI, desktop, or similar interfaces.
-
planetscale Bundle Vercel React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
-
pingwurth Bundle Code To UmlUse when generating, updating, repairing, validating, or reviewing Code-To-UML .ctu/HTML source-analysis reports for a project, module, file, class, function, existing report, or validator/rendering failure.
-
plannotator Bundle Plannotator GuideWrite a Guided Review (a chaptered walkthrough of a changeset with the real diffs inline) and turn it into one portable HTML file with `plannotator guide export`. Use when someone asks for a guide, walkthrough, tour, or explainer of a diff, branch, PR, or commit, or wants a shareable review guide. Needs git and the plannotator CLI.
-
plannotator Bundle Performance AuditManual, evidence-based codebase performance audit workflow for finding concrete performance risks, bottlenecks, and red flags across frontend, backend, database, network, build, caching, rendering, and runtime behavior. Use when asked to audit, review, inspect, diagnose, or prioritize codebase performance issues; when looking for slow initial loads, janky UI, excessive re-renders, large bundles, fetch waterfalls, N+1 queries, inefficient database access, memory leaks, cache misuse, queue/backpressure problems, expensive animations, or scalability risks. This skill is explicitly for manual source review and coordinated investigation, not automated scanner scripts.
-
plasmicapp Bundle Plasmic DesignerBuild and modify Plasmic Studio designs using copilot tools via Chrome DevTools MCP. First argument should be a project ID, followed by the design request. Use this skill whenever the user mentions Plasmic, Plasmic Studio, visual web builder, or asks to design, build, edit, or modify UI components, pages, sections, or layouts inside a Plasmic project. Also trigger when the user references a Plasmic project ID, wants to add/remove/restyle elements in a visual editor, or asks about Plasmic component props, variants, slots, or tokens — even if they don't say "Plasmic" explicitly but describe visual design work that implies it.
-
pionxzh Skill WakaruTurn minified, bundled, or transpiled JavaScript back into readable modules. Use when you encounter unreadable production JS — a webpack/esbuild/Metro/Rollup bundle, a minified vendor script, Babel/TypeScript/SWC-transpiled output, or a single mangled .js file — and need to read, audit, debug it, or recover a best-effort SFC artifact from compiled Vue 3 component code. Not a deobfuscator.
-
piperubio Bundle Landing Page Guide V2Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Astro and Tailwind CSS that avoid generic AI aesthetics while following the 11 essential elements framework.
-
plaud-ai Bundle Plaud Embedded Capacitor SkillWrap an existing web app in a Capacitor iOS and/or Android shell so it can talk to Plaud recording devices over Bluetooth via the Plaud Embedded SDK. Use this when a user has a web app (React/Next.js/etc.) that implements Plaud Embedded and wants to ship it as an iOS or Android app, or wants to call the native PlaudSdk Capacitor plugin (scan, connect, list files, export/decode audio) from JavaScript.
-
plaud-ai Bundle Setup Plaud React NativeSet up the Plaud SDK Expo/React Native module (BLE connect, on-device recording, file list, audio export) on iOS and Android in an existing or new React Native app. Use when a user wants to integrate Plaud's native device SDK into a React Native / Expo app.
-
pmndrs Bundle KootaReal-time ECS state management for TypeScript and React. Use when the user mentions koota, ECS, entities, traits, queries, or building data-oriented applications.
-
pmndrs Skill React Three StartBuild, explain, and modify @react-three/start apps that use file-based React Three Fiber scene and DOM composition. Use when working in a react-three-start project, when the user mentions @react-three/start, react-three-start, R3F app structure, .scene.tsx/.dom.tsx files, Scene/Dom slots, wrappers, start.config.ts, or the react-three-start/r3s CLI.
-
plutext Skill DOCX DocumentsWorking with Word (.docx) documents via the docx4j MCP tools - filling templates, authoring from Markdown/HTML, reading docx content, converting to PDF/HTML. Use whenever the task involves creating, filling, reading or converting Word documents.
-
polloaiofficial Bundle Pollo GenerateDrive the pollo-cli to generate images and videos through the Pollo platform open API — discover a model, read its input fields, submit a generation with local or hosted image inputs, and poll it to a finished URL. Use this whenever the user asks to generate/create/make an image or video, animate a photo, do image-to-video / text-to-video / reference-to-video, check Pollo credit balance or estimate the credit cost of a generation, or asks what Pollo models are available — trigger even if they don't name "pollo-cli" or "pollo" explicitly, e.g. "turn this photo into a video" or "how many credits do I have left". NOT for building the platform API itself (server-side model exposure — use the expose-platform-model-api skill) or wiring a model into the web frontend (use the add-model skill).
-
privatenumber Skill MdevalEvaluates JavaScript in markdown HTML comments and interpolates results in-place. Use when editing markdown files that contain mdeval script blocks or value markers, when the user wants computed/dynamic values in markdown, or when maintaining README badges, version numbers, or stats.
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 domscribe, openstatus-cli, auto-paper-collecter. 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.