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.
-
sunrich-ht Bundle Figure ExtractorExtract complete, publication-quality figures and images from documents — local PDFs, PDF URLs, arXiv links, and HTML article pages. Use whenever the user wants to pull figures / charts / diagrams / images out of a paper or web article, says "extract the figures from this PDF / arXiv paper / webpage", needs clean figure PNGs for slides, decks, or reuse, or finds that naive embedded-image extraction returns broken fragments. This is a command-line tool (Python + PyMuPDF) that must be run in a shell; if your runtime has no shell, see the degraded-mode fallback. Keywords: extract figures from pdf, extract images from html, arxiv figure extraction, paper figure extractor, pdf figure crop, pymupdf.
-
thebaffledking Bundle JonyDesign-judgment skill for product interfaces. Use it whenever the user asks to design, redesign, critique, improve, polish, or ship any screen, component, page, layout, or visual change, even when they never say the word "design". Runs one of three modes: CRITIQUE judges an existing screen against sourced principles and their documented limits; LOOP generates isolated before/after moves for approval one at a time and records every rejection with its reason; GATE is a pre-ship checklist that blocks on failures. Built from Jony Ive's own words and the strongest published counterarguments to him, so every rule states where it fails. Governing rule: immersion must be earned by naturalness, not manufactured by spectacle. Reach for this skill when an interface risks being visually impressive and humanly unusable, which is now the default failure of AI-generated UI. Do NOT use it for backend, CLI, infrastructure, data pipelines, or prose editing.
-
jpush Bundle Update Sdk 2更新 jcore-react-native 插件的 JCore SDK 版本。自动拉取极光官网 Changelog,分析新增/移除/变更 API,更新 Android(Maven)和 iOS(CocoaPods)版本引用,同步更新 Native 层(Java/ObjC)和 Bridge 层(JS/TS)代码,展示变更摘要确认后发布到 npm。 Use when: 更新 JCore SDK、升级极光核心库版本、jcore-react-native 发布新版本、RN 插件 SDK 更新。
-
kemalyy Bundle Authoring Scorm CoursesUse when the user wants to create, build, or improve a SCORM-compliant training course, e-learning module, quiz, or interactive lesson with the scorm-mcp connector (your self-hosted server, e.g. http://localhost:8000/mcp) — including turning a brief, document, policy table, or cheat-sheet into a course. This skill SELECTS a teaching method before outlining — outcome type + PRIOR_KNOWLEDGE + error cost feed a Layer-0 selector that picks from 12 pedagogy packs (direct instruction, 5E inquiry, PBL, mastery, retrieval practice…) plus 6 overlays (cognitive load, UDL, ARCS, accessibility…) — and enforces evidence binding (every scored question bound to in-course evidence, K1–K6). Covers 30 screen types, assessment, theming, variables/gamification, media (TTS/ffmpeg), the build→preview→feedback→fix loop, and a mechanical anti-slop pre-flight gate.
-
kenming Bundle Bricks BuilderResearch, implement, modify, and audit behavior inside Bricks Builder sites using the bundled Bricks Academy corpus, stable development workflows, and version-aware verification against an authorized active Bricks installation. Use when the requested outcome concerns Bricks elements, controls, schema, hooks, templates, styling, responsive settings, dynamic data, queries, forms, interactions, custom elements, or page JSON. Do not use merely because Bricks Builder is mentioned, for generic WordPress, PHP, CSS, or JavaScript work, or for maintaining, naming, versioning, documenting, or releasing this Skill repository.
-
lachydotmcg Bundle SlopsecSecurity audit and hardening for vibe-coded SaaS apps. Use when reviewing, securing, hardening, or pen-testing an app — especially AI-generated / vibe-coded / "shipped fast" projects (Next.js, Supabase, Firebase, Express, serverless). Triggers: "is my app secure", "security review", "harden this", "check for vulnerabilities", "I'm about to launch", "audit before deploy", "exposed secrets", "leaked API keys", "before I ship". Walks the 50 most common ways vibe-coded apps get owned and produces a prioritized fix list.
-
learnwithu Bundle Skill紫微斗数命盘解读 V2:输入生辰信息,精确排盘并生成可视化命盘解读报告(HTML)。支持格局量化仪表盘、空宫借星标记、流年时空压力热力表,双主题(典藏/赛博)可切换。融合紫微三合派、中州派和手相互证的方法论。当用户提到算命、命盘、紫微斗数、排盘、命理、八字、运势、看命、生辰分析时触发。也适用于用户说「帮我看看命盘」「算一下」「排个盘」「看看运势」的场景。即使用户只是说「帮我分析一下我的性格/事业/感情」,只要上下文暗示需要命理分析,也应该触发。
-
leo-softr Bundle Softr Vibe CodingGenerate custom Softr Vibe Coding blocks as complete React components (TSX/JSX). Use this skill whenever the user mentions Softr, Vibe Coding, Softr blocks, or wants to build a custom UI component for a Softr app. Also trigger when the user asks to create cards, lists, forms, dashboards, charts, detail pages, or any interactive block intended for Softr — even if they don't say "Vibe Coding" explicitly. If the user mentions Softr in the context of building a custom UI component, creating a JSX block, or vibe coding, use this skill. Do NOT use for standalone brand-token extraction with no Softr app involved (that is the dembrandt tool on its own — this skill drives dembrandt in Step 1 when a project needs a DESIGN.md), or for charts/dashboards with no Softr app involved.
-
lexmount Bundle Lexmount Webfetch 3Use Lexmount WebFetch for lightweight public-page extraction and rendered DOM capture without creating a live browser session. Use for reading articles, extracting structured page text, fetching JavaScript-rendered public HTML, or obtaining a reusable DOM ID; use a browser skill when interaction, authenticated state, clicks, forms, screenshots, or manual takeover is required.
-
lgwanai Bundle Mail Skill 2Comprehensive email management skill for AI agents. Fetches, searches, reads, sends, and summarizes emails via IMAP/SMTP. Features include semantic search with optional vector embeddings, current-Agent replies, email classification, thread tracking, attachment preview, and loss-preserving offline HTML archives. Supports multiple accounts with isolated storage. Triggers: "check my email", "search emails", "send email", "reply to", "email summary", "fetch emails", "mail from", "inbox", "archive emails", "归档邮件", "备份邮件附件".
-
lora-sys Bundle Teaching HTML Story Deck 2Create or upgrade standalone interactive teaching HTML story decks with problem-first narrative, content-specific inline SVG diagrams, architecture and mind-map visuals, restrained Linear/Vercel-inspired motion, presenter notes, keyboard navigation, responsive layout, and accessibility checks. Use for teaching HTML, explainer webpages, technical or product walkthroughs, architecture visualization, course pages, screen-recording decks, or improving an existing HTML presentation.
-
lovstudio Bundle Lov Deploy To Vercel 2Deploy frontend projects to Vercel with automatic custom domain setup. Handles Vite, Next.js, CRA, and static sites. Auto-configures Cloudflare DNS CNAME records and Vercel domain aliases. Supports SPA routing via vercel.json. Trigger when user says "deploy to vercel", "部署到 vercel", "vercel deploy", or mentions a *.example.com / custom domain with vercel deployment.
-
lovstudio Bundle Lov Frontend Design 2把需求、现有界面与真实素材落实为有辨识度、交互一致的前端,覆盖页面、组件、导航、GSAP 展示及图片音视频。触发:设计前端、界面不够专业、制作交互案例集;design or refine a frontend UI.
-
lovstudio Bundle Lov Install Tanstack Query 2Initialize or refactor a frontend project to use TanStack Query as the unified server-state layer. Use when the user asks to install TanStack Query, initialize query infrastructure, migrate ad hoc fetch/invoke/useEffect request state, standardize query keys, or make app network requests share one cache model. Also trigger when the user mentions "初始化 TanStack Query", "重构网络请求", "统一请求缓存", "install-tanstack-query", "TanStack Query refactor", or "useInvokeQuery".
-
lovstudio Bundle Lov Publish Wechat Article 2统一读取、局部编辑、创建、核验并发布微信公众号草稿;已有草稿坚持先读后写、最小修改和保存重载,新草稿强制消费品牌封面与微信复制态 HTML。Use when asked to read, edit, sync, draft, verify, or publish a WeChat article.
-
lovstudio Bundle Lov Repo2docs 2Turn any folder of source material — a code repository, a pile of articles, a mixed knowledge dump with images — into a professional, polished Fumadocs (Next.js) documentation website, then deploy it to https://{product-id}.example.com/docs. Works by reading the folder one unit at a time and incrementally growing and refining the docs structure and detail, so it scales to large folders and handles images as first-class content (copied into the site, embedded inline, auto-galleried). Trigger when the user wants to "generate docs", "build a docs site", "make a documentation website", "fumadocs", points at a code repo OR a content/article folder, or says "为项目生成文档", "把这个文件夹做成文档站", "做文档站", "生成文档网站", "整理成知识库网站".
-
dlazy-ai Bundle AI Product VideoCreate cinematic product videos from shot recipe cards, a validated template, and code/audio assets (Remotion + real page screenshots + 2.5D camera moves + beat-synced cuts + sound design). Use when the user asks to turn a frontend project or webpage into a product video, says "use ai-product-video to make a video/promo", names the Ink Press template or asks to reproduce its effect, or wants a single shot card's motion. 用镜头配方卡 + 已验收模板 + 代码/音频资产制作电影感产品视频(Remotion + 真实页面截图 + 2.5D 运镜 + 节奏卡点 + 声音设计)。当用户要求"用 ai-product-video 做视频/宣传片"、把前端项目/网页做成产品视频、点名 Ink Press 模板或要求复刻模板片效果,或要用镜头卡做单个动效镜头时使用。
-
dmoshehun-prog Bundle Learn From MaterialsTurn books, PDFs, slides, documents, web pages and text into a source-grounded knowledge base, interactive learning HTML and Markdown in English or Chinese. Use for learning, summaries, explanations, review, quizzes, relationship maps, saving reusable methodology files, retrieving or comparing accumulated methods, and applying them to a real problem. 将材料转为可追溯知识库与交互学习页,支持中英文、关系图、方法论保存/检索/比较及应用;区分材料依据、推断与外部核验。
-
dromara Bundle Ruoyi Plus AI Coding 2在仓库内按代码生成器模板、项目 reference 文档和既有约定生成或修改代码。用于新增或修改 CRUD 模块、controller/service/mapper/BO/VO/entity、MyBatis-Plus/MPJ 查询、数据权限、缓存、翻译/JSON 增强、公共 common 模块能力、JavaDoc 注释,以及与后端接口配套的 Vue 或 React 前端页面、types 和 api 文件;触发后应先按任务类型读取对应 references,再阅读目标模块真实代码和 generator 模板。
-
dwmkerr Bundle Slides 2Creates, previews, serves, checks, exports, and collaboratively edits hand-built HTML slide decks, conference presentations, and speaker notes. Use when the user asks to "create slides", "make a presentation", "build a slide deck", use the "dwmkerr.com style", create a conference talk, preview or open a deck, "serve the slides", "make the slides editable", check a deck, or export slides to PDF. Produces dependency-free HTML with browser editing, conflict-safe live-save, comments, preflight checks, and selected-slide export.
-
dylanzhangzx Bundle Skill 2当用户咨询政策法规、政务办事、税务社保、公积金、企业补贴、资质证照、行业标准、公共服务、合规义务、企业经营政策、投资技改税惠、办事条件、材料清单、申请路径、风险判断,或要求权威依据、可信溯源、带角标答案、深知可信咨询时,使用深知可信咨询。该 skills.sh Public 版调用深知可信统一问答接口 credibleChat 获取答案和参考材料,输出带真实来源角标和来源清单的咨询答案,并默认生成本轮可交互可信核验报告 HTML(首屏核验报告单:依据溯源/引用对应/材料新旧/交付前检查)与移除角标的干净 Markdown。skills.sh Public 版不内置 API Key,统一通过环境变量 DKNOWC_API_KEY 注入。
-
esphome Skill Pr Workflow 2Create pull requests for esphome/aioesphomeapi. Use when creating PRs, submitting changes, or preparing contributions.
-
fasalzein Bundle Design QA 2Universal UI quality gates — accessibility, consistency, hardening, performance, responsive checks. Pre-ship checklist. Works with any AI agent, any framework.
-
frappe Bundle Frappe UI 2Build consistent Frappe-style user interfaces using the frappe-ui Vue 3 component library and its design tokens. Use when scaffolding pages, forms, dialogs, lists, or any UI inside a Frappe-based app, when the user mentions frappe-ui, Frappe Cloud / Gameplan / Desk / Drive / Insights styling, or asks to "use frappe-ui components".
-
genspark-ai Skill GenofficeCreate, convert, read and edit Office documents locally with GenOffice's command line. Build a new presentation (pptx) from a brief through a checked outline, per-page spec and render pipeline, a new spreadsheet (xlsx) from CSV or JSON data with formulas, a new Word document (docx) from Markdown or HTML, or a PDF; convert between pdf, docx, xlsx, pptx, md, html and csv; read the structure and text of an existing file (including the user's own docx / xlsx / pptx as source material) and apply structured edits to it. Use whenever the user asks for a slide deck, presentation, spreadsheet, workbook, report, Word document or any real Office file, a format conversion, a rewrite of part of an existing document, or wants the result opened in the GenOffice editor. Documents are processed locally; only search, image and media send the query or the referenced file to the provider configured in GenOffice.
-
virtuslab-open-source Bundle Astro Strapi Blocks 2Integrates @sensinum/astro-strapi-blocks with Strapi 5 Blocks fields in Astro: wiring `data` from API responses, theming with `extend` and `overwrite`, and custom block components. Use when adding or editing Strapi block rendering, rich text zones, or `StrapiBlocks` / theme configuration.
-
virtuslab-open-source Skill Astro Strapi Loader 2Use @sensinum/astro-strapi-loader with Astro Content Layer: build Strapi REST query objects (object and object-array populate per REST parameters), let qs.stringify serialize—never inline query strings. Composable query fragments, dynamic zone "on", locale strategies, generateCollections, getCollection / getEntry. Strapi 5, Astro 6 or 7.
-
zurmely Bundle MarkwatchConverts documents (PDF, DOCX, PPTX, XLSX, XLS, CSV, HTML, images, and anything else MarkItDown supports) into a Markdown file sitting right next to the original, without touching or deleting the source. Use this whenever the user wants to read, search, summarize, or otherwise work with the text content of a non-Markdown file, wants to convert a document to Markdown, or hands you a file path/attachment whose extension isn't .md and asks you to look at it. Handles installing the markitdown CLI on first use automatically — don't try to install it or shell out to markitdown yourself.
-
akash-network Bundle Console Tests 2Write tests for the akash-network/console monorepo following established team patterns and reviewer expectations. Use this skill whenever you need to write, fix, review, or refactor tests in the console project — including unit tests, functional tests, integration tests, or E2E tests for both frontend (deploy-web) and backend (api, notifications, indexer, provider-proxy). Also trigger when the user mentions 'write tests', 'add tests', 'fix tests', 'test this', 'spec file', or asks about testing patterns in the console codebase. When in doubt about whether to use this skill for a testing task in this repo, USE IT.
-
anasfik Bundle Flutter Apk SecurityReview Flutter Android APK/AAB release artifacts for manifest, permission, cleartext traffic, exported component, embedded secret, signing, size, WebView, deep link, and third-party service risks.
-
antfu Bundle Antfu Design 2Use when building or restyling devtools-style Vue 3 UIs with @antfu/design — wiring the composable UnoCSS preset, using the semantic token vocabulary (bg-base, color-base, badge-color-*, color-scale-*), choosing prefixed primitives (DisplayBadge, ActionButton, DisplayFilePath, OverlayModal, …), and keeping light/dark contrast and the "anti-slop" rules. Reach for it whenever generating or reviewing UI in a project that depends on @antfu/design.
5.5k -
apeironics Bundle MCP Safeguard 2Scan Model Context Protocol (MCP) servers for security vulnerabilities with the MCP-Safeguard CLI (@mcp-safeguard/cli). Use this when the user wants to audit or scan an MCP server/tool for security risks, triage or explain scan findings, fix MCP security issues (tool poisoning, rug-pull, cross-server shadowing, prompt injection, credential passthrough, command injection, secrets, SSRF, path traversal, excessive agency, context overshare), produce SARIF/JSON/HTML reports, or add MCP security scanning to CI / GitHub Actions. This skill drives the existing published CLI — it never reimplements the scanner.
-
appautomaton Bundle HTML To Markdown 2Convert 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.
-
appian Bundle AppianMANDATORY skill for Appian MCP tool usage. Provides critical domain knowledge (naming conventions, relationship rules, data modeling patterns, dependency order, UUID handling) that MCP tool schemas cannot express. Load this skill BEFORE calling any Appian MCP tools. Covers: record types, interfaces, expression rules, process models, sites, Web APIs, data modeling, relationships, SAIL expressions, security, accessibility auditing, change planning.
-
margelo Bundle Nitro Fetch 2Use this skill whenever an agent is working in a project that uses react-native-nitro-fetch, react-native-nitro-websockets, or react-native-nitro-text-decoder. Covers the fetch API, global replacement, prefetching and cold-start cache warming, the NitroWebSocket class and pre-warming, migrating from React Native's built-in WebSocket, the in-process NetworkInspector, native Perfetto / Instruments tracing, the native TextDecoder, and plugging nitro-fetch into axios via a custom adapter.
-
mattzcarey Bundle Chrome Cdp 2Drive a headless Chrome over the Chrome DevTools Protocol (CDP) for browser QA — navigate, click, fill forms, read the DOM/accessibility tree, screenshot, and assert. Use whenever a task requires loading a web page and interacting with it like a user. Chrome is launched by a bash step (recipe below); this skill attaches over CDP — no MCP server, no Puppeteer/Playwright needed to drive.
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 figure-extractor, jony, update-sdk. 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.