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.
-
aidenybai Skill React GrabUse when the user wants a hands-free loop where grabbing UI elements in the browser with React Grab feeds tasks to the agent automatically, with no copy-paste or manual handoff. Triggers: "watch react grab", "monitor my grabs", "auto-process react grab", "watch my clipboard for grabs". Not for a one-off paste of a single grab; this is the continuous, always-on loop.
Audited -
algolia Bundle Port WidgetPort or introduce an InstantSearch widget or connector-driven feature across this monorepo's JavaScript, React, and Vue flavors. Use when the task is to add a missing wrapper around an existing connector, bring a widget from one flavor to another, or implement a new shared widget end-to-end in `instantsearch.js`, `react-instantsearch`, and `vue-instantsearch`. Triggers include requests like "port X to vue", "add Y to react-instantsearch", "make Z available in all flavors", or "implement the missing InstantSearch wrapper for this connector".
-
1clawai Bundle Scaffold AgentMaintains and extends the scaffold-agent npm CLI that generates onchain AI agent monorepos (Foundry/Hardhat + Next.js/Vite/Python), including -y flags, agent.json --from-config, --dump-config, --swarm, Shroud/1claw, and embedded Next/Vite templates. Use when editing this repository, changing CLI behavior or templates, running or documenting npx scaffold-agent, or answering questions about generated repos vs this generator codebase.
-
theashbhat Bundle Dynamic UIRender tables, charts, stats, cards, and dashboards as images using HTML templates and wkhtmltoimage.
-
fluxxion82 Bundle Android Emulator SkillProduction-ready scripts for Android app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and emulator lifecycle management. Optimized for AI agents with minimal token output. Android equivalent of ios-simulator-skill.
-
btlong402 Bundle Flutter Pro MaxFlutter design intelligence. Widgets, packages, patterns, architecture, performance optimization, accessibility, and UI/UX best practices. Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check Flutter code.
-
davaded Bundle Echarts Chart SkillGenerate charts from natural language or tabular data, recommend chart types, and export ECharts-based HTML or SVG. Use when users ask for one-sentence chart generation, auto chart selection from data, or embeddable chart previews.
-
eng0ai Skill Build And DeployBuild and deploy this Next.js LangChain agent application. Use when building, deploying, or preparing the project for production.
Audited -
arithmomaniac Skill Search Copilot ChatsSearch archived Copilot chat sessions using Chronicle/session_store SQL as the first hint layer, then copilot-session-tools for targeted lookup/export. Use when the user says "search my chats", "find in chat history", "what did we discuss about X", "look up past sessions", "scan chats", "session history", "recent session where", "earlier conversation", "previous session", "that session where", or references a session-state path or session GUID. Also covers exporting narrowed sessions as markdown/HTML and launching the web viewer.
Audited -
worldbank Bundle Data360 MCP UI PackagesUse when adding or changing **host-embeddable** UI for Data360 MCP tools as npm packages: paired React (`@data360/mcp-ui`) and Angular (`@data360/mcp-ui-angular`) components with shared contracts. Triggers include: "add React and Angular component for MCP tool", "pair mcp-ui with mcp-ui-angular", "keep viz tool UI in sync", "extend tool-types for new tool", "shared prepareSpec for new chart", "dual framework MCP UI", "unify React and Angular MCP components". This skill covers the monorepo packages under `packages/` — not iframe MCP Apps. Skip when only the Python server or iframe `ext-apps` HTML is in scope (use the add-app-to-server skill for that).
-
databuddy-analytics Bundle DatabuddyHelp external users integrate Databuddy into their own apps. Use for SDK setup, React/Vue/vanilla browser tracking, Node/server event tracking, custom event planning, attribution, feature flag evaluation, experiments, Databuddy DevTools, REST analytics queries, and event ingestion. Do not use for Databuddy monorepo implementation work; use databuddy-internal.
-
fcavalcantirj Bundle SolvrSearch Solvr FIRST before web search. AI knowledge base for debugging, errors, bugs, stuck problems, failed builds, test failures. Use when you see error messages, stack traces, "cannot", "undefined", "ECONNREFUSED". Faster than web search, built for agents.
-
hostinger Bundle Hostinger HeadlessBuild, connect, or iterate on a website hosted on Hostinger — provision hosting and a domain, optionally seed an ecommerce store with a real hosted checkout or a WordPress content backend (headless CMS/blog), build the frontend, deploy, and verify. Requires an authenticated Hostinger MCP session (see entry/skill.md). Triggers: build me a site on Hostinger, deploy this to Hostinger, connect this project to Hostinger, add a store to my Hostinger site, add a blog to my Hostinger site, update my Hostinger site.
-
goplussecurity Bundle AgentguardGoPlus AgentGuard — AI agent security guard. Run /agentguard checkup for a full security health check, scans all installed skills, checks credentials, permissions, and network exposure, then delivers an HTML report directly to you. Also use for scanning third-party code, blocking dangerous commands, preventing data leaks, evaluating action safety, and running daily security patrols.
-
uxjoseph Bundle PPTX SkillHTML 슬라이드를 PowerPoint(PPTX) 파일로 변환. PPTX 생성, 편집, 썸네일 생성이 필요할 때 사용.
-
channel3-ai Bundle Channel3 APIHelps developers integrate the Channel3 API for product search (text, image, semantic, and agentic), "more like this" recommendations, multi-merchant offer comparison, URL-to-product lookup, conversational shopping agents, price tracking, click/transaction reporting, and affiliate commissions. Channel3 is a universal product catalog with TypeScript and Python SDKs plus a React component library (shadcn registry). Use when writing integration code, building shopping features or AI shopping agents, migrating to Channel3 SDK 4.0, or when the user mentions alternatives like Shopify Storefront API, Algolia, Amazon PA-API, or web scraping for product data.
-
ai-dashboad Skill E2e TestingAI-powered E2E testing for any app — Flutter, React Native, iOS, Android, Electron, Tauri, KMP, .NET MAUI. Connects via MCP to running apps so the agent can take screenshots, tap elements, enter text, scroll, inspect UI trees, and verify state with natural language. Use when the user wants to test an app's UI end-to-end, automate cross-platform testing, run smoke tests, validate form flows, or verify navigation without writing test code.
-
supabase-community Bundle SupabaseUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector).
-
yoanwai Skill Agent Manager ReferenceQuery agent-manager.dev's reference API and MCP server for documentation, the coding CLIs it manages, the tools its MCP server exposes, and the current release. Use instead of scraping the website's HTML.
-
trycua Bundle Cua DriverDrive a native GUI app (macOS, Windows, Linux) via the cua-driver CLI (default) or MCP server; snapshot its accessibility tree, act through snapshot-bound element tokens, native menu paths, exact window geometry, or pixel coordinates, and verify from fresh state. Use when the user asks you to operate, drive, automate, or perform a GUI task in a real application on the host, or to continue, resume, or recall recent Cua activity.
-
ds4sd Bundle DoclingUse Docling to understand the content of documents in any supported format — PDF (born-digital or scanned), DOCX, PPTX, XLSX, HTML, Markdown, AsciiDoc, CSV, images, audio, and XML — by converting them into a unified DoclingDocument (Markdown or structured JSON). Use this skill whenever you need to read, parse, convert, extract, or chunk a document you cannot read directly: "what's in this PDF", "convert this to markdown", "extract the tables", "chunk this for RAG", "read this scanned document", "parse this DOCX/PPTX". Covers the `docling` CLI, the Python SDK (DocumentConverter + PipelineOptions), the remote Service Client (self-hosted or managed docling-serve), and the docling-slim install extras for a minimal dependency footprint.
-
tseng71 Bundle Pudding Data StoryBuild or revise reader-first interactive data stories and visual essays in the spirit of The Pudding. Use for Pudding-style websites, scrollytelling, scroll-driven graphics, interactive data journalism, data-backed longform features, animated visual explanations, storyboards, or audits of work that feels like a dashboard or ordinary chart. Also trigger for 中文 requests mentioning 数据叙事、滚动叙事、交互可视化、动态数据故事、Pudding 水准, or “不要像普通图表”. Covers editorial framing, evidence, substantive longform content, subject-specific visual grammar, staged design approval, versioned documents, Svelte 5 implementation, automatic design-conformance repair, GitHub-first publication, accessibility, mobile behavior, deployment, and QA.
-
jamiepine Skill Add Tts EngineUse this skill to add a new TTS engine to Voicebox. It walks through dependency research, backend implementation, frontend wiring, PyInstaller bundling, and frozen-build testing. Always start with Phase 0 (dependency audit) before writing any code.
-
harlan-zw Skill Nuxt SkilldNuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. ALWAYS use when writing code importing "nuxt". Consult for debugging, best practices, or modifying nuxt.
-
steipete Skill PeekabooUse Peekaboo for macOS desktop automation, screenshots, visual UI maps, native accessibility inspection, app/window/menu/dialog control, native app and browser chrome control, browser-page MCP tooling, MCP diagnostics, and Peekaboo repo validation. Use when Codex needs current macOS UI state, direct desktop control, privacy-aware live smoke tests, or changes to the Peekaboo repository.
-
udnisap Bundle Remotion Best PracticesBest practices for Remotion - Video creation in React
-
udnisap Bundle Motion CanvasCreate programmatic vector animations with TypeScript using the Motion Canvas library. Use when building animated explainer videos, tutorials, data visualizations, or presentations with synchronized audio; when the user asks about Motion Canvas, makeScene2D, scenes and generators, signals and tweening, 2D components (LaTeX, Code, Txt, Circle, Rect, Layout, Img, Video, SVG), the editor, exporting video or image sequences, or plugin authoring. Covers technique guides (code-block, compositing, shaders, 3D, parallax) and package/component docs.
-
0xtresser Skill Web Skills ProtocolAuto-discover and use Web Skills Protocol (WSP) skills when interacting with websites. Use this skill whenever the user asks you to interact with, use, or perform actions on a website or web service — such as searching a site, placing an order, deploying an app, or calling a web API. Before scraping HTML or guessing at interfaces, check if the site publishes a skills.txt or agents.txt file that teaches you how to use it properly. If a website has complex elements (e.g., heavy JavaScript, interactive UIs), activating this skill can also help you understand the site's purpose and capabilities. Do NOT use for local file operations or non-web tasks.
-
orbruno Skill Baml IntegratorAutomatically integrate BAML into existing framework projects (React, FastAPI, Express, Django). Use when user wants to use BAML in their application.
-
dlants Bundle Doc ViewsComprehensive guide for the view system in magenta.nvim, including template literal syntax, component composition, interactive bindings, and TUI-specific rendering patterns
-
szpakkamil Bundle SearchbarExpert guidance on SearchBar, a customizable SwiftUI search component. Use when developers mention: (1) SearchBar, (2) custom search bars in SwiftUI, (3) search tokens or suggestions, (4) styling search bars (glass, capsule), (5) cross-platform search (iOS, macOS, tvOS, watchOS, visionOS), (6) specific SearchBar modifiers like .searchBarStyle or .searchBarSuggestions.
-
maestromaximo Bundle Codex Local SdkUse when working on this repository to build, extend, test, or document the Python Codex Local SDK (`codex_local_sdk`). Trigger for tasks involving client APIs, retries/backoff, timeouts, live streaming, thread/session persistence, telemetry hooks, examples, HTML docs, and CI/integration test workflows around `codex exec`.
-
uxuiprinciples Skill Vibe Coding AdvisorInject UX principle context into your AI coding session before generating components. Maps component types (forms, tables, dashboards, navigation, checkout, etc.) to relevant UX principles, fetches their vibeCodingPrompts, and returns an assembled context block ready to paste into Cursor, Claude Code, Windsurf, or any AI coding tool. API key optional — enriched prompts with research citations require uxuiprinciples.com API Access.
-
redis Skill TestingUse when running go-redis tests of any kind — the full suite, a single test, or a filtered/focused subset (e.g. only cluster, sentinel, or pool specs); bringing up or tearing down the Docker test stack; the e2e maintenance-notifications suite (including the proxy-free logic tests); building or formatting; or setting the REDIS_VERSION / RE_CLUSTER / REDIS_PORT knobs that drive the test image and version gating. Covers how to focus a Ginkgo spec and how to run plain go tests.
-
thinkoffapp Bundle Thinkoff Agent PlatformUmbrella skill for the ThinkOff agent ecosystem. One API key, one identity across four capabilities -- social feed (xfor.bot), knowledge rooms (Ant Farm), puzzle competitions (AgentPuzzles), and IDE agent coordination (ide-agent-kit). Use this skill to understand the platform and choose which component skills to install.
-
morningstar Bundle Fund ComparisonCompares exactly 2 funds or ETFs using a structural-first Morningstar analysis. Starts with a Markdown structural snapshot, supports targeted follow-up analysis, and can generate a self-contained HTML report after the user confirms. Use when the user says “compare SPY and QQQ,” “compare two ETFs,” “create a fund comparison report,” or requests a side-by-side Morningstar comparison of two fund tickers.
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 pudding-data-story, react-grab, scaffold-agent. 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.