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.
-
frankxai Skill Web Motion AuditorUse when reviewing web animations, UI transitions, scroll effects, hover states, loading states, GIF/video captures, reduced-motion support, animation performance, or motion polish in HTML, React, Next.js, or Vercel apps.
-
frankxai Skill Remotion Video AgentUse when creating or editing Remotion videos, programmatic explainers, motion graphics, MP4 renders, GIF renders, social cutdowns, or React-authored video templates.
-
frankxai Skill Site Motion Excellence DirectorUse when planning, auditing, specifying, implementing, or improving premium website/app motion across FrankX, Arcanea, Starlight, or Vercel/Next.js sites. Use for motion design systems, site choreography, scroll motion, generated media integration, runtime selection, reduced-motion planning, visual QA, and turning rough motion ideas into implementation-ready specs.
-
freshworks-developers Bundle Fw ReviewFull Freshworks marketplace app review — iparams, frontend, serverless, FDK, security, and structured text report output — in one skill.
-
freshworks-developers Bundle Fw App DevExpert-level skill for building, debugging, reviewing, and migrating Freshworks Platform 3.0 marketplace apps. REQUIRES Node.js 24.x + FDK 10.x. New UI apps default to React Meta (DEW, metaConfig.framework react); vanilla Crayons is opt-in. Commands: /fdk-react-create, /fdk-react-migrate, /fdk-fix, /fdk-migrate, /fdk-refactor. Does NOT install FDK/Node—use fw-setup.
-
getstream Skill Flutter A11YApply when adding or modifying Flutter accessibility (a11y) in a design system or reusable component library — Semantics widget properties, MergeSemantics, ExcludeSemantics, SemanticsRole, focus management, screen reader announcements (one-shot vs live regions), and accessibility testing (meetsGuideline, tester.semantics.find, custom widget semantics). Use whenever building a new component, exposing a11y parameters (tooltip / autofocus / semanticLabel) on a public API, or wiring Semantics inside a reusable widget. Also applies to debugging "TalkBack focus / announcement / role is wrong" issues by dumping the semantics tree.
-
commerce-cloud-integrations Bundle Sap Commerce Task DevelopmentUse for backend SAP Commerce implementation work that must stay project-agnostic and extension-driven: service/facade/controller layering, items.xml and beans.xml contract changes, Spring XML wiring, ImpEx/patch updates, and build verification. Trigger for feature delivery, refactors, integrations, OCC backend APIs, cronjobs, and data-model updates. Exclude frontend/storefront work and extension scaffolding.
-
cyanluna-git Bundle Cpet DB React Best PracticesReact and Next.js performance optimization guidelines for CPET.db. Tailored for three-tier architecture with Vercel frontend, Google Cloud Run backend, and Supabase database. Use when writing, reviewing, or refactoring React components, data fetching, or optimizing performance.
-
cyanluna-git Skill Vercel Best PracticeVercel Engineering의 React/Next.js 성능 최적화 가이드라인을 적용하여 렌더링 성능, 번들 크기, API 호출을 최적화합니다.
-
cyl19970726 Bundle Harness Frontend Product Design通用前端产品设计-实现工作流:文字合同 → agent 出稿图 → 美术风格测量成文字规格 → 对照规格实现 + 机械验证 → Owner 视觉验收。当任务涉及:做/改任何前端页面或组件的视觉与交互、设计图/出稿/mockup、前端美术风格、UI 还原度、设计规格、前端验收,或要判断'这个界面做得对不对/好不好看'时使用。核心纪律:agent 是翻译者与验证者,永远不是视觉裁判。
-
cyranob Bundle GCP DeployDeploy any static site directory to Google Cloud (Firebase Hosting) using your local CLI. Use this skill whenever the user wants to deploy, host, or publish a static website to GCP/Firebase. Triggers on "deploy this to GCP," "host on Google Cloud," "publish to Firebase," "deploy to GCP/Firebase," or any request to host a local static site on Google infrastructure. Works with single HTML files, multi-file projects, and asset-heavy directories. Requires the Firebase CLI (`firebase-tools`) to be installed and authenticated locally.
-
cyranob Bundle Vercel DeployDeploy any static site directory to Vercel instantly — no authentication required. Use this skill whenever the user wants to deploy, host, publish, or put live any static website, HTML project, or directory containing an index.html. Triggers on "deploy this to Vercel," "put this live," "host this site," "publish this page," "deploy this directory," "I want to see this online," or any request to make a local static site accessible via a public URL. Works with single HTML files, multi-file projects (HTML + CSS + JS), and asset-heavy directories (images, fonts, frames). Returns a live preview URL and a claim URL to transfer ownership.
-
dangogit Skill Ncode Mobile DesignMobile-specific design rules for Expo + NativeWind + React Native projects. Handles font loading, RTL with I18nManager, safe areas, tab bar and navigation styling, touch gestures, and dark mode. Activates alongside ncode-anti-vibe-coding during mobile UI work.
-
dangogit Skill React Native CameraCamera access and photo library with Expo. Covers taking photos, picking from gallery, image manipulation, and permissions. Use when building features that involve photos, camera, or image uploads.
-
dangogit Skill Firebase Cloud MessagingPush notifications with Firebase Cloud Messaging (FCM) and Notifee for React Native/Expo. Covers setup, permissions, sending notifications, and handling taps. Use when adding push notifications to a mobile app.
-
dashersw Bundle Gea UI ComponentsGuide for using @geajs/ui — a Tailwind-styled, Zag.js-powered component library for the Gea framework. Use when building UIs with @geajs/ui components like Button, Select, Dialog, Tabs, Toast, or any pre-built component from the library.
-
dashersw Bundle React To Gea MigrationStep-by-step guide for migrating React applications to Gea — covering project setup, component conversion, state management, routing, styling, and known pitfalls. Use when converting an existing React codebase to Gea or when advising on migration strategy.
-
datalayer Bundle CrawlWeb crawling and extraction scripts for HTML pages, JS-rendered pages, links, tables, robots policy, and site crawling.
-
dawg-io Bundle ReleaseRuns a repository's full release process end to end, driven by a `.claude/release.yml` committed to that repo — no hardcoded repo, workflow, or branch names. `/release init` interviews you, writes that config, and opens a PR for it. `/release dry-run` rehearses a release read-only, changing nothing. A full run baselines from the last successful release, reviews every PR merged since, audits docs and screenshots and stops with an [ON HOLD] issue if anything is stale (it reports staleness, never fixes it), opens a labelled review issue for explicit human approval, confirms the ref, deploys the docs site first, dispatches the release workflow with the approved issue's number, tracks it, locates the resulting PR or GitHub Release, announces it, and writes a self-contained HTML record of what shipped. Use on /release, or any ask to cut, ship, publish, or promote a release. Not for feature work (/code-development) or a red pipeline (/ci-pipeline). Needs `gh` or a GitHub MCP server — Claude Code only.
-
decentraland Skill GodotThis skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
-
dekart-xyz Skill Code StyleUse this skill when implementing/refactoring frontend/backend code and you need Dekart-specific conventions for naming, code organization, architecture boundaries, and style consistency.
-
dekart-xyz Skill Dev RuntimeUse this skill when starting local development, setting up runtime dependencies, or debugging frontend/backend runtime issues in this repository.
-
dengshangli Bundle Crm Email Manual SendManually send CRM template emails by matching local .html filenames to templates in a logged-in CRM lead page, selecting each exact template, clicking confirm, and verifying the follow-up record. Use when the user asks to send one or all email templates from the current directory through the CRM UI, retry failed manual sends, or report which local templates are unavailable in CRM.
-
dengshangli Bundle Email Template Compatibility TestUse when a user wants to batch-send local HTML email templates through a web mail-testing form to multiple test inboxes, use filenames as subjects, verify accepted sends, or compare rendering compatibility across email providers.
-
dengshangli Bundle Jingdouyun Email Template ReplacementReplace only the “模板内容” field of existing 筋斗云 CRM/CMS email templates with matching local HTML files through the logged-in Chrome browser. Use when the user asks to upload, synchronize, batch-update, or replace email template content on cp-admin-test.wukongacademy.com (or the equivalent 筋斗云 template management page) while preserving every other field.
-
valantic-cec-deutschland-gmbh Bundle Valantic Project TemplatesReference templates for bootstrapping new Valantic projects (PHP, React, Spring Boot). Activates when creating new projects or discussing project structure.
-
voidmatcha Bundle Playwright DebuggerUse when a Playwright end-to-end test has already run and failed and the user wants the root cause and a concrete fix. Trigger on a failing Playwright spec, TimeoutError, broken or ambiguous selector, post-deploy suite failure, retry-only flake, hydration or timing race, or a passes-locally-but-fails-in-CI split. Accept error messages, playwright-report/ or HTML reports, trace.zip, screenshots, and CI artifacts identified by a GitHub owner/repo slug plus run id. Distinguish product regressions from brittle tests. Do not use for writing new Playwright tests, speeding up or reviewing a passing suite, non-Playwright failures (Cypress, Jest, Vitest), or debugging an app/backend without a failing Playwright test.
-
voidmatcha Bundle Playwright Test GeneratorUse when someone wants to add, write, create, or scaffold new Playwright end-to-end tests for a page, flow, form, component, uncovered route, or first-project setup. The skill analyzes coverage gaps, explores live pages only on local/disposable or externally isolated approved non-production targets, proposes scenarios for approval, generates Page Object or flat specs in the project's style, then reviews and runs them. Do not use for debugging an existing failing Playwright test (use playwright-debugger), reviewing tests that already pass (use e2e-reviewer), generating Cypress tests, or writing unit, component, or integration tests with Jest, Vitest, or Testing Library.
-
voxflowstudio Skill VideoUse when the user wants AI-generated short-form video — knowledge cards (picstory / 小红书 / TikTok / Reels), narrated explainers, presentations, AI clips, or slides — covering picstory, present, slides, explain, and image generation. For article-to-card reels (Slice — 13 themes including paper-slide), use voxflow:slice. For shareable HTML/CSS card images or narrated card MP4 videos (`voxflow card render`) use voxflow:card.
-
whit3rabbit Bundle Rabbit ReadsDistill a book, paper, or thesis into a folder of terse per-concept cheatsheets with a README index. Use whenever the user asks to "read this PDF and turn it into a doc set", "extract the practices from this book", wants "chapter summaries", "cheatsheets" or "best-practice cards", asks for "craft notes from a novel" or "the claims and methods out of an arxiv paper", or says "make study notes from this thesis". Covers normalizing any source format to text (txt, md, docx, pdf, doc, rtf, html, odt, epub), mapping the source's structure to section line ranges, planning the doc set, fanning the writing out to subagents, and verifying the result, cut by concept and never one file per chapter.
-
wiiiimm Skill Glass GlAdd real WebGL "liquid glass" to a web UI with the glass-gl engine — any DOM element refracts a background (image / canvas / video) like a physical glass lens: bend, magnify, frost, edge-light, and chromatic edge fringe, not just a backdrop-filter blur. Use when the user wants Apple-style "liquid glass", refraction / lens effects, glass cards/panels/tiles over a photo or video, or asks for glass-gl by name. Do NOT use for frosted glass over live scrolling page content — that's CSS backdrop-filter, not this.
-
ww-w-ai Bundle Usage ViewKnow exactly what you spent (Claude Code) or how much of your Codex limit you have used (Codex). Interactive HTML dashboard with token usage and, on Claude Code, cost breakdown and 5-hour window timeline across all sessions
-
x-gengroup Skill Ff DebugDebug Flow-Factory crashes, hangs, OOMs, numerical failures, finite-loader errors, component routing, distributed preparation, optimizer roles, and checkpoint/resume mismatches. Use for bug fixing or unexpected training behavior.
-
x-gengroup Skill Ff DevelopDevelop or refactor Flow-Factory features with cross-module impact analysis across execution contracts, typed data/model I/O, component loading, prepared bundles, rewards, variants, optimizers, distributed backends, and checkpoints.
-
x-gengroup Skill Ff New ModelAdd a Flow-Factory model adapter, including component runtime, model I/O, online trajectory, offline output-state, distributed loading, checkpointing, registry, examples, and parity verification.
-
iannuttall Skill Telegramtelegram-specific inline directives you embed in your response text to react, reply-to, or control streaming. NOT a CLI tool - these are magic strings that get parsed out of your telegram response.
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 web-motion-auditor, remotion-video-agent, site-motion-excellence-director. 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.