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.
-
rickbauer327-cell Skill Invoice GeneratorUse when the user needs to create an invoice, bill a client, or turn a time log or list of deliverables into a sendable invoice. Produces a clean HTML invoice (printable to PDF) plus a markdown copy, numbered sequentially, using terms and details from .solo/business.md.
-
solvapay Bundle Sdk Integration 2Load when SolvaPay functionality needs to be coded into an app. Handles: billing UI (buttons, plan status, React components) in React dashboards, web apps, or MCP server UIs; paywalls, access gates, or usage limits on routes or handlers; SolvaPay fetch handler or webhook setup; SDK integration across Next.js, React, Express, Supabase edge functions, and MCP servers. Skip for greenfield MCP scaffolding, Lovable checkout, or redirect-only checkout with no SDK code.
-
solvapay Bundle Lovable Checkout 2Load when someone is adding SolvaPay to a Lovable app or Vite+Supabase project — especially when they want to install @solvapay/react-supabase @preview packages, paste checkout code into Lovable chat, wire Supabase edge function secrets, or use api-dev.solvapay.com. Also triggers for: keeping SOLVAPAY_SECRET_KEY out of VITE_ env vars, setting up SolvaPayProvider, or getting a paywall running on Lovable fast. This skill handles the full setup: @preview package install, edge function templates, provider wiring, and sandbox testing. Skip for Next.js projects, production solvapay.com deployments, MCP server setup, or general "which SolvaPay product" questions.
-
solvapay Bundle Website Checkout 2Use when building a checkout or upgrade flow on an existing website: user clicks subscribe or upgrade → server creates a SolvaPay session → browser redirects to SolvaPay's hosted payment page → returns to your site with access unlocked. Also use for adding a customer portal so subscribers can manage, upgrade, or cancel their plan after checkout. Covers Next.js fully; React without a server framework is partial. Skip for: embedding plan cards or billing dashboards, webhook processing, usage metering, Lovable or Vite+Supabase setups, or MCP tool paywalls.
-
viamagic333-lang Bundle Design HuntHunt advanced web design templates across 8 reference sites — awwwards.com, dribbble.com, behance.net, templatemonster.com, themeforest.net, framer.com/templates, tailwindui.com, and ui.shadcn.com — using the Playwright MCP browser. Four modes: inspiration (browse trends), extract (pull components/CSS), screenshots (save references to disk), replicate (rebuild a seen design in code). Use when the user says "find design for X", "найди шаблон для Y", "покажи трендовые дизайны Z", "вытащи компонент с сайта", "сделай скриншоты дизайнов", "реплицируй дизайн", or invokes /design-hunt.
-
igniteui Bundle Igniteui Wc Integrate With Framework 2Integrate Ignite UI Web Components packages into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
-
igniteui Bundle Igniteui Wc Customize Component Theme 2Customize Ignite UI Web Components styling using CSS custom properties, optional Sass, and the igniteui-theming MCP server for AI-assisted theming
-
keep-starknet-strange Bundle Cairo Contract Authoring 2Cairo smart-contract authoring on Starknet. Trigger on "write a contract", "create a contract", "implement this in Cairo", "add storage/events/interface", "compose components". Guides structure, security patterns, and component wiring.
-
shankulkarni Skill Deslop 2Use when scanning a React Native library for code quality issues — legacy bridge APIs, console.log in worklets, hardcoded values, missing peer deps, placeholder code.
-
shankulkarni Skill Testing 2Use when writing tests for a React Native library — Jest setup with jest-expo preset, React Native Testing Library patterns, Reanimated mocks, Codegen mocks, what to test and what not to.
-
shankulkarni Skill Scaffold 2Use when creating a new React Native library from scratch — sets up create-react-native-library, bob config, TurboModule / Fabric view (New Architecture) or JS-only library, Expo example app, peer deps, ESLint, Prettier, Husky, and Changesets.
-
shankulkarni Skill Animations 2Use when implementing animations or gestures in a React Native library — GPU-only properties, Reanimated v3/v4 worklets, useDerivedValue, GestureDetector press states, React Compiler compatibility.
-
shankulkarni Skill Performance 2Use when building performance-sensitive React Native library components — list virtualization, JS thread safety, bundle size, FlashList, FPS diagnosis, and Hermes-specific patterns.
-
banuba Bundle Far General 4Banuba Face AR SDK skill for three use cases: sales, developer documentation, and integration workflows. Use when working on anything Face AR: capability and compliance questions (sales), documentation lookup, CV concepts, and troubleshooting (dev), and building Web integrations such as AR masks, face filters, beautification, virtual background, and AR Cloud (integration). Trigger with "Face AR", "AR mask", "face filter", "virtual background", "AR makeup", "beautification", "face landmarks", "AR Cloud", "can the SDK", "how does", "explain", "add", "set up", "integrate", "build". Web, Android, iOS, Desktop (C++), Flutter and React Native have full code generation support. macOS gets the GitHub sample + code assistance. Unity gets the sample link only. For Video/Photo Editor SDK use build-video-editor, build-photo-editor, or explain-video-editor-photo-editor-docs.
-
get-convex Skill Check Updates 2Check the CURRENT Convex app's pinned components against the latest recommended versions and offer to upgrade them — e.g. the passkey auth component's new email-first sign-in. TRIGGER when the user runs /check-updates or $check-updates, asks 'are my components up to date', 'any updates', 'upgrade auth', 'upgrade my components', or wants the newest features after a quickstart. Applies each upgrade behind a build gate (verify-or-revert) with the user's consent.
-
get-convex Skill Convex Expert 2Convex backend rules — consult this whenever writing or editing any code inside a convex/ directory (schemas, queries, mutations, actions, HTTP endpoints, crons, file storage, auth, component installation). TRIGGER before touching convex/ functions, so the code uses the object-form syntax, validators, indexes, and component patterns that generic models get wrong.
-
bsamiee Bundle Mermaid Diagramming 2Authors, validates, and repairs Mermaid diagrams: type selection, graph logic, layout-engine config, an archetype template per diagram kind, and a bundled validator proving each fence renders, reads legibly, and holds its graph logic. Committed fences carry structural payload only; theming rides one optional reference for a deliverable that explicitly wants a styled render. Use when writing, fixing, or embedding a mermaid fence in markdown or a single-file HTML page, exporting one to SVG or PNG, or when a fence will not render, overlaps nodes, or crosses edges — and whenever a task asks to draw, map, or visualize a system, flow, state machine, sequence, schema, dependency graph, protocol seam, chronology, schedule, hierarchy, or workflow board, even when mermaid is never named.
-
redis Skill Testing 3Unit/integration testing standards for RedisInsight using Jest and Testing Library: test structure, the `renderComponent` helper, faker for test data, mocking patterns, and `waitFor` instead of fixed time waits. Use when writing or modifying any `*.spec.ts` or `*.spec.tsx` file, when adding component or slice tests, when debugging flaky tests, or when the user mentions jest, testing library, faker, or test patterns.
-
jgamaraalv Bundle React Best Practices 2React and Next.js performance patterns. Use when writing, reviewing, or optimizing React components.
-
jgamaraalv Bundle Nextjs Best Practices 2Next.js App Router best practices — file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling. Use when writing, reviewing, or debugging Next.js App Router code.
-
icloudsheep Bundle AI Log记录 AI 工作日志。当用户发送「记录日志」「记一下日志」「log 一下」等指令时使用,自动为本次工作拟一个标题(≤25字)并总结上一次记录至今的内容(正文默认 2000 字内,可以用 markdown、mermaid 图与 LaTeX 公式),写入按天目录 {保存目录}/{YYYY-MM-DD}/ 下的 data.json 与可视化 index.html。自动统计本段 token 与对话轮数;跨午夜接续会自动存入新一天并标注;网页可右键胶囊给会话自定义名称(跨所有日期生效),也可在详情面板/节点右键菜单编辑、删除、预览日志条目。另有 full 模式(`/ai-log full` 或「按主题/按每轮总结所有对话」):回看整段对话、按用户所选颗粒度(主题或轮次)划分,一次产出多条日志(节点带 🚀 角标),更耗 token,须先获用户许可并选颗粒度与数据来源。支持在线提交(`/ai-log online` 或「双提交」「在线提交」):写完本地后 POST 到 Ailogy 后端。保存目录与提交地址由配置决定,首次使用会询问用户是否永久指定。
-
laramarcodes Bundle Macos DevThis skill should be used to build native Apple macOS (Mac) desktop apps in Swift with SwiftUI, SwiftData, and the macOS 26 "Tahoe" stack — whenever the user wants to create, scaffold, design, debug, or extend a Mac app: windows & scenes (WindowGroup/Window/Settings/MenuBarExtra), the global menu bar and keyboard-shortcut Commands, NavigationSplitView/Table/inspectors, Liquid Glass, @Observable state and the Mac focus system, SwiftData/CloudKit persistence, Swift 6 concurrency, AppKit interop, document-based apps, menu-bar/background/login-item processes, on-device Apple Intelligence (Foundation Models), StoreKit 2, accessibility, testing, and the Mac ship gauntlet (App Sandbox, Hardened Runtime, Developer ID signing + notarization, or Mac App Store) — even when the request never says "macOS" or "SwiftUI" (e.g. "make me a Mac app", "a menu bar app", "a little utility for my Mac"). NOT for iPhone/iPad apps (use ios-dev), visionOS (use visionos-dev), Mac Catalyst, or Electron/Tauri web wrappers.
-
leevi2010-cursor Bundle Five Level Ternary ThinkingApply the 五层三叉思考模型 to substantive open-ended questions framed as “是什么”, “为什么”, or “怎么办”, including equivalent requests to define something, explain causes, or develop solutions. Build an exact five-level ternary tree in plain language a high-school graduate can understand, give every focused node a detailed explanation, a relatable example, and a stable path number, render it as interactive HTML, and always deliver both an inline visualization and a clickable standalone HTML file. Do not use for simple factual lookups, one-step calculations, or when the user explicitly requests plain text only.
-
level09 Bundle Stk Dev 2Background knowledge for stk async Quart framework development. Auto-loads when working on stk-based code: models, views, templates, database queries, auth patterns, Vue frontend. Provides conventions, patterns, and gotchas so Claude writes correct async Quart code instead of Flask patterns.
-
ludo-technologies Skill CLI Analysis 2Run the pyscn command-line tool for Python code quality analysis - CI/CD quality gates, HTML/JSON/CSV reports, full analysis runs, and project configuration. Use when user wants a CI check, a shareable report file, or to configure pyscn for a project.
-
megara-arevaco Bundle Organize React CodeOrganize, review, and refactor React codebases with component-folder boundaries, colocated hooks, explicit JSX styling, and state ownership based on the kind of state. Apply when creating components, splitting monolithic React files, or auditing frontend architecture.
-
megara-arevaco Bundle Avoid Unnecessary UseeffectPrevent unnecessary React useEffect usage when writing, reviewing, or refactoring React components. Apply when effects derive state, respond to user actions, transform render data, duplicate props, synchronize React state, or manually fetch server data; keep effects for synchronization with systems outside React.
-
megara-arevaco Bundle Choose React State ManagementChoose and review React state-management strategies by classifying local UI, shared client, server, URL, form, and persistent state. Apply when designing state architecture, selecting between React state, Context, Zustand, Redux Toolkit, query libraries, routers, or form libraries, or detecting duplicated and over-globalized state.
-
nolly-studio Bundle Setup 2The entry point. Ground an AI coding agent in a repository in one command — explore the repo, run one frontier interview covering every decision (harness, docs layout, tracker conventions, design direction if a frontend is detected), write the per-repo config doc, then dispatch to the bootstrap-agents-md and design-md engines and verify their output. Run this once per repo; re-run it to revise decisions.
-
vercel-labs Bundle Scoped CSS Symlinked FixtureTest fixture — produced-skill mode, ds-pkg passed as a SYMLINK (pnpm shape). Regression guard for the BSD grep -r vs -R bug — definer lookup must follow symlinks given as the directory argument.
28.7k -
oimiragieo Skill UI Fix Observe First 2Use when fixing, auditing, improving, or building ANY web UI — before reading or editing component code. Fires on contrast/a11y/overflow/responsive/hover-focus/layout complaints, "polish the UI", "audit the page/site", "make it premium", or any visual change (including a local authed dashboard).
0 -
oimiragieo Skill Aura Screenshot Clone 2Use when the user wants to clone or adapt a UI pattern from any website into your app, or asks to "build something like X", "make our nav look like Y", or "clone that component". Requires an aura.build Pro subscription. Aura's clone is now NATIVE — paste a URL or drag a screenshot into aura.build and it generates React/Tailwind directly; the Anima/Chrome-extension flow is only a fallback for login-gated pages Aura can't fetch.
0 -
wulaosiji Skill Deck Web Converter 2Convert pitch deck PPT (.pptx) or PDF (.pdf) into beautiful, responsive, self-contained HTML presentations. Perfect for sharing pitch decks via email, WeChat, QR code, or browser without file attachments. Use when: "BP转网页", "PPT转HTML", "pitch deck online", "商业计划书在线演示", "把PPT变成网页", "路演材料分享", "生成HTML版BP", "pdf to html presentation", "网页版PPT", "在线演示文稿". Outputs a single offline-ready .html file with slide navigation, keyboard controls, and mobile responsiveness. Cross-references: pitch-deck-creator, unique-club-founder-kit. Built by UniqueClub 🌐 https://uniqueclub.ai
-
nbsp1221 Skill React Performance Review 2Reviews React components for avoidable rerenders and performance regressions.
-
mrwogu Skill Home Assistant Card 2Use 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.
-
serkan-ozal Skill Observability 2Monitor and debug web applications using OpenTelemetry, console logs, network requests, and distributed tracing. Use when correlating frontend and backend requests or debugging request flow across services.
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 invoice-generator, sdk-integration, lovable-checkout. 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.