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.
-
equinor Bundle Fusion Developer App 4Guides feature development in Fusion Framework React apps, including app-scoped framework research needed to choose the right hooks, modules, packages, and integration patterns before implementation. USE FOR: building new features, adding components or pages, creating hooks and services, wiring up API endpoints, extending Fusion module configuration, and answering app implementation questions about which Fusion Framework surface to use. DO NOT USE FOR: issue authoring, skill authoring, CI/CD configuration, backend service changes, or general Fusion documentation that is not tied to app implementation.
-
fixmyberlin Bundle Touch Ipad Review 2Reviews React web apps for iPad and touchscreen usability with Tailwind CSS fixes. Audits touch targets, hover failures, touch-over list highlighting (Headless UI data-focus, Radix data-highlighted, inline rows), Safari/iPadOS quirks, layout fluidity, and FMC cursor conventions. Use when the user asks to review an app for touch, iPad, tablet, or touchscreen-optimized usage.
-
fixmyberlin Bundle Zustand State Management 2FMC conventions for Zustand v5 in React: file naming, custom-hook-only exports, atomic selectors, actions namespace, small focused stores. Use when adding or reviewing client global state, or debugging unnecessary re-renders and SSR/persist hydration issues. Not for server/async data (TanStack Query) or URL state (nuqs). For API details, middleware, slices, and migration, use the official llms.txt index below.
-
pm-shawn Bundle XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
mwender Bundle Elementor MCPUse this skill whenever you are working with an Elementor or Elementor Pro WordPress site via EMCP Tools (formerly "Elementor MCP") — recognizable by `mcp__*__emcp-tools-*` tools (plugin v3+) or legacy `mcp__*__elementor-mcp-*` tools (pre-3.0) being available in the session, or by the user asking to create, edit, refactor, or style a page on a WordPress site that uses Elementor (often with the Hello Elementor theme). Teaches the fluent patterns for building pages with native Elementor widgets via the catalog flow (`list-widgets` → `get-widget-schema` → `add-free-widget`) instead of falling back to HTML widgets; schema-first styling via `update-element` and `batch-update` so styling lands in Elementor's native data model and remains editable from the panel UI; the v3 disabled-by-default tool gate; the global kit / `__globals__` strategy for brand consistency; common traps like `content_width: "boxed"` collapsing flex layouts; the safe-svg upload-roles gate; and the agent-browser visual-review loop. Trigger eve
-
namankr Bundle UI Visual VerificationCapture live browser screenshots as proof-of-change for UI work, including states that are hard to reach through normal navigation (modals gated behind account limits or feature flags, rare data states, error/loading states, empty states). Works fully offline by driving the developer's own already-installed browser over the Chrome DevTools Protocol (CDP), so it works even when a sandboxed environment has no outbound internet access and cannot download Playwright's/Puppeteer's bundled browser or use a browser-automation MCP server. Use when the user asks to "take screenshots", "verify visually", "prove this works", "show me it renders correctly", or wants visual evidence for every state/variant of a component (modal, dialog, toast, banner, page).
-
omrehbein Bundle Ace EditorUse when an agent automating a web page must find, read, replace or validate text inside an Ace code editor (elements with class `ace_editor`) — code/JSON/YAML/SQL editors embedded in cloud consoles (e.g. AWS policy editors), Cloudscape/awsui, Cloud9-style IDEs, react-ace, admin panels. Also use when text typed into a web code editor comes out mangled (extra or missing quotes/brackets, doubled indentation), when only part of a document is visible in the DOM or a screenshot, or when you need the editor's syntax errors.
-
onmax Bundle Phaser Best Practices 2Builds and refactors Phaser 3 browser games, including Vue 3 and Nuxt Phaser integrations. Use for creating Phaser projects, adding scenes, simulation systems, renderer bridges, entities, physics, UI/HUD layers, tilemaps, animations, input, audio, camera, or for fixing Phaser-specific bugs and performance problems.
-
oo-simbo Bundle Build To LearnLearn by building, where learning is the goal and building is the test. Turn a product idea into scenario scripts, then capability blocks, then a ladder of stages where stage 1 is a runnable MVP and each later stage adds one block. Each stage uses a component diagram as the learning object, teaches plain-language logic first with code as footnote, favors deliberate wall-hitting experiments, and records learnings into notes plus a cross-project capability library. Built for the delegator who ships while AI writes the code. Triggers include "walk me through building X and make me actually learn it", "I want to build X but I don't know the tech", or "don't just write it for me, I want to understand it".
-
openhands Bundle Pr Design DocFor a non-trivial pull request, write a self-contained HTML design doc under the temporary `.pr/` directory and link a visibility-appropriate preview in the PR description, so maintainers grasp the proposal at a glance - code/API design, and the before/after of the change, grounded to real code. Use when opening or updating a non-trivial PR, or when the user says "add a design doc", "document this PR for reviewers", "show the before/after", "make the design reviewable", or "write the .pr/ page".
-
questdb Skill Review Pr 4Review a GitHub pull request or local Git range against kafka-questdb-connector standards
-
renanleonel Skill Renan Frontend ArchitectureRenan's React frontend architecture and stack defaults — the containers/components/domain/queries/mutations/lib/hooks structure, TanStack Query hooks over zod-parsing repositories, entities, enums, suspense with skeleton fallbacks, absolute imports, and types derived from schemas. Use when creating a feature, writing or reviewing a data-fetching hook or API call, deciding where a file goes or what to name it, picking a library, or bootstrapping a project — including bare asks like "fetch this", "add a mutation", "add a table", "add global state", "set up a new project", "add a loading state", "add filters to this list", or "why is this refetching". Also when a cast, an `any`, a relative import, or a schema shape written twice shows up. The `tanstack-query` skill has the raw API reference; this is how to structure and write the layer.
-
sangowu Bundle Job Matcher根据用户简历(CV)和求职意向,抽取CV结构化字段、实时检索匹配职位、生成可交互HTML报告。当用户提供简历文件(pdf/docx/txt/md)或粘贴简历文本,并希望找工作、匹配职位、获取职位推荐、做求职匹配时使用。
-
sgamiza Bundle Skill Visualizer分析任意Skill 文件夹,生成一份面向初学者的中文「Skill 学习导览」单页 HTML。报告帮助非工程背景的用户快速看懂:这个 Skill 是做什么的、文件夹怎么读、运行时的工作顺序,以及想学习或改造时应该先看哪里。
-
shubhaviatiningsih-byte Bundle Fortune Liuyao当用户提出六爻占卜、六爻排盘、文王纳甲、京房八宫、三枚硬币起卦、手动输入六次爻值,或询问事业、感情、财富、学业等六爻问题时使用;英文 Liuyao、Six Lines Divination、Wenwang Najia、I Ching coin casting 也应触发。完成确定性排盘、领域方法加载、当前对话中的完整综合解读、包含卦盘与解读的 HTML 完整报告、标准分享图及事实一致性检查;对高风险医疗、生死、胎儿性别、失踪定位等问题只提供现实帮助。
-
smixs Bundle Mydays SkillAudit local app-usage tracking and create a private standalone interactive HTML report from macOS or Windows foreground-time data. Use when a user asks what apps consume their day, requests a Screen Time or ActivityWatch preflight, wants app usage by month, day, and hour, or wants Computer Use to verify permissions and test the report. Do not use for website analytics, employee surveillance, mobile-only parental controls, or generic dashboard styling without local usage data.
-
songlitong521-oss Bundle Gzh Content公众号撰文排版 Skill。自动化公众号图文生产工作流,writer 依托 write_style.md 风格库按风格分类撰写文案;xiumiHelper 依 design.md 规范用 HTML + SVG 组件做秀米图文自动化排版;mpHelper 提供第二条排版路径——直接在微信公众平台(mp.weixin.qq.com)新建图文、填标题/作者/正文并保存草稿(微信会清洗 SVG 并降级 h/table/blockquote,故微信路径用 wechat 模式生成纯 CSS 卡片版进行兼容排版;个人订阅号无官方接口,均走浏览器自动化);learn 提供自学习能力——把定稿产出或主动导入的 Word/HTML/网页/Markdown 资料的文案与排版风格结构化解析后暂存,经确认并入 write_style.md/design.md 长期积累。当用户说"写公众号文章""公众号文案/推文""秀米排版""公众号图文排版""帮我排版""自动发公众号""直接在公众号后台发""微信公众平台编辑/公众号直接发""微信兼容排版""把这篇风格存下来""学习这个排版""导入文章入库"等请求时触发。只做个人创作与运营参考,不绕过平台风控、不批量营销。
-
spacezephyr Bundle Space Multi Design Ppt 2品牌设计风格驱动的幻灯片生成器。将用户内容智能匹配到 62 个顶级品牌设计系统(Apple、Notion、Claude、Stripe、Linear、Tesla 等),拉取真实品牌设计规范(DESIGN.md)后生成像素级还原品牌风格的 HTML 幻灯片,或用 python-pptx 原生构建可编辑 PPTX(制作前会询问用户要哪种输出)。用户要求"做 PPT"、"做个 slide"、"生成演示文稿"、"design slide"、"用 XX 风格做幻灯片"、"把这篇文章做成 deck"、"输出 pptx"、提到 presentation/keynote/路演/汇报材料,或发来一段内容希望变成幻灯片时,都应使用本 skill——即使用户没有提到"品牌"或"设计风格"。
-
onmax Bundle Nuxt 2Always-on Nuxt disambiguation layer for this project. Use it to choose the right Nuxt pack first, then switch to Vue or module guidance only when Nuxt no longer owns the abstraction.
-
piaoxuemoli Skill Bet Sync 2Sync betting data from agents/*/round-N/bets.md into the HTML AI_ROUNDS array. Parses each model's bets.md, extracts bet entries, and updates the HTML file.
-
piaoxuemoli Bundle Lottery Updater 2Automatically fetch China Sports Lottery (竞彩足球) odds, match results, and betting data, then update the 世界杯预测.html file. Covers odds scraping, result verification, HTML AI_ROUNDS sync, and nginx reload.
-
wso2 Skill Oxygen Component 2Generate Oxygen UI React components following best practices. Use when creating new components, data tables, cards, or UI elements with the Oxygen UI library.
-
blessonism Bundle Mineru Extract 2Use the official MinerU (mineru.net) parsing API to convert a URL (HTML pages like WeChat articles, or direct PDF/Office/image links) into clean Markdown + structured outputs. Use when web_fetch/browser can’t access or extracts messy content, and you want higher-fidelity parsing (layout/table/formula/OCR).
-
the-vibe-company Bundle Ship Pr Dev 3Ship PR: autonomous pull request readiness workflow. Use when the user asks to ship work, prepare a branch for review, create or update a PR, get changes ready to merge, clean up a branch before PR, monitor/fix CI, run final verification, or make a PR that a human can confidently merge. This skill may edit code, run tests, commit, push, create/update a PR, and iterate on failing checks, but it must use review-code-dev as the independent read-only review gate, route frontend scrutiny through review-code-dev, and never merge the PR itself.
-
recca0120 Skill Tdd 2TDD (Test-Driven Development) 最佳實踐指南,搭配 Vitest + React Testing Library。當需要撰寫測試、實踐 Red-Green-Refactor、設計測試結構時使用。應在開發新功能時主動套用。
-
xberg-io Skill Extracting Tables 5Use when extracting tabular data from HTML. Covers GFM Markdown tables, the structured tables array (grid cells plus pre-rendered markdown), and HTML line breaks in table cells.
-
xberg-io Skill Using The MCP Server 5Use when converting HTML to Markdown or extracting metadata and tables through the html-to-markdown MCP server's tools, rather than shelling out to the CLI. Covers the tool surface, the auto-installing launcher, and when MCP beats the CLI or SDK.
-
itechmeat Bundle Vite 2Vite next-gen frontend tooling: dev server, HMR, build, config, plugins, Environment API, Rolldown. Use when setting up or running a Vite project, configuring vite.config.*, authoring plugins, working with HMR or JS API, or managing environment variables and modes. Keywords: vite.config, bundler, Vite, HMR, Rolldown.
-
modu-ai Skill Moai Ref Owasp Checklist 2OWASP Top 10 security checklist, authentication patterns, input validation, and HTTP security headers reference. Agent-extending skill that amplifies backend-implementation and security-audit workflows with production-grade security patterns. NOT for: frontend UI, DevOps deployment, performance optimization, testing strategy.
-
scaccogatto Bundle VisualizeRender an Open Knowledge Format (OKF) bundle as a single self-contained, interactive HTML graph (viz.html) — concepts as nodes coloured by type and sized by body length, markdown links and bundle-internal `sources` as edges, a wiki-style detail panel with rendered markdown, v0.2 trust/lifecycle/provenance metadata, and "Links to" / "Cited by" backlinks, layout switching, per-type filter and search. Use when asked to visualize, graph, preview, or explore an OKF bundle.
-
takazudo Bundle Jlcpcb Component Finder 2Search the JLCPCB electronic components database (~7 million parts) for hardware/electronics projects. Use when the user needs to: (1) Find electronic components (resistors, capacitors, inductors, ICs, connectors, diodes, transistors, MOSFETs, op-amps, microcontrollers, sensors, LEDs, etc.), (2) Look up specific part numbers, LCSC numbers (C-prefix), or manufacturer part numbers, (3) Find alternatives or equivalents for components, (4) Check component availability and stock at JLCPCB/LCSC, (5) Get component specifications (package type, footprint, description), (6) Search for parts for PCB assembly (PCBA) projects, (7) Find SMD or through-hole components, (8) Look up voltage regulators (LDO, linear, switching), audio jacks, connectors, or any other electronic parts. Keywords: JLCPCB, LCSC, electronic components, PCB parts, SMT assembly, BOM, bill of materials, component sourcing.
-
tanis90 Skill PDF Converter 2PDF converter powered by MinerU — convert PDF to Word, Markdown, HTML, LaTeX, or plain text. Also handles image-to-text OCR, scanned document recognition, and Office formats (DOCX, PPTX, Excel). Supports 80+ languages. Use this skill when the user wants to convert, extract, read, parse, or summarize any PDF or document. Also applies when the user shares a PDF file or link and asks about its content, needs tables or formulas extracted, wants PDF OCR, or says things like 'turn this into a doc' or 'what does this paper say'.
-
taotaoboom Bundle Pdf2md Agent Skill将 PDF、DOCX、PPTX、XLSX、HTML、CSV 等文档转换为适合 LLM 处理的 Markdown。英文 PDF 使用 md_convert.py;中文论文和中文扫描 PDF 使用 md_convert_zh.py。用户要求阅读、总结、翻译、问答、引用或提取 PDF/Office 文档内容时使用;先转换,再读取生成的 Markdown。
-
tokenaissance Bundle Clean ArchitectureClean Architecture practitioner's guide. Trigger when users ask about four-layer architecture, dependency direction & inversion (DIP), an entity directly depending on external SDKs, ORM/data access layer (Repository pattern) design, microservice decomposition, technology selection, over-engineering, or architecture refactoring. Covers business logic organization in Express/Next.js/Go/Spring projects, MongoDB→PostgreSQL migrate, REST→GraphQL migrate, third-party integration (Stripe/PayPal), Redis caching, and Kafka message queue evaluation. Evaluates architecture against Robert C. Martin's Clean Architecture, SOLID principles, and the Dependency Rule; uses Musk's five-step algorithm as an anti-over-engineering gate. Do NOT trigger on: pure code quality, DDD, system design interviews, single-DTO micro-decisions, cache library selection, DI framework debugging, diagram drawing, translation, or formatting requests — answer directly without invoking this skill.
-
ucsandman Bundle Frontend Verify 2Verify frontend changes end to end after editing a web app, instead of manually clicking through pages. Use this whenever you have changed UI code and need to confirm nothing broke: "verify my frontend", "check the site after these edits", "did my UI break", "did my changes break anything", "make sure these routes still work", "smoke test the app", "check for console errors", "validate the pages I touched". Works with Next.js (app and pages router), React, Vite, and any local dev server. Built to be token cheap: it reads console errors and failed network requests first and writes full page state to disk, so it only pulls a snapshot or a screenshot into context when a route actually fails. Use it before saying a frontend change is done.
-
vercel-labs Skill Vercel React Best Practices 2React 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.
28.7k
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 fusion-developer-app, touch-ipad-review, zustand-state-management. 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.