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.
-
antongulin Skill Dev Debug LogsUse when debugging a feature through `fusebase dev start`, or when you need to inspect browser logs, proxied API traffic, frontend dev server output, or backend output captured by the local CLI. Explains where logs are written and which file to inspect for each symptom. This is for LOCAL DEVELOPMENT only - for deployed apps, use the remote-logs skill instead.
-
antongulin Skill Feature RoutingGuide for implementing client-side routing in Fusebase Apps features. Use when: 1. Adding routing (React Router) to a feature, 2. Fixing broken routes or 404s after deployment, 3. Configuring the router.
-
arcjet Skill ProtectAdd Arcjet request protection to JavaScript and TypeScript HTTP handlers. Use when protecting Next.js, Express, Fastify, SvelteKit, Remix, Astro, Nuxt, Bun, Deno, NestJS, or Node.js routes with rate limiting, bot detection, Shield, email validation, or sensitive info detection.
Audited -
chrislamdev Skill Cocos Standalone Test🪷 Cocos Creator Standalone HTML 快速測試
-
chrislamdev Skill Cocos Scene JSON Component BindingCocos Scene JSON Component Binding
-
coderdoctor97 Bundle CSS Protipscss-protips
-
coderdoctor97 Bundle Frontend Buildfrontend-build
-
coderdoctor97 Bundle Accessibility Reviewaccessibility-review
-
cometchat Skill SetupSet up CometChat Calls SDK v5 for Android. Use when adding SDK dependencies, configuring Cloudsmith maven, CallAppSettings, init, permissions, or Jetifier. Triggers on "setup calls sdk", "add cometchat dependency", "initialize calls", "gradle setup".
-
cometchat Skill Custom UIBuild custom call UI — custom control panel, custom participant list, layout customization. Use when hiding default controls and building your own call interface. Triggers on "custom control panel", "custom participant list", "custom UI", "hideControlPanel", "custom call interface".
Audited -
cometchat Skill Join SessionJoin a CometChat call session using CometChatCalls.joinSession with SessionSettingsBuilder. Use when joining calls, configuring session settings, voice vs video calls, or generating tokens. Triggers on "join session", "join call", "start call", "SessionSettingsBuilder".
-
cometchat Skill Session SettingsConfigure all SessionSettingsBuilder options — layouts, session type, audio mode, hide buttons, idle timeout, recording, camera facing. Use when customizing call UI or pre-session config. Triggers on "SessionSettingsBuilder", "session settings", "hide button", "layout type", "audio mode", "idle timeout".
Audited -
cometchat Skill Migration V4 To V5Migrate an Android project from CometChat Calls SDK v4 to v5. Use when upgrading calls SDK version, replacing deprecated v4 APIs, migrating CallSettings to SessionSettings, replacing CometChatCallsEventsListener with v5 listeners, migrating startSession to joinSession, or adding CometChatCalls.login(). Triggers on "migrate calls sdk", "upgrade v4 to v5", "replace deprecated calls api", "CallSettings to SessionSettings", "migration guide".
-
cometchat Skill Picture In PictureEnable Picture-in-Picture mode for calls. Use when implementing PiP, floating call window, auto-PiP on home press, or PiP layout events. Triggers on "picture in picture", "PiP", "pip mode", "floating window".
Audited -
datarobot-oss Skill Datarobot Agent AssistUse when the user wants to design, build, code, simulate, or deploy an AI agent (not a predictive model) to DataRobot; mentions agent_spec.md, dr-assist, datarobot-agent-assist, dress rehearsal, swarm simulation, or the DataRobot agent template; wants to scaffold a LangGraph, CrewAI, LlamaIndex, NAT, or Base agent targeting DataRobot; wants to add an MCP server, backend API, or React frontend to a DataRobot agent application; or uses the DataRobot CLI (dr) to build or deploy an agentic custom application; or wants to harden, stress-test, or battle-test an agent. Covers the full workflow: agent design, agent_spec.md authoring, dress-rehearsal simulation via the DataRobot LLM Gateway, adversarial swarm simulation, template-based coding, and deployment.
-
discourse Bundle Discourse Admin UIUse when creating, modifying, or reviewing Discourse admin interfaces in core or plugins. Covers admin sidebar navigation, config pages, route/templates, DPageHeader breadcrumbs/tabs/actions, DPageSubheader, AdminConfigAreaCard, help insets, d-table responsive tables, empty states, third-level new/edit routes, filtered site setting pages, plugin admin UIs, translations, accessibility, and current in-repo examples.
-
discourse Skill Discourse Warpdrive ModelsUse when creating a new WarpDrive-backed frontend model, or when reading, using, or changing a model already converted to WarpDrive (anything under frontend/discourse/app/data or extending RestCompatModel/WarpRestModel)
-
discourse Skill Discourse Writing JS TestsWrite and structure JavaScript/QUnit tests for Discourse core, plugins, and themes. Use when creating or modifying unit tests (lib/utility/service/model), component rendering tests, integration tests, or acceptance tests. Covers module naming, setupTest/setupRenderingTest/setupApplicationTest, fixtures, the qunit-helpers toolbox, pretender, and qunit-dom assertions.
-
discourse Bundle Discourse Writing TypescriptWrite TypeScript for Discourse core, plugins, and themes. Use when authoring new .ts/.gts files (components, modifiers, helpers, services, utils), typing an existing public API, or converting existing .js/.gjs files to .ts/.gts. Covers the component/modifier/plain-class Signature patterns, TSDoc for Signatures, typing untyped dependencies, compile-time type tests, the strict-grade bar under the loose global tsconfig, and the faithful-port and rename pitfalls that the type-checker does NOT catch.
-
discourse Skill Discourse Frontend ConventionsConventions for Discourse frontend code, JavaScript and TypeScript alike (.js/.gjs/.ts/.gts), in core, plugins, and themes, and how they split between what bin/lint enforces and what needs judgment. Use when writing, reviewing, or preparing to commit class-based code or templates. Covers the private-symbols pattern (#, unprefixed, _), the within-bucket member ordering the linter leaves open, the lint-enforced member order, blank lines and banner rules, attribute/argument/modifier ordering on invocations, and the comment necessity gate.
-
pablostanley Skill Design EngineerActivate to translate designs into production components, responsive layouts, design tokens, and CSS/React code.
Audited -
pablostanley Skill Accessibility SpecialistActivate for accessibility audits, WCAG 2.1 AA compliance, contrast checks, keyboard navigation, screen reader testing, and inclusive design reviews.
Audited -
pramoddutta Bundle Feature ExplainerBuilds a two-part explainer page for a change that just shipped in this repo - a plain-language ELI5 walkthrough, plus an appended hand-drawn Excalidraw-style whiteboard diagram sized for a team standup. Use when the user says "eli5 this", "explain what we just built", "make an explainer page", "whiteboard diagram", "excalidraw diagram", "explain this feature to my team", or asks to document a change visually after it lands. Differentiator - this explains a real change in THIS codebase, reading the actual diff, and outputs one self-contained HTML file to the scratchpad that is never committed; sketch-diagram and diagram-architect instead render a standalone diagram image from an abstract topic.
-
proma-ai Skill In App BrowserProma 内嵌受管浏览器使用指南。当用户要求打开、展示、访问、浏览或操作网页,或提到小红书、X/Twitter、LinkedIn、BOSS 直聘、登录后站内搜索、动态页面、截图或本地 HTML/React 预览时使用。对邮件、消息、文档、项目管理等已有匹配专用 MCP/API/CLI 的服务,必须优先使用专用工具;仅在没有匹配工具、工具无法完成当前能力、网络搜索工具不可用或无法取得足够好的结果、或用户明确要求网页时改用 Browser。浏览器工具出现在当前工具列表时,必须先阅读本 Skill 再进行网页操作;不要因为工具直接可见就跳过。
-
proma-ai Bundle Guizang Ppt Skill生成横向翻页网页 PPT(单 HTML 文件),含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格:① "电子杂志 × 电子墨水"(衬线 + 流体背景 + 暖色) ② "瑞士国际主义"(无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮)。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
-
qualcomm Skill Sync DemosSync a documentation site's demos with its corresponding debug apps. Detects new, removed, or renamed demos and updates debug app component pages, barrel exports, routes, and home pages accordingly.
-
qualcomm Bundle Behavior Focused React TestingUse when writing, reviewing, or refactoring React component tests that must validate public behavior instead of implementation details, especially tests in packages/frameworks/react.
-
qualcomm Bundle React TestingUse when writing, reviewing, or refactoring React tests for application behavior, hooks, routes, state, or integration flows, especially when tests may assert implementation details instead of public outcomes.
-
qualcomm Bundle React Component TestingUse when writing, reviewing, or refactoring React component tests, especially tests for props, callbacks, controlled state, children, accessibility, form behavior, or multiple public component API variants.
-
qualcomm Bundle Angular Component TestingUse when writing, reviewing, or refactoring Angular component or directive tests, especially tests for inputs, outputs, host behavior, template probes, forms, accessibility, or signal-backed behavior.
-
qualcomm Bundle Apply Qui Component RulesUse when writing or modifying QUI React usage involving IconButton, InlineIconButton, HeaderBarActionIconButton, Avatar.Image, labels for TextInput/NumberInput/PasswordInput/Select/Combobox/Switch/Checkbox/Radio, interactive Card.Root, AlertBanner actions, Card.Root actions, HeaderBar.ActionBar, Menu.Trigger, or Select.Root checkbox indicators.
-
qualcomm Bundle Audit Qui Component RulesUse when reviewing or final-checking QUI React usage involving IconButton, InlineIconButton, HeaderBarActionIconButton, Avatar.Image, labels for TextInput/NumberInput/PasswordInput/Select/Combobox/Switch/Checkbox/Radio, interactive Card.Root, AlertBanner actions, Card.Root actions, HeaderBar.ActionBar, Menu.Trigger, or Select.Root checkbox indicators.
-
sefaertunc Skill Frontend Design SystemTerminal UI patterns: display.js visual system, Chalk styling, Ora spinners, Inquirer prompts, and CLI output conventions for worclaude
-
soapboxbuild Bundle Report PDFExport any Soapbox paged HTML report/deck template to a consulting-grade, print-paginated PDF. Use when the user asks to download / export / save a report or deck as PDF, wants a "PDF version", a print-ready or shareable file, or a leave-behind. Works across every template that renders from a <script id="report-data"> payload (rsra, decarb, portfolio-analysis, esg-profile/esg-fund-deck, crrem, retrofit, delivery-presentation, …). Produces US-Letter pages with a big cover header on page 1, a minimized running header on pages 2+, a footer with page numbers, and keep-together pagination so components never split or overflow.
-
soapboxbuild Bundle Helper FilesThe Soapbox working-file pattern shared by every deliverable-producing skill (Decarb Plan, Portfolio Analysis, Rehab Analysis, RSRA, …). Maintain exactly ONE growing, self-updating internal "helper" HTML per engagement — a utilitarian working companion (source-of-truth dashboard, open questions, adjudication log, per-phase/per-gate checklists) that absorbs all intermediate and gate material. It is NOT the deliverable: only the Report and the Delivery-Meeting Slides get the design-forward treatment, and only at their gate. Human gates are reviewed as checklist sections of the helper. Read this skill (by path) from any deliverable skill before creating or updating working artifacts. Triggers on: "helper file", "working file", "gate artifact", "scratchpad", "checklist", "source of truth doc", "where do I save this", "intermediate artifact", "working companion".
-
soapboxbuild Skill Portfolio IngestOnboard a client portfolio into app.soapbox.build end-to-end: create the org + portfolio, bulk-create assets from a register or helper-data drop, link Audette (including grouping ungrouped buildings into properties) and ESPM, and upload + index all source documents (PCAs, audits, surveys, reference data). Headless, agent-driven counterpart to the frontend "Add assets" wizard — use it for zip/ Taildrop batch drops, new-client onboarding, or any run too big or too scripted for the UI. Spec 1 of 2 — portfolio-analysis (Spec 2) runs after this. Triggers on: "onboard [client]", "create a soapbox account for", "portfolio onboarding workflow", "ingest the [client] portfolio", "run portfolio ingestion", "set up [client] in soapbox", a batch/zip of PCAs+audits with an asset register.
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 protect, css-protips, frontend-build. 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.