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.
-
liusai0820 Bundle Industry Chain Chart产业链图谱生成技能。输入任意产业名称或公司名称,自动生成结构化产业链 JSON 数据, 渲染为高质量可视化图谱 HTML,并通过 Playwright 截图输出高清 PNG 图片。 适用于产业分析、投资研究、招商引资等场景。
-
liustack Skill PostpressUse when the user wants to convert Markdown into editor-ready HTML for WeChat Official Accounts or X Articles, including inline styles, embedded local images, rich-text clipboard output, or platform-safe link handling.
-
liuyunlong2021-wq Bundle Svg Animation EngineerGenerates pure SVG code animations using flat design and CSS keyframes. Use when user asks for SVG code, Lottie alternatives, vector illustrations, or web-based motion graphics.
-
livewire Bundle Blaze OptimizeSet up and optimize Blade component rendering with Blaze. Use when installing Blaze, optimizing components, or configuring @blaze directives and strategies.
-
liyown Bundle Use EffectRefactor React code away from direct useEffect usage. Use when Codex needs to review, rewrite, or prevent useEffect in React components, custom hooks, or frontend architecture; diagnose infinite loops or race conditions caused by effects; replace effect-driven state syncing with derived values, event handlers, query libraries, keyed remounts, or a mount-only wrapper such as useMountEffect; or enforce a no-direct-useEffect rule in linting and agent guidance.
-
sangjiexun Bundle Remotion Mashup Video用 Remotion(React + TypeScript)代码化生成短视频:零碎片段混剪(fade 渐变转场 + 字幕关键词聚焦标记)、16:9/9:16 双尺寸、双语字幕、30 秒讲解视频,支持 yt-dlp 嗅探下载 YouTube 素材(tv_android 破解 403)+ VLM 视频理解自动标重点的完整闭环。 触发词:混剪视频、渐变转场、聚焦标记、讲解视频、Remotion 视频、双语字幕、 VLM 自动标重点、YouTube 下载、嗅探下载、视频理解。
-
sanyuan0704 Bundle SigmaPersonalized 1-on-1 AI tutor using Bloom's 2-Sigma mastery learning. Guides users through any topic with Socratic questioning, adaptive pacing, and rich visual output (HTML dashboards, Excalidraw concept maps, generated images). Use when user wants to learn something, study a topic, understand a concept, requests tutoring, says 'teach me', 'I want to learn', 'explain X to me step by step', 'help me understand', or invokes /sigma. Triggers on: learn, study, teach, tutor, understand, master, explain step by step.
-
sarveshtalele Bundle Aspx AnalyzerAnalyze ASP.NET Web Forms applications (.aspx pages, .ascx user controls, .master pages). Produces 5 views: (1) Project Overview — architecture, master pages, auth model, functional areas; (2) Page-by-Page — every .aspx with controls, handlers, redirects; (3) Functional View — pages grouped by business domain (Authentication, Orders, Admin, Reports, etc.); (4) Component View — user controls and master pages with usage maps; (5) Navigation Map — page-to-page transition graph. Supports GitHub repo URLs AND local/current repo paths. Builds a JSON index once; subsequent queries served from cache — handles 1000+ ASPX pages efficiently. For HUGE repos (10,000+ files) use the streaming single-file business analyzer (aspx_business_analyzer.py) — memory-safe, multiprocess, emits ONE consolidated business-logic markdown file instead of 5. Also emits an OpenSpec handoff: openspec/config.yaml (project context + modernization rules) and one openspec/changes/<area>/proposal.md stub per business capability, for repos that a
-
satvikxbansal Bundle Debug Log SkillEngineer-grade debugging discipline for any codebase. Invoke this skill before writing code on any non-trivial task AND every time you fix a bug, crash, build error, UI regression, flaky test, or unexpected behaviour. It enforces a structured `DEBUG_LOG.md` protocol, an *active pre-flight* grep-based retrieval of applicable prevention rules, a "think before coding" five-item plan, and a pre-mortem catalog of frequently-encountered traps in web (React / Next.js / Node / TypeScript), iOS (Swift / SwiftUI / UIKit), Android (Kotlin / Compose), and macOS (Swift / AppKit / SwiftUI) codebases. Use this skill whenever the user mentions debugging, crashes, errors, "it's not working", "why is this broken", "the build is failing", "this test is flaky", "fix this bug", stack traces, exception types (NullPointerException, TypeError, SIGSEGV, fatal error), or when starting new implementation work in any of the supported tracks so prevention rules from prior bugs are retrieved first.
-
sayeed1999 Skill Battle Tested EngineerEngineering judgment for code write/refactor/test and frontend UI. Trigger on code review, legacy cleanup, tests, UI with data, bloat/over-engineer complaints — even with no explicit mention, before any diff/rewrite/test suite. Output ultra-terse caveman style; code, commits, PR desc, security warnings stay normal prose.
-
schoepplake Skill Framer MotionProduction-grade animation patterns for React and Next.js using Motion (formerly Framer Motion). Use this skill whenever the user asks to animate components, add transitions, create scroll-triggered effects, implement page transitions, layout animations, gesture interactions, or any kind of motion/animation in a React or Next.js project. Also trigger when code imports 'framer-motion', 'motion/react', or 'motion/react-client', or when the user mentions: animation, transition, fade-in, slide, parallax, scroll animation, exit animation, AnimatePresence, motion.div, spring, gesture, drag, hover animation, stagger, whileInView, or layout animation.
-
schup Skill Likec4Generate, scaffold, and refine LikeC4 architecture diagrams using the LikeC4 DSL (.c4 / .likec4 files). Use this skill whenever the user wants to: create architecture diagrams, model software systems, generate C4-style views (context, container, component, deployment), produce LikeC4 DSL code, describe a system and turn it into a diagram, or ask about element kinds, views, relationships, deployment nodes, trust/network boundaries, or connection detail (protocols, ports, hostnames, service accounts, per-view detail levels) in LikeC4. Trigger even if the user just says "make a diagram of my system", "model this architecture", "generate a C4 diagram", "show me the containers in my app", "add trust boundaries", "show network zones", "add connection detail", "show protocol and port on the diagram", or "different views for different audiences".
-
scottfalconer Bundle Drupal Intent TestingExploratory, intent-focused UI testing for Drupal sites using the agent-browser CLI (accessibility-tree based; no vision model required). Use to “poke around like a human”: create/edit content, change module configuration, build Canvas pages, and verify the intended UX/output. Supports guided testing, seeded fuzz/monkey testing, and paired before/after comparisons with artifacts (snapshots, screenshots, console/errors).
-
lxgicstudios Bundle CSS To TailwindConvert CSS files to Tailwind utility classes
-
lxhsoluto-star Bundle HTML ShareShare a single HTML file as a short URL + QR code. Reads a local .html, uploads it (with its local images) to the html-share backend, inlines/uploads assets, auto-adds mobile viewport, generates a social-preview (OG) image, and prints a short link + scannable QR. Supports custom short links. Use when the user says "share this html", "分享这个html", "上传html", "生成分享链接", "生成二维码", "share this page", "make a link for this HTML", "publish this HTML", or asks to host/share a single HTML artifact you just produced.
-
lyhue1991 Skill Webfetch网页内容抓取工具。使用 webfetch CLI 抓取网页内容并转换为 Markdown、文本或 HTML 格式。触发场景:用户要求抓取网页、获取网页内容、网页转 Markdown、网页转文本、下载网页。
-
lyhue1991 Skill Wxgzh微信公众号文章发布工具。使用 wxgzh CLI 将 Markdown 文章发布到公众号草稿箱。触发场景:用户要发公众号文章、配置公众号 AppID/AppSecret、生成封面图、Markdown 转 HTML、多账号管理。
-
lyydggyxs-cmd Bundle Md ReadableMake AI-generated Markdown readable. When the agent dumped a wall of text and you can't find the signal — this skill unpacks linear Markdown into a scannable, three-layer spatial HTML view. Every word preserved. Nothing compressed. Just organized so you can actually follow what the agent is thinking and keep the conversation productive. Use when the user says "make this readable", "I can't read this wall of text", "what is the agent even saying", "too dense", "too long to read", "帮我看看这个", "这太密了", "看不下去", or hands you a Markdown file that's too long to parse linearly. Also trigger on "/readable" or "/md-readable".
-
lzfxxx Bundle Prompt To Drawio SkillGenerate and edit draw.io artifacts from natural-language prompts without a frontend. Use when the user asks for prompt-to-diagram workflows that need `.drawio` output, optional image export (`png`/`svg`/`pdf`/`jpg`), context ingestion (image/PDF/text/URL), shape-library lookup, or visual validation loops.
-
machbuilds Skill Interactive HTMLTurn a folder of static HTML into a live commenting surface and act as the agent that responds. Inject a client library, start a local server, watch an on-disk inbox; when the user highlights text, picks an element, drags a region, or asks a question, read it and edit the HTML in response. If the user has no HTML yet, generate a polished self-contained page from their description first, then start the comment loop. Trigger phrases — "make this page interactive", "make these pages interactive", "let me comment on this page", "make this interactive", "add feedback to this page", "comment on this page", "build me a page", "create an html page", "turn this into a page", "make a page about", "design a page for", "make an interactive page from this".
-
macrochen Bundle Baoyu Markdown To HTML SkillConverts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, and infographics. Use when user asks for "markdown to html", "convert md to html", "md转html", or needs styled HTML output from markdown.
-
macrochen Bundle Baoyu Markdown To HTMLConverts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, PlantUML, footnotes, alerts, and infographics. Use when user asks for "markdown to html", "convert md to html", "md转html", or needs styled HTML output from markdown.
-
maddada Bundle HtmlcnBuild static shadcn-style prototypes using htmlcn plain HTML components. Use when creating or editing framework-free HTML UI examples with the htmlcn runtime.
-
magebyte-zero Bundle Agent GuidelinesUse when writing articles or developing full-stack code (frontend/Java/Go/Python/Redis/Kafka/MySQL/Spring Cloud/云原生) and you need AI collaboration behavioral guidelines — the four principles (align before acting, technical accuracy, surgical edits, verifiable delivery), the RIPER-5 coding workflow, monorepo testing rules, and authentic writing voice. Trigger on full-stack code tasks, the RIPER-5 development workflow, technical writing standards, or monorepo testing rules.
-
magersoft Bundle Vue Ddd ArchitectureBuild and maintain scalable Vue 3 + TypeScript applications using a layered, module-per-domain architecture (domain / application / infrastructure / ui) with enforced dependency boundaries and a public API per module. Use this skill whenever the user adds a feature or a business module to a Vue app, bootstraps a new Vue project, asks where a file or piece of logic belongs, wonders whether their layering is correct, or wants to refactor a messy pages/components Vue codebase into modules — even if they never say the words "architecture" or "DDD". Triggers EN: "add a module", "new feature in Vue", "structure my Vue app", "DDD frontend", "where should this service live", "split this component", "refactor to modules", "scalable Vue architecture", "domain layer", "clean architecture Vue". Триггеры RU: «добавь модуль», «новая фича», «разложи по слоям», «куда положить этот файл», «структура Vue-проекта», «DDD на фронтенде», «отрефактори на модули», «масштабируемая архитектура», «доменный слой», «сделай по-нормальному
-
mahfuzurrahman01 Bundle Nextjs Supabase Polar StarterScaffold or audit a multi-tenant SaaS billing and auth stack built on Next.js, Supabase, and Polar.sh. Use when building a credit-based SaaS, adding a credit system / usage-based billing / token wallet to a Supabase app, integrating Polar.sh checkout or webhooks, setting up Merchant of Record payments from a region where Stripe, Paddle, or Lemon Squeezy are restricted or unavailable (Bangladesh, Pakistan, Nigeria, etc.), designing an append-only credit ledger with SECURITY DEFINER functions, wiring Google-only OAuth via Supabase Auth, or reviewing RLS policies for a multi-tenant billing schema. Covers server-authoritative credits, webhook idempotency, purchase reconciliation, and file-hash result caching.
-
maizzle Bundle MaizzleUse when building, editing, or debugging HTML email templates with Maizzle 6 and Tailwind CSS. Triggers on Maizzle 6 projects, email template work, HTML email component usage, email CSS inlining, and email-client compatibility questions.
-
malawadd Bundle Zama Fhevm Confidential ContractsBuild, test, deploy, and integrate confidential smart contracts on Zama Protocol FHEVM. Use when the user asks for FHEVM Solidity, encrypted voting, confidential ERC-7984 tokens, OpenZeppelin confidential contracts, Hardhat setup, encrypted inputs, ACL, decryption, or frontend relayer integration.
-
mantvmass Bundle Memory Leak AuditAudit JavaScript/TypeScript code for memory leaks and apply fixes. Use when the user asks to find, diagnose, fix, optimize, or prevent memory leaks, growing heap, high memory usage, or OOM crashes in Node.js, Next.js, Nuxt, browser, React, or Vue code.
-
manzdev Skill Web ComponentsCreate or modify vanilla HTML/CSS/JavaScript (without a framework) using modular ES modules (ESM), vanilla technologies, clean and readable code, ready for production (no transpiling). Useful for lightweight, high-performance pages, dependency-free UI widgets, standard JavaScript refactoring, and rapid prototyping without using frameworks like React, Angular or Vue.
-
maojiebc Bundle Majia Guanyuan观远 BI(Guandata)实战增益层 Agent Skill —— 架在官方全家桶(guancli 查数 / guanvis 建卡发布截图 / guanetl ETL / guanwf 数据流 / guands 数据源 / guanmetric 指标写)之上,专攻官方 DSL/命令覆盖不到的硬骨头:Part B ETL 整库治理判断 + 10 类 BI 引擎报错手册 + SmartETL 全链路重写/ExecPlan、Part C 既有页自定义图表 HTML/CSS/JS 注入排障 + 固定卡/overlay、Part C-12 HTML 应用化看板(descriptor patch 把 selector 联到 custom chart 内部 dataView + 视觉设计底线/反 AI 味红线/guanvis screenshot 视觉验收)、Part D v7 草稿-发布状态机绕过 + SmartETL 节点化静默坑 + 移动端 phoneLayout ZIP inject、Part E SuperApp 开放应用反向工程(form 建表 /survey-engine/api/form/add + LLM 中转 ILLEGAL_JSON_RES 三路径解析 + 原生 fetch credentials 绕 unwrap)、AI-native ADS 数据架构方法论(治理 vs 重搭 / 7 字段约束 / 30+30+40 预算)、餐饮连锁 BI 公式实战库(60+ SQL/复购/RFM/AC/Comp/DWD 宽表范式/39 ETL 索引)。标准查数/建卡/ETL/数据集 CRUD 一律路由给官方全家桶,本 skill 专攻业务实战与引擎级踩坑。触发:营业额/门店/会员/订单/复购率/客单价/RFM/ETL 治理/payload_json/自定义图表/HTML 看板/应用化/看板太丑/AI 味/设计底线/观远/Guandata/v7 BI/60004 草稿/Spark 中文别名/customChart/phoneLayout/SuperApp/open-apps/form 建表/ILLEGAL_JSON_RES/AI-native ADS/数据架构重搭/DWD 宽表/洞察/Dashboard Agent/guanvis live/指标树/查询加速。
-
mapleshaw Bundle Wechat Playwright ArchiveBack up a user's own WeChat Official Account published article history through a trusted Playwright MCP browser session. Use when the user asks to enumerate published/mass-sent articles, preserve full HTML with local image resources, archive by publication date, skip already successful original URLs, and maintain a CSV manifest plus execution log. Requires manual handling of login, password re-verification, QR codes, CAPTCHA, or 2FA.
-
maptiler Bundle MaptilerExpert coding skill for the full MapTiler platform — Cloud REST APIs, MapTiler SDK JS (built on MapLibre GL JS), native mobile SDKs, on-premise infrastructure, and vector tile schemas. USE WHEN the user wants to add a map to a web or mobile app, show locations or routes, display geographic data, build a store locator, create data visualizations on maps, add geocoding or address search, do reverse geocoding, look up elevation, do IP geolocation, fetch weather data, transform coordinates between CRS/EPSG, embed static map images, work with vector tilesets (Planet v4, Buildings, Contours, Outdoor, Ocean, Landcover, Cadastre), write MapLibre style expressions or data-driven styling, render 3D terrain, globe view, or 3D buildings extrusion, use satellite imagery, add markers, popups, heatmaps, or clustering, integrate maps in React, Vue, Svelte, Angular, Next.js, Leaflet, OpenLayers, Cesium, or deck.gl, build native maps on iOS (Swift), Android (Kotlin), Flutter, or React Native, self-host with MapTiler Server or
-
llm-net Skill Adb ClawYour eyes, hands, and ears on Android. See the screen (screenshot + indexed UI tree), interact (tap, swipe, scroll, type, clear-field), navigate via deep links (bypass CJK text input limits), wait for UI state changes instead of polling, monitor live UI text via accessibility framework (works during video playback), capture system audio (Android 11+, WAV stream for piping to ASR tools), manage full app lifecycle (install/uninstall/clear), control screen (on/off/unlock/rotation), run shell commands, and transfer files. Agent-optimized: structured JSON output, indexed element targeting, and App Profiles with pre-built deep links and layouts for popular apps.
-
localheroai Bundle LocalheroManages i18n translations with Localhero.ai. Use when adding or changing user-facing strings, working with translation or locale files, or when the user mentions i18n, internationalization, localization, translations, locales, glossary terms, or JSON, YAML and gettext .po catalogs in React, Vue, Next.js, Node, Rails, Django, Phoenix or Lingui projects.
-
lommaj Bundle Ubuntu Desktop ControlControl Ubuntu desktop GUI with semantic element targeting using AT-SPI accessibility tree and OCR fallback. For wallet automation, browser extensions, and GUI tasks Playwright can't reach.
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 industry-chain-chart, postpress, svg-animation-engineer. 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.