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.
-
plutext Skill Docx4jUse when writing Java code that creates, reads or edits Word (.docx), PowerPoint (.pptx) or Excel (.xlsx) files with docx4j — including generating documents, editing existing ones, tracked changes, styles, numbering, mail-merge-like content, and docx→PDF/HTML conversion. Also use when the user asks how to merge or concatenate docx/pptx, embed OLE objects, or asks which docx4j artifact or JAXB runtime to depend on.
-
prnthh Bundle React Three GameBuild games with React Three Game using JSON prefab documents, R3F component composition, the core component API, the scene and prefab runtime APIs, the optional editor entrypoint, and optional plugins such as Crashcat physics.
-
psylch Bundle Cors AuditThis skill performs a comprehensive CORS (Cross-Origin Resource Sharing) audit on web projects. It should be used when diagnosing CORS errors, setting up CORS for new projects, reviewing CORS configuration after deployment issues, or validating that CORS is handled correctly across all layers (gateway, backend, frontend). Covers standard frontend-backend setups, micro-app architectures (Qiankun, single-spa), and multi-origin dynamic-origin scenarios.
-
portdeveloper Bundle Cloudflare CrawlUse the Cloudflare Browser Rendering /crawl REST API to crawl websites, extract content as HTML/Markdown/JSON, and build knowledge bases. Also covers making websites crawlable — robots.txt, sitemaps, WAF skip rules, semantic HTML, and Cloudflare AI Crawl Control. Use when the user wants to crawl a site, scrape pages, extract structured data, build RAG pipelines via the Cloudflare API, or make their site crawlable by Cloudflare's crawler.
-
poteto Bundle Verify AtlasDrive the Atlas workspace UI in a running Harbor Labs desktop build via CDP. Use for screenshots, clicks, sending messages, accessibility-tree inspection, JS evaluation, or visual-state checks.
-
powabase-ai Bundle PowabaseUse for ANY task building on Powabase, the multi-tenant AI Backend-as-a-Service (projects on *.p.powabase.ai, the /api/* surface). Triggers: RAG & knowledge bases (Sources, document upload/extraction, indexing strategies chunk_embed/full_document/page_index/graph_index/doc2json, retrieval vector/full-text/hybrid/tree search, reranking, query enrichment, multimodal/image retrieval, embeddings, pgvector); agents (ReAct loops, builtin/custom/MCP tools, sessions, streaming, approval/human-in-the-loop); multi-agent orchestrations (supervisor/sequential/parallel); workflows (block graphs, webhooks, scheduled/cron triggers, Copilot); SSE streaming of agent/orchestration/workflow runs; and the Powabase BaaS layer — PostgREST, Row Level Security, the ai.* schema, GoTrue auth, Storage, Realtime, direct Postgres. Also connecting/authenticating, choosing the right API key, and handling billing/rate-limit/error responses.
-
psylch Bundle UX Interaction TasteReview and audit the interaction quality and UX of web applications. Evaluates states coverage, interaction feedback, keyboard accessibility, form UX, responsive behavior, error recovery, and loading experience. Use when: 'review UX', 'check interaction quality', 'audit UX', '走查交互', '检查用户体验', '交互体验怎么样', 'UX review', 'interaction audit'.
-
puckeditor Bundle PuckBuild with Puck, the visual editor for React. Use when needing to (1) add Puck, a page builder, or a visual/drag-and-drop editor to an application, new or existing, (2) author or extend a Puck config so the app's own components become editable, (3) debug a Puck integration — unstyled previews, RSC errors, iframe or persistence problems, or (4) look up how any Puck API, field, or plugin works.
-
prompticeu Bundle PrompticIntegrate the Promptic Python SDK for LLM observability, tracing, prompt optimization, datasets, and Agent Optimization. Use when code imports `promptic_sdk`; when the user asks to trace, optimize, benchmark, or deploy an agent or prompt; or when running an agent externally and submitting predictions, files, or traces for scoring. Also use for OpenTelemetry-based LLM, architecture, workflow, and semantic parent/child tracing, canonical datasets, or programmatic AI Component management.
-
prompticeu Bundle PromptslideCreates and authors slide deck presentations using the PromptSlide framework (Vite + React 19 + Tailwind v4 + Framer Motion). Use when the user wants to create a new slide deck, add or edit slides, customize themes or branding, work with slide animations and transitions, capture slides as images, or visually verify slide appearance. Triggers on mentions of slides, decks, presentations, PromptSlide, slide screenshots, or slide-related tasks.
-
provablehq Skill Testing Wallet Adapter ChangesUse when the user lands a change to any wallet adapter package in this monorepo (core, react, react-ui, or any `wallets/*` adapter) or to `packages/aleo-types` that adds or modifies a field consumed by dapps. Walks Claude through writing a **self-contained example component in `examples/react-app`** that exercises the change, and testing it end-to-end against a real wallet extension installed in the browser.
-
pratchaya0 Bundle Oop ArchitectMulti-language: TypeScript, Java, Python, Go, C# code examples. Full-stack OOP architecture guide for React/TypeScript web projects. Covers project structure, domain modeling, 22 design patterns, 22 code smells with detection heuristics, 66 refactoring techniques, SOLID principles, component architecture, state management, and anti-patterns. Use when designing new features, refactoring existing code, reviewing PRs for architecture, or starting a new project. Auto-triggers when user asks about architecture, design patterns, refactoring, code smells, SOLID, or OOP best practices.
-
qkgecn93 Bundle Bys Personal Dashboard不一书个人工作台生成器。通过一场引导式访谈,帮用户(包括完全不懂代码的人)做出一个属于自己的手机端个人工作台—— 左侧常驻功能栏、右侧卡片流,打开就是今日计划、打卡、记账、体重、日程、单词、树洞等自己每天真正要用的东西, 可以部署上线并添加到手机桌面,像一个 App 一样用。 当用户说"初始化不一书个人工作台生成器"、"初始化 bys-personal-dashboard"、"我想做一个自己的个人工作台"、 "抖音上那种个人工作台我也想要一个"、"把我的日常安排做成一个手机页面"时必须触发; 即使用户只是丢来一张别人的工作台截图说"我也想要这种",也应触发。 已有工作台后说"给我的工作台加个XX功能"、"工作台换个配色"、"工作台改一下"时,走迭代流程而不是重新初始化。 用户没说"工作台"这个词时,用三个特征判断:①在手机上用 ②每天都会打开 ③装的是用户自己的私人数据 (体重、账目、打卡、待办、日记)。三个同时成立就该触发,比如"我想把体重记账待办整理到一个地方、 手机上能点开"——这就是工作台,只是用户不知道这个叫法。三个缺任何一个都不要触发。 功能只有一个也算——"我老忘记吃药,想每天在手机上勾一下"就是种子需求,别因为"听起来只是个小功能"就不触发。 判据是数据属于谁,不是数据存在哪:用户自己的记账 Excel 想做成手机上每天看的页面,是工作台;公司销售数据做报表,不是。 不用于:用完就走、不存个人数据的小工具页(抽奖转盘、计算器、放在活动大屏或直播间给别人看的倒计时)、 后台管理系统、 给团队用的多人协作工具、个人博客/作品集/对外展示的个人官网(那些是给别人看的,不是自己每天用的)、 公司或业务数据的报表看板(用 xlsx 之类的技能)、与个人工作台无关的普通 HTML 编码问题。
-
purcl Bundle Paper LabelerExtract, filter, and label research papers from rawdata files (.bib, .html) using the two-level taxonomy defined in SKILL.md. Use this skill when the user wants to process new venue data, label papers, add new conferences to the database, run the paper classification pipeline, rebuild the website, or batch-process a folder of rawdata. Triggers: "label papers", "process rawdata", "process folder", "batch process", "add venue", "classify papers", "extract papers from", "run the labeling pipeline", "process .bib", "process .html", "rebuild website", "update website".
-
puzzle-fuzzy Bundle Puzzle Fuzzy Skill仅用于 Puzzle Fuzzy 个人项目的 TypeScript 全栈、产品界面、Provider、桌面端、简单 Bun 脚本和交付偏好;在官方文档、标准和当前仓库约定无法决定时使用。复杂全栈项目默认偏好 Bun + Turborepo monorepo、Biome、React/Vue 界面、Elysia API(只有需要兼容 Node 时采用 Hono)、Drizzle/Zod 领域代码、Electron Builder 打包和已有的 Tauri/Rust 桌面壳;简单脚本保持最小结构。
-
priority3 Skill Agent MediaPreview local media in Pi TUI as true pixels when possible (images + PDF pages rasterized). Excel/HTML scrollable text. Use media_show. Never open/Preview.
-
quanhua92 Bundle Concept BuilderOrchestrate a multi-agent swarm to build verified, falsifiable "concept bundles" — teaching units where every claim derives from ONE runnable ground-truth file whose output is pasted verbatim into a guide. Use when the user wants to build/extend a learning curriculum (language concepts, algorithms, system design, interview patterns), spin up subagent workers to produce runnable + markdown (+ optional interactive HTML) lessons, run a verification sweep, or scaffold a new learning repo section. Handles BOTH interactive (.html companion) and non-interactive (runnable-only) flavors under the same orchestrator+worker discipline.
-
questdb Skill Review PrReview the pull request `$ARGUMENTS`.
-
qybaihe Bundle Ink Wash WebsiteTransform existing or new websites, web apps, landing pages, dashboards, and UI prototypes into a refined modern Chinese ink-wash / guse-guoxiang visual style. Use when Codex is asked to make a site water-ink, sumi-e, Chinese classical, oriental, guofeng, ancient elegant, xuan paper, ink brush, or to apply the bundled InkView icon and component asset libraries to web UI.
-
ralphcrisostomo Bundle Visual Development SkillUse when developing or modifying visual elements (components, pages, layouts, styling). Covers Playwright screenshots, Compodium component preview, responsive/dark-mode verification, and the iteration loop.
-
react Skill Metro ReleaseDraft a react/metro GitHub release — build a changelog from commits since the last tag and create a draft release.
-
reactnativecn Bundle React Native UpdateIntegrate and troubleshoot React Native Update OTA for Pushy and Cresc. Use when wiring react-native-update into React Native CLI, Expo prebuild, HarmonyOS, brownfield, monorepo, or mixed native apps; configuring update.json/appKey, Pushy/Cresc clients, UpdateProvider/useUpdate, iOS/Android/Harmony bundle loading, release baseline upload, native cold-start recovery/forceBoot, bundleHash diagnostics, checkStrategy/updateStrategy, canary/metaInfo flows, expo-updates conflicts, or OTA failures.
-
rams-design Skill RamsRun accessibility and visual design review
-
ran-net Bundle Hotel Booking AssistantResearch, compare, and shortlist lodging from current evidence using normalized stay totals, independent reviews, room-only/meal-plan comparisons, cancellation, availability confidence, and booking-site options. Analyze a supplied hotel shortlist or JSON dataset and produce an evidence-backed HTML hotel report. Prepare booking decisions and assist the user's booking steps, but never transact. Use for "find me a hotel", "cheapest booking site", "ホテルを探して", "ホテル予約を比較して", or "最安サイトを調べて". Not for long-term rentals or residential property searches.
-
raphaelmansuy Skill EdgeparseUse this skill whenever the user wants to extract structured content from PDF files — reading or extracting text, tables, headings, images, and bounding boxes from PDFs, or converting PDFs to Markdown, JSON, HTML, or plain text. EdgeParse is a zero-dependency Rust-native tool (no JVM, no GPU, no OCR models required). Use this skill when the user has a .pdf file and wants to parse it, extract its text or tables, convert it to Markdown or JSON, get bounding boxes for content elements, process multiple PDFs in batch, or pipe PDF content to an LLM pipeline.
-
realskyrin Bundle Capcap Agent ToolsCapture screens or exact macOS windows, inspect screenshots, annotate supplied images, and produce PNG evidence with capcap's headless agent CLI. Use for arrows, boxes, labels, mosaic, magnifiers, spotlight regions, cropping and native beautification. Also documents stable accessibility identifiers for capcap's editor.
-
rebyteai-template Skill Build And DeployBuild and deploy this Next.js LangChain retrieval application with Supabase vector store. Use when building, deploying, setting up vector store, or preparing the project for production.
-
rastian Bundle Interaction DesignApply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation, task flows, or navigation patterns. Core audiences: product designers, UX designers, UI designers, service designers, and interaction designers working on digital products and services. Trigger on: interaction flow, micro-interaction, affordance, feedback design, state design (hover/focus/error/loading/empty), response time, transition, animation, mental model, task flow, user flow, navigation design, interaction spec, handoff annotation, gesture, input validation, error state, loading state, empty state, system feedback, signifier, design review, interaction audit, IxD principles.
-
raggle-ai Bundle Barkdown PreviewLaunch and verify BarkDown previews for Markdown, HTML, and text files or folders, including phone-accessible LAN links.
-
raghuramsirigiri Bundle Chart DashboardBuild a self-contained HTML dashboard, data-story report, or slide deck from supplied information (metrics, tables, notes, pasted data, a topic), rendered with the bundled zero-dependency charts-lib SVG chart library. Use whenever the user asks for a dashboard, analytics page, KPI/bento view, illustrated report, or a presentation, slides or a deck built from data they provide or describe.
-
revopush Bundle Revopush SetupIntegrate the Revopush over-the-air (OTA) update SDK (@revopush/react-native-code-push, the maintained successor to Microsoft CodePush) into a React Native or Expo app. Use whenever the user wants to add OTA / hot / live JS-bundle updates to a React Native or Expo project, or mentions Revopush, CodePush, code-push, react-native-code-push, over-the-air updates, hot updates, differential/diff updates, or deployment keys — even if they don't name Revopush explicitly, and even phrased as "set up", "integrate", "configure", or "add" updates. Handles iOS (AppDelegate in Swift or Objective-C, Podfile, Info.plist), Android (build.gradle Groovy or Kotlin DSL, MainApplication in Kotlin or Java, strings.xml), the JS codePush() wrapper and the advanced manual sync() API, old and New Architecture, and the Expo config-plugin / prebuild workflow. Not for publishing a release of an already-integrated app (that is the Revopush CLI alone) or for native apps without React Native.
-
reisen7 Bundle Fullstack API ContractMaintain consistency between frontend and backend APIs across multiple frameworks (Spring Boot, Django, Flask) and TypeScript frontends. Use when developers need to define API contracts, generate backend code (controllers, DTOs, serializers), generate TypeScript types and API clients, validate request/response consistency, or solve mismatched API problems between AI-generated frontend and backend code.
-
remix-run Skill React Router Template Dep BumpUpdate pinned react-router and @react-router package versions in the remix-run/react-router-templates repo, refresh the pnpm lockfile, and verify with the Playwright suite in .tests.
-
ravindrakele Bundle Deep Security AuditDeep, multi-agent security audit of a codebase — WordPress plugin, Laravel, Next.js, Node/Express, Django/Rails, or any app. Detects the framework, maps the REAL attack surface (routes, handlers, auth, sinks), then fans out scoped finder agents that READ and understand the code (not just grep), adversarially verifies every finding (proves the guard is genuinely absent + traces reachability), scores honest CVSS 3.1, dedupes, and produces a ranked report. Use whenever the user asks to find security issues / vulnerabilities, run a security audit or pentest, "is this secure", "scan this plugin/app/repo", or review auth / SSRF / IDOR / injection / secrets. READ-ONLY by default — never edits, commits, or exploits live systems.
-
rga-rt Skill Claude Nuxt Fullstack ScaffoldCreate a production-ready Nuxt 3 project with Tailwind CSS, Vitest, ESLint, i18n, and optional local SQLite database. Use this skill whenever the user wants to scaffold a new Nuxt application with these tools pre-configured, avoiding manual setup of build tools, type safety, and database layers. Triggers include: "scaffold a Nuxt project," "new Nuxt app," "setup Nuxt + Tailwind," "create a Nuxt dashboard/tool," or any request to build a full-stack Nuxt application. Always offer optional i18n and database setup.
-
remorses Skill SpiceflowSpiceflow is a super simple, fast, and type-safe API and React Server Components framework for TypeScript. Works on Node.js, Bun, and Cloudflare Workers. ALWAYS load this skill BEFORE writing or editing ANY spiceflow code, including one-line changes: routes, pages, layouts, loaders, server actions, forms, ErrorBoundary, redirects, cookies, navigation, Link, router, ProgressBar, the typed fetch client, middleware, and OpenAPI. A project uses spiceflow if anything imports from "spiceflow" or "spiceflow/react", or constructs new Spiceflow(). The API is small but very opinionated and the opinions are NOT guessable; writing spiceflow code from memory or from what looks like Next.js produces wrong code every time.
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 bys-personal-dashboard, docx4j, react-three-game. 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.