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.
-
bilalmk Skill RAG SkillBuild and integrate production-ready RAG (Retrieval-Augmented Generation) chatbots into documentation sites using OpenAI, Qdrant Cloud, and Neon Postgres. Handles complete stack from backend API to frontend UI integration.
-
bytedance Skill Material Component DevFlowGram 物料组件开发指南 - 用于在 form-materials 包中创建新的物料组件
-
conceptadev Bundle Using RemixUse when building Flutter UI with the Remix component library or its application-owned Fortal preset: selecting Remix or Fortal, setting up `remix_cli`, placing the configured theme scope, composing overlays or routes, choosing Remix/Fortal components, or styling `Remix*` widgets with stylers, states, variants, recipes, and tokens. Also trigger when building or auditing a Remix/Fortal reference showcase or component gallery, for Remix/Fortal widget names, or for a UI request in a project that already contains `remix`, `remix.yaml`, or the legacy `remix_fortal` package. Do not trigger for generic Flutter UI work when none of those are present or requested.
-
cooksaw Bundle Pixel Art Game BuilderExpert skill for building pixel art idle/incremental games with procedural sprite generation, React/TypeScript/Zustand architecture, and contemplative game design. Use when creating pixel art games, implementing idle game mechanics, generating procedural sprites via Canvas API, building collection-based games, or implementing incremental game economies. Triggers on requests for pixel art, idle games, sprite generation, incremental games, collection games, or contemplative game experiences.
-
cskwork Bundle ArchifyCreate architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as self-contained HTML with inline SVG, dark/light themes, and PNG/JPEG/WebP/SVG export.
-
davidortinau Bundle Maui AI DebuggingEnd-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent. Use when: (1) Building or running a MAUI app on iOS simulator, Android emulator, Mac Catalyst, or Linux/GTK, (2) Deploying a MAUI app to a device/emulator/simulator, (3) Inspecting or interacting with a running MAUI app's UI (visual tree, element tapping, filling text, screenshots, property queries), (4) Debugging Blazor WebView content inside a MAUI app via CDP, (5) Managing iOS simulators or Android emulators (create, boot, list, install), (6) Setting up the MauiDevFlow agent and CLI in a MAUI project (including Linux/GTK apps), (7) Completing a build-deploy-inspect-fix feedback loop for MAUI app development, (8) Handling iOS permission dialogs, system alerts, and app-level alerts via simctl privacy or accessibility tree detection, (9) Managing multiple simultaneous MAUI apps via the broker daemon. Covers: maui-devflow CLI, androidsdk.tool (android), appledev.tools (apple), adb, xcrun
-
davidortinau Bundle Maui Bootstrap ThemeStyling guide for MauiBootstrapTheme (Plugin.Maui.BootstrapTheme NuGet). Use when writing, editing, or reviewing .NET MAUI XAML, C#, or MauiReactor code that uses Bootstrap-style classes. Covers installation, setup, per-control StyleClass reference, DynamicResource keys, visual states, theme switching, and common mistakes. Triggers: "bootstrap", "btn-primary", "StyleClass", "form-control", "card", "bootstrap theme", "theme switching", "BootstrapTheme", or any Bootstrap CSS class name used in MAUI context.
-
deuz-ai Bundle Deuz SdkUse when building or changing any AI or LLM feature in TypeScript — chatbot, streaming chat UI, agent, tool calling, structured output, embeddings, RAG, agent memory, MCP client, guardrails, image/speech/video generation — or when about to reach for LangChain, LangGraph, LlamaIndex, the Vercel AI SDK (ai, streamText, @ai-sdk packages), or a raw openai/anthropic client. Covers the whole @deuz-sdk/core and @deuz-sdk/react surface.
-
dmitrypost Bundle Vuetify4Vuetify 4 documentation corpus (release 4.0.5). Use for Vuetify 4-only component, API, directive, and composable questions; prefer API pages for contracts and guide pages for usage examples.
-
ersinkoc Bundle Project BootstrapperUniversal meta-skill that bootstraps ANY software project regardless of programming language. Auto-generates 15-30+ hyper-detailed, project-specific coding skills BEFORE writing code. Language-agnostic: works with TypeScript, Python, Go, Rust, Java, C#, Swift, Kotlin, PHP, Ruby, and polyglot projects. AGGRESSIVE version enforcement: EVERY technology version MUST be verified via real-time lookup — never use memorized versions. Generates skills for architecture, security, performance, privacy, testing, error handling, accessibility, observability, data modeling, API design, DevOps. Each skill enforces zero-bug standards with concrete code examples, anti-patterns, and measurable budgets. Triggers on: "bootstrap", "new project", "start project", "create project", "set up", "generate skills" — use BEFORE any code exists.
-
foxian Bundle Bid Cover FormatterFormat tender/bidding document covers from Markdown to HTML-styled Markdown. Use when converting Chinese document covers (招标文件/投标文件/报价文件/商务文件/技术文件/技术协议/采购文件) to formatted output with Chinese fonts (黑体/宋体), pt-based spacing, center alignment, and proper layout for A4 printing.
-
hybridtalentcomputing Bundle OpentuiComprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
-
sap Skill UI Theme Designer HelpProvides customer-facing UI theme designer help from help.sap.com (BTP / Cloud Foundry edition). Use whenever you need to check what is — or is not — documented for customers about UI theme designer: setup, user/role management, themes and theme sets (creating, editing, publishing, transporting, fallback), quick/detailed/expert theming, writing themeable CSS for custom UI5 controls, best practices for custom control theme files, theming integrations with Build Work Zone / S/4HANA / SAPUI5 / SAP GUI, UI theme designer service constraints (rate limits, size limits, theming-specific security and permissions, accessibility), theming error messages and troubleshooting, what's-new. Also use for 'is X documented?' or 'what does the help say about Y?' questions. SKIP: questions about which themes or parameters exist or what values they have (use ui-theme-designer-design-tokens). SKIP: tenant-specific operational questions about a running system ("which themes do we have?", "which users are assigned?").
-
scaryrawr Bundle SmahtiepantsUse this skill before answering questions or writing code that depends on a specific library, framework, language, runtime, or CLI tool (e.g. React, Express, Node, Python, Rust, CSS, Docker, Git, Bun). Your training data has a cutoff and APIs change, get deprecated, or gain new features after it. smahtiepants searches a local, up-to-date mirror of DevDocs so you can ground answers in current documentation instead of relying on potentially stale memory. Use it whenever you are unsure about an API signature, default, option name, version-specific behavior, or "is this still the right way to do X", and whenever the user asks how to use a library or what a function/flag does.
-
scaryrawr Bundle Smahtiepants MCPUse this skill when smahtiepants MCP tools are available and a task depends on current documentation for a library, framework, language, runtime, API, or CLI tool (for example React, Express, Node, Python, Rust, CSS, Docker, Git, or Bun). Prefer the MCP tools `list_docsets`, `search_docs`, and `get_page_content` before answering from memory whenever API details, option names, defaults, examples, or "is this still current" questions could be stale. This is the MCP-tool version of the smahtiepants documentation workflow; use it instead of shelling out to the CLI when the MCP server is connected.
-
sderosiaux Skill Scrape Structured DataGet the repeating records off a web page (product grids, search results, job listings, news feeds, tables) as JSON, without writing CSS selectors and without spending a model call to read the HTML. Works on sites with no API, including ones behind a login or bot protection. Runs locally, one binary, no API key. Use when the user says scrape, extract the list of, get all the products/results/posts from, turn this page into JSON, or asks for data from a site that has no API.
-
semianalysisai Bundle Debug Agentx RunsDebug long-running AgentX benchmark jobs from live cluster logs and metrics instead of waiting for buffered GitHub Actions output. Use for AgentX bring-up, performance tuning, apparent hangs, warmup or profiling failures, aggregated or disaggregated serving runs, deciding whether to short-circuit an unproductive run, estimating phase completion, and verifying that every frontend, prefill, decode, or aggregate engine is healthy.
-
sgl-project Skill Add ModelAdd a new model to the SGLang Cookbook, including documentation, sidebar, config generator component, and model YAML configuration.
-
si-kui-a Skill Study Visual Generator泛用學習視覺化HTML擴充包,獨立於bilingual-doc-annotator。涵蓋4種輸出類型:問題清單+折疊答案卡、知識地圖、單詞卡片、概念解析圖。語言不限,依使用者對話語言或指定TGT_LANG輸出。共用配色/字體系統(深海軍藍+米白/Lora+IBM Plex Sans)。
-
si-kui-a Skill Bilingual Doc Annotator泛用雙語批注HTML生成器。輸入任意來源語言文件+目標譯文語言,產出左欄(原文按維度高亮+意譯段落塊)+右欄(逐段批注)雙欄HTML。支援學術論文/文章/法律文件/文學/技術文件等文件類型,色彩維度依文件類型套預設或自訂。取代僅限中英學術論文的舊版。
-
sikandarjodd Skill Svelte Code WriterCLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
-
sikandarjodd Bundle Svelte Core BestpracticesGuidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
-
sirius-zuo Bundle Architect Design ReviewReviews a design spec, generates architecture diagrams using Mermaid.js, evaluates against architecture principles, and produces an HTML report in docs/architecture/review/.
-
sirius-zuo Bundle Architect Codebase ReviewUse when an existing codebase needs an architecture review. Explores the codebase, generates current-state architecture diagrams using Mermaid.js, evaluates against architecture principles, proposes recommended improvements with revised diagrams, and saves an HTML report to docs/architecture/review/.
-
slackwero Bundle Dev Secure CodingUse when writing or modifying application code in any language — endpoints, handlers, database queries, HTTP clients, file access, forms, config loading — and whenever adding or upgrading a dependency. Applies whenever code touches user input, credentials, SQL, shell commands, file paths, external URLs, or authentication, even if the request never mentions security. Also use before declaring code finished, to self-check what was written. Triggers on "create an endpoint", "add this library", "connect to this API", "save this to the database", "read this file", "add login". Complements the stack skills (dev-python-clean-code, golang-clean-code, dev-react-internal, dev-angular-internal) rather than replacing them.
-
leonvanzyl Bundle Create Agentic AppScaffold and fully configure a new Agentic Coding Starter Kit project — a Next.js 16 + TypeScript + Better Auth + Drizzle + PostgreSQL + AI SDK boilerplate. Use this skill whenever the user asks to set up, scaffold, create, initialize, or bootstrap an "agentic coding starter kit", "agentic app", "agentic boilerplate", a "Next.js app with auth and db", or mentions `create-agentic-app` / `npx create-agentic-app`. Walks the user through folder strategy, package-manager choice, Postgres setup (Docker / Neon / Vercel / BYO), OpenRouter AI configuration, migrations, a build check, and dev-server verification — ending with a working http://localhost:3000.
-
coderandylee Bundle Amz Review AnalysisAmazon 评论分析:合并卖家精灵 review、按一级/二级/三级动态长出分类列、 把好评差评原文摘录写入对应列,再按指南输出类目/品牌/ASIN 报告和 HTML 看板。 Use when the user asks for Amazon review 分析、评论标注、好评差评分类、 卖家精灵 review 合并、类目 review 把脉, or runs /amz-review-analysis or /amazon-review-analysis.
-
codingcossack Bundle No Use EffectReviews React code with useEffect or useLayoutEffect. Replaces effects with derived state, event handlers, query APIs, key resets, useSyncExternalStore, or named hooks. Use when writing components, refactoring effects, or reviewing diffs.
-
codingcossack Bundle Tanstack Start RscImplement, review, debug, and refactor TanStack Start React Server Components in React 19 apps. Use when tasks mention @tanstack/react-start/rsc, renderServerComponent, createCompositeComponent, CompositeComponent, renderToReadableStream, createFromReadableStream, createFromFetch, Composite Components, React Flight streams, loader or query owned RSC caching, router.invalidate, structuralSharing: false, selective SSR, stale names like renderRsc or .validator, or migration from Next App Router RSC patterns. Do not use for generic SSR or non-TanStack RSC frameworks except brief comparison.
-
comoco235 Bundle Saas PreflightAudit a vibe-coded or AI-generated SaaS for security and payment failures before it ships, focused on the Next.js + Supabase + Stripe stack. Use this whenever the user is about to deploy, launch, or "ship" a web app that handles authentication, user data, or payments. Trigger on phrases like "is my app secure", "can someone read other users' data", "is my Stripe integration safe", "will someone get a free subscription", "review my SaaS before launch", "I'm going to production", or any review of API routes, server actions, Supabase RLS policies, Stripe webhooks, or middleware in a SaaS, even if the user never says the word "audit". Prefer this skill over an ad-hoc code read whenever real users or real money are about to touch the code.
-
cyber-gen Bundle Visual ExplainerThis skill should be used when the user asks to "explain," "teach," "walk me through," "help me understand," "break down," or "visualize" something multi-step, when they self-identify as a visual learner, or when they ask for an explainer, primer, field guide, deep-dive, or learning artifact. Also use proactively when the natural answer to a question would be a long-form conceptual explanation the user is likely to read once and refer back to. Produces editorial-grade, scrollable HTML visual explainers that thread a single concrete example through every stage of a multi-step concept (process, lifecycle, framework, journey, mental model, taxonomy, decision tree, or layered topic). Do NOT use for short factual answers, code generation, or single-screen reference cards.
-
dqt-bit Bundle Nigao拟稿(nigao)—— 公众号草稿生成工坊。一句话触发,自动产出 markdown 文章 + 富文本 HTML + 大小封面 + 120 字摘要,端到端绕开 mdnice。 名字寓意:「拟」=起草、酝酿,「稿」=文稿;古人「拟稿」是构思文章的过程。 方法论:先以口语化、故事流、段落长短不一的风格写 markdown;再用 draft.py 一键产出全部产物(含「一键复制」按钮的浏览器预览页,复制粘贴公号编辑器即可,跳过 mdnice 转换这一步)。 当用户需要写一篇公众号文章 / 把某次会话或某次工作总结成可发布的文章时使用。最终产出 7 个文件汇总到 drafts/<date>-<slug>/。 触发词包括但不限于:写一篇关于 X 的公号文、帮我把 X 写成公众号、写个公众号 / 写篇推文、把这次会话写成文章、起草个 X 的发布稿、用拟稿写一篇、拟稿一下、把 X 这事写一下发出去。 即使用户只是说「把 X 整理一下发出去」、「X 这事写一篇」,只要上下文指向公众号 / 写作发布,都应该触发。 不要用于:纯技术文档(用 README / 代码注释)、单纯写代码(其他 skill)、写邮件 / 备忘录(用通用对话)、内部草稿没有发布意图。
-
dahanitamar Bundle UilintCatch the UI states and failure paths that get skipped — loading, empty, error, success, and partial. Use whenever building or reviewing an interface that fetches data, submits a form, or navigates, and whenever a user describes an interface problem in symptoms rather than terms — "nothing happens when I click", "it just spins forever", "the page goes blank", "users don't know if it worked", "this form is annoying", "why does this feel broken", "review this component", "/uilint". Also use proactively while writing UI, so the states exist in the first draft instead of being retrofitted after someone complains.
-
daverobinson Bundle Gutenberg Block DevelopmentBest practices for creating custom WordPress Gutenberg blocks with React/TypeScript, covering scaffolding, block architecture, attributes, dynamic vs static rendering, and testing
-
deusmaximus Skill Chat InsightsGenerate a usage insights report by analysing recent claude.ai conversations. Trigger when the user asks to "run insights", "generate a usage report", "analyse my recent conversations", or similar. Produces a visual HTML report covering what's working, friction points, topic breakdown, and quick wins — modelled on Claude Code's /insights command but for the claude.ai web interface. Do NOT use for general questions about conversations or memory.
-
djarvur Bundle Go UltimateThe complete Go development skill. REQUIRED for ALL Go work — writing, refactoring, reviewing, generating, scaffolding, or discussing Go code, including any change to .go files. Use whenever the user mentions Go, Golang, go.mod, a Go package, or asks to build a Go backend service, CLI, library, script, MCP server (Model Context Protocol), or AI/LLM agent with tool calling or ReAct-style reasoning. Routes by project type to the right architecture, conventions, and review checklist. Highly opinionated; overrides generic Go style and lint guidance on conflicts.
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 rag_skill, material-component-dev, using-remix. 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.