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.
-
neekolas Bundle Writing Design DocsUse when starting any feature, system change, or bugfix that requires architectural decisions — before writing implementation plans or code. Triggers on new projects, multi-component changes, API design, or when the user says "design", "spec", or "architecture".
-
neonwatty Skill New ComponentCreate a new React component: $ARGUMENTS
-
nginx Skill Verify VisuallyHow to actually look at this site — shot.sh, DOM measurement, and the four facts that make a correct render command look like it failed (hash-routed SPAs, dark by default, viewport-not-page capture, the 500px macOS clamp). Use after any CSS, markup or layout change.
-
ninjaproger Bundle IOS SimulatorAutomate iOS simulators: build, install, launch, terminate, set appearance (light/dark mode), and navigate (tap, swipe, scroll, type text, press keys, open URLs, press HOME/LOCK/SIRI) using idb and xcrun simctl. Use when asked to interact with an iOS app in the simulator, automate UI flows, run a navigation sequence, take screenshots, switch dark/light mode, or inspect the UI accessibility tree. All navigation commands use `idb ui describe-all` before and after each action to validate the current UI state and obtain exact tap coordinates.
-
nirholas Skill Setup ParallaxScaffold a complete CSS 3D parallax hero for MkDocs Material from scratch — home.html, home.css, and mkdocs.yml.
-
latitude-dev Bundle Latitude SetupZero-account onboarding orchestrator for Latitude. Bootstrap a temporary Latitude account from the terminal (no signup), instrument the app or agent harness (Claude Code, Hermes, OpenClaw, Pi, Prime Intellect) for tracing, verify real traces with the Latitude CLI, clean up, and hand back a browser link to claim ownership together with a first Artifact, an HTML page showing what the telemetry captured. Use when someone wants to set up Latitude, install Latitude telemetry, or "try Latitude" and may have no account or API key yet — the landing-page "try it with your agent" flow. If it turns out the user already has an account, API key, or connected Latitude MCP, this skill redirects to latitude-telemetry + latitude-cli instead of creating a temporary account.
-
latitude-dev Bundle Latitude ArtifactsBuild Latitude Artifacts, self-contained HTML reports and KPI dashboards rendered by the agent from Latitude observability data (traces, sessions, tools, users, memory, signals, cost) pulled through the Latitude MCP, CLI, API or SDKs. Use when someone asks for a report, dashboard, summary, KPI page, or "how is my agent doing" view of their Latitude data, wants a one-off answer rendered as a page, or wants a dashboard they can reopen every morning with fresh numbers. Guides the agent to ask short requirement questions when the ask is unclear, and renders every artifact in the shared Latitude design language with light and dark themes.
-
letsrevel Skill Whats NewDraft a "What's New" community update for the Revel Discord covering changes across backend, frontend, and infra over a time window. Use when the user runs /whats-new or asks for a community changelog/release-roundup post for organizers (and the programmers in the room).
-
level09 Bundle Stk DevBackground knowledge for stk async Quart framework development. Auto-loads when working on stk-based code: models, views, templates, database queries, auth patterns, Vue frontend. Provides conventions, patterns, and gotchas so Claude writes correct async Quart code instead of Flask patterns.
-
lgariv-dn Bundle Workflow Local DevSupport local workflow platform development in the DAP workspace across frontend, backend, and infra teams. Provides access to Kubernetes (Kind), Tilt service management, database queries, and troubleshooting. Use when building backend/API features, adjusting infra configurations, checking logs, running tests, or debugging issues against locally deployed workflow engine components.
-
lgariv-dn Bundle React Best PracticesReact performance optimization guidelines from Vercel Engineering. This skill should be used proactively when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, bundle optimization, or performance improvements.
-
lhohan Skill Modelling C4 DiagramsUse when creating, revising, or reviewing C4 architecture diagrams from a real codebase, especially when deciding system, container, and component boundaries or writing Structurizr DSL.
-
loocor Bundle ValidationUse this skill whenever MCPMate work needs test, lint, build, Inspector, or release-slice verification. Trigger on implementation, review, bug fixes, PR preparation, regression checks, or any request to validate backend, frontend, desktop, or MCP behavior before reporting completion.
-
loocor Bundle Uat AcceptanceUse this skill for MCPMate UI/UX review, UAT planning, Playwright acceptance, Admin Console acceptance, Board acceptance, Extension delivery acceptance, or any request to judge whether a page, flow, component, PR, or deliverable conforms to MCPMate product taste and acceptance standards. Use it even when the user does not say "UAT" if the task involves visual quality, interaction quality, acceptance criteria, release readiness, or product-facing workflow validation.
-
luochang212 Bundle HTML ReportCreate beautiful, self-contained single-file HTML reports, landing pages, and documents that are visual, interactive, and spatial. Use when the user wants to present information that would benefit from layout, color, diagrams, or interaction — such as project reports, product pages, architecture overviews, design documents, dashboards, slide decks, code review summaries, incident post-mortems, status reports, or any document where plain text would be too flat. Triggers include "create an HTML page", "make a report", "write a landing page", "build a dashboard", "present this information visually", or any request to communicate technical or business information in a polished, readable format.
-
luongnv89 Bundle Ag CoproIngest a French Assemblée Générale (AG) PDF and generate an interactive HTML report (Tailwind + Chart.js) with meeting info, résolutions, year-over-year budget, travaux progress, and a 5-point pre-vote briefing. Don't use for non-AG French docs (acte, bail), tax files, or non-French copropriété.
-
luongnv89 Bundle Taux Immo FrResearch French mortgage rates → offline weekly HTML market report: bank averages, scenario matrix, leading indicators, sourced forecasts. No personal data. Don't use for a personal capacity calc (use capacite-emprunt-fr) or non-France loans.
-
luongnv89 Bundle Appel De FondsAnalyze French syndic quarterly charge-call PDFs (appels de fonds), persist extracted charges as a local KB, and generate one beautiful anomaly-focused HTML report. Don't use for AG convocations, tax notices, bank statements, or non-copropriété PDFs.
-
lwouis Skill Coverage ExploreMeasure AltTab test coverage and record it as documentation. Runs the Test scheme with coverage into a throwaway result bundle, parses the per-file/region report, refreshes the per-feature badge atop each `*Specs.md` and the root `src/coverage.md` table, then suggests the highest-value missing tests. These two markdown outputs are the ONLY stored coverage — no lcov/html/xcresult is kept, and routine test runs don't gather coverage. Use to refresh coverage docs, find untested kernel branches, or decide what to test next.
-
lza6 Bundle Imagefree Workflow听风AI imagefree_api 项目开发工作流指南。涉及本仓库任何开发任务(改后端 api/、加提供商 providers/、改前端 frontend/src/、写测试 tests/、部署 deploy/)时先加载本技能,获取项目结构、开发/测试/部署流程与关键文件索引。Windows 环境,Python 3.11 + FastAPI + React。
-
piaoxuemoli Bundle Match SyncAutomatically fetch latest World Cup 2026 match information and results, then update the 世界杯预测.html file. Covers match schedule sync, result fetching, AI_ROUNDS updates, prize calculation, and leaderboard refresh.
-
pkulyn Bundle Feynman LearningAI辅助学习闭环助手。基于"学习阶梯→核心概念→苏格拉底提问→费曼检验→速查表"5阶段完整闭环, 帮助用户系统化掌握任何主题。阶段0/1/3/4的关键产出做成Apple极简风HTML卡片(浏览器打开查看), 阶段2苏格拉底式提问保持对话往返。资料来源优先用户提供,AI自动判断是否联网调研。 触发场景:提到"我想学X""帮我学X""从零开始学X""用费曼法掌握""苏格拉底式提问""考我" "学习阶梯""速查表""巩固知识""深度理解""主动回忆"。 即使用户泛泛提到"我想学X但不知道从哪开始""我刚读完想确保真懂了",也应触发此Skill。 不触发:单纯的总结提炼(违背主动提取原则)、写作/文稿创作(用gov-doc-writer)、 知识库管理(用llm-wiki)、纯问答咨询(除非明确想"系统掌握")。
-
qiniu Bundle Xfetch WebFetch and extract concrete web page URLs through Qiniu xfetch. Prefer Qiniu's path-style fetch API for markdown, JSON, or raw HTML extraction before other page-fetch methods.
-
quick-brown-foxxx Skill Qt Devtools App InteractionALWAYS LOAD THIS SKILL WHEN TESTING QT/PYSIDE UI, CLICKING BUTTONS, INSPECTING WIDGETS, OR TAKING SCREENSHOTS. Do not interact with Qt widgets directly — use this skill first. AT-SPI accessibility-based inspect-interact-verify workflow, widget tree navigation, screenshot validation. Core commands are beta.
-
raidenfc Skill HTML To Miniprogram将 HTML/React/Vue 等前端 Demo 页面转换为微信小程序原生开发项目。重点是转换前端页面和简单交互(页面跳转、提醒等),不涉及业务逻辑,数据集中在 mock.js 中管理。
-
rajedev Skill Android Weather Adaptive ThemingUse this skill whenever building or extending a weather app's UI where the visual theme (colors, icon, surface tint) should reflect the current weather condition — hot, sunny, rainy, cloudy, winter/snow, night, etc. Trigger on mentions of "weather theme", "dynamic weather colors", "mood-based UI", "condition-based background/theme", or when adding a new screen/component to an existing weather app that should stay visually consistent with the app's weather-driven theming. Also trigger when the request is to add a new weather mood/condition, a new screen that displays weather data, or a widget/component that should pick up the current theme. This is a UI/design-system skill scoped to one app's theming layer — pair with whatever Compose/architecture conventions the project already uses.
-
ratel-ai Bundle Ratel AssessmentRead a partner's agent codebase, score it across the 12-dimension catalog, and emit an evidence-cited markdown plus branded scored HTML report. Use for a first-touch audit: assess/review/audit our agent, where to improve, spot low-hanging fruit, an honest read of what's weak, what Ratel would notice, or `/ratel-assessment`. Static-only unless a live telemetry sample (any OTLP/OTel backend — Ratel, Langfuse, LangSmith) is MCP-wired; writes to <repo>/.ratel/ without editing code; routes into follow-up Ratel skills.
-
raychang Skill MarkitdownConvert files and URLs to Markdown using Microsoft's markitdown library via uvx (zero-install). This skill should be used when the user provides a file (PDF, DOCX, PPTX, XLSX, HTML, CSV, JSON, XML, EPUB, Jupyter notebook, audio, ZIP) or a URL (including YouTube, Wikipedia, RSS feeds) and wants its content converted to Markdown for context ingestion. Also triggers when the user explicitly asks to convert a file to Markdown, read a non-text document, extract content from a URL, batch convert documents, or do document analysis.
-
rcampos09 Bundle Performance Report AnalysisGuides engineers and QA professionals in interpreting performance test results, identifying bottlenecks, and producing two types of reports: a technical report (for engineers and QA) and a business report (for stakeholders and executives). Use this skill whenever the user shares load test results, CSV stats, HTML reports, percentile data, or test output from k6, Gatling, Locust, JMeter, Artillery, or any other tool — and wants to understand what the numbers mean, diagnose problems, or communicate findings. Trigger on phrases like "analyze my test results", "what do these numbers mean", "my p95 is high", "error rate under load", "write a performance report", "explain the results to my manager", "how do I present this to stakeholders", or "I found a bottleneck".
-
realraelrr Bundle Web PptCreate single-file horizontal HTML presentation decks with rich visual style. Use when the user asks for a web PPT, HTML slides, magazine-style deck, Swiss-style deck, horizontal swipe deck, or a shareable presentation that should open directly in a browser. Use office-pptx instead when the requested final artifact is a native PowerPoint .pptx file.
-
realraelrr Bundle Office PPTXRead, create, edit, or validate native PowerPoint .pptx presentations. Use when the user provides a PPTX file, asks for PowerPoint output, or needs template/XML-level PPTX editing. Use web-ppt instead for single-file HTML slide decks or magazine-style web presentations.
-
recca0120 Skill Hugo Theme StackProvides Hugo Stack theme configuration reference including sidebar, widgets, comments (Giscus), color scheme, article options, custom CSS, and Stack-specific shortcodes. Use when configuring or troubleshooting Stack theme settings.
-
joelhooks Bundle CoreCore Native SDK guide for AI agents. Read this before explaining the Native SDK or changing a Native SDK app. Covers the mental model (native-rendered apps by default, WebView shells as a coexisting architecture), project structure, app.zon, App and Runtime patterns, frontend integration, web engines, JavaScript bridge commands, permissions, windows, WebViews, dialogs, packaging, debugging, testing, and when to load deeper references. For authoring native-rendered UI (Native markup .native views, Model/Msg/update, UiApp), load the native-ui skill. Use when the user asks what the Native SDK is, how to build or modify an app, how to package or debug it, or how to add native capabilities.
-
joemccann Bundle GlimpseShow native macOS UI from scripts and agents — dialogs, forms, visualizations, floating widgets, cursor companions. Use when you need to display HTML to the user, collect input, show a chart, render markdown, or create any visual interaction without a browser.
-
joemccann Bundle Swiftui UI PatternsBest practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.
-
joeyave Bundle Golang Ddd InfrastructureSupport Go services by keeping infrastructure, security boundaries, and automated tests aligned with the application architecture. Use when working on Terraform, Cloud Run, Cloud Build or CI, docker-compose environments, integration or component test setup, repository authorization boundaries, service-to-service authentication, or secure internal operations.
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 writing-design-docs, new-component, verify-visually. 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.