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.
-
nafisrayan Bundle Shopify Expert 2Builds and debugs Shopify themes (.liquid files, theme.json, sections), develops custom Shopify apps (shopify.app.toml, OAuth, webhooks), and implements Storefront API integrations for headless storefronts. Use when building or customizing Shopify themes, creating Hydrogen or custom React storefronts, developing Shopify apps, implementing checkout UI extensions or Shopify Functions, optimizing performance, or integrating third-party services. Invoke for Liquid templating, Storefront API, app development, checkout customization, Shopify Plus features, App Bridge, Polaris, or Shopify CLI workflows.
-
academind Skill Modern Tailwind 2Write clean, modern, concise Tailwind CSS code. Use whenever working on or reviewing Tailwind CSS code.
-
academind Skill Modern Accessible HTML Jsx 2Write clean, modern, and highly accessible HTML & JSX code, using semantically correct elements and attributes. Use when working on HTML / JSX code.
-
academind Skill Modern Best Practice Nextjs 2Build modern Next.js apps with App Router and best practices. Use when working on Next.js code or using Next.js features.
-
academind Bundle Modern Best Practice React Components 2Build clean, modern React components that apply common best practices and avoid common pitfalls like unnecessary state management or useEffect usage. Use when working on React code or using React features.
-
aznatkoiny Bundle X402 Payments 2Build applications using the x402 protocol — Coinbase's open standard for HTTP-native stablecoin payments using the HTTP 402 status code. Use this skill when: - Creating APIs that require USDC payments per request (seller/server side) - Building clients or AI agents that pay for x402-protected resources (buyer/client side) - Implementing MCP servers with paid tools for Claude Desktop - Adding payment middleware to Express, Hono, or Next.js applications - Working with Base (EVM) or Solana (SVM) payment flows - Building machine-to-machine or agent-to-agent payment systems - Integrating micropayments, pay-per-use billing, or paid API access Triggers: x402, HTTP 402, payment required, USDC payments, micropayments, pay-per-use API, agentic payments, stablecoin payments, paid API endpoint, paywall middleware
-
aznatkoiny Bundle Cpp Reinforcement Learning 2C++ Reinforcement Learning best practices using libtorch (PyTorch C++ frontend) and modern C++17/20. Use when: - Implementing RL algorithms in C++ for performance-critical applications - Building production RL systems with libtorch - Creating replay buffers and experience storage - Optimizing RL training with GPU acceleration - Deploying RL models with ONNX Runtime
-
daydeda Skill Recheck 2Comprehensive multi-dimension review of the current diff for ActiveCAMT (Next.js + Supabase + Vercel) — checks correctness/bugs, security & access control, PDPA/medical data exposure, performance, and refactor/simplification in one pass, ranking every finding as crucial / moderate / low and flagging quick wins. Use before opening a PR, before deploying, or any time the user asks to "re-check", "review everything", or "look it over" for quality. Reviews only the current diff vs the base branch by default.
-
prisma Skill Prisma Next 2Route a vague Prisma Next prompt to the right specific skill. Use for "help me with Prisma Next", "what is Prisma Next", "explain Prisma Next", "I'm new to PN", "where do I start", "what can I do with Prisma Next", "what can I do next with Prisma", "just ran createprisma", "tour of Prisma Next", "Prisma Next overview", and comparison questions like "Prisma Next vs Prisma 7", "PN vs Drizzle", "PN vs Kysely", "PN vs TypeORM". Do NOT use when the prompt clearly matches a workflow skill — adoption / quickstart / first-touch orientation / brownfield introspection, schema / contract editing, migration authoring (db update / migration plan / migrate), migration review on deploy / concurrent migrations, queries / db.orm / db.sql / TypedSQL, runtime / db.ts / middleware wiring, build / Vite plugin / Next.js plugin, debug / structured error envelopes / PN-* error codes, or feedback / bug report / feature request — load that sibling skill directly.
-
sjungling Bundle IOS Swift Expert 2This skill should be used when the user asks to "build an iOS app", "build a macOS app", "create a view controller", "create a SwiftUI view", "fix Xcode build errors", "implement Core Data", "design app architecture", or "optimize Swift performance". Automatically activates when working with .swift files, Xcode projects (.xcodeproj, .xcworkspace), UIKit or AppKit interfaces, SwiftUI views, or Apple platform frameworks (Core Data, Combine, WidgetKit, App Intents). Not for cross-platform frameworks (React Native, Flutter), non-Apple platforms, or backend server development.
-
starwards Skill Arwes React 2Working with @arwes/react (1.0.0-next) sci-fi UI framework — frame components, Animator lifecycle, SVG styling, bleeps, and effects. Use this skill whenever modifying Arwes components, debugging invisible frames, styling frame SVGs, or adding new sci-fi UI elements. Also use when you see imports from @arwes/react or the arwes-compat.tsx compatibility layer.
-
starwards Skill React Version Migration 2React version migration guide for Starwards - compatibility matrices, step-by-step upgrade/downgrade between React 17/18/19, Arwes compatibility layer patterns, XState version mapping, and common migration pitfalls
-
szeyu Skill Slidev Components 2Leverage Vue components in Slidev slides. Use this skill to add interactivity with built-in components or create custom ones.
-
udecode Bundle Kitcn 2Use for Convex/kitcn setup and feature work: cRPC, ORM, auth, React.
-
tuoxie2046 Bundle Nature Reader 2Build full-paper Chinese-English side-by-side, figure/table-aware, source-grounded Markdown readers for journal or conference papers from PDF, DOI, arXiv, publisher HTML, or pasted text. Use whenever the user asks to translate or read a paper, make 中英文对照/原文对照/全文翻译解读, extract figures or tables into the right positions, preserve figure/table placement near relevant prose, or keep exact source anchors for every block. This skill must not degrade into a summary-only output unless the user explicitly asks for a summary.
-
waynesutton Skill Convex Quickstart 2Initialize a new Convex project from scratch or add Convex to an existing app. Use when starting a new project with Convex, scaffolding a Convex app, or integrating Convex into an existing frontend.
-
zhuxining Bundle React Best Practices 2React performance optimization and testing guidelines. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns and test quality. Triggers on tasks involving React components, data fetching, bundle optimization, performance improvements, or testing.
-
1ecc Bundle Wifi Health Report 2生成脱敏的 Windows Wi-Fi 网络体检 SVG 或动态 HTML 报告,报告中的数字来自确定性检测,不使用图片模型改写。
-
fantastic-admin Bundle Fa Page Optimizer 2优化 Vue 页面,用 Fantastic-admin 框架内建组件(packages/components/)替换自定义实现和原生 HTML。当用户说:'帮我优化这个页面'、'把这些原生 HTML 换成框架组件'、'用 FaCard/FaModal/FaButton 重构一下'、'这个页面太乱了'、'统一一下 UI 风格'、'用内建组件替换自定义弹窗/分页/加载',即使用户只是说'看看这个页面能不能改进'也应触发此技能。
-
fantastic-admin Bundle Fa Route Generator 2管理 Vue Router 路由配置,用于 Fantastic-admin 框架。当用户提到以下任何需求时必须使用此技能:新建页面需要加路由、详情页不想显示在菜单里、新增页和编辑页老是开两个标签、从列表跳详情返回后状态丢失、给菜单项加 NEW 标签或红点、路由需要权限控制、配置页面保活、修改路由 meta、添加面包屑配置。即使用户只是说"加个路由"或"新建了一个页面",也应触发此技能。
-
glebis Bundle Nielsen Heuristics 2Run a formal heuristic evaluation of a design artifact against Jakob Nielsen's 10 usability heuristics, producing an evidence-backed, severity-scored report with honesty guards. Accepts a screenshot, live URL, codebase/HTML, interface description, or JTBD/spec doc, and adapts its rigor to what is actually observable. Renders as markdown or a Tufte-style HTML report, and can export findings as Linear or Beads tasks after confirmation. Triggers on heuristic evaluation, usability review, Nielsen heuristics check, UX heuristic audit, usability inspection.
-
jsmastery-pro Bundle Test 2Run /test to write a test suite for code you just built or changed — after implementing a feature, route, or fix. Targets uncommitted changes automatically, reads test-preferences.json for your framework (asks and saves it if absent), and picks the right strategy per file: happy path, edge cases, error states, accessibility.
-
jsmastery-pro Bundle Develop 2Run /develop to build a feature, UI or backend, from an approved design — a page, component, API, service, or data slice. If something load-bearing is undecided and no ADR records it, it stops and routes you to /architect; otherwise it reads the ADR plus AGENTS.md, builds, and advances the scope.
-
xyoraclenetwork Bundle Xl1 Dapp Kit 2Portable headless XL1 dApp architecture via @xyo-network/dapp-kit*. Covers definition/config/plan/incarnation, xl1.dapp.json, application ports, effect journals and crash recovery, durable events vs Event Kit wakes, Node/browser hosts, Vercel/Cloudflare target composition, and conformance evidence. Activates when building or migrating an XL1 dApp toward dapp-kit, writing xl1.dapp.json, hosting a headless runtime, or distinguishing UI clients from the protocol application. Complements xl1-patterns domain recipes and xl1-scaffold React+service apps — does not replace gateway/chain knowledge.
-
xyoraclenetwork Bundle Xl1 Scaffold 2Bootstrap a new XL1 application — a single React dApp, a single xl1-service backend, a plain Node.js service/CLI, or a full-stack pnpm monorepo with React + xl1-service + a shared TypeScript library. Activates when the user wants to create, start, bootstrap, initialize, or scaffold a new XL1 project. Do NOT activate for work in an existing project.
-
yaojingang Bundle Geo Diagnose 2Diagnose a brand, website, or page for evidence-backed GEO gaps and opportunities from user-supplied URLs, HTML, or evidence. Use for brand diagnosis, website or page audits, GEO gap analysis, and 品牌诊断、网站诊断、页面诊断. Excludes live AI-platform recall, ranking, and citation-share measurement.
-
yaojingang Bundle Geo Site Diagnose 2Crawl one public website from a supplied URL, select up to ten representative page types, score evidence-lined GEO readiness, and generate a standalone visual HTML report. Use for 网站 GEO 诊断、全站 GEO 体检、网站 GEO 审计, or requests such as “帮我诊断网站GEO并附上网址”. Excludes single-page or brand-only diagnosis, live AI ranking or citation measurement, authenticated sites, and website modification.
-
0xharryriddle Bundle Vercel React Best Practices 2React 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.
3 -
5dive-ai Bundle Heroui React 2HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
-
646826 Skill Orca CLI 2Use the public `orca` CLI to operate Orca-managed worktrees, folder contexts, terminals, repos, automations, artifacts, 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", 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.
-
646826 Skill Computer Use 2Use Orca's computer-use CLI to inspect and operate local desktop app windows through accessibility trees, screenshots, and safe UI actions. Use for desktop app interaction: list apps/windows, get app state, read visible UI, click controls, type, press keys, scroll, drag, set values, or perform accessibility actions. Also use for browser windows, webviews, Orca app UI, or other desktop UI. Triggers include "computer use", "orca computer", "read Spotify", "read Slack", "control/click/read in a desktop app", and "get app state".
-
646826 Skill Orca Emulator 2Control a mobile (iOS) emulator / simulator stream from inside Orca using the `orca` CLI. Use for taps, gestures, typing, hardware buttons, camera injection, permissions, accessibility tree, and more — all while seeing the live view in Orca's emulator pane. Prefer this over raw `npx serve-sim` or direct simctl when running agents inside Orca (the orca surface handles device scoping, helper lifecycle, and worktree context). Complements the orca-cli skill for terminals, worktrees, and the built-in browser.
-
646826 Skill Orca Emulator Android 2Control an Android emulator / device from inside Orca using the `orca` CLI. Use for listing/booting AVDs, taps, swipes, typing, hardware buttons (incl. Back and Recents), rotation, app install/launch, runtime permissions, the accessibility tree, and logcat — driving a real adb-connected device or emulator. Cross-platform (Windows, Linux, macOS). Complements the orca-emulator (iOS) and orca-cli skills.
-
hector-ha Bundle Shadcn 2Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
sacred-g Bundle Winui App 2Bootstrap, develop, and design modern WinUI 3 desktop applications with C# and the Windows App SDK using official Microsoft guidance, WinUI Gallery patterns, Windows App SDK samples, and CommunityToolkit components. Use when creating a brand new app, preparing a machine for WinUI, reviewing, refactoring, planning, troubleshooting, environment-checking, or setting up WinUI 3 XAML, controls, navigation, windowing, theming, accessibility, responsiveness, performance, deployment, or related Windows app design and development work.
-
ultroncore Skill Uniapp Frontend 3uni-app cross-platform frontend development with Vue 3 + TypeScript. Use for: (1) Creating new uni-app projects or pages, (2) Integrating UI libraries (uView Plus, uni-ui, TuniaoUI), (3) Implementing multi-theme design systems, (4) Building WeChat Mini Programs, H5, and other platforms, (5) Setting up SCSS theming and global styles, (6) Configuring Vite build system. Includes reusable templates, component patterns, and best practices applicable to any uni-app project.
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 shopify-expert, modern-tailwind, modern-accessible-html-jsx. 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.