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.
-
strapi Bundle Migrate Strapi ContentBatch-migrate content from the old strapi.io Strapi instance (production-old MCP) to the current production Strapi (production MCP). Fully autonomous — paste URLs and nothing else is needed. Supports ALL content types — user-stories, blog-posts, news, jobs, pages (including cross-type migrations where old use-cases/universals map to new pages), comparators. Operates MCP-to-MCP (no HTML scraping). Triggers: migrate, batch migrate, migrate from production-old, bulk seed, batch seed urls, paste urls to migrate, migrate pages, migrate solutions, migrate user stories, migrate blog posts, migrate case studies, migrate comparators.
-
strapi Bundle Create Content ComponentCreates a new page builder content component for both Strapi and the Next.js frontend. Use this skill whenever the user wants to add a new section, form, or component to the page builder — including creating Strapi schemas, dynamic zone registration, populate configs, and React wrappers. Triggers: add/create page component, new page section, page builder component, add form component, new strapi schema, add content type, new section component, add dynamic zone component, create strapi component.
-
suleymanbyzt Skill Integration BriefUse after changing an API endpoint, contract, event, or message schema that another person or team will integrate with. Produces a short brief the integrating developer (frontend, mobile, another service) can implement from directly.
-
supatest-ai Skill Review PrReview a pull request or set of code changes. Filters to issues introduced by this PR (not pre-existing), scores confidence, and produces a prioritized HTML report with severity tiers.
-
syncfusion Bundle Syncfusion Vue DOCX EditorUse this skill when a user asks how to generate, integrate, or implement a Word‑like document editor in Vue using Syncfusion. Trigger it for requests involving the Syncfusion Vue Document Editor, Vue‑based editor integration, document editing and formatting, comments and track changes, working with tables and images, managing headers and footers, applying document protection, and building end‑to‑end document workflows in Vue applications.
-
syncfusion Bundle Syncfusion React DOCX EditorUse this skill when a user asks how to generate, integrate, or implement a Word‑like document editor in React using Syncfusion. Trigger it for requests involving the Syncfusion React Document Editor, React‑based editor integration, document editing and formatting, comments and track changes, working with tables and images, managing headers and footers, applying document protection, and building end‑to‑end document workflows in React applications.
-
szsip239 Skill Peter Zhou Knowledge LearningCreate reusable graph-grounded system knowledge lessons for recurring weak topics. Use for learning-unit selection, agent teaching drafts, controlled explanatory animation, linked practice, and archived HTML courseware.
-
tanishqkancharla Bundle Halo ExtensionCreate, edit, run, and verify Halo workspace extensions using the bundled React, oRPC, Tandem, and connected-tool SDK.
-
tencent-rtc Skill Call UikitThis is the parent skill for Tencent Call TUICallKit integration across all platforms. It should be used when users want to build audio/video CALL features (1-to-1 or small group calls). This skill guides platform selection and provides common knowledge shared across all Call implementations. For platform-specific guidance, use the corresponding sub-skills (call/vue, call/react, etc.).
-
tencent-rtc Skill Chat UikitThis is the parent skill for Tencent Chat TUIKit integration across all platforms. It should be used when users want to build instant messaging (IM) features but have not specified a particular platform/framework. This skill guides platform selection and provides common knowledge shared across all Chat TUIKit implementations. For platform-specific guidance, use the corresponding sub-skills (chat/vue, chat/react, etc.).
-
tencent-rtc Skill Live UikitThis is the parent skill for Tencent Live TUILiveKit integration across all platforms. It should be used when users want to build LIVE STREAMING features (host broadcasting, audience viewing). This skill guides platform selection and provides common knowledge shared across all Live implementations. For platform-specific guidance, use the corresponding sub-skills (live/vue, live/android, etc.).
-
tencent-rtc Skill Room UikitThis is the parent skill for Tencent Room TUIRoomKit integration across all platforms. It should be used when users want to build VIDEO CONFERENCE or MEETING features. This skill guides platform selection and provides common knowledge shared across all Room implementations. For platform-specific guidance, use the corresponding sub-skills (room/vue, room/react, etc.).
-
tencent-rtc Bundle Chat Uikit Vue3This skill orchestrates the integration of Tencent Chat TUIKit for Vue3 Web applications. It should be used when users want to build instant messaging (IM) features in Vue3 projects, including conversation lists, chat windows, group management, and contact management. The skill provides strict workflow instructions for AI agents to generate correct, runnable code by leveraging MCP tools for real-time documentation and credentials.
-
tencent-rtc Bundle Chat Uikit ReactThis skill orchestrates the integration of Tencent Chat TUIKit for React Web applications. It should be used when users want to build instant messaging (IM) features in React projects, including conversation lists, chat windows, group management, and contact management. The skill provides strict workflow instructions for AI agents to generate correct, runnable code by leveraging MCP tools for real-time documentation and credentials.
-
tetherto Skill Mdk Skill SuiteThe MDK product skill suite (mdk, mdk-worker-plugin, mdk-gateway-plugin, mdk-ui-component, mdk-deployment) is not installed in this checkout. Use this whenever a task mentions MDK, a worker, a Worker Plugin, a Gateway plugin, a UI component for worker/plugin data, or deploying an MDK stack.
-
tetherto Bundle MdkBuild on the MDK (Mining Device Kit) platform. Use whenever a task mentions MDK, the Kernel/ORK, a worker, a Worker Plugin, mdk-contract.json, @tetherto/mdk-* packages, a miner / power meter / sensor / container integration, a cross-worker aggregation endpoint, a UI component for worker/plugin data, or deploying an MDK stack.
-
tetherto Bundle Mdk UI ComponentBuild a UI page/panel that renders data from an MDK worker or Gateway plugin. Use when the task mentions "UI / component / widget / dashboard", "show telemetry", "chart / tile / heatmap", "render data from a worker/plugin", or prompts like "create a UI to show <metric> for <device>".
-
theepan Bundle Tariff GuideCreate comprehensive, printable tariff and customs guide documents for any country or customs territory. Use when a user asks to write a tariff guide, create a customs handbook, document an import duty system, build a trade compliance reference, or explain how tariffs work for a specific country. Produces both Markdown and self-contained HTML with professional styling, worked examples, comparison tables, and print-ready layout. Accepts a country or customs territory name and optional topic outline.
-
noir-lang Skill Noir Frontend TestsGuide for writing noirc_frontend unit tests. Use when adding, writing, or reviewing frontend tests — regression tests, reproduction tests, error-checking tests, or should_panic tests in the compiler frontend.
-
nvidia Bundle Aicr Creating Slide DecksUse when building a self-contained HTML slide deck or visual talking-point for a technical concept or workflow (e.g. a demos/*.html) — shown full-screen or projected and narrated, opening in any browser with no build step or dependencies.
2.2k -
ofoxai Bundle Cloudflare DropPublish a static site (a folder of HTML/CSS/JS/images/fonts) to Cloudflare and get back a live, shareable URL in seconds. Use when you have a finished static page or site and need to hand someone a link they can open on any device — reports, mockups, one-off landing pages, AI-generated HTML, "give me a link I can share". Runs one packaged command (references/deploy.mjs) built on the Wrangler CLI, which is what Cloudflare's own agent guidance tells agents to use. Deploys permanently to your Cloudflare account when credentials are present, or as a 60-minute claimable preview when they are not — and says plainly which one you got. Bakes an expiry countdown into previews (matched to the real 60-minute limit; --ttl to shorten it), and supports optional server-side six-digit access-code protection with -otp for permanent links only. Unprotected delivery may fall back to a file; protected delivery fails closed.
-
open-mercato Bundle System ExtensionExtend core modules using the Universal Module Extension System (UMES). Use when adding columns/fields/filters to existing tables/forms, enriching API responses, intercepting API routes, blocking/validating mutations, replacing UI components, injecting menu items, or reacting to domain events. Triggers on "extend", "add column to", "add field to", "inject into", "intercept", "enrich", "hook into", "customize", "override component", "add menu item", "react to event", "block mutation", "validate before save".
-
opensearch-project Skill Stack HealthCheck observability stack component health, verify data ingestion, and troubleshoot common issues.
-
otto-haus Skill PDFGenerate or inspect PDF artifacts — HTML-first; no ReportLab.
-
paidaxingyo666 Skill Manta EmulatoriOS Simulator control from inside Manta, with the live device view in Manta's emulator pane. Use when driving a booted Apple Simulator on macOS: taps, gestures, typing, hardware buttons, rotation, and the accessibility tree, or when an iOS change needs simulator evidence. For an Android device or emulator use the Android emulator skill; build and install the app with xcodebuild or simctl first.
Audited -
paidaxingyo666 Skill Manta Emulator AndroidAndroid device and emulator control from inside Manta over adb, with the live device view in Manta's emulator pane. Use when driving an adb-connected emulator or phone on Windows, Linux, or macOS: booting AVDs, taps, swipes, typing, hardware buttons, rotation, app install and launch, runtime permissions, the accessibility tree, and logcat. For an iOS simulator use the iOS emulator skill; build the APK with Gradle first.
Audited -
partikularwaters Skill MoorAfter building any UI component or resolving a notable engineering outcome, extract what matters and save it to the correct project file — the UI registry for UI patterns, the session-state file for everything else. So every future session builds on what's already established instead of drifting from it.
-
rjvim Skill Rjv Replica ScreenshotProduce a before/after PR visual when the real screen won't render locally (broken dev build, feature flag, unstageable state, backend-only change with no easy UI path). Build a faithful HTML replica of the actual component using the REAL server payload strings, screenshot it, label it as payload-rendered. Triggers: 'add before/after screenshots' but the page is blank/broken in dev, 'the live page can't render', 'show the fix visually but I can't reach the screen'.
Audited -
rjvim Skill Rjv Agent Browser NotesField notes that sit ON TOP of the vendor agent-browser skill — the failures it does not cover. Load together with `agent-browser` whenever driving a real React app (Radix/shadcn, Inertia, react-hook-form) or QA-ing a feature end to end. Triggers: clicks report success but nothing happens, hover or tooltips never fire, `fill` does not stick, a Select or Tab will not open, a menu picks the wrong row, the cart or form silently empties, `doctor` says pass but the page is dead, dev-server reloads wipe state, several agents share one browser.
-
ryanthedev Bundle DocsSearch React Native official documentation. Use when answering questions about React Native APIs, components, hooks, layout, navigation, native modules, or platform-specific behavior. Triggers on "React Native", "RN docs", "how does View work", "FlatList props", "native module", "new architecture".
-
ryanthedev Bundle CleanIntelligent environment reset for React Native projects — diagnoses stale caches before cleaning instead of blindly nuking everything. Triggers on "clean build", "reset caches", "fresh start", "metro won't start", "build is broken", "nuclear clean", "clear derived data".
-
ryanthedev Bundle DebugDebug React Native apps — view console logs, JS errors, Metro status, evaluate expressions, inspect React component tree, monitor network requests. Use for runtime debugging of JavaScript and React layers. Triggers on "console logs", "JS errors", "Metro status", "evaluate expression", "React component tree", "network requests", "debug".
-
ryanthedev Skill CodingReact Native coding guidance — consults official docs before writing code and suggests verification after. Use when writing components, implementing features, building screens, fixing queries, or adding views. Triggers on "write a component", "implement this feature", "build this screen", "add a view", "React Native code", "fix this query", "use best practices".
-
ryanthedev Bundle IOS SimControl the iOS Simulator — tap, type, swipe, screenshot, record video, install and launch apps. Use when interacting with the iOS simulator during React Native development. Triggers on "simulator", "tap", "swipe", "screenshot of simulator", "install app", "launch app", "what's on screen", "record video", "accessibility tree", "tap by label", "tap by id", "list elements", "go back", "scroll to top", "scroll to bottom".
-
ryanthedev Bundle DiagnoseDiagnose React Native errors by cross-referencing error text against docs, error pattern database, and project config. Use for build failures, red screens, runtime crashes, and dependency issues. Triggers on "diagnose this error", "why is my build failing", "what does this red screen mean", "Unable to resolve module", "null is not an object", "Invariant Violation", "pod install failed", "gradlew failed", "EACCES", "metro error".
-
ryanthedev Bundle A11Y AuditAudit accessibility of the running React Native app. Captures the accessibility tree from the iOS Simulator and checks it against React Native best practices. Triggers on "audit accessibility", "check a11y", "VoiceOver check", "accessibility issues", "screen reader test", "are labels correct".
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 migrate-strapi-content, create-content-component, integration-brief. 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.