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.
-
jimmc414 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.
-
az9713 Skill Test A11Y 2Run comprehensive WCAG 2.1 AA+ accessibility tests on a URL. Use when user wants to test accessibility, a11y compliance, screen reader support, or keyboard navigation.
-
codealive-ai Bundle Maintaining Windows Health 2Hands-on playbook for Windows 11 disk cleanup, dev-machine optimization, and proactive health alerting. Use when the PC is full or slow, when a BSOD / Kernel-Power 41 / crash dump / commit-memory pressure happened, when the user asks to free disk space, audit storage, set up disk/memory alerts, or restore the same monitoring on a new PC. Built around native Microsoft-supported tooling (Storage Sense, cleanmgr, DISM, pnputil, vssadmin, wevtutil, powercfg) as the safety floor, a drift-protected HTML cleanup UI, and a Task Scheduler + BurntToast alerter. Covers dev machines with heavy AI/Docker/WSL workloads. Not for general Windows support, hardware diagnostics, GPU/driver troubleshooting, antivirus/malware removal, Windows Update repair, networking, or app-specific performance problems unrelated to disk or memory pressure.
-
deagentic Skill Remotion 2Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
-
deagentic Skill Stitch Loop 2Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
-
florinsenoner Skill Codebase Audit 2Comprehensive codebase audit across 8 dimensions — backend, frontend, security, code quality, Convex patterns, Tailwind/UI, performance, and testing
-
florinsenoner Skill Tailwind Audit 2Audit Tailwind CSS classes for redundancy, inconsistency, and legacy patterns
-
florinsenoner Skill Webapp Testing 2Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
-
kesslerio Skill Slack 2Use the Slack tool to react, pin/unpin, send, edit, delete messages, or fetch Slack member info.
-
hoanghd218 Bundle Mobile Development 2Build mobile apps with React Native, Flutter, Swift/SwiftUI, Kotlin/Jetpack Compose. Use for iOS/Android, mobile UX, performance optimization, offline-first, app store deployment.
-
hoanghd218 Bundle Frontend Dev Guidelines 2Build React/TypeScript frontends with modern patterns. Use for components, Suspense, lazy loading, useSuspenseQuery, MUI v7 styling, TanStack Router, performance optimization.
-
sinch Bundle Sinch Mailgun Inspect 2Checks email quality before sending via Mailgun Inspect API. Use when previewing emails across clients, checking accessibility (WCAG), validating links, validating images, or analyzing email HTML/CSS compatibility.
-
drixxodev Skill Repo Scan 2跨栈源代码资产审计——对每个文件进行分类,检测嵌入的第三方库,并为每个模块提供可操作的四级判定结果,附带交互式HTML报告。
-
matiascomercio Bundle Human Agentic Design 2Generates interactive HTML prototypes optimized for dual human+agent interaction. Produces semantic, accessible designs with Tailwind + DaisyUI (Tier A) or React + shadcn/ui + Vite (Tier B). Triggers on keywords: prototype, design, UI prototype, landing page, dashboard, form design, human-agentic, had, mockup, wireframe
-
atman-33 Bundle Create Review Guide 2Generate a self-contained HTML code-review guide for the current changes — big-picture overview, architecture diagram of affected modules, a file/class responsibility map, and an annotated change walkthrough — so a reviewer can grasp the whole implementation before diving into the diff. Use when the user wants review material for a branch/PR, asks to "explain the changes for review", or wants a visual summary of what was implemented where.
-
atman-33 Bundle Create Onboarding Guide 2Generate a self-contained HTML onboarding tour of a repository — architecture diagram, directory map, key flow walkthroughs, and a recommended reading order — for new team members. Use when the user wants onboarding material, asks for a codebase overview/architecture tour, or wants to explain a repo to someone new.
-
atman-33 Bundle Create Manual Test Guide 2Generate a self-contained HTML manual-testing guide for an implemented change — environment setup, a visual test-flow diagram, step-by-step scenarios with expected results, and interactive pass/fail checkboxes with a Markdown results export. Use when the user wants to verify an implementation by hand, asks "how do I test this", or wants a verification document for a feature/branch/PR.
-
c0x12c Bundle Browser QA 2Run real browser QA with Playwright. Use when testing a frontend feature, verifying UI before PR, smoke testing after deploy, or investigating reported visual bugs.
-
harshsinghmp Skill Show Me 2Use when the user asks to see something rather than read about it - "show me", "let me see it", "what does it look like", "give me options", or any moment you are about to describe a layout, a plan, a comparison or a design in prose. Renders it as a self-contained HTML page and opens it in the browser, in front of them.
-
deagentic Skill React Components 2Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
-
hoangsonww Skill Coverage 2Generate first-party Swift package coverage (llvm-cov HTML, lcov, text summary). Use when the user asks for coverage, after expanding Tests/, or before claiming test work is done.
-
l-gevity Skill Alchemy 2Runs a lightweight change preflight, then routes non-trivial design, refactor, and audit work through only the needed requirements and A.L.C.H.E.M.Y. skills. Explicitly trigger with `/alchemy`, `$alchemy`, or natural phrases such as "do some alchemy", "run alchemy on this", "use alchemy", or "give this an alchemy pass". Use for architecture, complexity, enforcement, shift-left, optimization, modules, vertical slices, abstractions, cross-boundary refactors, consolidation, and over-engineering audits. Explicit invocation on a local bug fix, content or CSS edit, dependency bump, or trivial rename returns a cheap `SKIP` or `DIRECT` dispatch instead of loading every gate. Defines no new domain rules; routes to core sibling skills and task-matched companion skills.
-
l-gevity Bundle Test Strategy 2Designs and audits risk-driven test strategies that map grounded requirements, acceptance criteria, quality risks, architecture, and escaped defects to the smallest sufficient evidence portfolio. Use when deciding what to test, which design technique or test fidelity to use, when to use real dependencies versus fakes, stubs, or mocks, how to manage test data and environments, or whether unit, component, integration, contract, E2E, exploratory, property, fuzz, performance, resilience, or recovery testing is justified. Also use to audit hollow assertions, redundant coverage, flaky tests, and residual risk. Do not use for framework-specific test implementation, pipeline placement or gating, or trace evidence state; hand those to stack skills, defect-shift-left, ci-cd-reliability-architecture, and requirements-traceability.
-
tencentcloudbase Skill Auth Web Cloudbase 4CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.
-
tencentcloudbase Skill Relational Database Web Cloudbase 4Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser.
-
toy-crane Bundle Build Prototype 2Build a complete dummy-data HTML prototype or a temporary comparison of up to three alternatives for a specific user situation. Use to settle a screen-based product before implementation or resolve a visual or interaction decision during shaping or prototype review. Do not use for production implementation or CLI, terminal, or voice interfaces.
-
usefulsoftwareco Skill Effect Atom Optimistic Updates 2Pattern for implementing optimistic UI updates with effect-atom in this codebase. Use when adding optimistic behavior to a query atom + its mutations (action toggles, list adds/removes, inline edits). DO NOT roll your own pending-state with React state, Maps, or custom merge helpers — `Atom.optimistic` + `Atom.optimisticFn` already handle racing, refresh, and waiting correctly.
-
usefulsoftwareco Skill Wrdn Effect Promise Exit 2Replace React/effect-atom mutation handlers that use promise-mode plus try/catch with promiseExit and explicit Exit handling. Use when lint or review flags try/catch around useAtomSet mutation calls, especially UI handlers that set error/busy state after a failed mutation.
-
usefulsoftwareco Skill Wrdn Effect Atom Optimistic 2Detects hand-rolled optimistic-update plumbing in React code that should be using effect-atom's Atom.optimistic and Atom.optimisticFn instead. Run on diffs touching packages/react/src/api/atoms.tsx, packages/react/src/pages/**/*.tsx, or any file that imports an effect-atom mutation atom from ./api/atoms. The hand-rolled patterns race on concurrent mutations and the codebase has chosen the effect-atom primitives as the canonical answer.
-
heyeddi-com Bundle Verify Build 3Runs npm run build to catch Vite/Rollup failures before merge. Use when validating frontend changes or in CI pre-merge loops.
-
heyeddi-com Bundle No Duplicate UI 2Scans Vue files for duplicate component names and similar template overlap. Use during PR review or when refactoring UI to enforce DRY architecture.
-
heyeddi-com Bundle Composable Patterns 2Provides FastAPI JWT and Firebase client composable patterns for consistent auth and data layers. Context-first skill — use when writing or reviewing Vue composables for API access.
-
heyeddi-com Bundle Project Engineering 4Ensures HeyEddi projects have the right engineering stack — Vue (Vite/Vitest), FastAPI backend, or Firebase tooling. Audits gaps, scaffolds as needed, installs deps, runs tests, documents local dev servers. Use when the repo is thin or before design/feature work on any HeyEddi app.
-
heyeddi-com Bundle Backend Type Bridger 4Syncs FastAPI OpenAPI schema to TypeScript types and reads Firestore schema hints. Use when writing Vue composables against FastAPI or Firebase backends.
-
heyeddi-com Bundle Primevue Openprops Architect 3Enforces PrimeVue + project design tokens when editing Vue or CSS. OpenProps rules apply only when the project already uses open-props. Runs vue-tsc and stylelint when available.
-
heyeddi-com Bundle Flutter Engineering 4Ensures HeyEddi Flutter projects have the right engineering stack — Flutter (Riverpod, go_router, Material 3), FastAPI backend, or Firebase tooling. Audits gaps, scaffolds as needed, runs flutter test/analyze, documents local dev servers. Use when frontend is Flutter or before design/feature work on a HeyEddi mobile/web app.
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 markitdown, test-a11y, maintaining-windows-health. 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.