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.
-
sugarforever Bundle YourwebsUse when the user wants to publish, host, or share a self-contained HTML page or artifact on yourweb (yourwebs.cc) — getting a public URL — or to list, fetch, update, or delete their hosted pages via the yourweb REST API.
-
sunfmin Bundle FiletransferDownload files from URLs — and whole Hugging Face repos/models — using aria2: resumable, multi-connection (fast on big files), concurrent, with a live progress window (AriaNg in the browser). Use this INSTEAD OF `curl -O` / `wget` / `huggingface-cli download` / `hf download` whenever the goal is to SAVE A FILE to disk — a release asset, tarball/zip, dataset, model weights, ISO, image, audio, or video, and especially anything large or slow. For Hugging Face use `filetransfer hf <repo>`: it fetches the whole repo by default, handles Xet-backed files, is idempotent (skips complete, resumes partial, refreshes expired signed URLs), self-heals errored transfers, and auto-verifies sha256 on completion. Big downloads auto-open a progress window; the download keeps running after the command returns, after the window is closed, and after the session ends. Do NOT use it for fetching API JSON/HTML to stdout or a pipe — keep using curl for that.
-
sunfmin Bundle Full Stack Screenshot TestingUse when reviewing or iterating on frontend UI with real backend data. Use when needing visual screenshots of admin pages, dashboards, or detail views backed by a real database and API — zero mocks. Use when the UI needs design review with realistic data across multiple states (happy path, error, empty, edge cases). Triggers on "screenshot the page", "render with real data", "visual review", "design check with real backend".
-
sunfmin Skill Go React AppFull-stack development constitution for Go+React projects. Covers OpenAPI-first design (ogen for Go, orval for React), integration testing with real PostgreSQL (no mocks), Playwright E2E testing against real backend APIs, service layer architecture with builder pattern, test-first development workflow, Playwright E2E infrastructure setup with AI-friendly reporter, and go-bus for async jobs and pub/sub messaging. Use this skill whenever working on a Go+React full-stack project, writing Go integration tests, implementing ogen handlers, setting up orval code generation, writing or fixing Playwright E2E tests against a real backend, designing service architecture with dependency injection, following OpenAPI-first API development, setting up Playwright in a new or existing project, configuring E2E test infrastructure, creating test helpers and AI reporters, implementing async jobs, background workers, pub/sub messaging, event-driven architecture, or when the user mentions project constitution, schema-first design,
-
sunfmin Skill Macos CodesignSet up a self-signed code signing certificate for macOS app development so that TCC permissions (Screen Recording, Microphone, Accessibility) persist across rebuilds. Use this skill whenever working on a macOS app that needs persistent permissions, setting up code signing for local development, fixing "permission revoked after rebuild" issues, or when the user mentions TCC permissions, ad-hoc signing problems, CODE_SIGN_IDENTITY, self-signed certificate, codesign, or persistent macOS permissions for development builds.
-
sunfmin Skill Render UI TestRender project UI to PNG from a TEST — not a script, main(), or one-off exec method — with least code, by mocking data at the LOWEST seam so every real project code path runs. Builds a reusable render-glue helper for future tests. Use when asked to render or screenshot a component/page/view to an image, set up snapshot/visual tests, or "see what the UI looks like" without launching the app.
-
supermap Bundle Supermap Iclient Mapboxgl Skills生成 SuperMap iClient for MapboxGL 代码片段和完整 HTML 示例,覆盖地图加载、图层管理、数据查询、空间分析、MapboxGL API 用法等场景,以及 iServer REST 服务、GeoJSON、WMTS/WMS、矢量瓦片等数据源接入。
-
superyhee Bundle Hypr Video CLIGenerates MP4 videos from canvasState JSON via CLI. Builds canvasState JSON with elements, animations, transitions, keyframes, captions, and effects, then renders with `npx hypr-video-cli`. Activates when creating videos, promos, clips, or animations from descriptions; composing video/image/text/shape/audio elements on a timeline; building canvasState JSON; rendering MP4. Triggers: "make a video", "create a promo", "render MP4", "product launch video", "social media clip", "animated text", "tutorial intro", "video from JSON", "social media reel". Does NOT handle frontend UI code, MobX store editing, or React component development.
-
susiecmy Bundle Vue Vben CrudGenerate complete CRUD module code in Vue Vben Admin projects, including pages, forms, tables, and API interfaces. Must use this Skill when users say "generate CRUD", "create module", "add page", "write CRUD", "generate table page", "create xxx management", "generate xxx module". Do not skip even if the task seems simple. Do not generate code directly. All questions about component usage must be answered by reading the corresponding component documentation first, never from memory.
-
sva-admin Bundle High End Visual DesignMake a site or app UI look like an expensive agency built it instead of like default AI output. Locks a design contract (type, color, spacing, depth, motion) before any component is written, builds against house rules, then audits the result against the visual tells that mark a page as machine-made. Trigger on "make it look expensive", "high-end design", "premium UI", "agency-grade", "this looks generic", "it looks AI-generated", "make this look designed", or on any frontend build or redesign where visual quality is the point.
-
snapsynapse Bundle A11Y AuditRun deterministic accessibility audits and regression gates on web projects, especially large sites with many routes and shared templates. Combines axe-core and optional Lighthouse with template-aware sampling, stable finding fingerprints, accepted baselines, standards evidence mapping (WCAG 2.1 AA default, WCAG 2.2 AA, EN 301 549), manual check guidance, and structured reporting. Output is configurable: markdown report only, markdown plus machine-readable JSON, or markdown plus issue tracker integration. Use this skill whenever the user mentions "accessibility audit", "a11y audit", "WCAG audit", "accessibility check", "compliance scan", "accessibility baseline", "new accessibility regressions", or asks to check a web project for accessibility issues. Also trigger when the user wants evidence for WCAG conformance review or mapping to a specific standard (WCAG 2.2, EN 301 549 / European Accessibility Act, CAN-ASC-6.2, ADA/AODA).
-
snowyowlmia Bundle Persona CompassBuild personality models of colleagues, clients, friends, or family members and get AI-powered communication strategies. Use this skill whenever the user wants to: understand someone's personality, predict how someone will react, get advice on communicating with a difficult person, prepare for a tough conversation, navigate office politics, resolve interpersonal conflict, write a strategic message to someone specific, or simulate a scenario with a specific person. Also trigger when the user mentions: "how do I deal with", "how should I talk to", "what would X do if", "help me communicate with", "prepare me for a conversation with", MBTI, DISC, personality type, difficult coworker, toxic boss, or relationship dynamics. Supports both English and Chinese (中英双语). 职场读心术,AI 帮你搞定难搞的人。
-
soapboxbuild Skill Gresb MCPAccess GRESB Real Estate Assessment data via API — retrieve entity scores, management and performance component breakdown, benchmark against peer groups, query indicator-level responses, and submit survey data. Use when asked about GRESB scores, ESG benchmarking, peer comparison, assessment preparation, or programmatic GRESB data submission. Requires GRESB Official Partner API key.
-
software-mansion Skill Gesture Handler 3 MigrationMigrates files containing React Native components which use the React Native Gesture Handler 2 API to Gesture Handler 3.
-
solana-foundation Bundle ConnectorkitSolana wallet connection library with headless core and React UI components. Use when working with @solana/connector, ConnectorKit, Solana wallet connection, wallet standard integration, ConnectorClient, wallet elements, render props, useWallet, useConnectWallet, useBalance, useTransactionSigner, WalletListElement, AccountElement, BalanceElement, TransactionHistoryElement, migrating from @solana/wallet-adapter, remote signer, server-side signing, Fireblocks Solana, Privy Solana, or mobile wallet adapter integration.
-
solanabr Bundle Auditor Skill**AUDIT SKILL** — Comprehensive on-chain Solana program auditor and full-stack security review for ANY programming language. USE FOR: auditing Solana/Anchor programs, reviewing smart contract security, checking for vulnerabilities (missing signers, unchecked accounts, arithmetic overflow, CPI attacks, PDA confusion, type cosplay, reinitialization, flash loan exploits, MEV, governance backdoors, timelock bypass), auditing TypeScript/Python/Go/Java/Ruby/PHP/any language, backend/frontend code review, supply chain safety, operational security (multisig, upgrade authority, deploy process), formal verification and testing quality, logging/monitoring/incident response, data privacy/GDPR/SOC2 compliance, change management, penetration testing methodology, AI/ML security, generating audit reports, running full repository audits. Severity 1-10 scale, 20 micro-checklist domains with 1413 individual verification items, plus 136 known attack vectors, chunked file-by-file execution, item-by-item verdicts. Benchmarked agai
-
songsummer920-dazzle Bundle Three Scope MapBuild, migrate, theme, drill down, and validate reusable Three.js 3D geographic maps and Earth View entrances for Vue or web dashboards. Use when Codex is asked to create or modify a pure Three.js globe, province-level, all-China, or world 3D maps; transition from an Earth View into the existing China map; switch map boundaries between provinces, country scope, world scope, city scope, or district scope; add hierarchical drilldown from world to country, China to province, province to city, city to district/county; replace GeoJSON, labels, scatter points, fly lines, terrain textures, or chase-light paths; derive a whole map color system from one theme color; or preserve an existing dark HUD-style 3D map visual across new regions.
-
sortweste Bundle React Hook Form Zod ShadcnBuild forms in React. Use when the user needs to build or refactor forms in React.
-
soulchildtc Bundle Wxmp Workflow微信公众号全流程工作流 — 从发现灵感、撰写文章到创建草稿。 覆盖选题策划、竞品分析、文章撰写、HTML 排版、API 创建草稿、数据统计全链路。 个人订阅号无认证时发布会引导用户去后台手动操作。 Use when: "公众号", "写文章", "发文", "选题", "涨粉", "内容运营", "草稿箱", "帮我写篇公众号", "最近公众号没什么灵感", "公众号文章", "发布到公众号". Proactively suggest when the user mentions writing articles, content creation, or WeChat Official Account related tasks.
-
spatie Bundle Laravel Dashboard DevelopmentBuild custom dashboard tiles for spatie/laravel-dashboard v4 using Livewire 4, Tailwind CSS 4, and CSS Grid
-
spatie Skill Laravel PDFGenerate PDFs from Blade views or HTML using spatie/laravel-pdf. Covers creating, formatting, saving, downloading, and testing PDFs with the Browsershot, Cloudflare, or DOMPDF driver.
-
spellsaif Bundle RikaiTurn any codebase into a deeply interactive, single-page HTML learning experience for vibe coders — people who build with AI but want to understand what they built. Trigger whenever someone says "explain this codebase," "help me understand this project," "make a course from this repo," "teach me how this code works," "I want to understand the architecture," "turn this into something I can learn from," or shares a GitHub link and wants to understand it. Also trigger when someone says they feel lost in their own project, wants to debug more effectively, or wants to steer AI coding tools better. Rikai (理解, Japanese for "understanding") produces a single HTML file — no setup, no dependencies beyond Google Fonts — that teaches the codebase through storytelling, animated flows, interactive quizzes, and side-by-side code/English panels.
-
spillwavesolutions Bundle Creating Zola Static SitesBuild static sites with the Zola generator (Rust-based SSG). Handles project initialization, config.toml configuration, Tera templates, Markdown content (sections via _index.md, pages via *.md), taxonomies, image processing, and deployment. Use for Zola project setup, Tera templating, _index.md structure, RSS/Atom feeds, syntax highlighting, or deployment to Netlify/Cloudflare/GitHub Pages/Vercel/Firebase. Also covers Zola+Astro hybrid architectures.
-
srinitude Bundle QuestionnaireUse when the user wants a guided decision questionnaire, setup interview, plan stress-test, structured intake, or docs-aware decision workflow. Creates a run-scoped browser-ready questionnaire frontend plus state, transcript, glossary, research notes, and ADR artifacts while asking one firm, evidence-aware question at a time.
-
stackblitz Skill SlidesBuild a premium PRESENTED slide deck — classic one-slide-at-a-time slides you advance with a clicker — as a Vite + React app. It keeps the Slidev navigation UI (floating glass dock + thumbnail rail + click-builds + presenter) but slides are RESPONSIVE React (reflow to any screen, no fixed canvas) and fully interactive. Use this for a deck you'll PRESENT (talk over, projector, screen-share) when you want web interactivity and responsiveness without Slidev's constraints. The repo IS the running app (Vite + React) — you install it in place, theme the tokens, and AUTHOR an original deck from the user's real topic/brand.
-
start9labs Bundle Start9 FrontendStart9 house style for every Angular + Taiga UI web frontend (StartOS ui/setup-wizard, StartWRT, StartTunnel, brochure-marketplace, start9-store, ops-server, support-server). Use BEFORE writing or reviewing any frontend code in these apps — components, templates, styles/CSS, forms, dialogs/toasts, routing, state, DI, i18n — and when bootstrapping a new Start9 web UI or upgrading Angular/Taiga. Includes doctrine, recipes, an antipattern catalog distilled from the fleet's refactor history, and a verified Taiga 5 API reference.
-
startrail-org Skill PixelbrowseScreenshot and visually read any web page or document using pixelshot. Use instead of fetching raw HTML when you need to see what a page looks like, read visual content (charts, diagrams, infographics), check layouts, or verify UI. Triggers: "look at this page", "screenshot", "what does this site look like", "check the UI", "read this visually", "view this URL", viewing web content.
-
memorax-ai Bundle Use Dsh HarmonyInstall and operate dsh-harmony, choose between Source, Semantic, Loader, React-aware, and Studio Patches, author Patch provider plugins, inspect transformed runtime source, control order and enablement, and troubleshoot failed or incompatible Patches. Use when an agent is asked to install Harmony, modify DeepSeek Harness Host or WebUI plugins without forks, create, review, or debug Harmony providers, integrate dsh-harmony-react or Studio previews, or diagnose Harmony status, ordering, reload, version, selector, or profile issues.
-
metyatech Bundle Code Quality SetupUse when setting up or configuring code quality tools (formatters, linters, type checkers, dependency scanners) for a repository. Also use when adding visual accessibility automation or security baseline scanning. Do not use for general coding or when tools are already configured.
-
metyatech Bundle Guided Gui DesignUse when designing or reviewing a user-facing GUI and the goal is to reduce first-use cognitive load, clarify the primary path, improve discoverability and feedback, prevent errors, ensure accessibility, and ground decisions in established HCI and usability theory.
-
mguozhen Bundle Review AnalyzerReview Analyzer — agent-callable e-commerce review intelligence. Input an ASIN or drag in a CSV; get sentiment + pain points + selling points + listing optimization + a black-gold HTML dashboard. Backed by Shulex VOC OpenAPI (10 markets) for Amazon ASINs, accepts any review CSV/Excel for other platforms. 6 MCP tools, agent-native. Triggers: review analysis, voc, amazon review, asin analysis, listing optimization, pain points, selling points, review insights, amazon fba, helium10 alternative, product research, review dashboard, csv review
-
mhdcodes Bundle Practical React QueryComprehensive guide to React Query (TanStack Query) covering data fetching, caching, mutations, error handling, TypeScript, testing, and advanced patterns. Use when working with React Query, TanStack Query, or async state management in React applications.
-
mianbaofang Bundle Exam Revision HandbookCreate source-backed GCSE, IGCSE, A-Level, and College Board AP revision handbooks from official AQA, Edexcel, CAIE, and College Board sources. Use when acquiring a syllabus, decomposing requirements into atomic teaching points, writing worked examples, planning or reviewing educational visuals, rendering a handbook, reviewing HTML, or exporting an approved PDF. Do not use for unsupported curricula unless the user accepts the experimental manual-import boundary.
-
michaelliv Bundle MarkitConvert files and URLs to Markdown. Supports PDF, DOCX, PPTX, XLSX, HTML, EPUB, CSV, JSON, GitHub URLs, images, audio, ZIP, and more. Use when you need to extract content from any document format.
-
mickeyalton33 Bundle Web 3d MasterUse when the user explicitly requests 3D web development, Three.js, WebGL, React Three Fiber, Spline integration, GLSL shaders, particle systems, or immersive 3D web experiences. Activated by invoking the skill directly -- NOT auto-triggered on general frontend tasks.
-
mickeyalton33 Bundle Web DesignerUse when the user explicitly requests award-winning, creative, or designer-quality web design. Activated by invoking the skill directly -- NOT auto-triggered on general frontend tasks. Use when the user says "use web-designer", "design mode", "make it look amazing", "designer quality", or references this plugin by name.
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 yourwebs, filetransfer, full-stack-screenshot-testing. 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.