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.
-
mindovermachine-dev Skill Project EntryUse when implementing a GitHub Project directory issue assigned to Copilot, or when converting the project issue form into an Astro project content entry and pull request.
-
paldom Bundle Report Skill BuilderGenerates a self-contained report skill from a validated governed report contract - materializing the trusted queries, a Statement Execution runner, and a shadcn-styled HTML report whose ECharts code ports to AppKit. Use when the user asks for a skill or slash command that produces a specific report. Not for authoring general-purpose skills, defining the contract, or building a Databricks App.
-
paldom Bundle Monthly PnlGenerates the Monthly P&L report as a self-contained HTML page from the pinned monthly-pnl contract v1.0.0, with the numbers traceable to its trusted queries. Use when the user asks for the Monthly P&L, this period's figures, or to re-run or refresh that report. Not for changing the report definition, other reports, dashboards or app deployment.
-
paldom Bundle Icon ExportExports an approved master icon SVG into platform assets - favicon.ico + SVG favicon, apple-touch-icon, PWA 192/512 + maskable, App/Play Store PNGs, macOS icns, GitHub social preview, plus HTML/manifest snippets. Use when the user asks to export, generate, or ship favicons, app icon files, or store icons, or to wire the exported set into a repo. Not for designing, ideating, or critiquing icons.
-
appautomaton Bundle HTML To MarkdownConvert a URL or HTML into clean Markdown with metadata using markmaton. Handles browser capture for JS-heavy pages and deterministic HTML-to-Markdown conversion in one skill.
-
appautomaton Bundle Chrome Devtools CLIUse when a task needs Chrome DevTools from the shell: automate a live Chrome browser with `chrome-devtools`, inspect accessibility snapshots and UIDs, click/fill/navigate pages, evaluate JavaScript, inspect console and network activity, take screenshots, run Lighthouse, capture performance traces, or connect to an existing debuggable Chrome. This is CLI mode, not MCP client setup.
-
coleam00 Bundle Remotion Best PracticesCreate and edit Remotion videos with domain-specific knowledge. TRIGGERS - Use this skill when: - User mentions "Remotion" in their request - User references a Remotion project path (remotion-videos/*, contains remotion.config.ts) - User asks to create, animate, or edit video content in a Remotion context - User wants to build compositions, animations, or video sequences in React Always invoke this skill BEFORE writing any Remotion code.
-
fathah Skill Electron ProExpert in building cross-platform desktop applications using web technologies (HTML/CSS/JS) with the Electron framework.
-
mathisk2095 Bundle Esp32 ExpertThis skill should be used when the user is writing, reviewing, debugging, or architecting C++ firmware for ESP32 and variants (ESP32-S2, S3, C3, C6, H2, P4) using ESP-IDF or PlatformIO. Provides expert critique covering FreeRTOS task design, memory management (IRAM/DRAM/PSRAM), peripheral drivers (I2C/SPI/UART/GPIO), build systems (CMake/platformio.ini), power management, OTA updates, and embedded C++ best practices. Use when the user asks "review my ESP32 code", "fix FreeRTOS crash", "optimize memory usage", "debug I2C issue", "set up PlatformIO project", "review my CMakeLists", "search datasheet for this chip", "why is my task crashing", "configure deep sleep", or "help with ESP-IDF component structure".
-
mathisk2095 Bundle Swiftui ExpertThis skill should be used when the user is building, reviewing, or debugging SwiftUI views and apps. Detects iOS and Swift version from the project. Covers creating views, state management with @Observable, NavigationStack routing, animations, accessibility, performance optimization, Liquid Glass adoption, design systems, and clean code architecture. Use when the user asks things like "create a SwiftUI list view", "my @State isn't updating", "add navigation to my app", "make this accessible", "optimize SwiftUI performance", "add Liquid Glass to my toolbar", "fix my Swift concurrency warning", "set up SwiftData models", "critique my SwiftUI code", "fix my SwiftUI layout", "create a custom ViewModifier", or "add Dark Mode support".
-
mfish-qf Skill Add Screen Component在摸鱼低代码自助大屏中新增自定义组件,包括创建组件 Vue 文件、数据定义文件、配置面板文件,并在 ComUtils.ts 中注册枚举、在 index.ts 中注册导出。当用户提到"大屏新增组件"、"自助大屏添加组件"、"screen 新增组件"、"添加大屏自定义组件"时使用此 skill。
-
miunasu Bundle Dynamic HTMLCreate, render, persist, inspect, update, validate, and remove interactive HTML artifacts in Spore, including runtime evolution from batched user interactions. Use when a response is better expressed as an interactive report, hierarchy, data explorer, dashboard, diagram, or one-off tool; when working with existing `.spore/html` assets; or when the user asks for HTML rendering, adaptive interaction, or a reusable visual component.
-
trancong12102 Skill DeepwikiRetrieve and explore DeepWiki-generated documentation for public GitHub repositories. Use when listing repository documentation topics, reading DeepWiki pages, or asking focused questions about a codebase that needs current repository structure, architecture notes, or component explanations.
-
webrenew Bundle Memories DevDeveloper guide for contributing to and extending the memories.sh codebase. Use when: (1) Understanding the memories.sh architecture and lifecycle model, (2) Adding new CLI commands or MCP tools, (3) Modifying the memory storage layer (SQLite/libSQL), (4) Working on the web dashboard (Next.js/Supabase), (5) Adding new generation targets for AI tools, (6) Extending cloud sync, session compaction, or embeddings functionality, (7) Debugging build, test, or deployment issues in the monorepo.
-
colinwilliams91 Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
azzam-almatrafi Bundle MoyasarIntegrate the Moyasar payment gateway (Saudi Arabia) over its REST API: creating, fetching, listing, updating, refunding, capturing, and voiding payments; invoices; payouts and payout accounts; settlements and settlement lines; card tokens; and webhooks. Use this skill whenever the user works with Moyasar or references it implicitly — api.moyasar.com / apimig.moyasar.com endpoints, pk_test_/sk_test_/pk_live_/sk_live_ API keys, Moyasar Form (moyasar.umd.min.js / Moyasar.init), the react-native-moyasar-sdk, or builds checkout, card payment, mada / Apple Pay / Samsung Pay / STC Pay, refund, payout, or payment-webhook flows for a Saudi merchant. Trigger it even when "Moyasar" is not said by name but these keys, hosts, or the hosted form appear, and follow its security and verification rules rather than improvising payment code.
-
b-amir Bundle Product PlaybookCreate, reconcile, audit, or agent-check evidence-backed manual testing playbooks from any product codebase (tests, contracts, Swagger, docs, source, live interfaces). Use when the user asks for a product playbook, manual QA playbook, UAT script, tester-facing scenarios, playbook reconciliation, playbook audit, or drift check against an existing playbook. Do not use for writing unit tests, designing APIs, or generic QA strategy without a repository. Never invent interface labels or behavior. Publish only tester-facing Markdown plus one portable state JSON; optional PDF/HTML and sibling findings only when asked.
-
b-amir Skill Product Playbook ExportExport an existing validated product playbook to a single PDF or HTML file. Use only when the user explicitly asks for playbook.pdf or playbook.html. Never invent playbook content; never run during normal create or reconcile.
-
bear2u Bundle Blog Guide CreatorGitHub 레포지토리나 블로그 URL을 분석하여 한국어 챕터별 가이드 시리즈를 자동 생성하는 스킬. 사용 시점: - 사용자가 GitHub 레포지토리 URL을 주고 "가이드 만들어줘", "분석해서 블로그 작성해줘" 요청 시 - "소스 분석해서 챕터별로 작성해줘" 요청 시 - 외부 블로그/문서 URL을 주고 "번역해서 시리즈로 만들어줘" 요청 시 - 기존 블로그에 새로운 가이드 시리즈 추가 요청 시 생성 결과물: - 챕터별 개별 포스트 파일들 (_posts/) - 가이드 인덱스 페이지 (루트) - _tabs/guides.md와 index.html 자동 업데이트 - Git commit & push
-
bgorkem Skill React FrontendBuild responsive, client-side React single-page web apps (SPA) with Vite, TypeScript, and Tailwind CSS, designed for both mobile and desktop browsers. Use when creating or editing a React SPA, a component, a hook, a page/route, responsive layouts, or browser UI. This skill is for CLIENT-SIDE SPAs ONLY — no server-side rendering. Enforces React best practices, the Rules of Hooks, strict TypeScript, ESLint React rules, and SOLID principles. Triggers: "react component", "build a website/UI", "responsive design", "tailwind", "SPA", "custom hook", "react page/screen", "react-router".
-
bholmesdev Skill Embed HTML AppEmbed an HTML app
-
bholmesdev Bundle Create HTML AppCreate or update a Hubble HTML App: a folder-local .html file Hubble runs as a self-contained interactive UI, with Alpine, Tailwind, Hubble theme tokens, and the injected hubble runtime API.
-
biasia Skill Ds Governc2d2c governance pipeline — the standard workflow for converging and freezing a component/style system. Use when the user wants to unify, converge, standardize, or govern a visual dimension (radius, shadows, color, spacing, motion, a component API), asks to add a lint/CI gate for a style rule, wants hardcoded values migrated onto tokens, or complains the same style is hand-written differently across the codebase. Covers census → spec → convergence → full migration → gate → dead-code removal → write-back.
-
bidah Skill React Native Keyboard HandlingImplement frame-perfect, native-feeling keyboard handling in React Native and Expo apps. Use when content is covered by the keyboard, when keyboard animations jank or "snap" on Android, when inputs are hidden behind the keyboard, when the keyboard covers fields on Android 15 / edge-to-edge even though older Android worked, or when building forms, sticky footers, or chat input bars that must track the keyboard. Triggers: "keyboard covers input", "KeyboardAvoidingView not working on Android", "keyboard animation janky", "keyboard sticky footer", "Android 15 keyboard", "edge-to-edge keyboard", react-native-keyboard-controller.
-
bitsky-tech Bundle Bridgic BrowserUse for any task requiring a real browser: viewing web pages, accessing login-gated sites, operating web UIs, scraping social media (Xiaohongshu/Weibo/Twitter/X, etc.), reading JS-rendered or dynamic pages, bypassing bot detection, form filling, e2e checks, and general web automation. Prefer this over WebFetch whenever the page needs JS execution, authenticated session, interaction, or stealth. Invoke via terminal CLI (`bridgic-browser ...`) or Python SDK (`from bridgic.browser.session import Browser`, `from bridgic.browser.tools import BrowserToolSetBuilder`). Also covers accessibility snapshot refs, CLI-SDK mapping/migration, and generating SDK code from CLI action steps.
-
bloque-app Bundle Bloque Payments Sdk TSIntegration guide for the Bloque Payments SDK in TypeScript/JavaScript. Use when the user asks to create checkouts, process payments with @bloque/payments, handle 3D Secure, verify webhooks, or embed the checkout with @bloque/payments-core or @bloque/payments-react.
-
boojack Bundle UI PrototypeManually invoked capability for turning a UI/UX idea, product flow, interaction model, or interface concept into a polished interactive prototype delivered as one verified, self-contained HTML file. Use only when the user explicitly invokes or names the ui-prototype skill through the host agent's manual skill mechanism. Never activate automatically for ordinary design, frontend, visualization, prototyping, or single-HTML requests.
-
bruno-collections Bundle Bruno CI Setupcreate and review ci/cd automation for bruno api tests. use when a user asks to run bruno collections in github actions, gitlab ci, jenkins, azure pipelines, bitbucket, kubernetes, or other pipelines; set up the official bruno github action or the official bruno cli docker image; generate junit, json, or html reports; configure environments, tags, secrets, safe mode, developer sandbox mode, workspace paths, or pull request api-test gates for bruno collections.
-
buggregator Skill FrontendBuild and modify the App Template frontend (Nuxt 4 SSR with PrimeVue, Tailwind, Pinia). Use when the user asks to create pages, components, stores, composables, or modify the frontend UI. Covers project-specific patterns, conventions, and anti-patterns.
-
buildinternet Skill Releases MCPUse when the user asks about recent releases, changelogs, what's new in a library, breaking changes, version updates, or wants to compare products. Activates for questions like "what changed in Next.js 15?", "latest Tailwind releases", "compare Bun vs Deno releases".
-
bwitlin Skill Eli5Break down any concept, code, technology, or idea into a clear, layered explanation for adults who want the "aha moment" without the jargon. Produces a single self-contained HTML page with a concrete analogy, embedded CSS visual diagrams, layered detail, and curated links — then opens it in the browser. Use this skill whenever the user says "ELI5", "explain like I'm 5", "explain this simply", "break this down for me", "what even is [X]?", "help me understand [X]", "dumb it down", "in plain English", or otherwise signals they want a radically simplified explanation of something — even if they don't use the exact phrase "ELI5." Also trigger when a user is clearly confused by a concept in their codebase or conversation and asks "what is this?" or "I don't get this." If someone pastes code or references a file and asks for a simple explanation, this skill owns that.
-
amsterdam Bundle Developers AmsterdamMandatory for Gemeente Amsterdam architecture and engineering decisions. Use for tech stack choices, project setup, repo scaffolding, architecture, Git workflow, tests, dependency evaluation, Docker, databases, security, accessibility, code review, CI/CD, or other structural choices. Covers approved stacks (Python/Django, FastAPI, Node.js/TypeScript, React, Next.js), Conventional Commits, branch protection, commit signing, 70-80% test coverage, security-by-design, JWT RFC9068, CSP, README/ADR standards, EU-PL v1.2, Docker, PostgreSQL, and WCAG 2.1 AA.
-
amsterdam Bundle Amsterdam Design SystemMandatory for all Gemeente Amsterdam UI work. Use for pages, layouts, forms, dashboards, landing pages, React/JSX/TSX components, styling, theming, scaffolding frontend projects, or any visual interface. Covers @amsterdam/design-system-react, CSS tokens (--ams-*), BEM CSS with ams- prefixes, 4/8/12-column Grid, Spacious and Compact modes, and Tailwind CSS bridge patterns. Prefer this over generic UI libraries such as Material UI, shadcn, Chakra, Ant Design, or plain custom HTML/CSS.
-
analyticalmonk Bundle Creating ExplainersUse when creating an interactive explainer - a single self-contained HTML page with hand-built Canvas figures. Handles source-file explainers, topic-driven research explainers, and mixed intake where files provide the spine and research adds support. Trigger phrases include "make an explainer", "turn this paper into an interactive explainer", "build a distill-style explainer", or "explain X visually". For codebases or source files, use explaining-codebases instead.
-
andreasniggl Bundle Sofistik Rhino CdbWrite C# scripts for the Grasshopper C# Script component or the Rhino script editor that read a SOFiSTiK CDB database (*.cdb) through the SOFiSTiK.Analysis.Database assembly - geometry, analysis results, cross sections, tendons and axes. Use this skill whenever the user wants to pull FEA data into Rhino or Grasshopper, mentions a .cdb file, DataAccess, ReadData, KWH/KWL keys, any Cdb* type (CdbNode, CdbBeam, CdbQuad, CdbN_disp, CdbBeam_for, CdbSect_ppt, ...), load cases, support reactions, beam forces, quad stresses, or the SOFiSTiK Rhino Interface. Trigger it even for partial requests like "get the support reactions into Grasshopper", "show me the deformed shape", "which KWH holds beam stresses" or "why is my displacement 1000x too small" - anything that ends in C# touching a CDB.
-
aneebbaig Bundle Nextjs AppBootstrap a new Next.js (App Router, TypeScript) web app, or audit and retrofit an existing one, with current packages and no deprecated APIs. Use when the user wants to start, scaffold, or set up a new Next.js project, a React web app, a SaaS or dashboard or landing page on Next.js, or asks to "create a new nextjs app". ALSO use on an existing Next.js or React codebase when the user asks to audit, review, fix, clean up, refactor, modernize, upgrade, harden, or "bring up to standard" the app, remove deprecated APIs, improve the structure, or apply house rules. Handles private, open-source, and private-plus-open-source variants, Prisma and Postgres, better-auth, Tailwind, and shadcn or Mantine.
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 project-entry, report-skill-builder, monthly-pnl. 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.