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.
-
credittone Skill Hooker UI AutomationUse when operating Android apps through Hooker UI MCP or the /hooker/ui and /hooker/mediaprojection endpoints. Covers stable UI automation strategy, element selection, screenshot/inspect alignment, WebView and React Native handling, validation after actions, and recovery from common failures such as stale hooker_id, inspect null states, and unexpected page jumps.
-
cristoslc Bundle Media SummaryDownloads and summarizes audio/video media, X/Twitter threads, and web articles — podcasts, YouTube videos, Instagram reels, recipe videos, talks, interviews, lectures, conference presentations, multi-post X threads, LinkedIn posts, Medium articles, and any web page. Handles speech-based transcripts, post captions, on-screen text overlays (via vision OCR), X thread unrolling via the fxtwitter API, and generic HTML ingestion via readability/Puppeteer. Saves a structured markdown summary locally, publishes it as a public GitHub Gist, and opens it in the system default application. Use when the user provides a URL to any media content, X/Twitter status, or web article.
-
crossoverjie Bundle Gzh Design微信公众号文章排版引擎,将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取,自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / PDF / 纯文本输入(非 Markdown 先自动归一化),也支持"一键自动排版"(自动推断结构+选主题),还支持根据用户描述/参考图生成自定义主题组件库并保存本地复用。触发场景:(1) 用户提到"公众号排版""公众号文章""微信排版""gzh",(2) 用户想把文章(md/docx/pdf/纯文本)转成公众号 HTML,(3) 用户说"自动排版""一键排版"公众号内容,(4) 用户想为公众号排版"生成新主题/自定义风格/按这张图做一套组件库"。不用于生成普通网页/落地页/PPT(用前端或 PPT 类 skill)。
-
cskwork Bundle Grill With Docs HTMLGrilling session that walks the design decision tree Socratically and exports it as a self-contained interactive HTML decision form. Use when the user wants a design interview or existing decisions exported as a reviewable HTML decision form; ordinary plan discussion does not require this export workflow.
-
cslawyer1985 Bundle HTML To PDF将 HTML 网页/演示文稿转换为高质量 PDF。优先按用户目标选择策略: - 浏览器原样/高度还原/截图级保真 -> CDP 屏幕截图 PDF - 需要文字可复制且尽量接近屏幕 -> CDP screen-media 向量 PDF - 需要正式文档、文本层、较小体积、连续长页 -> Chrome print 向量长页 PDF 适用场景:用户说"导出PDF""打印成PDF""HTML转PDF""生成PDF版" "把这个PPT转成PDF""导出为PDF分享""打印网页""不分页PDF""网页转PDF" "转成PDF文件""生成长图PDF""多页PDF""单页PDF""高度还原浏览器效果"。 触发词:导出PDF、转PDF、HTML转PDF、打印成PDF、生成PDF、网页转PDF、 长图PDF、不分页PDF、多页PDF、浏览器原样、高度还原。
-
cslawyer1985 Bundle Wechat Article Exporter微信公众号文章批量导出工具 - 支持Docker本地部署,实现三大场景的自动化工作流:法律研究和知识管理(每周批量下载法律公众号文章,导出Markdown到Obsidian)、竞品分析(下载竞品律所全部历史文章,导出Excel分析内容策略)、AI训练数据准备(批量下载特定领域文章,导出JSON用于模型微调)。支持Markdown、HTML、Excel、JSON四种格式导出
-
csthink Bundle DashmotionCreate dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention "animated", "flowing", "dynamic", "alive", "GIF-like", or want a diagram for a landing page, README, docs, or product demo. Also use it to convert Mermaid source (a mermaid code block or .mmd file) into an animated diagram — "animate this mermaid", "make this flowchart move". Prefer this over static diagram output whenever the diagram represents anything that moves: requests, events, data, jobs, messages, or control flow.
-
cucuwang Bundle Visual FixLocate and repair a specific frontend UI defect from a screenshot, pointed region, visible text, route, selector, or plain-language symptom. Use for targeted visual fixes in an existing codebase that require source localization, an explicit change plan, approval before edits, and honest visual or static verification. Do not use for broad redesigns, new feature development, or bitmap editing.
-
aston1690 Bundle Vercel React Best PracticesReact 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.
-
asymmetric-al Bundle React EmailUse only when maintaining retained upstream React Email compatibility packages or investigating inherited React Email behavior. Do not use as primary guidance for Asym PDF Document Builder product work; read AGENTS.md and the build-pdf-document-builder OpenSpec first.
-
asyncapi Skill Migrate ComponentPromote a duplicated React/JSX template-local component into the shared @asyncapi/generator-components package. Use this skill whenever the user asks to "migrate", "move", "promote", "extract", "share", or "consolidate" a component into generator-components (or shared components / the components package). Also trigger for phrases like "it's used in multiple templates now, let's share it" or "avoid duplication across clients". Do not fire for unrelated React refactors or for moving code between apps/.
-
aurorascharff Bundle Nextjs App ArchitectureBuild or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or enabling Cache Components. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use cache'`, `cacheTag`, `updateTag`, static-shell prerendering, or making an app easier for AI agents to modify.
-
ausboss Bundle Bluebubbles RelayRead, search, send, react to, and attach images/stickers in iMessage via the BlueBubbles REST API. Trigger on: "check my texts", "any new texts", "what did [name] say", "text [name]", "send a text", "draft a text", "search my texts", "find that text about [X]", "who is [name]", "react to that", "tapback", "send a sticker", "send a photo / image", "save that attachment", iMessage, BlueBubbles.
-
automateandtweak Bundle WcagAudit a page for WCAG 2.1 AA accessibility issues. Traces the render chain, checks structural/semantic HTML, contrast indicators, ARIA, and outputs a prioritized report.
-
automazeio Bundle ProofCapture test runs as shareable, replayable evidence artifacts — not just running tests, but documenting and sharing that they passed. Works from any language: standalone binary, TypeScript, Python, or Go SDKs. Use cases: attach replayable terminal output to a PR instead of a screenshot; generate a markdown proof report for PR descriptions or tickets; record a browser test as a self-contained HTML video; record an iOS Simulator or Android emulator screen during XCUITest or Espresso runs, with automatic tap indicator overlays; export terminal recordings as MP4 for inline embedding in Linear or Jira; or tie passing tests to a git commit as an audit trail. Trigger on phrases like "attach evidence to PR", "save test output as artifact", "replayable test recording", "proof report", "record my test run", "record iOS simulator", "record Android emulator", "capture mobile tests", "export as video", "embed in Linear", "embed in Jira", or when the user mentions proof, @automaze/proof, or automaze-proof directly.
-
avdlee Bundle Diagnostics Report Analyzer SkillAnalyze AvdLee Diagnostics HTML reports for customer support and debugging. Use this skill whenever the user asks to inspect, summarize, triage, debug, or explain a Diagnostics-Report.html attachment, Diagnostics session logs, embedded diagnostics JSON, legacy HTML-only reports, MetricKit crash diagnostics, app/system metadata, or support reports generated by the Diagnostics framework.
-
avilaok8647 Bundle AI Friendly Web DesignGuidelines for building AI-accessible web interfaces that work well with AI agents, automation tools, and screen readers. Use this skill whenever the user is building or reviewing a webpage, UI component, form, or frontend feature and any of these apply: they mention AI agents, automation, Playwright, web scraping, accessibility, a11y, aria, semantic HTML, or ask how to make their UI "agent-friendly", "AI-friendly", or "machine-readable". Also trigger when reviewing existing frontend code for accessibility or automation compatibility issues, even if the user doesn't explicitly mention AI.
-
avivsinai Bundle Finding UnknownsGuide the user through a quadrant walk that maps the unknowns of a task — open by listing the known knowns, then work through known unknowns, unknown knowns, and unknown unknowns one stage at a time, ending with a complete four-quadrant map in the user's hands. Use when the user explicitly asks for a blindspot pass, unknown unknowns, "what am I missing / what should I be asking", a one-question-at-a-time interview, or several directions to react to; when ambiguity or unfamiliarity is high enough that building now would likely cause rework; when a reference implementation must be understood before porting; or for a named after-walk slice — implementation notes / deviations log, a buy-in doc, a quiz gate before merge, or a session handoff (run only that slice). Do not invoke for ordinary implementation of a sufficiently specified task.
-
awesome-skills Bundle CanvasA Cursor Canvas is a live React app that the user can open beside the chat. You MUST use a canvas when the agent produces a standalone analytical artifact — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Especially prefer a canvas when presenting results from MCP tools (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the deliverable — render it in a rich canvas rather than dumping it into a markdown table or code block. If you catch yourself about to write a markdown table, stop and use a canvas instead. You MUST also read this skill whenever you create, edit, or debug any .canvas.tsx file.
-
awesome-skills Bundle Create HTML DeckCreate, edit, and verify polished browser-native HTML slide decks. Use when the user asks for an HTML presentation, browser-based PPT, weekly-share deck, technical talk, or a slide deck that must display safely on laptops and 16:9 projectors.
-
awesome-skills Bundle Design ArtifactDesign, build, and verify distinctive one-off visual artifacts such as landing pages, interactive prototypes, component explorations, product mockups, dashboards, onboarding flows, and motion studies. Use for high-fidelity HTML design work or design-led implementation; use create-html-deck instead when the primary deliverable is a slide presentation.
-
awesome-skills Bundle Insights分析当前 agent(Claude Code / Codex / Gemini CLI / OpenCode)的本地会话记录,生成一份 HTML 使用洞察报告,包含项目领域、互动风格、亮点、摩擦点、改进建议、机会展望。当用户说 "看下我最近用 agent 的情况"、"生成 insights"、"分析我的会话历史"、"我的使用模式"、"agent usage report"、"/insights"、"analyze my sessions"、"使用洞察"、"复盘最近用 AI 的情况" 时使用本 skill。即使用户没明说 "insights" 也要触发:只要请求涉及总结/复盘/分析本机 agent 历史、对话记录、commit 模式、工具使用频率,就用这个。
-
b-on-g Bundle MolBuild or modify apps with $mol/MAM and related stack. Use when the user asks how to do something in $mol (view.tree, view.ts, css.ts), how to structure a MAM module, how to connect Giper Baza, how to build/admin apps on Giper Baza, or how to package/run with Tauri. Triggers include queries like "как на моле сделать …", "$mol view.tree", "MAM структура", "Giper Baza CRUD/roles/auth", "админка на Giper Baza", or "Tauri + $mol".
-
b1rdmania Bundle Animation DesignSearch LottieFiles and Rive Marketplace for brand-coherent animations and embed them into web projects. Use when the user asks to add animations, find Lotties, embed Rive components, search for motion assets, pull in an animation series, or add loading/success/error/interactive animations. Detects brand context from DESIGN.md, CSS variables, or Tailwind config. Routes to Lottie (decorative motion) or Rive (interactive components) based on use case.
-
b1rdmania Bundle Design Review GateScored 0–100 design review gate for UI/frontend code — tells you exactly why it "looks AI-generated" and how to fix it, ordered by score gain. Use when a React/Tailwind/HTML interface looks off, generic, or unfinished; when the user asks for a "design score", "design gate", "does this look AI-generated", or to make UI look "designed, not generated"; and as a self-gate right after generating any UI, before showing the user. Self-contained; cherry-picked from the open-source StyleSeed design engine (MIT), with Andy's house rules layered on top.
-
baekchangjoon Bundle Hotspot AnalysisUse to produce a deterministic, reproducible, ranked prioritization of a Java codebase's REST API endpoints (and methods) for test generation — especially as the input that decides which RestAssured API tests to write first. Drives this repo's Java CLI over a local git working tree, combining recency-weighted git churn, SonarQube-style cognitive complexity, and JaCoCo coverage gap into a Composite Hotspot Score, and emits a machine-readable ranking (CSV/YAML/Markdown/HTML) plus a CI gating exit code. Method-level Java, hunk-accurate, no LLM guesswork. Based on Adam Tornhill's "Your Code as a Crime Scene".
-
baidu-maps Skill Bmap CLI百度地图开放平台 CLI。凡涉及百度地图开发、HTML/demo、WebAPI/BMapGL、AK/个性化地图样式/配额等,须先触发本 skill 并完成环境与 AK 流程,再查文档或写代码。涵盖:CLI 安装、Skills/MCP 配置、账户与 AK、个性化地图样式、地点/路线/地址解析等;同时支持百度地图 Agent Plan(无需开发者账户,提供大模型友好调用的地图工具,支持语义化 AI 搜索、语义化 AI 路线规划、地理编码与逆地理编码、天气查询)。
-
baixianger Bundle HTML DeliverableProduce a single self-contained .html file (instead of a wall of markdown) when delivering substantive work meant for a human to read — plans, code-review writeups, design explorations, reports, prototypes, comparisons, research summaries, slide decks, diagrams, or interactive editors. Trigger when the result has multiple sections, options to compare side-by-side, visual/spatial structure, interactivity, or a TL;DR-then-drill-down shape — anything a reader would skim and jump around in rather than read top-to-bottom. Use on phrases like "write up the plan", "summarize the review", "compare these options", "give me a report", "make slides/a deck", "design exploration", "draw the architecture", or whenever you're handing off a meaningful artifact at the end of real work. Stay in markdown for short answers, single linear explanations, mid-conversation replies, or code-only output.
-
balabalabalading Bundle Ardot HTML Prototype Converter将 Axure 或 HTML 原型导出物转换为可编辑的 Ardot 原型文件,并审查或修复已有 Ardot 页面。适用于 PC 与移动端 HTML/Axure 转 Ardot、弹窗与多状态取证、长页重建、本地组件复用、manifest 交接及结构/语义/视觉验证。
-
lxgic-studios Bundle Storybook GenGenerate Storybook stories from React components. Use when documenting components.
-
lxgic-studios Bundle Tailwind Config GenGenerate tailwind.config.js from brand colors. Use when setting up Tailwind.
-
leostehlik Bundle No Slop UIBuild or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.
-
leostehlik Bundle Visual ArchitectureCreate deterministic, local-first architecture artifacts from typed JSON or TypeScript-aware repo extraction: validate specs, render SVG/HTML diagrams, and emit source-backed receipts agents can cite.
-
linklyai Bundle Linkly AISearch, browse, read, and take notes across the user's documents indexed by Linkly AI — local files and linked cloud libraries. Use when the user asks to 'search my documents', 'find files about a topic', 'read a local document', 'what's in this folder', 'list the files in that library', 'browse document outlines', 'list knowledge libraries', 'save this as a note', 'list my notes', or any task involving searching, listing, reading, or noting stored content (PDF, Markdown, Excel, CSV, DOCX, TXT, PPTX, DOC, RTF, EPUB, HTML, images, audio, video). Also triggered by: 'linkly not working', 'cloud library', '搜索我的文档', '查找文件', '这个文件夹里有什么', '列出文件', '知识库搜索', '云端知识库', '记笔记', '我的笔记', '连接不上', '故障排查'. Provides full-text search, container enumeration, structural outlines, paginated reading, and local note capture via CLI or MCP tools.
-
loserlab Bundle DevourerComponent Theme Generator that transforms color palettes into production-ready UI components. Use when the user requests themed components (buttons, cards, inputs, forms, etc.) based on a color system or palette, especially when consuming output from Hexed or other color generation tools. Generates complete component code in React, Vue, or HTML+CSS with proper theming, variants, states, and accessibility considerations.
-
loserlab Bundle Eyes PeeledEYES PEELED - Contrast & Accessibility Validator
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 hooker-ui-automation, media-summary, gzh-design. 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.