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.
-
metamask Skill Setup Solana React AppSet up a React app with @metamask/connect-solana and the Solana wallet adapter. Use when integrating MetaMask with Solana in React, configuring WalletProvider, or building connect/sign/send flows with useWallet.
-
metamask Skill Send Solana TransactionBuild and send a Solana transaction using MetaMask Connect. Covers both the React wallet-adapter approach (sendTransaction) and the vanilla browser approach (signAndSendTransaction wallet-standard feature).
-
metamask Skill Setup Solana Browser AppSet up a vanilla browser (non-React) app with @metamask/connect-solana using wallet-standard features directly. Use when integrating MetaMask Solana without a framework or wallet adapter library.
-
metamask Skill Setup Evm React Native AppScaffold a React Native app with MetaMask EVM integration including required polyfills, metro.config.js shims, import order constraints, mobile deeplinks, and a full component example
-
metamask Skill Setup Solana React Native AppSet up a React Native app with @metamask/connect-solana using polyfills and multichain invokeMethod for Solana operations. Use when building Solana support in React Native where wallet-adapter is not available.
-
oscal-compass-lab Skill Trestle Oscal ModelsUse this skill for OSCAL model types, their relationships, and how Compliance Trestle manages them. Use it for OSCAL documents, model types, catalogs, profiles, SSPs, and component definitions. Use it when users ask how compliance models relate to each other.
-
oscal-compass-lab Skill Trestle Authoring WorkflowUse this skill for the Compliance Trestle authoring workflow. The workflow is the generate-edit-assemble cycle that converts OSCAL documents to markdown and back. Use it for authoring catalogs, profiles, SSPs, or component definitions. Use it for editing control markdown, YAML headers, or the roundtrip workflow between JSON and markdown.
-
oscal-compass-lab Bundle Trestle Compliance PipelineUse this skill for end-to-end compliance pipelines with Compliance Trestle. Topics include GRC personas, artifact ownership, multi-repository coordination, two-phase component definition authoring, CI/CD pipeline integration, and the Compliance-to-Policy (C2P) bridge. Use it for compliance pipelines, personas, artifact ownership, multi-repo workflows, component definition dual-mapping (control-to-rule, rule-to-check), C2P, or end-to-end workflow design.
-
oscal-compass-lab Skill Trestle Control ImplementationUse this skill to write control implementation responses, rules, parameters, and component-level responses. Use it for inheritance and leveraged SSPs in Compliance Trestle. Use it for control responses, implementation status, rules, parameters, component definitions, SSP implementation details, or compliance documentation content.
-
oscal-compass-lab Bundle Compliance Trestle EngineeringUse Compliance Trestle to manage OSCAL catalogs, profiles, component definitions, SSPs, markdown assembly, validation, and source-traceable updates from legacy compliance documents.
-
pale-knight Bundle PhishingClient-side initial access and social-engineering attack module. Use when the operator selects a human/client/browser/identity-delivery attack direction: ClickFix/FileFix, AiTM session phishing, OAuth device-code or consent abuse, Teams/helpdesk social engineering, HTML/file delivery, QR/mobile handoff, legacy HTA/OLE/Office paths. This is an Attack module: own the chain until host shell or remote interactive foothold. Credential/token/session are intermediate results, not the stop condition. If endpoint AV/EDR/AMSI/application-control blocks an otherwise-valid client execution path, the operator may temporarily select /edr-bypass and then resume this phishing chain until shell.
-
pavelsimo Bundle MarkdownConverts files to Markdown using uvx markitdown, supporting PDF, Word, PowerPoint, Excel, HTML, images with OCR, audio with transcription, ZIP archives, and YouTube URLs. Use when the user wants to convert a file or URL to Markdown.
-
pavelsimo Bundle Create HTMLTransforms documents into polished self-contained HTML by reading Markdown/text directly, converting other supported inputs with uvx markitdown, selecting from 20 purpose-built templates, and generating the output.
-
pranav8494 Skill Frontend DesignerUse when building UI components, designing layouts, writing CSS, working with React or other frontend frameworks, improving accessibility, optimizing web performance, or any task involving the visual and interactive layer of a web application.
-
pranav8494 Skill Frontend Code ReviewerUse when reviewing a frontend diff, pull request, or code snippet for correctness, React patterns, TypeScript strictness, accessibility violations, performance regressions, CSS architecture, and test quality. Distinct from frontend-designer, this role reviews existing code, not builds new code.
-
renatoasse Skill ResendSend emails through Resend's official MCP server. Supports single send, batch send, HTML and plain text bodies, attachments, CC/BCC, scheduling, and contact management.
-
renatoasse Skill Image CreatorRenders HTML/CSS into production-ready images via Playwright. Accepts complete HTML content, opens it in a headless browser at the specified viewport, and captures a pixel-perfect screenshot. Generic engine -- any visual format is defined by the HTML template.
-
irfad7 Skill Batch ModeWhen the user needs to perform the same operation across multiple files, components, or entities. Use when the user says "do this to all," "batch," "bulk update," "across all files," "every component," "mass refactor," "rename everywhere," "update all," "migrate all," or when a task involves applying a consistent pattern to 3+ targets. Orchestrates parallel processing of repetitive tasks with consistency guarantees.
-
polarsource Skill Add LocaleAdd a new translation locale to the Polar frontend. Walks through registering the locale, generating translations, wiring the generated file into the i18n package, and updating the public-facing docs. Expects the target locale's ISO 639-1 alpha-2 code (optionally with a BCP-47 region suffix, e.g. `pt-PT`).
-
polarsource Skill Reuse CheckCheck a diff for code that reinvents something Polar already has — a kit helper, a shared Pydantic type, a repository method, an Orbit component, an existing model property. Use before opening a PR, when reviewing a diff, or when the user asks whether a new helper, validator, type or utility already exists in the codebase.
Audited -
revylai Bundle Revyl CLI Auth BypassSet up test-only auth bypass for Revyl runs across Expo, React Native, native iOS, native Android, and Flutter apps.
-
dachent Bundle Document HandoffCreate a comprehensive project archive and handoff package — curated workfolder copy, evidence and state, agent context, and dark-mode HTML memo — from Claude Code or Codex projects. Use for milestone archives, cold-start continuation packages, or comprehensive handoffs; use a lightweight session-handoff skill for a short continuation note.
-
dachent Bundle Frontend Design CodexUse when Codex is building, revising, or reviewing a frontend UI, web app screen, responsive layout, component surface, dashboard view, form flow, visual system, or no-template product interface that needs visual polish, accessibility, screenshots, or browser QA.
-
dachent Bundle Web Artifacts Builder CodexUse when Codex needs to create, run, package, revise, or verify a standalone web artifact such as an HTML report, dashboard, microsite, interactive explainer, data story, or browser-delivered deliverable with runtime, screenshots, console capture, and evidence packaging.
-
hathach Skill Build DocUse when building, previewing, or testing the TinyUSB Sphinx docs locally (docs/ → HTML), chasing Sphinx warnings, understanding how example READMEs get into the docs, or regenerating the auto-generated reference files after adding a board, a dependency, or a HIL rig board (boards.rst, dependencies.rst, hil_boards.md, BoardPresets.json, CMakePresets.json).
-
zmgid Skill DiagramVisualize architectures, flows, sequences, state machines, ER/data models, class structures, decision logic, mind maps, and timelines as rendered diagrams instead of prose. Activate whenever the user discusses or asks to explain a system architecture, module/deployment topology, call/request flow, interaction sequence, state machine or lifecycle, database/entity relationships, class structure, decision tree, or process — especially when they say draw / 画 / 图示 / 可视化 / 用图说明 / 画个流程图/架构图/时序图. Kivio renders mermaid code blocks inline as diagrams and html code blocks in a live preview, so emit those directly without calling any file tool.
-
desquared Skill Flutter Feature AnalysisUse when assessing feasibility or complexity of a new Flutter feature before implementation. Especially when evaluating API requirements, state management approach, UI component availability, native dependencies, or effort estimation.
-
deedlefake 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".
-
deeleeramone Skill ChatChat Component - Reference Guide
-
deeleeramone Skill EventsThe PyWry event system — namespaced events, request/response round-trips, widget IDs, component IDs, and how tool results flow back to the agent.
-
deeleeramone Skill CSS SelectorsCSS Selectors
-
deeleeramone Skill Component ReferencePyWry Component Reference - MANDATORY SYNTAX
-
devskale Bundle RodneyDrive a persistent headless Chrome from the CLI for web scraping, screenshots, form filling, PDF export, and accessibility audits — one long-running Chrome process keeps cookies, localStorage, and navigation state across calls. Use when the user wants to automate browser interactions, scrape JS-rendered pages, take screenshots, fill forms, export PDFs, or run browser smoke tests in CI. Triggers on: headless Chrome, browser automation, web scraping, page screenshot, form automation, accessibility audit, browser smoke test, rodney.
-
devskale Bundle VisualizeRender any set of things as ONE self-contained HTML document and give the user a URL — and generate polished HTML reports. Understands what you want (a codebase, modules, data, a plan, a comparison, an architecture, a set of items, or a structured report with findings), figures out the right structure, and builds a single portable HTML file — then opens it locally and optionally shares it to a short-lived URL via the throway store. Triggers on: visualize, make me a page, render this as HTML, show this as a diagram/page, turn this into a report, generate a report, give me a link to this, put it on a page.
-
eprouveze Bundle CrawlFetch web pages that may be JS-rendered or bot-protected, returning clean markdown or HTML. Works zero-setup with a direct HTTP fetch; if you supply your own Cloudflare Browser Rendering credentials it uses a managed headless browser that renders JS and bypasses most WAFs. Use when a plain fetch returns 403, when a page is a JS-rendered SPA, or when you need reliable markdown extraction from a URL. Triggers on 'crawl this page', 'fetch this URL', 'scrape this site', 'get the content from this page', 'this page is blocked', or when a normal fetch fails on a URL.
-
wmy2981 Bundle Send EmailUse when the user wants to send an email, email a file or document, send a message via email, forward information by email, or use HTML email templates. Trigger on any email-related request — including 'email this to...', 'forward this to...', 'send the report to...', 'attach this file and send'. Do NOT use for non-email communication like Slack or SMS.
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 setup-solana-react-native-app, visualize, send-solana-transaction. 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.