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.
-
managedcode Bundle Playwright Visual Testing 2Add, repair, or review Playwright visual regression tests for browser-facing .NET apps, including screenshot baselines, Pixelmatch thresholds, deterministic rendering, and GitHub Actions artifacts. USE FOR: toHaveScreenshot, page.screenshot visual checks, Pixelmatch/pngjs comparison scripts, visual baseline updates, screenshot diff triage, or CI workflows for UI regression screenshots. DO NOT USE FOR: pure unit tests, accessibility audits, browser-debugging sessions, or frontend linting.
-
kyrie66nb Bundle Bug Finder 2Investigate, reproduce, and fix software bugs across frontend, backend, tests, and CI. Use when the user asks to debug errors, find root causes, triage regressions, explain failures, or verify bug fixes.
-
kyrie66nb Bundle UI Designer 2Design and implement intentional user interfaces for web and app products. Use when the user asks for UI design, UX improvements, page redesigns, visual systems, component polish, responsive layout work, or accessibility-minded frontend implementation.
-
itspecialist111 Bundle Executive Report Design SystemProduces multi-page, print-ready HTML executive reports in a fixed editorial design language that does not look machine-generated. Assembles pages from a closed catalogue of named components (hero statement, KPI row, bar list, inline SVG trend, compare strip, status grid, flow strip, numbered cards, prose, risk callout, pull quote, data table) against a frozen stylesheet and a validated JSON data document, so every report is visually identical in language whatever the subject. Output is a single self-contained file with no CDN, no server, no web fonts and no charting library, that prints to A4 landscape one sheet per page and runs from SharePoint, OneDrive or an email attachment. Figures animate up to their value on screen and snap to final on paper. Use when the user says "build an executive report", "quarterly business review", "QBR deck as a document", "board report", "exec summary", "multi-page HTML report", "printable report", "PDF-ready report", "management report", "monthly report pack", "make this loo
-
qovery Bundle Qovery DeployDeploys any application, database, Helm chart, Terraform module, or managed infrastructure Blueprint (RDS, Redis, S3, and more) to Kubernetes via Qovery. Analyzes the user's codebase, creates missing Dockerfiles, provisions databases (container, managed, or blueprint) and cloud resources, sets up environment variables, and deploys via Qovery CLI + API or Terraform provider. Supports Node.js, Python, Go, Java, Ruby, PHP, .NET, React, Vite, Next.js and more. Use when the user asks to deploy, ship, set up, or release an application on Qovery or Kubernetes via Qovery.
-
suda777 Bundle Build Template Driven HTML DemoBuild a clickable, single-file HTML Demo from a development document or a guided requirements conversation, while applying one selected packaged web template's visual and component system. Use when a non-technical user needs an interactive mock-data webpage for customer discussion. Do not use for production applications, backend integration, or generic websites whose design and implementation are already fully specified.
-
algorand-devrel Bundle Algorand FrontendBuilds Algorand dApp frontends with wallet integration and typed contract clients. Supports React, Vue, SolidJS, Svelte, and vanilla JS/TS via @txnlab/use-wallet. Covers the signer handoff pattern, wallet provider setup, network configuration, and calling contract methods from frontend code. Use when creating a dApp UI, connecting wallets, integrating typed app clients with wallet signers, or calling smart contract methods from any JavaScript or TypeScript frontend framework.
-
algorand-devrel Bundle Algorand X402 TypescriptBuilds x402 HTTP-native payment applications on Algorand using TypeScript. Covers clients (fetch, axios), servers (Express, Hono), facilitators, paywalls, Next.js integration, and the @x402/core library. Use when implementing x402 payment flows in TypeScript, creating payment-gated APIs, building x402 facilitators or paywalls, or integrating @x402/* packages.
-
aryaniyaps Bundle Lamina UXDesign understandable and accessible product interactions. Use when shaping workflows, information architecture, navigation, interface copy, forms, controls, empty states, onboarding, feedback, error recovery, progressive disclosure, discoverability, accessibility, trust, group dynamics, or interaction edge cases. Use lamina-product-behavior for authoritative state rules and lamina-evaluation to judge a built product.
-
lbql-yhl Bundle Game UI DesignDesign readable, immersive game HUDs, menus, inventories, prompts, and diegetic interfaces across screen sizes and input devices. Use for game UI architecture, readability, accessibility, and controller-friendly interaction.
-
lbql-yhl Bundle Web AccessibilityDesign, build, and review accessible web interfaces with native semantics, keyboard and focus behavior, forms and recovery, responsive input, motion, assistive-technology testing, and WCAG 2.2-informed evidence. Use for a11y, WCAG, ARIA, screen-reader, keyboard, focus, dialog, form, widget, or accessibility review work across frameworks. Do not use this skill for unrelated requests; route to the nearest named specialist.
-
roadofriot Skill UX AuditAudit user experience, interface consistency, accessibility and interaction quality.
-
huruizhi Bundle Wechat Article LayoutLocally typeset Markdown articles into WeChat Official Account compatible HTML and optional draft JSON content. Use when the user asks for 微信排版, 公众号排版, local WeChat HTML layout, article preview HTML, reusable公众号模板, or wants to avoid remote md2wechat conversion APIs while still publishing through md2wechat upload_image/create_draft.
-
logandoo Skill Vibeweaver Mini 2★ ALWAYS LOAD THIS SKILL BEFORE WRITING ANY CODE. MANDATORY for every coding task: implementing a feature, fixing a bug, writing a function, debugging, writing/running tests, building a frontend, starting a service, scaffolding a project, or modifying any codebase. If the task involves writing or changing code, load this skill FIRST and follow its workflow. Without it you will skip mandatory verification and the task is NOT complete.
-
tingdeliu Bundle Claude HTML用 Anthropic / Claude 的简约视觉风格制作 HTML —— 象牙暖底 + 陶土橙(clay
-
aaravriyer193 Skill Generating PdfsCreates PDF documents from scratch (reports, invoices, one-pagers) or from HTML content. Use whenever the deliverable needs to be a PDF, or when a polished printable document is expected instead of markdown.
-
aaravriyer193 Skill Building Web AppsScaffolds and builds a web application from scratch. Use whenever the task is "build me a site/app/dashboard" with no existing codebase to work from — decides between a real framework and plain static HTML.
-
aaravriyer193 Skill Serving Static SitesServes plain static HTML/CSS/JS files to the user when a full framework is overkill. Use for a single landing page or quick prototype — never use python -m http.server, it exposes a directory listing.
-
aaravriyer193 Skill Verifying With BrowserConfirms a built UI or web page actually works before declaring the task done. Use after building or changing any frontend, page, or app with a UI — a server starting is not proof the page renders correctly.
-
danieleteti Skill Dmvcframework UIDMVCFramework — UI layer (Bootstrap 5.3 + style.css)
-
danieleteti Skill Dmvcframework WebappUse when building a server-side web application with DelphiMVCFramework — HTML pages and HTMX fragments rendered by TemplatePro. Covers view engine setup, template inheritance and blocks, ViewData and its ownership rules, fragments, custom filters, cookie/JWT login, static files, and the HTMX request/response helpers on the Delphi side. Triggers on "TemplatePro", "RenderView", "ViewData", "baselayout", "template inheritance", "HTML fragment", "web controller", "HTMX", "hx-get", "server-side view", "web application", "cookie auth", "static files".
-
danieleteti Skill Dmvcframework SecurityUse when writing or reviewing any DelphiMVCFramework server-side code that touches untrusted input — request bodies, query strings, headers, cookies, uploads, redirects, SQL/RQL, HTML output, JWT, CORS, secrets. Covers access control, mass assignment, SQL injection, XSS in TemplatePro, CSRF, path traversal, SSRF, file uploads, security headers, JWT hardening and secret management, with the DMVCFramework API that actually implements each control. Read before shipping an endpoint that a stranger can call.
-
dengyie Bundle Awesome UI KitUse when building AI-native Web interfaces, AI chat applications, RAG search result pages, DeepSeek R1/OpenAI o1 reasoning viewers, Agent tool invocation monitors, split-pane Canvas/Artifacts, or modernizing existing pages with self-contained Web Components. Guides the agent to select and copy standard, zero-blackbox single-file components from the awesome-ui repository (React/Vue/Vanilla) instead of reinventing AI UI primitives.
-
dengyie Bundle Little Lighthouse Blog PublisherPublish, draft, update, validate, or repair Little Lighthouse blog post packages through a staged AI workflow. Use when the user wants to add a new blog post, turn notes into a post, update an existing post package, attach article assets, validate a post package, or prepare a draft without publishing. The skill manages content collection, metadata planning, asset fallback decisions, local file writing after confirmation, build verification, production review, memory updates, and atomic commits for the Little Lighthouse Next.js static blog.
-
devcsde Skill Oatda Generate Speech 2Text-to-speech (TTS) and AI voice generation through OATDA's unified audio API gateway. Triggers when the user wants to convert text to speech, synthesize voice, create narration, voiceovers, audiobooks, podcast audio, accessibility audio, or generate spoken audio from text. Supports OpenAI, xAI Grok, Google Gemini and other TTS models via a single API key.
-
kaiyihe699-max Bundle Raw Darkroom解码、分析并显影相机 RAW 文件,读取传感器与拍摄元数据,检查各通道高光裁切、曝光余量和暗部可恢复性,生成中性基准、高光保护、暗部展开、柔和底片四套候选,并输出 16-bit TIFF、JPEG、分析地图、参数 JSON、接触表和 HTML 校验报告。用于用户上传 DNG、CR2/CR3、NEF、ARW、RW2、RAF、ORF、PEF 等相机 RAW,提出 RAW 显影、曝光诊断、高光抢救、暗部恢复、数字底片、接触表或显影方案比较时;具体格式支持取决于本地 LibRaw 版本。
-
kaiyihe699-max Bundle Film Scan Lab分析、反相、修复并归档胶片扫描或相机翻拍文件,支持 C-41 彩色负片、黑白负片和 E-6 幻灯片;自动或手动测量片基,提取胶片边码并匹配片种,使用红外通道除尘,合并多次扫描 HDR,应用扫描仪/翻拍相机配置与胶片曲线,保留或重建颗粒,生成大划痕人工确认界面,并输出 16-bit TIFF、JPEG、接触表、HTML 报告及 Lightroom/Photoshop 可用的 XMP 参数。用于用户提出负片反相、胶片扫描、胶片翻拍、橙色片基校正、除尘修复、胶片 HDR、片种识别、胶片数字化或档案扫描时。
-
kaiyihe699-max Bundle Optical Polish检测并修正 UI 组件、图标、文字、按钮和边框中数值对齐但视觉不齐的问题。用于分析 PNG/JPG/WebP 截图或 SVG 素材的光学中心、可见边界、负空间、图标视觉尺寸、文字与图标组合重心、边框视觉重量,输出测量数据、偏移建议、标注图、修正预览和 HTML 报告;也用于回答光学对齐、视觉居中、按钮重心、中英混排基线和图标大小一致性问题。
-
kaiyihe699-max Bundle Simulation SandboxGenerate runnable simulation sandboxes from rule systems or simulation ideas. Use when Codex needs to turn agent-based or system-dynamics rules such as crowd evacuation, virus spread, city traffic, price competition, ecology, or other research-toy models into HTML canvas simulators, Python notebooks, CSV outputs, animations, or reproducible experiment artifacts.
-
kaiyihe699-max Bundle Synesthesia Mapper把图像确定性地映射为音乐和视觉乐谱,生成 MIDI、WAV、PNG/SVG 乐谱、映射 JSON 与同步 HTML 预览。用于用户提出图像转声音、颜色作曲、视觉音乐、共感艺术、图片生成 MIDI/WAV、动态海报前期声音草图、视觉乐谱或跨感官映射时;支持 PNG、JPG、JPEG、WebP 等常见图片。第一版聚焦图像转声音,不要声称已经支持音频转视觉。
-
andersonhjb Bundle Wechat Article PipelineCreate and publish Chinese WeChat/微信公众号 article packages. Use when asked to rewrite an article, design click-rate-oriented WeChat titles and summaries, inspect referenced images, generate new tutorial illustrations or WeChat article covers, upload article images to the AndersonHJB/PicGoImage GitHub image repository, replace Markdown image paths with GitHub raw URLs, archive the article under BornforthisData/公众号文章, or generate a copy-ready WeChat HTML layout.
-
andersonhjb Bundle Generate Personal Ip AvatarsDesign a gender-adaptive personal-IP cartoon system from one portrait for users with no art background. Provides classic, random, guaranteed light-palette, industry full-body, and official brand or university VI theme modules plus action designs, front full-body characters, eight-angle turnarounds, 24-emotion packs, collages, and an offline HTML selection gallery. When the user gives no explicit feature-control instruction, every applicable feature defaults on. Use for personal IP, professional or industry avatars, campus-color characters, character sheets, expression packs, avatar blind boxes, interactive image shortlisting, or expansion of an approved set.
-
greatmark Skill Change QuizGenerate one droppable self-contained HTML report (never a Cursor canvas) explaining a change set, ending with a quiz the user must pass before merging. Use when the user says "quiz me", "考考我", "change quiz", "变更测验", or, after a large change or session, wants to verify they truly understand it — e.g. "merge 之前考考我这轮改动", or says "review" meaning their own understanding, not bug-finding. The audience is the user themselves — selling it to reviewers is pitch-explainer; finding bugs is a code review. Not for writing tests or quizzes unrelated to a change set (general knowledge, interview prep).
-
greatmark Skill Reference HuntPort the semantics of a reference implementation by reading its actual source, not screenshots or docs. Use when the user says "reference hunt", "照着这个实现", "像这个一样", "要做成像 X 那样", "抄作业" while pointing at a concrete product, library, or code, says "find me a reference implementation" or "steal X's logic", asks "how does <product> do that? I want that here" — the question is the trigger — or struggles to articulate a behavior they can recognize. If the user has no reference — or has one but wants several divergent directions to react to — use design-directions (a reference hunt can feed it one direction's semantics). Not for finding documentation or tutorials, and not for merely matching the project's existing code style.
-
greatmark Skill Design DirectionsGenerate several deliberately divergent single-file HTML prototypes with fake data so the user can react before real implementation — iterable HTML, not one generated image or a Cursor canvas. Use when the user wants design options or a UI mockup to react to ("mock up a page"), says "design directions", "出几个设计方向", "出几版 UI", "哪种页面风格好", "我说不好想要什么样", or can only judge a design by seeing it; also consider offering directions first when the user asks to build a UI whose look was never discussed. Not for technical feasibility spikes or functional MVPs ("做个原型验证跑不跑得通"), and not for copying one concrete reference as the end state (use reference-hunt); a reference named only as inspiration stays here.
-
chthollyphile Skill Glossary Alignment 2Use when the user refers to repository-specific terms such as home view, panel, local library, Navidrome view, visualizer mode, queue, current song, search state, or other spoken component/state names and you need to map them quickly to the concrete files, hooks, stores, and code ownership in this project.
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 playwright-visual-testing, bug-finder, ui-designer. 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.