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.
-
ansible Bundle Td Supply Chain AuditPerform a supply chain vulnerability analysis across ADT ecosystem repos. Verifies commit signing, PR traceability, CI integrity, and dependency provenance within a time frame. Generates a standalone HTML dashboard report and PDF.
-
anthropics Skill Commerce UI ToolsThe reference presentation-tool contract, covering server-side enrichment, suggestion chips, the event stream, progressive rendering, both roles' built-in components, and adding a vertical component. Load when building or reviewing how a commerce agent's output reaches a frontend.
Audited -
antjanus Bundle Screenshot LocalUse this skill to screenshot a local dev server or HTML file with shot-scraper whenever the user wants to "screenshot my app", "take a screenshot of localhost", "generate screenshots for the README", "batch screenshot my pages", or "set up shot-scraper" — even if they never name shot-scraper and just ask for an image of a page, an OG image, or pictures for the docs. Do NOT use this skill for terminal or CLI recordings (see record-tui), for starting or debugging the app itself (see the project's run skill), or for editing an image that already exists.
-
antjanus Bundle Ideal React ComponentReact component structure and hooks antipatterns — a seven-section file layout, logic ordering, and the useEffect/useState failure modes behind infinite loops and stale state. Use this skill whenever the user wants to "create a React component", "structure this component", "refactor this component", "extract a custom hook", "fix an infinite render loop", or "my useEffect isn't working" — even if they don't mention React by name, when the file is .tsx/.jsx or the code calls hooks. Do NOT use this skill for general code review of non-React code (see code-review), visual or layout design (see frontend-design), or plain JavaScript with no components or hooks.
-
anyulled Skill Component Extraction And Tactical Forking AnalyzerAnalyze monolithic codebases to identify extraction candidates, shared-kernel entanglement, and tactical forking effort. Use when planning modernization or breaking a monolith into independently deployable domains.
Audited -
ballisarium Bundle Aiogram FormattingUse when formatting aiogram 3 messages with entities or HTML, UTF-16 offsets, and escaping.
-
banuba Bundle Far GeneralBanuba Face AR SDK skill for three use cases: sales, developer documentation, and integration workflows. Use when working on anything Face AR: capability and compliance questions (sales), documentation lookup, CV concepts, and troubleshooting (dev), and building Web integrations such as AR masks, face filters, beautification, virtual background, and AR Cloud (integration). Trigger with "Face AR", "AR mask", "face filter", "virtual background", "AR makeup", "beautification", "face landmarks", "AR Cloud", "can the SDK", "how does", "explain", "add", "set up", "integrate", "build". Web, Android, iOS, Desktop (C++), Flutter and React Native have full code generation support. macOS gets the GitHub sample + code assistance. Unity gets the sample link only. For Video/Photo Editor SDK use build-video-editor, build-photo-editor, or explain-video-editor-photo-editor-docs.
-
tuannv14 Skill MaestroUse when running mobile E2E on React Native / iOS / Android, recording user flows, inspecting view hierarchy, or hunting flaky UI tests with Maestro. Multi-environment via MAESTRO_PROFILE.
-
tuannv14 Skill React NativeUse when troubleshooting React Native local dev — stale Metro/Watchman caches, pod install issues, bundle size analysis, device logs, version bumps, icon/splash regen, or patch-package.
Audited -
ai-riksarkivet Bundle Ra MCP AppsMCP Apps guide: FastMCP 3.4+ server, Svelte 5 view, tool visibility, polling, sizing, fullscreen, view persistence. Use for any MCP App/UI work.
-
chattocorp Skill Svelte DocsLook up official Svelte, SvelteKit, and Svelte CLI documentation.
-
chattocorp Skill Svelte Code WriterUse the Svelte CLI to check any Svelte component or module that you create, edit, or analyze.
-
chattocorp Skill Update Project DependenciesUpdate Chatto Go and frontend dependencies within their compatible version ranges, then run tests.
-
login-tb Bundle ZustellbarkeitE-Mail-Entwürfe auf die Merkmale prüfen, mit denen Spamfilter Werbepost erkennen, und empfangene Nachrichten auswerten, die im Junk gelandet sind. Nutze diesen Skill, wenn eine Mail vor dem Versand geprüft werden soll, wenn jemand wissen will, warum eine Nachricht im Spam- oder Junk-Ordner gelandet ist, oder wenn Betreff, Text, HTML und Kopfzeilen einer Mail auf Aufbau- und Inhaltsfehler durchgesehen werden. Prüft unter anderem Linktext gegen Linkziel, defekte Abmeldewege nach RFC 8058, erfundene Thread-Bezüge, sichtbare Seriendruckreste, versteckte Zählpixel, Domainstreuung sowie unbelegte Zahlen und Superlative. Sagt keine Zustellung voraus und ist kein Werkzeug, um Filter zu umgehen. Für die Frage, ob eine Kaltakquise-Mail überhaupt versendet werden darf, ist cold-email zuständig.
-
maciejzet Bundle Web App AuditorEvidence-driven QA and product audit for websites and web applications. Use when asked to audit, review, inspect, QA, verify, click through, test, or "roast" a user-facing site/app/page/dashboard/checkout/form, including Polish requests such as audyt, przeklikaj, sprawdz dane, zgodnosc liczb, poprawność, UI/UX, dostepnosc, regresja. Verifies interactions, data integrity, totals, counts, prices, dates, labels, cross-screen consistency, forms, states, accessibility, responsiveness, and critical flows. Supports browser, browser+source, screenshot-only, source-only, and fetch-only environments. Do not use for backend-only review, greenfield implementation, or penetration testing/exploitation with no product-audit goal.
-
perdolique Bundle Vue ComponentsVue 3 + TypeScript component conventions for `.vue` SFC work. Use for Vue UI tasks that change component APIs/templates/styling/accessibility/composables/template refs/v-model or related component behavior. For Nuxt/Pinia/routing/E2E/Vitest tasks apply only to component-layer code and combine with the more specific local skill.
-
perdolique Skill CSS ConventionsCSS conventions for authoring and reviewing CSS, SCSS, CSS Modules, design tokens, and responsive layouts. Use whenever a task changes or reviews styling, regardless of framework.
Audited -
perdolique Skill Typescript ConventionsTypeScript coding conventions for writing, reviewing, and refactoring typed code. Use when working on `.ts`, `.tsx`, or files that embed TypeScript such as Vue, Astro, or Svelte components. Also use for TypeScript snippets, typed refactors, and review comments about code organization or function structure.
Audited -
wix Bundle Wix CLI Site WidgetUse when building interactive widgets, custom data displays, or configurable site components with settings panels. Triggers include widget, custom element, interactive component, editor component, configurable widget, web component.
-
wix Bundle Wix CLI OrchestratorBLOCKING REQUIREMENT - When user requests to add/build/create/implement ANY feature or component for a Wix CLI app, you MUST invoke this skill IMMEDIATELY as your absolute FIRST action - when exploring, reading files, BEFORE launching any agents - make sure this skill is loaded. Trigger on add, build, create, I want, implement, help me where X is any feature/component. Non-negotiable - invoke immediately upon recognizing a Wix feature build request.
-
wix Bundle Wix CLI Site ComponentUse when building React site components with editor manifests for Wix CLI applications. Triggers include site component, editor manifest, custom component, visual customization, editor element, CSS properties, data API, site builder component, Wix Editor component. Use this skill whenever the user wants to create a component that site owners can customize through the Wix Editor's visual interface.
-
whisper-money Skill Wayfinder DevelopmentUse this skill for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes. ALWAYS use this skill when frontend code needs to call backend routes or controller actions. Trigger when: connecting any React/Vue/Svelte/Inertia frontend to Laravel controllers, routes, building end-to-end features with both frontend and backend, wiring up forms or links to backend endpoints, fixing route-related TypeScript errors, importing from @/actions or @/routes, or running wayfinder:generate. Use Wayfinder route functions instead of hardcoded URLs. Covers: wayfinder() vite plugin, .url()/.get()/.post()/.form(), query params, route model binding, tree-shaking. Do not use for backend-only task
Audited -
whisper-money Skill Inertia React DevelopmentDevelops Inertia.js v3 React client-side applications. Activates when creating React pages, forms, or navigation; using <Link>, <Form>, useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions React with Inertia, React pages, React forms, or React navigation.
Audited -
kreuzberg-dev Skill Crate StructureMap of the html-to-markdown workspace — the seven `crates/` (core, cli, ffi, py, node, php, wasm) with the unsafe_code forbid/override rule, the out-of-workspace language packages under `packages/`, and the primary `convert()` API with its ConversionResult shape, feature flags, and dual parser. Load when navigating crates/packages, deciding where code belongs, or working with the core conversion API.
-
klebersoncollab Bundle Flutter FvmSkill for professional Flutter development with FVM. Includes Dart 3+ patterns, optimized performance, mandatory accessibility, OWASP security, and resilience management (Error Handling).
-
neuralblitz Skill AI Voice CloningAI voice generation, text-to-speech, and voice synthesis via inference.sh CLI. Models: ElevenLabs (22+ premium voices, 32 languages), Kokoro TTS, DIA, Chatterbox, Higgs, VibeVoice for natural speech. Capabilities: multiple voices, emotions, accents, long-form narration, conversation, voice transformation. Use for: voiceovers, audiobooks, podcasts, video narration, accessibility. Triggers: voice cloning, tts, text to speech, ai voice, voice generation, voice synthesis, voice over, narration, speech synthesis, ai narrator, elevenlabs, eleven labs, natural voice, realistic speech, voice ai, voice changer
1 -
neuralblitz Bundle Baoyu Post To WechatPosts content to WeChat Official Account (微信公众号) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text posting (贴图, formerly 图文) with multiple images. Markdown article workflows default to converting ordinary external links into bottom citations for WeChat-friendly output. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "贴图/图文/文章".
1 -
89jobrien Skill AgentsAgentExecutor, ChatAgent (ReAct), OpenAIToolsAgent, and the Agent trait.
Audited -
ivanestar Bundle Framework Quality AuditOn-demand, unbiased multi-angle quality audit of an EITR-generated test framework for any language + automation-tool combination (e.g. TypeScript+Playwright, Python+pytest, Java+Selenium, C#+Playwright). Scores a fixed set of 19 categories on a 1-10 scale with objective file-referenced evidence, lists ALL found gaps (not just top picks) and concrete killer-feature ideas, and publishes a deterministically-structured HTML Artifact report so every audit looks and reads the same regardless of stack or date. Trigger on requests like "аудит фреймворка", "оцени генерацию", "quality audit for <language>+<tool>", "проведи ревью качества".
-
keep-starknet-strange Bundle Cairo Contract AuthoringCairo smart-contract authoring on Starknet. Trigger on "write a contract", "create a contract", "implement this in Cairo", "add storage/events/interface", "compose components". Guides structure, security patterns, and component wiring.
-
alexxiang2008 Bundle Video Local Analyze本地视频爆款拆解与优化专家。仅支持本地视频文件输入,通过豆包大模型原生视频理解,输出完整的爆款模板拆解报告和可执行的优化建议。 触发场景: - 用户说"分析本地视频"、"拆解本地视频"、"本地视频优化" - 用户说"分析这个视频文件"、"拆解视频文件" - 用户说"视频模板提取"、"视频对标分析"(并提供本地文件路径) - 用户使用 /video-local 命令 功能:本地视频 → 压缩(ffmpeg) → 豆包API原生视频理解 → 8维度爆款拆解 + 5大进阶模块 → 可复制模板输出 → HTML可视化报告
-
alexxiang2008 Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
-
alexxiang2008 Bundle App ReviewApp Store 评价分析器 - 输入应用 ID,自动抓取最多 500 条用户评论,进行情感分析,生成简洁风格 HTML 报告并导出 CSV。支持 /app-review 或 /评价分析 命令启动。
-
alexxiang2008 Bundle Xiaohongshu Images将文章转换为小红书图文 - 支持 Markdown/HTML/文本,自动生成 3:4 比例精美图片
-
szoloth Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
szoloth Bundle Visual ExplainerGenerate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
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 ai-voice-cloning, screenshot-local, baoyu-post-to-wechat. 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.