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.
-
gfazioli Skill Mantine React Component DevDevelopment guidelines and patterns for building React component libraries with Mantine UI, TypeScript, and modern tooling. Use this skill when creating, editing, or maintaining Mantine-based React components, implementing Styles API patterns, managing component composition, or working with TypeScript-safe component factories.
-
hainrixz Bundle Investment AnalysisMulti-agent investment research and analysis system by Tododeia. Use when the user wants market analysis, investment research, or a summary of current opportunities across crypto, stocks, forex, and commodities. Spawns 5 specialized research agents (4 sector + 1 strategy), adapts to user risk profile, tracks historical accuracy, and generates a branded interactive HTML report served locally. Educational analysis only — not financial advice. Trigger phrases: "investment analysis", "market research", "analyze markets", "investment opportunities", "what should I invest in", "market report", "tododeia", "investment advice", "portfolio recommendations", "run tododeia", "daily market analysis", "weekly report", "análisis de inversión", "analizar mercados", "reporte de mercado", "oportunidades de inversión".
-
huang1125677925 Skill Mobile Optimization本项目(Vue 3 + Element Plus + ECharts 股票分析前端)的移动端适配规范与改造流程。当需要优化任意页面/组件在手机(≤768px)上的展示、处理图表标签重叠、表格溢出、筛选器/弹窗布局,或新增页面要保证移动端可用时使用。
-
imbad0202 Bundle Tw Gov Overseas Trip Kit台灣公務機關出國報告文件產生工具。對齊行政院出國報告綜合處理要點附件一/二格式, 援引國外出差旅費報支要點(114.05.13)計算日支費。從一份 trip.json 產出五種輸出: 出國報告書 docx(附件一)、審核表 docx(附件二)、經費規劃表 xlsx、行前手冊 html (可選,逐日議程/住宿/緊急聯絡/注意事項,可印 PDF)、航班查價對照表 html (可選,行前查價底稿、相對排序、非訂票工具)。使用者帶入自己機關的資料, 日支數額表由使用者填當年度官方版本(不內建)。觸發:產出國報告、出國報告書、審核表、 經費規劃表、行前手冊、日支費計算、國外出差旅費、出差核銷文件、航班查價、航班比價、班機比較。
36.4k -
indrajeetpatil Skill Frontend Pr ScreenshotCapture a screenshot of the frontend app and post it to the current GitHub pull request. Use when a user asks to post a PR screenshot, show the UI in a PR comment, verify visual changes in a PR, or include visual evidence after UI work.
-
jimmc414 Skill IOS Simulator Skill22 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output.
-
joeseesun Bundle Qiaomu Bento PptUse the standalone qiaomu-bento-ppt skill to create or edit qiaomu-style bento presentations as self-contained .bento.html files from briefs, notes, reports, URLs, data, or existing bento decks. Use this skill when the user explicitly asks for bento/slides, a .bento.html deck, an offline-editable single-file HTML presentation, or invokes qiaomu-bento-ppt. It applies a proposal-first presentation workflow, ships a pinned official bento shell and authoring references inside the skill, builds through the plaintext #bento-doc contract without requiring the original bento repository, and validates structure, identity, shell integrity, visual heuristics, and rollback boundaries. Do not use for conventional .pptx delivery, generic bento source development, or bento/spaces and bento/dash work.
37 -
jojoprison Bundle Shirman DigestСобирает дайджест AI & Tech трендов за день с shir-man.com и генерирует красивый HTML-отчёт с вкладками. Используй когда пользователь просит: дайджест, тренды, новости AI, что нового в tech, shirman, shir-man, ежедневный обзор технологий, tech digest, trend report — даже если не упоминает shir-man напрямую.
-
kaerez Bundle Puml PlantumlFull-stack PlantUML expert: create PUML from descriptions, convert images to PUML (vision reverse engineering), render locally (PNG/SVG/PDF) with no internet. macOS/Windows/Linux; auto-installs PlantUML+Java+Python. Covers all 27 chapters of the PlantUML Language Reference Guide v1.2025.0 (607 pages): Sequence, Use Case, Class, Object, Activity (legacy+new), Component, Deployment, State, Timing, JSON, YAML, nwdiag, Salt/Wireframe, Archimate, Gantt, MindMap, WBS, Maths, ER, Common Commands, Creole, Sprites, Skinparam, Preprocessing, Unicode, StdLib (C4/AWS/Azure/K8s/ArchiMate). Use for: draw a diagram, create PUML, convert image to PUML, render .puml, debug PUML, explain PlantUML syntax, any UML task.
-
keejkrej Bundle CossHelps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
-
leeguooooo Bundle Codex API ImagegenGenerate raster images (PNG/JPEG/WebP) via the local codex-api gateway, powered by the user's ChatGPT subscription — no OPENAI_API_KEY needed. Use when an agent needs to create a brand-new bitmap asset for the current project (photos, illustrations, icons, hero banners, mockups, sprites, concept art) and the output should be a bitmap file saved into the workspace. Do not use when the task is better solved by editing existing SVG/vector assets, writing code-native graphics (HTML/CSS/canvas), or extending an established repo icon system.
-
lexmount Bundle Browser CLIOperate Lexmount remote browsers with browser-cli. Use when a coding agent needs to create, list, inspect, keep alive, or close browser sessions; manage persistent contexts, pick reusable contexts, or detect locked contexts; guide authentication with auth status/scopes/token-info/refresh/logout/clear-credentials/connect-requirements/export-env/login; verify installation, environment, and API connectivity with doctor; discover installed commands/workflows; read packaged references with reference list/get; inspect packaged playbooks and case examples with example list/get; validate/run JSON/YAML browser case files; open pages, read page info, wait for selectors/states/roles/URLs/load/network/text/forms/dialogs/frames/console/fetch-XHR, act/click/type/fill/select/check/hover/press/scroll, inspect interactive/accessibility/page diagnostics, manage storage/cookies, navigate, screenshot, eval, snapshot, or verify credentials without custom Playwright.
-
llmquant Bundle Quantmind DevContributor workflow for the QuantMind codebase. Covers contributor setup (environment + hooks), filing issues, commit format, pull request format, and component development across quantmind/ modules (etl, knowledge, configs, preprocess, rag, flows, mind, utils) with tests, examples, and verification. Use when setting up as a contributor, filing an issue, committing, opening a PR, or implementing/refactoring QuantMind code.
-
loro-dev Bundle LoroPractical guide for helping app developers evaluate, adopt, and use Loro for local-first collaboration. Use when Codex needs to answer questions or write examples for `loro-crdt`, `loro`, `loro-prosemirror`, `loro-codemirror`, `loro-mirror`, language bindings such as Swift/Python/C#/Go/React Native, or Loro-powered apps about: (1) Deciding whether Loro fits a product, (2) Getting started in JavaScript/TypeScript, Rust, or another supported binding, (3) Choosing CRDT containers and document structure, (4) Designing sync, persistence, snapshots, versioning, undo, presence, or time travel, (5) Integrating rich-text editors and stable selections, (6) Mirroring app state with React, or (7) Understanding performance and tradeoffs.
-
magebyte-zero Bundle Frontend SlidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
-
marvkr Bundle Better DesignBuild, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.
-
medorion Bundle Frontend Dev GuidelinesFrontend development guidelines for Angular 19/TypeScript applications. Covers NG-ZORRO components, RxJS state management, auto-generated API clients, LESS styling with themes, feature-based organization, decorators, and performance optimization. Use when creating components, services, features, styling, routing, or working with frontend code.
-
miantiao-me Skill Bm Md使用 bm.md 服务进行 Markdown 排版、渲染和格式转换,支持微信公众号与通用 HTML 输出
-
winstontang86 Bundle Qiq Tech Paper Trans英文技术论文翻译为中文(信达雅学术风格)。支持本地 PDF 文件与 URL 输入(arXiv 链接优先抓取 HTML 版本)。针对 AI/ML 论文深度优化,兼容通用技术论文。采用滑动 窗口翻译单元机制保证上下文连贯、术语一致;支持逐段、逐章节和 hybrid 章节翻译; 阻断级质检确保正文段落、图片、表格、公式、代码、引用均完整保留。默认从 References / Bibliography 开始截断,参考文献及其后内容(如 Appendix)不进入最终译文。 表格默认采用“截图入文”策略(pdfplumber + pymupdf),避免复杂表格被 Marker 抓成乱码、 并保证导出的 Markdown / Word 中表格清晰完整。PDF 预处理采用小文件整篇 Marker 超时回退、 大文件分块 Marker 单块回退的组合策略,支持分块并行 + status.json 断点修复;翻译调度输出 waves.json,同 wave 内单元可并发调用 LLM。finalize 阶段保留 `assets/` 作为最终 Markdown 的主图片路径,并镜像出 <stem>.assets/ 作为便携副本,同时生成图片链接校验报告。 整体流程采用平台中立的文件协议,可在 WorkBuddy、OpenClaw 或其他可读写文件并调用 LLM 的平台运行。 触发词:翻译论文、翻译技术论文、翻译学术论文、翻译 arxiv、arxiv 翻译、论文汉化、 paper translation、translate paper、英译中论文、paper to Chinese、学术翻译。
-
withastro Skill Astro ReviewReview pull requests for correctness and regressions.
-
withqwerty Skill SharpenThis skill should be used when the user asks to "sharpen", "sharpen this tweet", "sharpen my post", "review my tweet", "pressure test this", "simulate reactions", "how will people react to this", "make this tweet better", "improve this post", "tighten this up", or pastes a draft tweet, thread, or social post for feedback. Simulates realistic Twitter, Hacker News, and Reddit reactions, synthesises the feedback into pointed questions, refines the draft, and copies the final version to the clipboard.
-
wix Skill Add TemplateTurn a Wix headless CLI site into an official Astro template — release it, mint a Wix site template from it, restructure the code to the repo layout, and open a PR to headless-templates. For Wix employees.
-
wjgoarxiv Bundle Publisher DOCX SkillConverts bidirectionally between DOCX/PDF and Markdown, edits existing DOCX files programmatically, or prepares a journal-ready manuscript. TRIGGER when: user needs DOCX↔Markdown conversion, wants to create a styled Word document from Markdown, needs to batch-edit/modify an existing DOCX file, or wants to produce a publisher-styled manuscript (e.g. Elsevier, ACS, IEEE, Nature, or a Korean generic profile). DO NOT TRIGGER when: user only needs to convert non-DOCX formats (images, HTML, etc.) to Markdown — use markitdown instead.
-
wp-a Bundle Nature ReaderBuild full-paper Chinese-English side-by-side, figure/table-aware, source-grounded Markdown readers for journal or conference papers from PDF, DOI, arXiv, publisher HTML, or pasted text. Use whenever the user asks to translate or read a paper, make 中英文对照/原文对照/全文翻译解读, extract figures or tables into the right positions, preserve figure/table placement near relevant prose, or keep exact source anchors for every block. This skill must not degrade into a summary-only output unless the user explicitly asks for a summary.
-
wps-smartdocs Bundle Wps AirpageUse for any operation on a WPS 365 / AirPage / 智能文档 / kdocs online document: creating new documents, reading or searching block structure, inserting or editing paragraphs and headings, operating tables (merge cells, insert rows), uploading images into a doc, adding or querying comments, or converting Markdown/HTML into blocks. Triggers on natural Chinese requests mentioning kdocs, AirPage, 智能文档, or 365.kdocs.cn — e.g. "帮我在那个 kdocs 文档里加一段", "查一下文档的块结构", "创建一个新的 AirPage 文档", "把这段 markdown 插进去", "合并表格单元格", "往文档里加评论". Do NOT use for local .docx/.xlsx files, WPS desktop app issues, Notion, Google Docs, or generic browser/script automation.
-
wquguru Bundle Harness Book Best PracticeBest practices for working on the Harness books repo. Use this skill when editing, restructuring, building, or exporting the books under `book1-claude-code/` and `book2-comparing/`, especially for Honkit, print HTML, Pandoc/XeLaTeX PDF export, build cleanup, TOC issues, naming conventions, and keeping source assets separate from generated outputs.
-
wujie-micro Bundle Wujie无界(wujie)微前端框架接入指南。涵盖主/子应用集成、Vue2/Vue3/React 组件封装、 startApp/setupApp/preloadApp API、路由同步与跳转、保活预加载、bus 通信、插件与生命周期、 子应用改造、部署排障与常见问题。当用户提到 wujie、无界、微前端、子应用接入、 主应用加载子应用时使用。
-
wukongnotnull Bundle Wk Frontend Design打造具有高设计质量的独特生产级前端界面。当用户要求构建网页组件、页面、工件、海报或应用程序时(例如网站、着陆页、仪表盘、React 组件、HTML/CSS 布局,或在设计/美化任何网页 UI 时),请使用此技能。生成富有创意、精致的代码和界面设计,避免了千篇一律的 AI 美学。
-
wukongnotnull Bundle Wukong Resume悟空非空也的个人简历构建 skill。当用户需要制作简历、生成简历、写简历、更新简历、做一份 PDF/Word 简历、把简历导出成 docx、ATS 友好简历时使用。触发词包括但不限于:做简历、简历、生成简历、写简历、更新简历、简历模板、HTML 简历、PDF 简历、docx 简历、投简历、找工作、换工作。即使用户只说「帮我搞份简历」或「我要换工作了想整理下简历」,只要上下文涉及简历制作,都应触发。 也适用于:用户拿到一份招聘 JD 想针对性调整简历、想从零搭一份简历、想把现有简历内容重新整理成结构化格式的场景。 **不适合的场景**:领英 profile 优化、个人作品集网站、求职信/cover letter、简历内容润色改写(这些是不同的输出物,本 skill 只管结构化呈现)。
-
wulenon Bundle Chatgpt Ppt Maker将资料、旧PPT或参考HTML整理为完整汇报,先生成逐页GPT视觉稿,再按视觉稿重建可编辑Reveal.js HTML,并完成截图质检、动画编排、离线单文件打包;同时保留图片型PPTX输出。Use when 用户要求“用GPT图片做PPT”“按图片风格转HTML”“做网页PPT/HTML汇报”“打包成别人双击可打开的单文件”,或需要从原始资料完成大纲、视觉稿、HTML和交付的端到端流程。
-
wuwuzhazha Skill Sch2dslParse Altium Designer .SchDoc files into verified SCH-DSL and use the generated schematic document to answer component, pin, net, power, CAN, signal-path, and topology questions. Use whenever a user provides an Altium schematic, asks for netlist extraction, pin connectivity, circuit-topology interpretation, or wants an LLM-readable schematic representation.
-
wyattowalsh Bundle Iina Plugin DevBuild IINA media player plugins using the React/TypeScript starter kit. Use when the user wants to create, modify, or extend an IINA plugin — including scaffolding new plugins, adding overlay/sidebar/standalone UIs, implementing IINA API features (playback control, subtitles, playlists, menus, file access, HTTP requests), or configuring plugin preferences. Triggers on: "iina plugin", "iina-plugin", "create a plugin for IINA", "media player plugin", or similar requests about IINA plugin development.
-
xability Bundle MaidrMake every chart or data visualization accessible to blind and low-vision readers with MAIDR (Multimodal Access and Interactive Data Representation): the visual stays as designed and gains keyboard navigation, screen-reader text, sonification, and braille. Use this skill for ANY request that ends in a chart, in any language, before writing the first line of plotting code: bar, line, scatter, histogram, pie, heatmap, box, violin, candlestick, OHLC, and stock charts, in matplotlib, seaborn, plotly, altair, ggplot2, base R, D3, Chart.js, Highcharts, or hand-written SVG. Use it even when the user never says "maidr" or "accessibility", even for a throwaway chart, and even when the product offers its own chart or visualization tool; route that tool's output through this skill. Also use it when a user mentions accessibility, screen readers, WCAG, blind or low-vision readers, sonification, or braille with a chart. It picks py-maidr, the maidr R package, or maidr.js for the environment.
-
xbuilderlab Bundle Cheat On Audience把短视频评论区变成可交互的知识图谱,并发布成人和 agent 都能读的形态。当用户说「分析我的评论区」「评论区图谱」「大家在关心什么」「评论区都在聊什么」「comment atlas」「把评论做成图谱」「把图谱发出去」,或者手上有一批评论数据想看出结构时使用。产出零依赖单文件 HTML(悬浮速览、点击看评论原文证据)、GitHub 首页可直接渲染的 mermaid 图、以及 agent 可 fetch 的 graph.json 和 digest.md。
-
xdannyrobertsx Bundle React Haiku SkillsHaiku is a simple & lightweight React library with the goal of saving you time by offering a large collection of hooks & utilities that will help you get the job done faster & more efficiently! Use this skill when optimizing Repetitive React code or when reaching for a common utility or hook!
-
xedyx123 Bundle LumeBuild award-winning frontend interfaces. Use for landing pages, portfolios, hero sections, or any UI needing premium animations, scroll storytelling, and Awwwards-level visual craft.
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 mantine-react-component-dev, investment-analysis, mobile-optimization. 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.