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.
-
aalzubidy Bundle Spotify To TidalMigrate all music (liked tracks, playlists, albums, artists, etc) from Spotify to Tidal. Supports independent export, import, verification, and HTML report generation phases. Use when the user says "migrate spotify to tidal", "export spotify library", "import to tidal", "verify tidal import", or "spotify to tidal report".
-
aapanel Bundle Aapanel Site DesignDesign a website's UI spec and author a complete static front-end (HTML/CSS/JS) — the model picks a style, fetches the UI spec, and writes clean static pages. The artifact is a static file set under the project dir (draft → generated). Use it to: design a website / landing page / portfolio / official site / business site / personal site / company homepage / brand site. Scope: UI design + static front-end ONLY (HTML/CSS/JS). Available in website-type sessions via the Skills tool (chat_type=website). NOT for: WordPress (use WordPress, empty/bare sites, deploying user-supplied source code, or any non-UI panel task — these are refused with a pointer to a chat session (this skill never exits the website session).
-
aboudjem Skill SniffUse when the user types /sniff, or asks to "scan this project for bugs", "find bugs in my app", "QA my site", or "walk my app and tell me what's broken". For a running web app, finds real, reproducible issues (broken pages/links, console & network errors, broken forms, empty/placeholder data, state-loss, bad loading/error states, responsive and accessibility problems), each with reproduction proof, severity, confidence, and a fix. No API key needed.
-
ai-shifu Bundle AI Shifu Learning ReportCreate a polished, printable learning report for one AI-Shifu course from live course analytics or a supplied report dataset. Use this skill whenever a teacher or teaching manager asks for an AI-Shifu learning report, course review, teaching diagnosis, lesson health analysis, learner engagement or audience insights, follow-up question themes, or a management-ready course analytics dashboard—even when they only say “复盘这门课” or “做个教学报告.” Produce privacy-safe `course-learning-report.json` and `course-learning-report.html`; do not use this skill for multi-course comparison or course-authoring changes.
-
ai4rpg Bundle Tavern UISillyTavern 前端界面开发(HTML/CSS/JS/Vue 3)。当用户需要开发酒馆消息楼层内渲染的前端 UI(状态栏、复杂交互界面、Vue 3 组件、CSS 布局与动画),或处理界面正则占位、tavern_helper_template 构建打包与 jsdelivr 部署、本地实时预览时调用。涵盖设计原则、色彩变量规范与 MVU 变量读取。
-
aiscientists-dev Bundle Asset SourcingSource image candidates for a brand-new WorldSeed scene, let an AI visually review them, and generate a local review HTML for human selection.
-
akash-network Bundle Console TestsWrite 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.
-
alekseiul Skill Markitdown Document IngestionConvert public research documents and mixed file formats into Markdown before evidence review. Use for PDF, DOCX, PPTX, XLSX, HTML, CSV/JSON/XML, EPUB, ZIP bundles, and document intake before summaries, source ledgers, or research briefs.
-
mercurjs Bundle Playwright SkillBattle-tested Playwright patterns for writing, debugging, and scaling reliable test suites. Use when you need guidance for E2E, API, component, visual, accessibility, or security testing, plus CI/CD, CLI automation, page objects, and migration from Cypress or Selenium. TypeScript and JavaScript.
-
mksglu Bundle Agents SdkBuild AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks.
-
ai-debugger-inc Bundle Adapter DevelopmentComprehensive guide for AIDB debug adapter development. Covers component-based architecture, language-specific patterns (Python/debugpy, JavaScript/vscode-js-debug, Java/java-debug), lifecycle hooks, process management, port management, launch orchestration, resource cleanup, child sessions, and common pitfalls. Essential for developing or maintaining AIDB debug adapters.
-
just-mpm Bundle Nextjs FirebaseComprehensive guide for building Next.js 15.5+ applications with Firebase, including App Router, TypeScript, MUI v7, Turbopack production builds (beta), and Firebase services. Use when configuring Next.js projects, troubleshooting errors, setting up Firebase integration, working with App Router patterns, or implementing best practices for Next.js + Firebase development.
-
pdsuwwz Bundle UI AestheticsRaise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use when generating, reviewing, or refactoring web UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated.
-
pdsuwwz Bundle Chatbot Mvp DistillationDistill the chatgpt-vue3-light-mvp project into reusable architecture for building similar ChatGPT-style web products in other repositories. Use when designing or implementing streaming chatbot UIs, SSE/fetch response pipelines, model adapter contracts, typewriter rendering, Markdown/code/KaTeX/Mermaid rendering, reasoning-block display, or migration plans inspired by this Vue 3 MVP.
-
pdsuwwz Bundle Chatbot Mvp Distillation Zh将 chatgpt-vue3-light-mvp 项目蒸馏为可迁移到其他项目的中文架构指南。适用于设计或实现类似 ChatGPT 的 Web 对话产品,包括 SSE/fetch 流式响应、模型适配器契约、打字机渲染、Markdown/代码/KaTeX/Mermaid 渲染、推理过程展示,以及从本 Vue 3 MVP 迁移到其他项目的方案规划。
-
visactor Bundle TailwindcssTailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
-
ahmadzakiy Bundle Nuxt UIBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
-
assafkip Bundle Generate FootageBuild videos from stills when there is nothing to cut — narration first (ElevenLabs v3 with audio tags), then still keyframes from ANY source (AI image tools, screenshots, photos, HyperFrames-rendered HTML), animated deterministically with the animate-stills recipe (HyperFrames camera moves + GSAP atmosphere). Use when the user wants an explainer, documentary-style video, or any video built from generated or collected visuals instead of recorded footage.
148 -
epicweb-dev Skill Epic RoutingGuide on routing with React Router and react-router-auto-routes for Epic Stack
-
panel-ui Bundle PaneluiBuild React Native and Expo UIs with PanelUI — adding components, theming, composing overlays and forms, and debugging why something is unstyled. Applies when working in an Expo or React Native project that has panelui-native installed or a panelui.json, when the user mentions PanelUI, or when they ask for a bottom sheet, dialog, chart, chat transcript, form or any other screen UI in React Native.
-
panel-ui 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.
-
jasonkneen Skill CopilotkitUse for any CopilotKit question — adding it to an app, chat UI, frontend or server tools, generative UI, shared state, human-in-the-loop, agent frameworks (LangGraph, CrewAI, Mastra, ADK, PydanticAI, and others), the runtime, Intelligence, threads, voice, or diagnosing something that is not working. Do not answer from memory: this skill exists to point you at the current documentation and source, both of which are searchable.
-
sleepyvani Bundle Qt QmlQML and Qt Quick — declarative UI language for modern Qt applications. Use when building a QML-based UI, embedding QML in a Python/C++ app, exposing Python/C++ objects to QML, creating QML components, or choosing between QML and widgets. Trigger phrases: "QML", "Qt Quick", "declarative UI", "QQmlApplicationEngine", "expose to QML", "QML component", "QML signal", "pyqtProperty", "QML vs widgets", "QtQuick.Controls", "Item", "Rectangle"
-
sleepyvani Skill Pyside6 Qml ViewsUse this skill when creating QML view files, designing QML component hierarchies, building layouts, styling QML controls, creating reusable QML components, implementing QML navigation / page switching, or working with QML resources. Covers QML file structure, component patterns, Material/Controls styling, resource management, and common QML idioms for desktop applications.
-
straydragon Bundle Lib Slint ExpertComprehensive Slint GUI development expert based on official source code. Covers Rust integration, component design, layouts, styling, animations, cross-platform deployment, and performance optimization. Use when working with Slint UI toolkit, building native GUI applications, or when mentioning Slint, GUI development, or Rust user interfaces. Built with official documentation and examples.
-
btraut Bundle Context7Fetch up-to-date library documentation via Context7 API. Use PROACTIVELY when: (1) Working with ANY external library (React, Next.js, Supabase, etc.) (2) User asks about library APIs, patterns, or best practices (3) Implementing features that rely on third-party packages (4) Debugging library-specific issues (5) Need current documentation beyond training data cutoff (6) AND MOST IMPORTANTLY, when you are installing dependencies, libraries, or frameworks you should ALWAYS check the docs to see what the latest versions are. Do not rely on outdated knowledge. Always prefer this over guessing library APIs or using outdated knowledge.
-
marekpolcar Bundle SoloUnattended run from a spec - or from instructions typed straight into the invocation, or already settled in this conversation, in which case the spec gets written for you. Plan, execute, decide, log every call for audit, and survive a session-limit hit: the run checkpoints to disk and a launchd watcher boots a fresh session from it. Closes with an HTML run report - timeline, decisions, hiccups - and optionally a delivery check and a correctness review that fix what they find. /solo <spec-path|instructions> emits a mandate to paste into a fresh session; /solo go ... runs it here, now.
-
marketplaceadpros Bundle Fba Inventory Risk DashboardRun a live FBA inventory health check for an Amazon Selling Partner account and render the results as an interactive dashboard artifact. Trigger this skill whenever the user asks about FBA inventory, days of supply, stockout risk, "what's running low", "what should I reorder", inventory dashboards, or anything related to checking how their Amazon stock is holding up — even if they don't explicitly say "dashboard". Also trigger when the user wants to refresh a previously-built inventory view, or asks Claude to "run the inventory check again". Uses the Marketplace Ad Pros MCP tools (Selling Partner integrations + ask_selling_partner_report_analyst) to query live data and produces a sortable, filterable React artifact.
-
masup9 Bundle Reviewing A11YReview accessibility of web pages, code implementations, design mockups, and specifications, then report severity-ranked issues and fixes. Use auditing-wcag instead for formal conformance decisions across all success criteria.
-
masup9 Bundle Planning Wcag AuditPlan WCAG audits for a specific site using WAIC test guidelines, including scope, page selection, environment, and execution plan. Use planning-a11y-improvement for organization-wide, long-term improvement planning.
-
mathruffian-dot Bundle Teaching Minigames教學素材小遊戲產生器。當使用者上傳教材(PDF、圖片、Word 文件等),請一定要使用此技能,自動分析每個重點並為每個重點製作一個形成性評量小遊戲,發佈為可分享的 HTML 網頁,附帶網址與 QR Code,供數位教學平台使用。觸發情境包含:「根據教材出小遊戲」、「幫我把教材做成小遊戲」、「教材轉互動測驗」、「幫我出形成性評量」、「教材有幾個重點就做幾個遊戲」、「製作可分享的測驗網頁」、「幫我做 QR Code 遊戲」等。即使使用者只說「上傳教材做遊戲」,也請使用此技能。
-
max-sixty Bundle LeafPresents designs, decisions, findings, or live work as an HTML page the user can comment on and manipulate, and processes reader input delivered from an existing Leaf page. Use for “explain this in HTML,” “write up the findings,” “show me the options,” building a playground, explorer, simulator, or interactive tool, work whose progress or review belongs in a shared page, a `leaf_delivery` tool output, or a `leaf-delivery` message.
-
mengbo Skill Docling CLIConvert documents to structured formats with OCR, table extraction, and AI-powered features. Use when working with PDF/DOCX/PPTX/images to Markdown/JSON/HTML conversion, table extraction, OCR on scanned PDFs, vision models for better extraction, or audio transcription.
-
mengbo Bundle Pandoc DOCXUniversal document conversion using Pandoc with focus on DOCX format. Use when converting documents to or from DOCX format, including Markdown, HTML, PDF, and other formats. Supports: (1) Converting other formats to DOCX (Markdown, HTML, reStructuredText, etc.), (2) Converting DOCX to other formats, (3) Custom DOCX templates and styling, (4) Batch document processing
-
mindfold-ai Skill Frontend Fullchain OptimizationFrontend full-chain performance optimization guide based on Web Vitals metrics. Provides metric thresholds, diagnostic methods, and optimization strategies for LCP, FCP, INP, CLS, TTFB, TBT. Use when optimizing frontend performance, analyzing Web Vitals, reducing page load time, fixing layout shifts, improving interaction responsiveness, or reviewing frontend code for performance issues.
-
mindovermachine-dev Skill Profile EntryUse when implementing a GitHub Profile directory issue assigned to Copilot, or when converting the profile issue form into an Astro profile content entry and pull request.
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 spotify-to-tidal, aaPanel Site Design, sniff. 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.