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.
-
andrs-projects Bundle Dashboard RefreshCreate or refresh the Claude Capabilities Dashboard. Scans agents, skills, hooks, and MCP servers from the live system and writes both the .md source and the styled HTML file. Works on first run (no existing files) or as an update.
-
asachit Bundle Ask GeminiUse when you want to delegate or parallelize UI/UX design work — redesign, critique, fix, craft, enhance a frontend — to another model while you keep working; when you want a cross-model second opinion on a design, layout, component architecture, or system decision; when the user says "ask gemini" / "use gemini" / "gemini this" or names Gemini; or when the user asks for design/UI/UX feedback or validation even without naming Gemini.
-
aaryan-kapoor Bundle SurfaceSurface-native display for AI agents, driven by the `surface` CLI. Use when the user says "surface this", "show me X", or "put it on my display/screen"; wants a live interactive UI, chart, or tool they act on; needs a question answerable from any device; or asks you to react to what they click — even while you're offline.
-
akhileshthykkat Bundle Pixel PortPixel-port an executable Claude Design (or local design-ref HTML/CSS/JS) into a production site using a temple file tree, CSS design tokens, a plan gate, and a pixelmatch visual-diff. Use when the user wants a pixel port, to port a Claude Design page, to run visual-diff on a ported page, or to foundation-port tokens and primitives from a design kit.
-
ambitos-1995 Bundle Jaws AccessibilityAccessibility engineering for web products with JAWS/NVDA testing and Spain/EU compliance scoping. Use for WCAG 2.2 implementation, ARIA and keyboard/focus behavior, screen-reader regressions, audits, remediation plans, or web-accessibility scope checks under Ley 11/2023, RD 1112/2018, RD 193/2023, the EAA, and EN 301 549. Do NOT use for native mobile apps, PDF accessibility, or non-web content.
-
amir-abushanab Bundle Modern Frontend ArchitectureUse when starting, scaffolding, or reviewing the architecture of a web frontend, or making any frontend architecture decision — framework/stack choice, client-server data, state management, routing/URL state, styling and design systems, i18n/RTL, server-side logging/observability, or deploy target. Triggers on new web-app setup, "which library/framework should I use", data fetching and mutations, global vs local state, component and design-system design, internationalization, and Cloudflare/self-host/Vercel deploy questions.
-
anionex Bundle Vision SkillsLocal vision CLIs: glance (describe/ask/OCR an image), ground (locate a target, pixel box), detect (element inventory), trace (image to SVG geometry), crop (cut a pixel box to a file), and scripts/html_shot.py (HTML file to image). Use for any task involving an image — questions, text, splitting and transcribing long screenshots or chat histories, locating elements, comparing, rebuilding as HTML/SVG, digitizing a sketch or diagram, reading values off a chart, operating a GUI from screenshots — and to re-check an image yourself when a description you were given lacks a detail.
-
antreasantoniou Bundle Beautiful PDFProduce polished, print-ready PDFs from Markdown or HTML with Pandoc, WeasyPrint, reusable CSS, and a mandatory rendered-page review loop. Use for reports, proposals, briefs, CVs, invoices, letters, dossiers, and other documents where layout quality matters.
-
antreasantoniou Bundle Visual QAReview a rendered interface with an isolated committee of orthogonal visual experts. Use for UI audits, responsive and theme checks, edge-state coverage, screenshot-based accessibility review, adversarial finding validation, and optional fix-and-recapture loops.
-
arkpln Bundle Better React SkillsUse before you execute and edit any codes related to React Framework and developing ecosystem.
-
asmadey Bundle Aeo RuНавык оптимизации под поисковые AI-системы: Answer Engine Optimization (AEO) и Generative Engine Optimization (GEO) — запуск, аудит, оптимизация и мониторинг цифровых ресурсов для доминирования в ответах нейросетей (ChatGPT Instant, ChatGPT Thinking, Perplexity, Google AI Overviews, Gemini, Claude). Реализует полный Playbook V2 (140+ техник на базе 247 исследований SearchEngineLand): 4 независимых канала видимости, механика кэша чтения Markdown у OpenAI (стрипинг JSON-LD и выживание alt-текста), заголовки до 289 символов для labrador, архитектура 117-словных атомарных пассажей, мультимодальное GEO изображений (патент Google на Image-First matching), оптимизация Accessibility Tree для AI-агентов (Atlas, WebMCP, Playwright), привязка бренда против Ghost Citations, 85% след в сторонних источниках (Reddit, YouTube), 56-дневный baseline GSC с матрицей Keep/Fix/Remove/Add, отслеживание Dark Funnel в GA4 (#:~:text=), стандарт llms.txt и непрерывный 4-статусный мониторинг. 100% Python stdlib.
-
asmadey Bundle AeoAnswer Engine Optimization (AEO) & Generative Engine Optimization (GEO) skill — launch, audit, optimize, and track digital properties to dominate AI answers (ChatGPT Instant, ChatGPT Thinking, Perplexity, Google AI Overviews, Gemini, Claude). Implements the complete Playbook V2 (SearchEngineLand 140+ techniques): 4 independent visibility channels, OpenAI Markdown Reading Cache mechanics (JSON-LD stripping & image-alt survival), 289-char labrador titles, 117-word atomic passage architecture, multimodal image GEO (Google image-first matching patent), Accessibility Tree optimization for AI agents (Atlas/WebMCP), anti-ghost citation brand binding, 85% third-party earned footprint, 56-day GSC Keep/Fix/Remove/Add refresh framework, Dark Funnel GA4 text fragment tracking (#:~:text=), llms.txt standard, and continuous 4-state citation monitoring. 100% stdlib-only Python engines.
-
badhansen Bundle Explain CodeExplain source code using structured text explanations and Excalidraw diagrams. Use this skill when users ask to visualize code, explain code architecture, create class diagrams, flow diagrams, ER diagrams, feature diagrams, component diagrams, sequence diagrams, or any software engineering visualization from source code. Also use when documenting codebases, understanding complex logic, debugging workflows, or creating technical documentation. Outputs `.excalidraw` JSON files editable at excalidraw.com or embeddable via @excalidraw/excalidraw npm package.
-
bansheetech Skill BorderlineDelegate mechanical, boring, low-risk tasks to the Antigravity CLI (agy) where it is just as reliable as Claude: bulk translations and i18n, trivial CSS/color/style changes, repetitive renames and replacements across many files, boilerplate, formatting and simple copy rewrites. Use it when the task is monotonous, its correctness is verifiable at a glance, and being wrong is cheap. Do NOT use it for business logic, architecture decisions, security, ambiguous requirements, or changes where a mistake is costly.
Audited -
benoshantonybenoy Bundle Repo GraphicsGenerate README hero banners, GitHub social preview cards, feature grids, architecture diagrams, terminal demos, comparison tables and roadmaps as standalone HTML+SVG that match the project's own brand. Use when the user asks to improve a README, make a repo look professional, create a social preview or OG image, design a banner or header for a project, visualise an architecture or pipeline, or says their README looks plain, dated, or like a wall of text.
-
big-rangefinder838 Bundle VisualizeRender rich interactive visuals — SVG diagrams, HTML widgets, Chart.js charts, interactive explainers — directly inline in chat using the render_visualization tool. Use whenever the user asks to visualize, diagram, chart, draw, map out, or illustrate something, or when a topic has spatial, sequential, or systemic relationships a diagram would clarify better than prose. Also use proactively for data comparisons, metrics, architecture, processes, or mechanisms that benefit from a visual.
-
bobbyyue Bundle 3080 BriefCreate a new source-grounded decision brief in the source format by default (Feishu/Lark, Word/docx, Markdown, or self-contained HTML) with a reader-fit Pyramid opening, one editable or auditable visual covering at least 80% of value-weighted non-appendix claims, and one key-question table. Use when the user names 3080-brief, 3080 brief, 3080skill, 读者视角总结, 3080总结, 3080summary, or 3080-onepager, or asks for a new reader-perspective/cross-functional decision brief with both a 30-second takeaway and one-picture summary. Do not use for editing or polishing the source in place, a generic summary with no 3080/reader/visual requirement, or standalone whiteboard styling. Never modify the source; source-back every number, conclusion, risk, and action.
-
bobbyyue Bundle Reader SeatCreate, rewrite, restructure, diagnose, or compare reader-ready internet-industry work documents while preserving facts, scope, evidence, uncertainty, and author voice. Use whenever the user wants a substantive document written or revised from the reader's perspective or made reader-friendly, including requests to reduce reading effort, help first-time or cross-functional readers understand without guessing, surface what readers need to know, judge, or do, or better match content to its audience. Also use for clearer, easier-to-scan, less AI-sounding, or more decision-ready news briefs, technical proposals, product documents, business updates, analysis reports, and SOPs. Finished documents default to self-contained HTML unless the user specifies Feishu/Lark, Markdown, Word, plain text, or another format. Do not use for short workplace-message polishing (use hit-send), source-to-one-page 3080 visual briefs (use 3080-brief), or purely visual styling.
-
tomevault-io Bundle Hula SkillHuLa project skill for frontend (Vue 3 + Vite + UnoCSS + Naive UI/Vant), backend (Tauri v2 + Rust + SeaORM/SQLite), full-stack flows, and build/release work. Use when the user mentions hula or HuLa or requests changes in this repository; after triggering, ask which scope (frontend/backend/fullstack/build-release) to enable. Use when this capability is needed.
-
tomevault-io Bundle IOS Simulator Skill22 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output. Use when this capability is needed.
-
tomevault-io Bundle TtsText-to-speech on macOS -- make the device speak text aloud. Use for voice announcements, reading content aloud, or accessibility. Use when this capability is needed.
-
tomevault-io Bundle BlazorBlazor component patterns for interactive web UIs. Use when this capability is needed.
-
tomevault-io Bundle ToxyUse this skill whenever the user wants to extract text or data from documents using Toxy (the .NET text extraction library). Trigger when the user mentions reading, parsing, or extracting content from files like docx, xlsx, xls, pdf, csv, txt, epub, html, eml, vcf using C# or .NET. Also trigger when the user asks about Toxy NuGet package, ToxyDocument, ToxySpreadsheet, ToxyEmail, stream parsing, or any Toxy API usage. Use this skill for any Toxy 2.6 code generation, migration from older Toxy versions, or troubleshooting Toxy parsers.
-
tomevault-io Bundle Ofajs DocsComplete documentation knowledge base for ofa.js framework. Use when users ask about ofa.js usage, component development, page modules, routing configuration, state management, or want to build Web applications without Node.js/Webpack. Use when this capability is needed.
-
tomevault-io Bundle Olore React Native Skia 2 2 12Local react-native-skia documentation reference (2.2.12). React Native Skia documentation. Use for high-performance 2D graphics, shaders, animations, canvas rendering, image filters, path effects, and Skia API in React Native. Use when this capability is needed.
-
tomevault-io Bundle VibeTalos-class comprehensive code validation. Use for "validate code", "run vibe", "check quality", "security review", "architecture review", "accessibility audit", "complexity check", or any validation need. One skill to validate them all. Use when this capability is needed.
-
tomevault-io Bundle Convex Component AuthoringHow to create, structure, and publish self-contained Convex components with proper isolation, exports, and dependency management Use when this capability is needed.
-
tomevault-io Bundle Tailwind CSSStyling components with Tailwind CSS v4, using the project design tokens and utility classes. Use when this capability is needed.
-
tomevault-io Bundle Run TestUse when user asks to run tests, run qunit, execute unit tests, test this module, test this change, find test URL, test Button/Router/Table/Dialog/MessageBox/Input/Control, locate .qunit.html, search testsuite, can't find test file, where is qunit test, how to run UI5 module test, or needs test-resources URL for OpenUI5 modules
-
tomevault-io Bundle Tanstack Stack AuthorityProvides directives for building with TypeScript 5.9, React 19.2, and the full TanStack ecosystem (Start, Router, Query, Form, Table, DB). Use this when scaffolding new modules or enforcing architectural standards.
-
tomevault-io Bundle Reka UIUse when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
-
tomevault-io Bundle Chrome Devtools DebuggingBrowser debugging with Chrome DevTools MCP. Use for UI issues, unexpected API requests, wrong payloads, UI debugging, network request inspection, console errors, page snapshots, browser automation, UI validation testing, CSS layout debugging, or visual regression testing. Use when this capability is needed.
-
tomevault-io Bundle Orpc Contract FirstGuide for implementing oRPC contract-first API patterns in Dify frontend. Triggers when creating new API contracts, adding service endpoints, integrating TanStack Query with typed contracts, or migrating legacy service calls to oRPC. Use for all API layer work in web/contract and web/service directories. Use when this capability is needed.
-
tomevault-io Bundle BriefAccount dossier and call prep document rendered as a scannable HTML reference page for internal use. Use when user says "brief me on [company]", "account dossier", "call prep doc", "background on [person]", or asks for an internal reference document. Do NOT use for customer-facing documents — use /octave:one-pager or /octave:proposal instead. Use when this capability is needed.
-
tomevault-io Bundle Olore Nextjs 16 1 1Local Next.js documentation reference (v16.1.1). Use when asked about Next.js features, App Router, Server Components, routing, data fetching, rendering, caching, styling, optimizations, configuration, or Next.js APIs. Use when this capability is needed.
-
tomevault-io Bundle Olore Nextjs 16 1 4Local Next.js documentation reference (v16.1.4). Use when asked about Next.js features, App Router, Server Components, routing, data fetching, rendering, caching, styling, optimizations, configuration, or Next.js APIs. Use when this capability is needed.
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 dashboard-refresh, ask-gemini, surface. 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.