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.
-
clowlove Bundle Testing Accessibility Auditor 2专注无障碍审核的可访问性专家,按 WCAG 标准审查界面、用辅助技术实测、确保产品人人可用。默认立场是找问题——没用屏幕阅读器测过的,就不算无障碍。
-
clowlove Bundle Engineering Frontend Developer 2精通现代 Web 技术、React/Vue/Angular 框架、UI 实现和性能优化的前端开发专家
-
dingxingdi Bundle Multimodal Page Grounding 3Use this skill when the user wants tasks where the page layout, screenshot, specific visual position, layout adjacency in tables, or physical drag-and-drop motions actually matter. Trigger it for requests like “make it rely on what’s visible on the page,” “extract the data from this complex table layout,” “buttons and layout should dictate the choice,” or “force the agent to navigate based on spatial coordinates.” It is the right skill for browser tasks where perception must combine HTML-like structure with visual grounding to execute continuous mouse events or parse complex semi-structured layouts (like grids or key-value structures).
-
dingxingdi Bundle Prompt Injection Resistance 3Use this skill when the user wants to synthesize web-based prompt injection attacks that test if an agent can be 'hijacked' by malicious instructions hidden in a webpage's HTML or content. Trigger it for requests like 'don't let the website trick the agent,' 'test if hidden code can change the task,' 'make sure the page doesn't override previous orders,' or 'check if the agent falls for fake system messages in the page.' It is specifically designed to create 'Environmental Injection Attacks' (EIA) where the threat is embedded in the web data the agent perceives rather than the user's initial prompt.
-
dingxingdi Bundle Visual Front End Bug Resolution 2Use this skill when the user wants front-end or visual bug-fix data where the question depends on screenshots, diagrams, UI appearance, layout, styling, or rendered interaction behavior. Trigger it for requests like 'give me UI bugs with images', 'make website fixes that need looking at the screenshot', 'generate front-end tasks with CSS or rendering issues', or 'create visual JavaScript bug-fix data'. Do not use it for purely backend repository issues, general software debugging without visual evidence, or security-only vulnerabilities.
-
team-telnyx Bundle Telnyx Meeting Bot 2Use when an agent must join, observe, react in, transcribe, summarize, or follow up on a Zoom, Google Meet, Microsoft Teams, or Webex meeting with Telnyx Meeting Bot. Handles vague requests, request-specific live polling, name/phrase and semantic triggers, explicitly authorized speak/chat actions, recovery, and all implemented transcript artifact types.
-
nvidia Bundle Nemo Retriever 2Use when the user wants to search, query, extract, transcribe, describe, quote, filter, or aggregate across documents — PDFs, scanned forms / images (`.jpg` `.png` `.tiff`), Office (`.docx` `.pptx`), text (`.html` `.txt`), audio (`.mp3` `.wav` `.m4a`), or video (`.mp4` `.mov`). Prefer this over native Read / Grep for multi-file or non-PDF corpora. Not for: editing files, web browsing, single-file plain-text lookups, fine-tuning.
2.2k -
nvidia Bundle Nemotron Customize 2Plan, configure, and chain repo-native Nemotron customization steps into single-step or multi-step pipelines: curation, translation, SFT/PEFT (AutoModel or Megatron-Bridge), pretraining/CPT, RL alignment (DPO/RLVR/GRPO/RLHF), BYOB/MCQ benchmarks, checkpoint conversion, ModelOpt optimization, env profiles, and evaluation of trained checkpoints or existing/hosted endpoints. Use when a request names a Nemotron step or workflow, or asks to clean, translate, train, fine-tune, align, convert, optimize, evaluate, or compose these into a pipeline. Do NOT use for frontend/dashboard/visualization work, generic ML advice, billing/access, or non-Nemotron coding tasks.
2.2k -
nvidia Bundle Dynamo Troubleshoot 2Diagnose failed or unhealthy Dynamo deployments. Use when pods, model-cache jobs, PVCs, workers, frontend/router health, endpoints, or benchmark jobs fail; use recipe-runner/router-starter before this for normal bring-up.
2.2k -
brycewang-stanford Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
1k -
brycewang-stanford Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
1k -
qte77-claude-code-utils Bundle Testing Typescript 2Writes tests following TDD (using vitest and @testing-library/react) best practices. Use when writing unit tests, integration tests, or component tests in TypeScript.
-
qte77-claude-code-utils Bundle Reviewing Typescript 2Provides concise, focused TypeScript/React code reviews matching exact task complexity requirements. Use when reviewing TypeScript code quality, type safety, or when the user asks for code review.
-
team-telnyx Bundle Telnyx Webrtc Client React Native 2Build cross-platform VoIP calling apps with React Native using Telnyx Voice SDK. High-level reactive API with automatic lifecycle management, CallKit/ConnectionService integration, and push notifications. Use for mobile VoIP apps with minimal setup.
-
knownasnaffy Bundle Geo Metrics Tracker 2Real-time GEO metrics monitoring and alerting orchestrator. Use this skill whenever the user wants to track, visualize, and react to AI GEO performance metrics over time — especially AIGVR (AI-generated visibility rate), SoM (Share of Model), AI citation volume, and related indicators across ChatGPT, Perplexity, Gemini, Claude, SGE, and other generative engines. Prefer this skill whenever the request goes beyond a static report and instead focuses on ongoing dashboards, time-series tracking, anomaly detection (sudden spikes/drops), or building an internal “GEO metrics command center.” It is designed to complement `geo-report-builder` by turning one-off analyses into a continuous monitoring system.
0 -
knownasnaffy Bundle D3js Visualization 2Build deterministic, verifiable data visualizations with D3.js (v6). Generate standalone HTML/SVG (and optional PNG) from local data files without external network dependencies. Use when tasks require charts, plots, axes/scales, legends, tooltips, or data-driven SVG output.
0 -
qte77-claude-code-utils Bundle Implementing Typescript 2Implements concise, streamlined TypeScript/React code matching exact architect specifications. Use when writing TypeScript code, creating modules, or when the user asks to implement features in TypeScript/React.
-
qte77-claude-code-utils Bundle Auditing Website Accessibility 2Audits website accessibility for WCAG 2.2 AA compliance, generating findings and code fixes. Use when reviewing accessibility, keyboard navigation, screen reader compatibility, or inclusive design.
-
alterlab-ieu Skill Alterlab Cdm Subtitle Loc 2This skill should be used when the user asks about "subtitles", "subtitling", "SRT file", "VTT file", "subtitle timing", "translation for film", "localization", "closed captions", "SDH", "act as a subtitle expert", "subtitle mode", "subtitle formatting", "subtitle translation", "accessibility captions", "subtitle synchronization", "burned-in subtitles", or needs expertise in SRT/VTT creation, subtitle timing, translation adaptation, and accessibility for film and video. Part of the AlterLab FC Skills collection (Cinema & Digital Media department).
60 -
ftshare-lab Bundle Etf Component Details 2查询 ETF 成分证券明细(etf_component_details)。用户问 ETF 成分股明细、申赎清单成分证券、成分数量、现金替代标志、必须/禁止现金替代、ETF PCF 成分明细时使用。
-
ahang1598 Bundle Fullstack Dev 2Full-stack backend architecture and frontend-backend integration guide. TRIGGER when: building a full-stack app, creating REST API with frontend, scaffolding backend service, building todo app, building CRUD app, building real-time app, building chat app, Express + React, Next.js API, Node.js backend, Python backend, Go backend, designing service layers, implementing error handling, managing config/auth, setting up API clients, implementing auth flows, handling file uploads, adding real-time features (SSE/WebSocket), hardening for production. DO NOT TRIGGER when: pure frontend UI work, pure CSS/styling, database schema only.
9 -
ahang1598 Bundle Markitdown 2Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
9 -
ahang1598 Skill Trend Researcher 2Research latest UI/UX trends from Dribbble and design communities. Use when starting a design project to understand current visual trends, color palettes, and layout patterns.
9 -
ahang1598 Skill Moodboard Creator 2Create visual moodboards from collected inspiration with iterative refinement. Use after trend research or website analysis to synthesize design direction before implementation.
9 -
concertonotes Bundle Email 2Email sending integration guidance — Resend (native Vercel Marketplace) with React Email templates. Covers API setup, transactional emails, domain verification, and template patterns. Use when sending emails from a Vercel-deployed application.
0 -
concertonotes Bundle Shadcn 2Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
0 -
nvidia-tao Bundle Tao Finetune Cosmos Reason 2Shared Cosmos3 frontend that explicitly routes Cosmos Framework and Cosmos-RL, validates runtime model/video-dataset/SLURM inputs, consumes an SQSH or packaged backend image, optionally plans explicit clean source builds, prepares checkpoints, validates the first update in-process, and returns token-weighted losses and task-aware accuracy.
-
nvidia-tao Bundle Tao Analyze Gaps Visual Changenet 2Performs gap analysis on NVIDIA TAO VCN Classify (Visual Component Net) experiments by invoking the pinned TAO data-services container directly via `docker run … gap_analysis vcn_aoi …` — picks the optimal decision threshold, ranks per-sample weakness, and emits a top-K weakest parquet expanded per-lighting for downstream augmentation. Use when analyzing VCN classification failures, picking SDA augmentation targets, or auditing PASS/NO_PASS boundary cases.
-
ab-aswini Skill Tailwind Patterns 2Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
-
wahidyankf Bundle Swe Developing Frontend UI 2UI development skill covering design token usage, shadcn/ui + Radix composition patterns, accessibility requirements, anti-patterns catalog, and brand context for OrganicLever and OSE Platform. Auto-loads when working on TSX components, CSS, or UI design tasks.
-
wahidyankf Bundle Docs Applying Content Quality 2Universal markdown content quality standards for active voice, heading hierarchy, accessibility compliance (alt text, WCAG AA contrast, screen reader support), and professional formatting. Essential for all markdown content creation across docs/, web sites, plans/, and repository files. Auto-loads when creating or editing markdown content.
-
wahidyankf Bundle Apps Ose Www Developing Content 2Guide for creating content on ose-web Next.js 16 content platform. Covers English-only landing page structure, update posts with date-prefixed filenames, markdown frontmatter (title, date, tags, summary, showtoc), simple flat organization, and ose-web specific conventions. Essential for ose-web content creation tasks
-
wahidyankf Bundle Apps Ayokoding Www Developing Content 2Guide for creating content on ayokoding-web, a Next.js 16 fullstack content platform (ayokoding-web). Covers bilingual content strategy (default English), tRPC API, content workflow, and ayokoding-web specific patterns. Essential for content creation tasks on ayokoding-web
-
wahidyankf Bundle Apps Organiclever Www Developing Content 2Guide for developing organiclever-www, the OrganicLever life journal at www.organiclever.com. Covers feature-context architecture, PGlite local-first storage, Effect TS, XState, Next.js 16 App Router, and Vercel deployment. Essential for development tasks on organiclever-www.
-
zhaog100 Bundle API Tester 2REST API testing and validation toolkit. Send requests, validate responses, benchmark performance, generate HTML reports. Use when the user wants to: (1) Test a REST API endpoint, (2) Validate API responses against expectations, (3) Benchmark API endpoint performance, (4) Test all endpoints from an OpenAPI/Swagger spec, (5) Generate API test reports, (6) Debug HTTP responses including status codes, headers, and bodies.
-
elsolal Bundle Remotion 2Remotion — video creation in React. Best practices, rendering, animations, audio sync, and ElevenLabs voiceover pipeline. Use when creating videos programmatically, building motion graphics, animating React components to video, working with Remotion compositions, or when the user mentions Remotion, video generation, motion design, animation to video, React video, programmatic video, voiceover sync.
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 testing-accessibility-auditor, engineering-frontend-developer, multimodal page grounding. 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.