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.
-
hyochan Bundle Android Audio E2eBuild and run device-backed Android end-to-end checks for react-native-nitro-sound permissions, recording, playback, listeners, pause/resume, seek, speed, audio focus, lifecycle behavior, and rapid switching. Use for Kotlin or Android regressions and runtime claims beyond a Gradle compile.
-
hyochan Bundle Simulator Audio E2eBuild and run repeatable react-native-nitro-sound recorder/player regression tests on an iOS Simulator or Android emulator, with explicit virtual-device selection, microphone permission, Maestro evidence, native log inspection, and cleanup. Use after dependency, Nitro, TypeScript, Swift, Kotlin, generated-binding, or audio state-machine changes when a physical device is not required.
-
hyochan Bundle Nitro Sound WorkflowsUse for react-native-nitro-sound repository work that should follow the project workflows for PR review, code audit, knowledge compilation, full verification, iOS or Android audio E2E, npm releases, issue resolution, dependency upgrades, commits, pushes, PRs, Nitro code generation, and native cross-platform checks.
-
iansteitz1-eng Bundle Doc To PDFRender a Markdown or HTML document into a clean, branded, multi-page PDF via headless Chrome — the polished deliverable you'd hand a client, not a screenshot. Brand wrap (print-CSS + footer) is on by default; --no-brand for raw; --template for a custom shell. Never overwrites without --force. Use when the user says "make a PDF", "turn this into a PDF", "PDF this", "send them a PDF", "build a client doc", "export to PDF", "branded PDF".
-
jasonkneen Bundle Building GamesBuild browser games and interactive/canvas/3D experiences in this TanStack Start + React app. Use for any game, simulation, or WebGL/Canvas experience — 2D or 3D, single-player. Covers the game loop & timing, 3D orientation/camera conventions, collision, performance, assets, audio, save, game feel, and per-genre playbooks. For WASD / vehicle / flight **input signs and inverted A/D**, open the **`controls`** skill — do not rely on this file or racing-kart alone. Triggers on "game", "minecraft", "fps", "platformer", "racing", "tetris", "snake", "shooter", "3d", "three.js", "canvas", "voxel", "physics".
-
julianoczkowski Skill Pm Use ScenariosWrite Pragmatic Institute use scenarios — short stories that put a market problem in context from the persona's point of view (a component of requirements). Use when the PM asks for "use scenarios", "a day in the life", "user story context", "problem statements", or needs to reframe a feature request as a real problem so development understands the WHAT (not the HOW). Produces a Use Scenarios document as a Markdown or Word .docx artifact.
-
kangwang42 Skill Project Frontend Dev专用于本 Quarto 项目的前端开发指南,涵盖样式定制、布局调整与交互优化
-
keli-wen Skill Long HorizonExecute a spec'd goal in one long autonomous run — hours of agent work pushing a whole acceptance ledger, with humans only at the two gates, spec before and review after. Use for /long-horizon, "make this a long-horizon goal", "run this across sessions", or when resuming work in a repo that already has a `.long-horizon/` workspace. Admission is interactive and iterative; the run is fan-out-driven and side-effect-bounded by an authorization envelope; progress is evidence-gated; a live report.html shows the ledger as a DAG.
-
desquared Skill IOS Accessibility ValidatorChecks and suggests accessibility improvements for SwiftUI and UIKit code including VoiceOver, Dynamic Type, color contrast, motion, and input methods. Use when creating or modifying UI components, views, or when the user asks about accessibility.
-
desquared Skill Android Accessibility ValidatorChecks and suggests accessibility improvements for Jetpack Compose and Android Views including TalkBack labels, dynamic text support, and color contrast. Use when creating or modifying UI components, screens, or when the user asks about accessibility.
-
desquared Skill Flutter Accessibility ValidatorUse when creating or modifying Flutter UI components, screens, or widgets, or when the user asks about accessibility, screen reader support, VoiceOver, TalkBack, touch targets, color contrast, or WCAG compliance in a Flutter app.
-
openonion Bundle Browser Workflow Skill BuilderCreate robust browser automation skills for sites like LinkedIn, X/Twitter, YouTube, Stripe, or other logged-in web apps by saving page context, analyzing HTML/CSS, writing skill-local JS extract/verify scripts, and using CSS selector actions with screenshot verification.
Audited -
yelban Bundle Baoyu Post To WechatPosts content to WeChat Official Account (微信公眾號) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text posting (貼圖, formerly 圖文) with multiple images. Markdown article workflows default to converting ordinary external links into bottom citations for WeChat-friendly output. Use when user mentions "釋出公眾號", "post to wechat", "微信公眾號", or "貼圖/圖文/文章".
-
yelban Bundle Baoyu Markdown To HTMLConverts Markdown to styled HTML with WeChat-compatible themes. Supports code highlighting, math, Mermaid (rendered to PNG via headless Chrome), PlantUML, footnotes, alerts, infographics, and optional bottom citations for external links. Use when user asks for "markdown to html", "convert md to html", "md 轉 html", "微信外鏈轉底部引用", or needs styled HTML output from markdown.
-
fairy123456789 Bundle Voice Dump To TodoConvert a long, messy, repetitive, speech-recognition-heavy task dump into a precise executable to-do list. Use when the user speaks tasks in inaccurate ASR language, changes priorities mid-sentence, mixes ideas with actions, or wants a downloadable standalone interactive HTML to-do that can be saved or dragged to the desktop. Use context-aware named-entity repair when a recurring term is clearly misrecognized, preserve uncertain corrections, and produce concrete definitions of done.
Audited -
yosukeiida Bundle Math Study Note研究の数理(測定設計・定理・手法の破れ)を、本人や共同研究者が数式を追って理解できる 学習用ノートに落とすスキル。md か 図解 HTML(KaTeX + HTML/CSS 図)の**どちらか1本**で作る。 既存ノートに散在した数式を「何を測りたいか → なぜ素朴には測れないか → だからこの測り方になる」 の一本の筋に再構成し、記号の層を最初に分離する構成を取る。 以下で起動: 「数理をまとめて」「学習用ノートを作って」「この式の筋を通して」 「何を測っているのか分からなくなった」「解説ノートにして」「study note を作って」 ※分野全体の教材群を生成するのは research-study-guide が担当。本 skill は 単一トピックの数理を1本のノートに凝縮する場合に使う。 ※原稿の文章推敲や論文本体の執筆は対象外(別の執筆系 skill が担当)。
-
yosukeiida Bundle Grant Figure AssetsCreate reusable monochrome figure assets for Japanese academic grant proposals such as JSPS DC1. Use when Codex needs to generate an overview/reference figure or icon set with imagegen, save raw PNGs, tight-crop them by bounding box, make contact sheets, or prepare black-and-white assets for HTML/CSS/SVG reconstruction of proposal figures.
-
anilburcu Skill Monorepo MetroReference for running React Native and Expo apps inside monorepos. Use when a workspace app fails with Invalid hook call or duplicate react-native, when Metro cannot resolve workspace packages, when EAS builds fail only in the monorepo, or when deciding hoisting and lockfile strategy.
Audited -
anilburcu Skill New Arch CheckAudit this project's dependencies for React Native New Architecture compatibility and maintenance status. Use when the user asks whether their libraries support the New Architecture or which dependencies are risky.
-
anilburcu Skill Rn PerformanceReference for diagnosing and fixing React Native performance problems. Use when the app has slow lists, janky animations, slow startup, excessive re-renders, or when the user asks why the app feels sluggish. Covers FlashList, Reanimated, image handling, startup cost and profiling.
-
anilburcu Skill Expo Sdk UpgradeReference for upgrading Expo SDK and React Native versions safely. Use when the user wants to upgrade Expo SDK, bump react-native, or asks why the app broke after an upgrade. Covers upgrade order, dependency alignment, expo-doctor, config plugin churn and OTA update pitfalls.
-
anilburcu Bundle In App PurchasesReference for in-app purchases and subscriptions in React Native apps, with RevenueCat as the integration layer. Use when implementing paywalls or subscriptions, when sandbox purchases behave strangely, when premium status does not arrive after purchase, when webhooks need verification, or when restore and transfer flows are being designed.
-
anilburcu Skill New ArchitectureReference for React Native New Architecture (Fabric, TurboModules, bridgeless) compatibility work. Use when a library breaks under the New Architecture, when deciding whether to enable or disable newArchEnabled, or when errors mention codegen, Fabric, ViewPropTypes or requireNativeComponent.
Audited -
anilburcu Skill Patching LibrariesReference for patching, forking or replacing broken third-party libraries in React Native projects. Use when a dependency has a bug with no released fix, when deciding between patch-package and forking, when patches break after an upgrade, or when an abandoned library blocks progress.
Audited -
anilburcu Skill Push NotificationsReference for push notification setup and debugging in React Native and Expo apps. Use when notifications do not arrive, when setting up FCM or APNs credentials, when DeviceNotRegistered or InvalidCredentials errors appear, or when foreground notifications, Android channels or scheduled notifications misbehave.
-
anilburcu Skill Native Build ErrorsReference for diagnosing failed iOS and Android builds in React Native projects. Use when a build fails with pod install errors, Gradle errors, Xcode errors, linker errors, or when the user pastes native build output. Covers CocoaPods, Gradle, Kotlin, JDK, codegen and cache problems.
Audited -
anilburcu Bundle Supabase Mobile AuthReference for Supabase auth and data access in React Native apps. Use when implementing Apple or Google sign-in with Supabase, when sessions drop or fail to refresh, when deep links for auth are involved, when RLS policies block mobile queries, or when Supabase requests hang on slow networks.
-
impertio-studio Bundle Thatopen Syntax UIUse when building BIM user interfaces with ThatOpen UI components, creating panels, toolbars, or property displays. Prevents missing BUI.Manager.init() and incorrect component usage. Covers @thatopen/ui web components (bim-panel, bim-toolbar, bim-table, bim-grid, bim-button, inputs), CSS theming, @thatopen/ui-obc functional components, Lit web component patterns. Keywords: ui, panel, toolbar, table, grid, button, bim-panel, lit, web components, theming, css custom properties, ui-obc, create sidebar, add toolbar, custom BIM interface.
-
impertio-studio Bundle Thatopen Core ArchitectureUse when creating a ThatOpen BIM application, understanding the component system, or reasoning about the ThatOpen architecture. Prevents direct component instantiation instead of using components.get(). Covers Components container, Component base class, lifecycle interfaces, World system, package split (core vs front), Event system, DataMap/DataSet. Keywords: thatopen, components, world, scene, renderer, camera, lifecycle, disposable, updateable, configurable, bim, architecture, how ThatOpen works, component system, project structure.
-
impertio-studio Bundle Thatopen Syntax ComponentsUse when accessing ThatOpen components, implementing custom components, or working with the component lifecycle and event system. Prevents direct instantiation of components instead of using get(). Covers components.get() singleton pattern, component registration, lifecycle interface implementation, Event system, DataMap, DataSet reactive collections. Keywords: components, get, singleton, uuid, lifecycle, event, datamap, dataset, disposable, updateable, configurable, component api, how to use components, register component.
-
impertio-studio Bundle Thatopen Agents Viewer BuilderUse when scaffolding a complete ThatOpen BIM viewer application from scratch, including project setup, package installation, and working code. Prevents incomplete project setup and missing dependencies. Covers end-to-end viewer creation: Vite project setup, npm dependencies, HTML container, TypeScript viewer code, IFC loading, highlighting, toolbar and panel UI, complete working application. Keywords: scaffold, project, setup, viewer, create, new, app, vite, template, starter, boilerplate, complete, how to start, new IFC viewer project, quick setup, getting started.
-
maybemonad Bundle Implementation Plan ReviewImplementation planning workflow focused on the decisions most likely to change before coding starts. Use when the user asks for an implementation plan, plan in HTML, review the plan before implementation, focus on data models, type interfaces, UX flows, architecture choices, validation gates, or wants to reduce rework before touching code.
-
thearmagan Skill No AI Design ClichesAvoid the default visual choices that make a web UI look AI-generated, and make intentional ones instead. Use this WHENEVER you build or style a web page, component, landing page, or app screen with CSS or a UI framework. The purple-to-blue diagonal gradient, glassmorphism cards everywhere, a centered hero with an emoji and two gradient buttons, neon glow on dark, and default system-font-only type are the look that signals "a model designed this". Replace each default with a deliberate choice about type, color, spacing, and layout that fits the actual product.
-
thearmagan Skill Use The Design SystemIf the project already has a UI system, use it before building anything new. Use this WHENEVER you add or change UI in an existing codebase: a button, modal, form, card, page, or any component. Look first for the project's component library, design tokens, theme, and utility setup (a components or ui folder, shadcn/ui, MUI, Chakra, Mantine, Radix, a Tailwind config, CSS variables), and build with those. Reinventing a button from scratch when the project has one creates inconsistency and duplicate work. Only hand-roll a component when nothing in the system fits, and then match the system's conventions so it belongs.
-
traigent Bundle Traigent Optimize Composite KnobsDeclare and run Traigent composite knobs: cascades, routers, ensembles, self-consistency, best-of-n, self-refine, self-debug, ReAct tool loops, verification gates, mixture-of-experts, and fallback patterns. Use when choosing a catalog pattern, assessing whether cheap-to-strong routing or escalation is fit for a task, defining a comparator or gate signal, calibrating thresholds, wiring StageRunner/LoopBodyRunner execution, merging composite telemetry into metrics, or explaining calibration-backed claim scope.
-
abhinavbwj Bundle Mobility And TransportComprehensive mobility and transport planning for urban design including trip generation, mode split targets, street network connectivity, transit planning, cycling network design, pedestrian accessibility, freight and servicing strategy, parking demand management, and traffic impact assessment. Use when the user asks about transport planning, trip generation, mode split, traffic impact, transit catchment, cycling network, pedestrian access, freight servicing, mobility hubs, first-last mile, level of service, vehicle-km traveled, or any movement and accessibility question beyond individual street cross-section design. Also use for transport demand management (TDM), multimodal integration, or mobility frameworks for masterplan transport chapters.
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 voice-dump-to-todo, native-build-errors, patching-libraries. 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.