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.
-
gabrielmoreira Skill DashboardAdmin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.
17 -
gabrielmoreira Skill Docs PageA documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".
17 -
gabrielmoreira Skill Team OkrsOKR tracker page — quarter banner, three objectives with their key results as progress bars, owner avatars, status pills, and a "this quarter at a glance" sidebar. Use when the brief mentions "OKRs", "key results", "objectives", or "目标".
17 -
openclaw Skill Convex MonitorWatch for the next dev/prod error or request in a Convex app and react to it.
9.1k -
openclaw Skill Convex SuggestSuggest the matching Convex component when the user hand-rolls a pattern it already solves (crons, sharded-counter, rate-limiter, storage, search, presence, workflow, RAG, prosemirror-sync). Passive — suggest after the task, never interrupt. Never install without consent.
9.1k -
plannotator Bundle HTML DiagramDirect-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad html skill routes a diagram request here. Do not activate independently from a general request.
-
posthog Skill Posthog DesktopScopes work to the desktop app at products/desktop — a nested standalone pnpm/turbo/Biome workspace imported from the now-archived PostHog/code repo, with posthog/posthog the only source of truth for PRs, CI and publishing, and not part of the root frontend or Django build. Use when the user says /posthog-desktop, or works on the Electron desktop app, apps/code, apps/web, apps/mobile, packages/core, packages/ui, packages/workspace-server, @posthog/api-client, @posthog/agent, or the agent framework. Pins the working directory to products/desktop, swaps in that tree's toolchain and conventions in place of the monorepo's, and defines the few paths outside the tree that may be touched (Django APIs the app calls, desktop-* CI at the root).
-
robert-hoffmann Bundle Ub TSUse this skill for TypeScript typing and compiler configuration in Node, bundler, library, Vue, Nuxt, and other TypeScript projects. Apply it when the task involves tsconfig, module or moduleResolution behavior, compiler flags, emitted types, type errors, project-wide TS modernization, or boundary typing.
-
unclecheng-li Bundle Card Theater生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML 页面。支持滚动翻页、Coverflow 3D、Focus 展开等多种交互模式,内置模式切换(如传输/隧道)、荧光笔高亮、水印图标等效果。适合协议流程演示、产品特性展示、分步讲解场景。
-
varnan-tech Bundle Graphic EbookCreates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says "create an ebook", "design a lead magnet", "make a PDF guide", "build a gated content piece", "write a B2B ebook", "design a white paper", "create a nurture asset", or "make a PDF report".
-
vercel Skill Authoring SkillsHow to create and maintain agent skills in .agents/skills/. Use when creating a new SKILL.md, writing skill descriptions, choosing frontmatter fields, or deciding what content belongs in a skill vs AGENTS.md. Covers the supported spec fields, description writing, naming conventions, and the relationship between always-loaded AGENTS.md and on-demand skills.
-
vercel Bundle Pr Status TriageTriage CI failures and PR review comments using scripts/pr-status.js. Use when investigating failing CI jobs, flaky tests, or PR review feedback. Covers blocker-first prioritization (build > lint > types > tests), CI env var matching for local reproduction, and the Known Flaky Tests distinction.
-
webiny Skill Webiny SdkUsing @webiny/sdk to read and write CMS data from external applications. Use this skill when the developer is building a Next.js, Vue, Node.js, or any external app that needs to fetch or write content to Webiny, set up the SDK, use the Result pattern, list/get/create/update/publish entries, filter and sort queries, use TypeScript generics for type safety, work with the File Manager, list languages, trigger or monitor background tasks, or create API keys programmatically. Covers read vs preview mode, the `values` wrapper requirement, correct method names, and the `fields` required parameter, and background task management via `sdk.tasks`. Also covers common SDK errors and troubleshooting — especially "Content model '<modelName>' not found" (which usually means the API key lacks permission, not that the model is missing) and the Website Builder starter pitfall of reusing NEXT_PUBLIC_WEBSITE_BUILDER_API_KEY for Headless CMS reads (that key has no CMS permissions by default and needs either extension or replaceme
-
xberg-io Skill Extracting TablesUse when extracting tabular data from PDFs, spreadsheets, or images. Covers layout-aware table detection, table model selection, output formats (markdown / JSON cells), and known limits.
-
comet-ml Bundle Diagram GenerationGenerate self-contained HTML architecture diagrams. Use when creating visual diagrams for PRs, task plans, or architectural explanations.
-
gabrielmoreira Bundle Copilotkit DevelopUse when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.
17 -
gabrielmoreira Bundle Dbs Wechat HTML把 Markdown 转成可粘贴到微信公众号后台的 HTML,并提供 15 种内置风格。用户要求生成公众号 HTML、制作微信版本或排版公众号文章时使用。
17 -
duotify Bundle Felo Web FetchExtract webpage content with Felo Web Extract API. Use for turning URLs into html/markdown/text, selecting specific page areas with CSS selectors, and controlling extraction options like crawl mode, cookies, user-agent, and timeout.
-
elementalsouls Skill Hunt DomHunt client-side DOM vulnerabilities — DOM Clobbering (overwrite JS globals via HTML injection), PostMessage hijacking (missing origin check), Service Worker abuse (intercept requests from same-origin script), CSS Injection/Exfiltration (attribute selectors → token char-by-char via OOB), client-side template injection, dangerouslySetInnerHTML. Grounded in named public research: Gareth Heyes / PortSwigger DOM-clobbering + DOM-Invader, Michał Bentkowski DOMPurify clobbering bypasses, jQuery htmlPrefilter XSS (CVE-2020-11022 / CVE-2020-11023), d0nut CSS-exfil research. Use when hunting DOM-XSS, client-side auth bypass, or token exfiltration without server-side interaction.
-
elementalsouls Skill Hunt XssHunting skill for xss vulnerabilities. Built from 174 public bug bounty reports. Use when hunting xss on any target. For markup injection that reflects raw HTML but does NOT execute JavaScript (no `<script>`/event-handler execution), see hunt-html-injection — escalate here once script execution is possible.
-
first-fluke Skill Oma CoordinationGuide for coordinating PM, Frontend, Backend, Mobile, and QA agents on complex projects via CLI. Use for manual step-by-step coordination and workflow guidance.
-
forcedotcom Skill Mobile Apps CreateThe entry point for building any Salesforce native mobile app on iOS or Android. TRIGGER when the user says: "build a Salesforce iOS app", "add Salesforce login to my Android app", "set up Mobile SDK", "add MobileSync / SmartStore offline storage", "embed an Agentforce agent in my mobile app", "add Agentforce chat to iOS/Android", or otherwise asks to create, extend, or integrate a Salesforce mobile experience in Swift or Kotlin (MSDK, Agentforce SDK, or both). SKIP when the user is building a non-Salesforce mobile app, using React Native / Flutter / Ionic without Salesforce integration, asking about generic mobile UI design, or working on a Salesforce-adjacent web/desktop surface (LWC, Experience Cloud, Mobile Publisher branding-only).
-
hkuds Skill CLI Anything MacrocliUse when the agent wants to define, list, inspect, or execute GUI macros via the MacroCLI CLI. Macros are parameterized, CLI-callable workflows — the agent invokes `macro run <name>` and the system handles backend routing (plugin, file transform, accessibility, compiled GUI replay).
-
kayforkind Skill 3d Web ExperienceAssembles interactive browser 3D with Three.js, React Three Fiber, Spline, Draco GLB, and WebGL fallbacks. Use when the user wants a product configurator, 3D portfolio, or scroll-scrubbed WebGL scene. Not a native Unity/Unreal game skill and not a Blender modeling course.
-
kayforkind Skill Game Unity EngineUse when building games in Unity 6.x with C# — MonoBehaviour lifecycle and component architecture, prefabs and ScriptableObjects, the Input System, coroutines vs async/await, object pooling and GC-aware patterns, Addressables asset loading, DOTS/ECS and the Job System + Burst, and URP/HDRP render-pipeline choices. Triggers on Unity, MonoBehaviour, ScriptableObject, prefab, Addressables, Job System, Burst, ECS, DOTS, URP, HDRP, Awake, Start, Update, FixedUpdate, coroutine. Not for AI-prompt-driven Unity project scaffolding (use unity-ai-game-creator), Unreal (use game-unreal-engine), Godot (use game-godot-master), or Blender authoring (use game-blender-asset-pipeline).
-
kayforkind Bundle Godot CompositionEnforces Godot Has-A composition: selfish worker nodes, a logic-free orchestrator, signals-up/methods-down, and @export/%UniqueNames wiring. Use when the user wants to split player, NPC, or weapon systems out of a god-class inheritance chain. Trigger: Entity-Component, HealthComponent, child-node StateMachine. Not a scene-split chair (godot-scene-organization) and not the Health/Hitbox node kit (godot-component-system). Never deep-inherit features or let a component type-check its parent Player script.
-
kayforkind Skill Netlify FunctionsWrites Netlify serverless functions with the default-export plus Config pattern (Web Request/Response): API paths, background (15 min), scheduled, and streaming handlers. Use when adding server-side logic beside a Netlify site without a framework adapter. Not for Astro/Next/Nuxt/SvelteKit/TanStack Start adapters that emit their own functions; never use the legacy exports.handler signature.
-
kayforkind Bundle Review AnimationsReviews animation and motion diffs against a craft bar: justified motion, origin-aware scale, GPU-only transform/opacity, interruptible springs, sub-300ms UI, and prefers-reduced-motion. Use when reviewing CSS transitions, keyframes, Framer Motion, WAAPI, or hover/gesture motion. Not for implementing the motion (emil-design-eng), Remotion frames, or general non-motion code review.
-
kayforkind Skill Vercel DeploymentOperates a linked Next.js app on Vercel: CLI link, per-environment secrets, Edge versus Node runtimes, vercel --prod, custom domains, ISR/revalidate, function timeouts, and CORS. Trigger on Vercel env vars, edge functions, preview versus production, NEXT_PUBLIC_ leaks, or custom domains. Not a generic preview-link deploy of any framework (deploy-to-vercel).
-
kayforkind Skill Vibe Code CleanupHardens vibe-coded Next.js/React/Node apps by removing proven-dead imports, unused files, and broken refs without rewriting working routes. Use when a rapidly built app works but is messy before launch. Not for greenfield features, broad architecture rewrites, or deleting files still referenced by routes or APIs.
-
kunagent Skill ComponentCreate and publish one focused interactive UI component or choose a governed Kun visualization.
-
langgenius Skill Frontend TestingUse when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test strategy, including evaluation of an existing strategy. Do not use for frontend code-review-only requests, general testability discussion, Python tests, or Cucumber/Playwright E2E.
-
lobehub Bundle Design PrototypeUse for interactive HTML prototypes (交互原型) with the real LobeHub UI stack. Excludes production UI implementation.
-
gabrielmoreira Skill Dating WebA consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.
17 -
gabrielmoreira Skill Mobile AppA mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page. Built by copying the seed `assets/template.html` and pasting one screen archetype from `references/layouts.md`. Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".
17 -
openakita Bundle Browser ClickClick page elements by CSS selector or text content. When you need to click buttons, links, or select options. PREREQUISITE - must use browser_navigate to open target page first.
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 cli-anything-macrocli, dashboard, docs-page. 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.