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.
-
zaxbyhub Skill Read DocumentRead and extract text from document files (.docx, .pdf, .xlsx, .pptx, .csv, .rtf, .odt, .epub, .html) into plain text or markdown for editing
-
zeke Bundle Faster Chrome Devtools SkillInspect, debug, and automate Chrome directly through the Chrome DevTools Protocol (CDP). Use this skill whenever a task needs a real web browser: open a URL, navigate pages, take a screenshot of a web page, read the DOM or accessibility tree, click buttons, fill and submit forms, type text, wait for elements, scrape page content, evaluate JavaScript on a page, or check console errors and failed network requests. Works against the user's local Chrome or a remote Cloudflare Browser Rendering endpoint over WebSocket. Relevant to browser automation, web scraping, page screenshots, end-to-end UI checks, DevTools inspection, and handing cloud browser control to a human for login, MFA, CAPTCHA, sensitive input, or approval. No Chrome DevTools MCP, Puppeteer, or Playwright required.
-
zencoderai Bundle Engineering ManagerEngineering Manager skill for Engineering Managers. Use this skill when the user says: 'engineering dashboard', 'engineering leaders', 'show me the dashboard', 'DORA metrics', 'PR health', 'sprint pulse', 'deployment frequency', 'lead time', 'change failure rate', 'MTTR', 'sprint velocity', 'investment allocation', 'engineering report', 'engineering manager report', or 'daily engineering brief'. Gathers real data from GitHub (via gh CLI), Linear (via zen-linear skill), Jira (via zen-jira skill), and Sentry (via zen-sentry skill). Renders a live HTML dashboard in Zenflow's built-in browser. Also runs automated actions: multi-model PR review, dependency audits, and bug triage.
-
zentryhq Bundle ZframesBuild, update, serve, or fork the user's personal zframes market dashboard. Use when the user says "/zframes", "build me a dashboard", "set up my terminal", "make me a market terminal", "add X to my dashboard", "start/open/serve my dashboard", "fork this dashboard <url>", "run this shared zframes link", or wants a personalized live market dashboard (crypto + stocks). If they give a zframes explorer link (a .../dashboard/<id> URL), fork it onto their machine. If a dashboard already exists and the user just wants to start it, serve it — don't rebuild from scratch. Writes a validated dashboard.json and serves it live with the CLI — the agent never writes React.
-
zexuanw958-svg Bundle Travel Plan Viz把旅行行程做成美观、离线可读、手机优先的单文件 HTML(交互地图+每日时间轴+出发前订票提醒)。两种用法——只给目的地和天数让它帮你规划,或丢一份现成计划让它直接出页面。触发:旅行计划可视化、做旅行攻略网页、行程 HTML、travel plan visualization。
-
zhaoolee Bundle Banana Studio GenerateUse when generating images through the Banana Studio backend with pw authentication. Supports prompt-only usage, storyboard file workflows with tool-rendered captions, and frontend-compatible modelId, imageOptions, layoutGuideImage, and referenceImages.
-
zhimaai Bundle Web2skillConvert one public website URL or an explicit batch of public URLs into a reusable skill zip backed by rendered HTML snapshots and a bounded JSONL retrieval index. Use to discover a documentation directory from one URL, crawl a supplied URL set sequentially, generate a source profile, or package indexed web content as a specialized skill.
-
zhiyi-r Bundle Moonbridge Webui DesignMoon Bridge webui design and component rules. Use whenever changing files under webui/src that affect UI structure, controls, styling, theme tokens, layouts, or interaction behavior.
-
zhouwei713 Bundle Article Visual DirectorPlan and produce article covers, inline illustrations, concept posters, and visual packages for WeChat, X, and Xiaohongshu. Use for 公众号封面、小红书封面、多页图文、教程混合图文、文章配图、社交传播图、reference-matched covers, and prompt-led revisions. Prefer AI image generation for article covers when no special rendering requirement is given. Use HTML or React for exact long copy, dense data, strict screenshot fidelity, or precise user-requested layouts. Keep Xiaohongshu tutorial inner pages deterministic. Preserve aspect ratio, text visibility, title hierarchy, style, prohibitions, and article-specific inputs, actions, outputs, use cases, and risks. Save prompts or page sources, validate contracts, render raster images, and inspect outputs. Supports cover-only, prompt-led-cover, reference-led-cover, illustrations-only, full-package, xiaohongshu-cover, xiaohongshu-carousel, xiaohongshu-tutorial, xiaohongshu-package, prompt-only, and revision workflows.
-
zhu-guli326 Bundle Image To UI SkillUse when the user asks to recreate a UI from a screenshot or design reference, redesign a UI from a visual reference, or create a new clickable UI from a description. Use real code for interface chrome and project-designated image2 for complex bitmap assets. Do not use for standalone image generation, design critique only, or ordinary frontend work with no UI-design intent.
-
zhulielie Bundle Gudao Submit做网页游戏或网页小工具并发布到鼓捣星球(gudao.games);也用于**把你的发现、意见、看法汇报给这个站**。当用户说「做个能发到鼓捣星球的游戏」「投稿到 gudao」「把这个作品传上去」「发布到鼓捣星球」,或者说「把你的发现汇报给鼓捣星球」「给鼓捣星球提个意见」「跟他们站说一声」「查一下鼓捣星球这个 skill」时使用。也用于投稿前自检:作品会不会因为连外网、缺 index.html、收集真实身份而被退回。Build and publish a browser game or web tool to Gudao Planet (gudao.games), a Chinese platform for creators publishing AI-made web works — and to send findings, bug reports or opinions back to the site. Use when the user wants to make something publishable there, to pre-flight check and submit an existing folder, or to report something to the site.
-
zhutao100 Bundle Swift Gui Verifiable LoopCreate and run a deterministic, agent-friendly closed loop for SwiftUI GUI changes on macOS (AppKit) and iOS (UIKit) using xcodebuild + .xcresult evidence + xcresulttool extraction, plus snapshot testing, accessibility audits, and small XCUITest smoke flows.
-
zhuyansen Bundle AgentskillshubUse when the user wants to find, evaluate, audit, or install an open-source AI agent skill or MCP server — e.g. "find an MCP server for Postgres", "is this skill safe to install", "what should I use to scrape a website". Searches a quality-scored, security-graded catalog of ~20K skills locally (cached index, zero backend load) and returns each result's security grade, quality score, and install commands so you can check trust BEFORE installing.
-
zhuyansen Bundle Wx Favorites Report微信收藏可视化:从加密的微信本地数据库端到端解密、解析,生成交互式 HTML 可视化报告。 触发词:/wx-favorites-report、微信收藏可视化、收藏报告、收藏分析 支持输入:加密/解密后的 Favorite.db(SQLite)或 CSV/JSON 导出文件
-
ziguishian Bundle Better Ppt HTML DeckCreate better-looking, professional, editable HTML/CSS/JS slide decks. Use when the user asks to make a better-looking PPT, presentation, deck, slide deck, PowerPoint-style HTML deck, visually polished report, course deck, pitch deck, social carousel, or when they provide a topic/material/reference images and want Codex to plan content, choose a visual direction, generate a mandatory style preview for approval, then build an editable HTML deck with preview, present, PDF/PNG/image-PPTX export.
-
markus-smile Bundle IOS App Agentic EngineeringEnd-to-end agentic engineering for iPhone apps, from idea to a secure App Store release through 8 gated phases. Use when someone wants to build, plan, or ship an iPhone/iOS app — especially a non-programmer ("vibe coder") asking to create an app, pick a tech stack (SwiftUI, React Native, Flutter), choose a backend (CloudKit, Supabase, Firebase), publish to the App Store, or make their app secure. Also use when an iOS project shows symptoms of skipped planning - hardcoded API keys, no threat model, Firebase test mode, missing privacy manifest, or App Store rejection.
-
martian-engineering Bundle PagedropCreate shareable HTML pages for instant mobile preview and visual collaboration. Use when building documents, visualizations, or anything that needs structure — view it in a browser from any device, then iterate with Google Docs-style annotations.
-
masamasa59 Skill NewsletterWrite a monthly trend newsletter for this ai-agent-papers repo. Use when asked to create/update a monthly trend report, summarize a category's recent papers, or "make a newsletter". Encodes the house procedure: cover every coherent category with enough papers that month (no fixed number of issues; overlap between issues is fine when the angle differs), read each paper's arXiv HTML in full (background + discussion, not just method/numbers), embed real figures, and write a Japanese summary built on facts corroborated across multiple papers with numbers made legible to a first-time reader.
-
mason0510 Bundle Codex Design SkillUse when the user asks for high-fidelity HTML design deliverables, tweakable prototypes, slide decks, animated demos, design-system-aligned UI exploration, or wants Codex to work like a design delivery partner instead of a generic page coder.
-
mathiaschu Bundle Ecommerce BiGenera informes de Business Intelligence para eCommerce a partir de un CSV de ventas. Auto-detecta plataforma (Tiendanube, Shopify, WooCommerce) y produce 21 (Lite), 39 (Full) o análisis individuales: Market Basket, RFM, cohortes, CLV, cross-sell, churn, producto gateway de retención, estacionalidad, forecast y más. Output: JSON estructurado + informe HTML branded. Usar cuando el usuario mencione 'business intelligence', 'BI', 'análisis de ventas', 'market basket', 'RFM', 'cohortes', 'CLV', 'lifetime value', 'cross-sell', 'basket analysis', 'afinidad de productos', 'análisis ecommerce', 'informe de ventas', 'análisis de clientes', 'qué producto retiene mejor'.
-
mathruffian-dot Bundle HTML Slide Builder給定任何教材(文字、課程大綱、PDF、講義、口述主題),自動生成完整的 Reveal.js HTML 互動簡報並部署至 GitHub Pages。 自動處理四大視覺/互動強化: 1. AI 生成背景底圖(draw 技能,data-background-image) 2. 扁平化圖標(draw 技能 + PIL 裁切去背,取代 emoji) 3. Firebase 即時互動元件(文字雲、單選投票,Firestore 串接) 4. 滑桿視覺化演示(clip-path 揭露,適合前後對比內容) 當使用者說「幫我做 HTML 簡報」「把這份教材轉成互動簡報」「做 Reveal.js 簡報」「做成投影片」「做一份課程簡報」,或提供教材並要求轉成簡報格式時,務必使用此 Skill。即使使用者未明確說「互動」或「HTML」,只要目的是從教材產出可展示的簡報,也應觸發此 Skill。
-
matrixy Bundle GlimmerUse for glass UI, transparent UI, HUD/AR interfaces, holographic dashboards, or futuristic sci-fi UI. Trigger for glassmorphism, frosted glass, translucent UI, .ultraThinMaterial, Material3 transparent, or interfaces inspired by Apple Vision Pro, Google Glass, or Meta glasses. Also trigger for make it futuristic or floating UI. Builds glassmorphic, AR-inspired UIs across HTML/CSS/React, SwiftUI, Jetpack Compose, and React Native.
-
matsonj Bundle MvizA chart & report builder for AI. Use when the user asks to show, display, render, or visualize data as a chart (bar, line, pie, scatter, area, bubble, histogram, etc.), a table, KPI, big number, dashboard, report, sparkline, heatmap, sankey, funnel, calendar, waterfall, or any composed data visualization. Generates compact markdown specs that render either inline (via visualize:show_widget) or as standalone HTML files (via the mviz CLI).
-
anistark Bundle Imax ViewThe house visual system for anything with a rendered appearance: artifacts, HTML pages, React components, SVG, slides, dashboards, landing pages, diagrams. Sets the frame aspect ratio, monospace type stack, type scale, spacing, palette, and the copy rules (no em dashes, no semicolons). Apply this whenever producing visual output, even when the request says nothing about styling, design, fonts, or layout, and even for quick throwaway mockups. If the output will be looked at rather than read as plain text, this skill applies.
-
antstanley Bundle Shadcn SvelteExpert guidance for shadcn-svelte, a Svelte 5 port of shadcn/ui. Use this skill when working with shadcn-svelte components, installing UI components via CLI, implementing forms with Superforms/Formsnap, adding dark mode with mode-watcher, creating data tables with TanStack Table, theming with Tailwind CSS v4 and OKLCH colors, or building custom component registries. Triggers on mentions of shadcn-svelte, Bits UI components, or SvelteKit UI component libraries.
-
aprilnea Bundle Gpui Componentgpui-component library patterns for building reusable UI components. Use when creating buttons, inputs, dialogs, forms, or following Longbridge component library conventions in GPUI applications.
-
arcblock Bundle Myvibe PublishPublish static HTML, ZIP archive, or directory to MyVibe. Use this skill when user wants to publish web content to MyVibe.
-
better-i18n Bundle Better I18NGuides all better-i18n integration decisions — SDK selection (Next.js, React, Expo, Swift, Flutter, Remix), CDN vs GitHub workflow, AI-powered translation management via MCP tools, CLI health checks (scan, doctor, sync), Content CMS (localized models, entries, custom fields), file format conventions (flat / nested / namespaced), key naming, publish flows, and quality analytics. Use whenever building, modifying, or reviewing any localization feature — including i18n setup, adding languages, managing translation keys, publishing, or integrating AI workflows.
-
bluedusk Bundle HTML SlidesGenerate polished single-file HTML slide presentations with interactive components (flip cards, charts, tables, code blocks, architecture flows, stats, timelines, and more) or creative visual themes. Use this skill whenever the user wants to create slides, presentations, decks, or any visual slide-based content as HTML. Also trigger when the user invokes /html-slides or mentions creating an HTML presentation, pitch deck, or slide deck.
-
buildatscale-tv Bundle Nano Banana ProNano Banana Pro (nano-banana-pro) image generation skill. Use this skill when the user asks to "generate an image", "generate images", "create an image", "make an image", uses "nano banana", or requests multiple images like "generate 5 images". Generates images using Google's Gemini 2.5 Flash for any purpose - frontend designs, web projects, illustrations, graphics, hero images, icons, backgrounds, or standalone artwork. Invoke this skill for ANY image generation request.
-
codesyntax Bundle Plone Expert DeveloperExpert Plone 6 and Volto development guidance. Covers backend (Python, Dexterity, plone.restapi) and frontend (TypeScript, Volto, Classic UI).
-
contentstack Bundle Contentstack Vibe DocsComprehensive Contentstack CMS documentation for building web applications. Covers REST API, GraphQL API, Content Management API, Image Delivery API, TypeScript SDKs, Live Preview, Visual Builder, OAuth authentication, data modeling, webhooks, releases, workflows, branches, roles, localization, variants/personalization, Launch deployments, and framework patterns for Next.js, Nuxt, and Gatsby. Use when implementing any Contentstack feature.
-
coreyrab Skill PubPublish content from the current conversation to pubthis.co and get a temporary shareable URL. Use when the user asks to share, publish, expose, preview, or create a link to any content — reports, chats, markdown, HTML, prototypes, documents, or images.
-
dabit3 Skill Testing Vending MachineRun and test the Vending Machine app locally (Next.js + Convex + Clerk). Use when verifying admin flows like creating/deleting events, or setting up an authenticated admin session for testing.
-
darrenbounds Bundle Extract Page CopyUse when evaluating, reviewing, or critiquing copy or messaging on an HTML file or URL. Also use when the user wants to read, assess, or discuss the text on a page without wading through markup.
-
wsimmonds Skill Nextjs Anti PatternsNext.js Anti-Patterns
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 read-document, faster-chrome-devtools-skill, engineering-manager. 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.