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.
-
halo-dev Bundle Halo Plugin Dev 2Create or modify Halo CMS plugins, including Java backend code, plugin.yaml and extension resources, Gradle and DevTools configuration, plugin APIs and lifecycle, and Vue-based Console or User Center UI. Use for Halo plugin implementation, migration, debugging, or integration work; do not use for theme-only changes.
-
htlin222 Bundle Google Flight 2Search Google Flights for prices via a single deterministic HTTP GET request — no browser, no GUI/CSS rendering, no screenshots. Use this before reaching for browser automation (kimi-webbridge, browser-harness) whenever the task is "what does this route cost", not "show me the page" or "book this seat".
-
imbhargav5 Skill Safe Action Testing 2Use when writing tests for next-safe-action actions or hooks -- Vitest patterns for testing server actions directly, middleware behavior, hooks with React Testing Library, validation errors, and server errors
-
insforge Skill Insforge UI 2Use this skill when working in the InsForge/UI repository, which publishes @insforge/ui, the React primitives, design tokens, and Tailwind preset shared by InsForge apps. Covers package layout, working rules, validation, and where the release process lives.
-
intelligent-internet Skill Data Fetching 2Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, axios, React Query, SWR, error handling, caching strategies, offline support.
-
zeon-studio Bundle Hugo Template Guidance 2Use whenever you need to understand how this theme works — adding pages, managing content, configuring the site, using partials/components/modules, project architecture, scripts, or styling/theming (Tailwind v4, Bootstrap 5, or a hybrid — verify which). Use for ANY question about the structure, usage, or customization of the template or theme.
-
zoolutions Skill Phlex Reactive Debugging 2Debug phlex-reactive in a Rails app: a reactive component that doesn't update, a 400/403/404 from POST /reactive/actions, an AuthorizationNotVerified error, or an audit of which reactive actions authorize. Use when a reactive click does nothing, a Turbo Stream never arrives, or you need to inventory the reactive components/actions in the app.
-
4xiaxia Bundle Web Design Engineer 2Build polished visual web artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use when the user wants a browser-rendered, interactive, or presentational front-end deliverable. Not for back-end, CLI, or non-visual coding tasks.
-
863401402 Skill She Love Me 2Acquire, import, and analyze WeChat or QQ chat histories, including installing supported exporters, guiding required login or contact selection, converting exports, assessing relationship dynamics and risk signals, and generating a structured Chinese HTML report. Use when the user asks to export, import, or analyze WeChat/QQ chats or requests relationship analysis from message history.
-
classic298 Bundle Visualize 2Render rich interactive visuals — SVG diagrams, HTML widgets, Chart.js charts, interactive explainers — directly inline in chat using the render_visualization tool. Use whenever the user asks to visualize, diagram, chart, draw, map out, or illustrate something, or when a topic has spatial, sequential, or systemic relationships a diagram would clarify better than prose. Also use proactively for data comparisons, metrics, architecture, processes, or mechanisms that benefit from a visual.
-
cloudai-x Bundle Vercel React Best Practices 2React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
2.5k -
counterpointconsulting Skill Summarize 6Produce a structured summary of your implementation work. Call this when you have completed your task.
-
glennclaes Bundle Motion 2Animation skill for Motion (prev Framer Motion) and CSS animation. Provides: animation best practices (including specific advice for vanilla JS, React, Vue, Base UI and Radix), documentation and example search, CSS spring and bounce generation, MotionScore code and runtime performance audits, and the visual transition editor. Use when writing animations, working with Motion (motion, motion/react, motion-v, framer-motion), animating a UI, writing CSS linear() springs, auditing performance/jank/layout thrash via code or runtime, searching Motion docs or examples, adding a Motion UI section, or upgrading between Motion versions.
-
keluojun Bundle Market Debrief Cn 2A股收盘后深度日报自动生成工具。自动采集当日行情数据(AkShare)和新闻事件(Tavily), 通过多 Agent 并行分析架构(宏观+情绪 / 板块+资金 / 技术+估值+预判), 生成一份带量化锚点和独立判断的交互式 HTML 日报。 固定 Financial Times 三文鱼粉风格,6个分析模块 + 顶部仪表盘横条。 当用户提到以下内容时触发:「A股日报」「市场复盘」「盘脉日报」「A股复盘」「今日市场分析」 「跑一期日报」「生成日报」「做今天的复盘」,或指定日期如「帮我做2026年3月11日的日报」。
-
marielynneblock Bundle XLSX 2Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
mustbesimo Skill Cinematic Scroll 4Build or improve cinematic websites with scroll-driven storytelling, pinned reveals, parallax, kinetic type, and optional 3D. Deliver standalone HTML or integrate into an existing app, with mobile and reduced-motion fallbacks and browser evidence. Also supports scroll audits and motion storyboards. Use for cinematic web work, not ordinary forms, dashboards, or unrelated animation.
-
nightdreams-bat Skill Clone Website 2Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
-
chawkitariq Bundle Nuxt UI 2Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
-
chyiiiiiiiiiiii Bundle Meetup Deck 2製作社群小聚/技術月報的圖文並茂 HTML 簡報。涵蓋研究取材(含被封鎖來源的替代路徑)、視覺優先的版面、事實導向的撰稿規則、放映前的驗證閘門、以及部署到 GitHub Pages。This skill should be used when the user asks to build a meetup deck, monthly tech digest slides, community talk slides, 小聚簡報, 月報簡報, 技術分享投影片, or wants to research a month of news and turn it into slides.
-
codedogqby Bundle Frontend Design 2Create 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.
-
composio-community Skill Remotion Best Practices 2Use this skill when the user asks about creating videos with React, Remotion framework, programmatic video generation, video animations, or needs help with Remotion projects
-
contentstack Bundle Contentstack Vibe Docs 2Comprehensive Contentstack CMS documentation for building web applications. Covers REST API, GraphQL API, Content Management API, Image Delivery API, TypeScript SDKs, Live Preview, Visual Builder, OAuth authentication, data modeling, webhooks, releases, workflows, branches, roles, localization, variants/personalization, Launch deployments, and framework patterns for Next.js, Nuxt, and Gatsby. Use when implementing any Contentstack feature.
-
crafter-station Bundle Coss 2Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
-
cyrusnuevodia Bundle Remotion Best Practices 2Best practices for Remotion - Video creation in React
-
darrenbounds Bundle Extract Page Copy 2Use when evaluating, reviewing, or critiquing copy or messaging on an HTML file or URL. Also use when the user wants to read, assess, or discuss the text on a page without wading through markup.
-
davidortinau Bundle Maui Bootstrap Theme 2Styling 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 Sdk 2Use 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.
-
devfirexyz Bundle Svelte5 Best Practices 2Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.
-
devotts Bundle Plan It 2Turn a fuzzy idea, brain-dump, or transcription into a COMPLETE spec set + agile delivery package for /build-it. /plan-it plans it, build-it builds it: pre-grounds the codebase, fans out parallel Claude teams, authors design docs in order, runs one up-front anamnesis questionnaire (access, fences, naming, topology, live-probes, known decisions), pauses at ONE batched human-decision gate, then freezes a shared CONTRACT so squads write PRDs + epics — each ending in a BINDING Test Contract the build must pass 100% before "done". Picks a topology (solo · orchestrator+squads · headless) and renders an HTML twin of each doc. Use when the user says "/plan-it", "plan this", "spec this out", "create the PRDs/epics", "scope this project/feature", or pastes a vision expecting a buildable plan. Built for humans and conductor agents. Inverse of /build-it; predecessor to /next-session-prompt. Deterministic core: an explicit statechart (machine.json), a resumable state file, gate-check.mjs exit codes gate advancement.
-
dickwu Bundle Tauri Connector 2Deep inspection, interaction, debugging, and code review for Tauri v2 desktop apps. Use this skill whenever: working with a Tauri app's UI (clicking, filling forms, reading DOM, screenshots, dragging elements); debugging console logs, IPC calls, or Tauri events; reviewing component trees, accessibility, or visual regressions; testing user flows or validating IPC contracts; setting up tauri-connector in a new project. Also triggers on: DOM snapshots, element refs, webview interaction, drag-and-drop, IPC debugging, Tauri app testing, visual regression, admin/ front/ or tool/ desktop apps, @eN ref syntax, or any mention of tauri-connector CLI or MCP tools. This is Claude's bridge to any running Tauri v2 desktop app -- if a Tauri app is involved, use this skill.
-
display-dev Bundle Display Dev 2Publishes HTML or Markdown as display.dev URLs with public, company, or private access. Supports signup, claiming, sharing, browsing, bounded reads, exact edits, and comment iteration. Use when the user asks to "publish this", "share this", "share with the org", "post this online", "make a private link", "share with [email]", "publish a report", "list my artifacts", "find an artifact", "publish a large file", "publish this generated HTML file", "read this artifact", "search inside this artifact", "change this passage", "make a copy of this artifact", "duplicate version", "create a display.dev account", "claim this publish", "add a company email domain", "transfer an email domain", "change the email domains add-on", "show my referral link", "show referral rewards", "watch comments on this artifact", "respond to comments", or "resolve this comment thread". Use whenever a request contains a display.dev artifact URL (`*.dsp.so/*`). Anonymous publishing returns a 30-day preview and browser claim URL.
-
dmitrypost Bundle Vuetify4 3Vuetify 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.
-
dncore Bundle Creo Design Agent 2面向制造业的钣金/注塑件设计智能体服务。当用户需要设计钣金件(折弯、冲孔、展开、材料选型)、注塑件(壁厚、拔模、加强筋、凸台、模流/锁模力工艺参数)或给出分析参数(力学/有限元/热力/模流)时使用。可检索行业/公司知识库、调用 Creo 进行三维建模。内置 ReAct 智能体 + 可配置 OpenAI 规范 LLM provider + 知识库 RAG + 分析引擎,通过 MCP 工具 design_chat 或 HTTP /chat 使用,同时也暴露底层工具面。
-
jimmypaolini Bundle Improve Codebase Architecture 2Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
-
fcavalcantirj Bundle Solvr 2Search 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.
-
christyjacob4 Bundle Opentui 2Comprehensive 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.
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 halo-plugin-dev, google-flight, safe-action-testing. 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.