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.
-
smirnovalex-qa Skill En 19Accessibility (a11y) audit of a web interface against WCAG 2.1/2.2 (levels A and AA) — scope from a feature/screen/directory/branch, a requirements document, or a tracker issue; checking by the POUR principles (Perceivable/Operable/Understandable/Robust) with a mandatory LIVE run in the browser (keyboard, focus, aria, contrast, screen reader), not just reading the code. Every finding is tied to a WCAG success criterion, the affected user group, file:line, and a concrete scenario, with an explicit conformance verdict. Use when asked to check the accessibility of a page/component, do an a11y audit, assess WCAG conformance, verify accessibility for screen readers or keyboard, or sort out contrast/focus/aria/semantics/alt text/landmarks/modals — even without the word "audit", e.g. "is this usable for blind people", "does this work without a mouse", "why doesn't the screen reader read this button", "does this pass WCAG AA", "is the contrast okay here". The skill only analyzes and saves a report file; it does not c
-
smirnovalex-qa Skill Ru 19Аудит доступности (a11y) веб-интерфейса по WCAG 2.1/2.2 (уровни A и AA) — периметр из фичи/экрана/директории/ветки, документа-требований или issue в трекере; проверка по принципам POUR (Perceivable/Operable/Understandable/Robust) с обязательным ЖИВЫМ прогоном в браузере (клавиатура, фокус, aria, контраст, скринридер), а не только чтением кода. Каждая находка привязана к WCAG success criterion, затронутой группе пользователей, file:line и конкретному сценарию, с явным вердиктом соответствия. Используй когда просят проверить доступность страницы/компонента, сделать a11y аудит, оценить соответствие WCAG, проверить доступность для скринридеров или с клавиатуры, разобраться с контрастом/фокусом/aria/семантикой/alt-текстами/landmarks/модалками — даже без слова "аудит", например "доступно ли это для незрячих", "работает ли это без мыши", "почему скринридер не читает эту кнопку", "проходит ли это по WCAG AA", "нормальный ли тут контраст". Скилл только анализирует и сохраняет отчёт-файл, код проекта не меняет.
-
smirnovalex-qa Skill En 22Full security audit of the ENTIRE the-platform repository (all backend services, the-frontend, embeddable widgets/extensions, shared libraries libs/*, infrastructure configs helm/k8s/docker) — three independent passes (automated scanning SCA/SAST/secret-scan/IaC, line-by-line code review by zone, architectural review), a detailed 14-category checklist (auth/authz, multi-tenancy, websocket, internal API, injections, SSRF, XSS, secrets/PII, files, dependencies, docker, k8s/helm, error handling, CI/CD), findings with file:line and an exploitation scenario, and a final report for leadership. Use when asked to run a full security audit of the whole codebase/repository/platform, to find vulnerabilities across the entire project, to re-verify the status of findings from a previous security audit, or to assess the platform's overall readiness to handle customer personal data from a security standpoint — even if the user doesn't say the word "audit" literally, but says "let's check the whole project for security holes
-
smirnovalex-qa Skill Ru 22Полный аудит безопасности ВСЕГО репозитория the-platform (все backend-сервисы, the-frontend, встраиваемые виджеты/расширения, общие библиотеки libs/*, инфраструктурные конфиги helm/k8s/docker) — три независимых среза (автоматизированное сканирование SCA/SAST/secret-scan/IaC, построчный код-ревью по зонам, архитектурный обзор), детальный чек-лист по 14 категориям (auth/authz, мультитенантность, websocket, internal API, инъекции, SSRF, XSS, секреты/PII, файлы, зависимости, docker, k8s/helm, обработка ошибок, CI/CD), находки с file:line и сценарием эксплуатации, и итоговым отчётом для руководства. Используй когда просят провести полный аудит безопасности всей кодовой базы/репозитория/платформы целиком, найти уязвимости по всему проекту, перепроверить статус находок из предыдущего security-аудита, или оценить общую готовность платформы к обработке персональных данных клиентов с точки зрения безопасности — даже если пользователь не произносит слово "аудит" буквально, а говорит "давай проверим весь проект на дыры в
-
smirnovalex-qa Skill En 24Cross-browser and responsive compatibility check of a web interface — scope from a feature/screen/directory/branch, a requirements document, or a tracker issue; checking against a browser/device matrix and breakpoints (mobile/tablet/desktop) with a mandatory live run in the browser via emulation of different viewports and user-agents, analysis of support for the CSS features and JS APIs used (caniuse logic), touch vs mouse, native controls, dark theme, and zoom. Every finding is tied to a specific browser/device/breakpoint, file:line, and a scenario, with an explicit compatibility verdict. Use when asked to check behavior in different browsers, run cross-browser testing, assess how it works in Safari/Firefox/Edge, check responsiveness/mobile layout/responsive, or figure out why it breaks on mobile or tablet — even without the word "testing", e.g. "will this work in safari", "won't the layout fall apart on a phone", "is this CSS supported everywhere", "is it fine on a tablet", "why doesn't the button tap on iO
-
smirnovalex-qa Skill Ru 24Проверка кросс-браузерной и адаптивной (responsive) совместимости веб-интерфейса — периметр из фичи/экрана/директории/ветки, документа-требований или issue в трекере; проверка по матрице браузеров/устройств и брейкпоинтам (mobile/tablet/desktop) с обязательным живым прогоном в браузере через эмуляцию разных вьюпортов и user-agent, анализ поддержки используемых CSS-фич и JS-API (caniuse-логика), touch vs mouse, нативных контролов, тёмной темы и зума. Каждая находка привязана к конкретному браузеру/устройству/брейкпоинту, file:line и сценарию, с явным вердиктом совместимости. Используй когда просят проверить работу в разных браузерах, провести кросс-браузерное тестирование, оценить работу в Safari/Firefox/Edge, проверить адаптивность/мобильную вёрстку/responsive, разобраться почему ломается на мобильном или планшете — даже без слова "тестирование", например "заработает ли это в сафари", "не поедет ли вёрстка на телефоне", "поддерживается ли этот CSS везде", "нормально ли на планшете", "почему на iOS кнопка не н
-
smirnovalex-qa Skill En 27Full performance and resource-cost audit of the entire the-platform repository (FastAPI/asyncpg/PostgreSQL/Redis/RabbitMQ backend services, the-frontend, shared libraries libs/*, Docker/Kubernetes/Helm infrastructure, k6 load testing in load-testing/) — three independent passes (instrumental profiling, line-by-line code review, architectural review), findings only with measurement (EXPLAIN ANALYZE, py-spy, bundle size, k6 runs), severity, file:line, and a final verdict. Use when asked to run a performance/resource-cost audit of the whole codebase or infrastructure, to check CPU/RAM/network-traffic/infrastructure-cost consumption, to find bottlenecks across the whole repository, to assess the economy of the architecture as load grows, or to re-verify the status of findings from a previous audit/load-testing reports — even if the user doesn't say the word "audit" literally, but says "why does the service eat so much CPU/memory", "let's look at the performance of the whole project", etc.
-
smirnovalex-qa Skill Ru 27Полный аудит производительности и ресурсоёмкости всего репозитория the-platform (backend-сервисы FastAPI/asyncpg/PostgreSQL/Redis/RabbitMQ, the-frontend, общие библиотеки libs/*, Docker/Kubernetes/Helm инфраструктура, нагрузочное тестирование k6 в load-testing/) — три независимых среза (инструментальное профилирование, построчный код-ревью, архитектурный обзор), находки только с измерением (EXPLAIN ANALYZE, py-spy, размер бандла, k6-прогоны), severity, file:line и итоговым вердиктом. Используй когда просят провести аудит производительности/ресурсоёмкости всей кодовой базы или инфраструктуры целиком, проверить расход CPU/RAM/сетевого трафика/стоимости инфраструктуры, найти узкие места по всему репозиторию, оценить экономичность архитектуры при росте нагрузки, или повторно перепроверить статус находок из предыдущего аудита/load-testing отчётов — даже если пользователь не произносит слово "аудит" буквально, а говорит "почему сервис жрёт столько CPU/памяти", "давай посмотрим на производительность всего проекта" и
-
crazymsn Bundle GenimlThis skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
-
crazymsn Bundle MarkitdownConvert 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.
-
dallascrilley Bundle Tanstack QueryThis skill provides comprehensive knowledge for TanStack Query v5 (React Query) server state management in React applications. It should be used when setting up data fetching with useQuery, implementing mutations with useMutation, configuring QueryClient, managing caching strategies, migrating from v4 to v5, implementing optimistic updates, using infinite queries, or encountering query/mutation errors. Use when: initializing TanStack Query in React projects, configuring QueryClient settings, creating custom query hooks, implementing mutations with error handling, setting up optimistic updates, using useInfiniteQuery for pagination, migrating from React Query v4 to v5, debugging stale data issues, fixing caching problems, resolving v5 breaking changes, implementing suspense queries, or setting up query devtools. Keywords: TanStack Query, React Query, useQuery, useMutation, useInfiniteQuery, useSuspenseQuery, QueryClient, QueryClientProvider, data fetching, server state, caching, staleTime, gcTime, query invali
-
ghosteken Bundle React Best PracticesComprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.
-
ghosteken Skill Nextjs Best PracticesNext.js App Router principles. Server Components, data fetching, routing patterns.
-
ghosteken Skill React State ManagementMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
-
ghosteken Skill Frontend Security CoderExpert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.
-
ghosteken Bundle React Component PerformanceDiagnose slow React components and suggest targeted performance fixes.
-
ghosteken Bundle Accessibility Compliance Accessibility AuditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
-
ghosteken Skill Application Performance Performance OptimizationOptimize end-to-end application performance with profiling, observability, and backend/frontend tuning. Use when coordinating performance optimization across the stack.
-
wesleyegberto Skill React PatternsFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
-
wesleyegberto Bundle Fullstack GuardianBuilds security-focused full-stack web applications by implementing integrated frontend and backend components with layered security at every level. Covers the complete stack from database to UI, enforcing auth, input validation, output encoding, and parameterized queries across all layers. Use when implementing features across frontend and backend, building REST APIs with corresponding UI, connecting frontend components to backend endpoints, creating end-to-end data flows from database to UI, or implementing CRUD operations with UI forms. Distinct from frontend-only, backend-only, or API-only skills in that it simultaneously addresses all three perspectives—Frontend, Backend, and Security—within a single implementation workflow. Invoke for full-stack feature work, web app development, authenticated API routes with views, microservices, real-time features, monorepo architecture, or technology selection decisions.
-
wesleyegberto Skill Chrome DevtoolsExpert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.
-
wesleyegberto Bundle Frontend Lean UXApply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user mentions "Lean UX", "design hypothesis", "UX experiment", "collaborative design", or "outcome over output". Covers hypothesis statements, MVPs for UX, and cross-functional collaboration. For Build-Measure-Learn, see lean-startup. For usability audits, see ux-heuristics.
-
wesleyegberto Bundle Frontend MicrointeractionsDesign the small details — triggers, rules, feedback, loops and modes — that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", or "interaction polish". Covers trigger design, state rules, feedback mechanisms, and progressive loops. For overall UI polish, see refactoring-ui. For affordance design, see design-everyday-things.
-
wesleyegberto Bundle Clean ArchitectureStructure software around the Dependency Rule: source code dependencies point inward from frameworks to use cases to entities. Use when the user mentions "architecture layers", "dependency rule", "ports and adapters", "hexagonal architecture", or "use case boundary". Covers component principles, boundaries, and SOLID. For code quality, see clean-code. For domain modeling, see domain-driven-design.
-
yunseo-kim Bundle React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. Contains 57 rules across 8 categories prioritized by impact. Use when writing, reviewing, or refactoring React/Next.js code for performance — components, data fetching, bundle optimization, re-renders, and server-side patterns.
-
abdullah4ai Bundle IOS Rules 238 battle-tested iOS development rules covering accessibility, navigation, architecture, dark mode, localization, App Review guidelines, and more. Targets the mistakes LLMs actually make when generating Swift/SwiftUI code.
-
abdullah4ai Skill Components 2Reusable UI component patterns: buttons, cards, input fields, loading states, badges, toggles, pickers, empty states. Use when creating any interactive UI element, building reusable views, or composing component hierarchies. Triggers: Button, TextField, Toggle, Picker, ProgressView, Label, badge, card, empty state.
-
abdullah4ai Skill Components 3tvOS UI components: card buttons, focus states, media tiles, text entry, progress indicators. Use when working on tvOS component patterns, focus styling, or card-based UI. Triggers: Button, card, focus, CardButtonStyle, component, tile.
-
abdullah4ai Skill Components 4macOS UI components: button styles, context menus, tables, drag-and-drop, keyboard shortcuts. Use when working on macOS component patterns, desktop UI, or Mac app interactions. Triggers: Button, Table, Menu, contextMenu, keyboardShortcut, component.
-
abdullah4ai Skill Components 6visionOS UI components: glass backgrounds, hover effects, ornaments, 3D content views. Use when working on visionOS component patterns, spatial UI, or Vision Pro interactions. Triggers: Button, glass, hover, ornament, RealityView, Model3D, component.
-
mrciphersmith Skill Review Logic 2Use when: reviewing code for logic correctness, algorithmic bugs, missing error handling, async/await mistakes, null/undefined risks, race conditions, type contract violations, or spec compliance. Dispatched by review-orchestrator for --frontend, --backend, and --all. Also invoked directly: "review logic", "check correctness", "are there any bugs here". NOT for: security vulnerabilities, performance profiling, style/naming preferences, or architectural pattern concerns — those belong in their respective specialized reviewers.
-
mrciphersmith Skill Review Architecture 2Use when: reviewing code for architectural violations — layer violations, dependency direction mistakes, module boundary coupling, SOLID principle breaches, NestJS module/provider structure, React MVVM boundary violations, or MobX store layer misplacement. Triggered by: "review architecture", "check architecture", "architectural review", or dispatched by review-orchestrator with --architecture or --backend. NOT for: style/naming preferences, logic correctness bugs, or security vulnerabilities.
-
mrciphersmith Bundle Review Orchestrator 2Use when: a code review is requested and the user does not explicitly name a specialized reviewer. Handles "review", "code review", "review PR", "review --frontend", "review --backend", "review --architecture", "review --security", "review --performance", "review --style", "review --strict", "review --project-conventions", "review --legacy-profiles", "review --all". Routes to specialized reviewers in parallel and consolidates findings into one unified report. NOT for: running a single specialized reviewer — invoke it directly by name instead.
-
mrciphersmith Bundle Feature Analyzer 2Use when analyzing feature branch changes across repos, planning implementation, or understanding backend→frontend contracts. NEVER start without explicit user confirmation of source, target, and branch.
-
kok-o Bundle React 2ContextOS skill for modern React (v18/v19), component architecture, state colocation, render optimization, and Vercel performance rules.
-
kok-o Bundle Next JS 2ContextOS skill for Next.js App Router, Server Components, Server Actions, performance optimization, and Vercel best practices.
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 en, ru, en. 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.