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.
-
falcondev-oss Bundle Falcondev FormBuilding or editing forms with @falcondev-oss/form — the type-safe, reactive, schema-driven form library (packages form-core, form-react, form-vue) built on @vue/reactivity. Use when working with useForm / useFormCore, form.fields accessors, $use(), field.value / field.handleChange / field.model, form.data, or a Standard Schema (zod v4 / arktype) form in a React or Vue codebase.
-
filmicgaze Skill Print DocumentsCreate a clean, well-formatted printable single-file HTML document under the working folder and open it for print preview.
-
finnley07 Skill I18N CheckRuns a comprehensive internationalization (i18n) and localization (l10n) readiness check across a project's web frontend, backend, and mobile app, then reports the results as one table (check, area, status, evidence, recommendation). Covers string externalization vs. hardcoded UI/backend text, translation completeness across all supported locales, correct pluralization (ICU MessageFormat/gettext ngettext/framework-native vs. naive English-only concatenation), sentence construction via string concatenation that breaks word order across languages, locale-aware date/time/number/currency/unit formatting vs. hardcoded formats, text-expansion and layout resilience for longer/shorter/differently-scripted translations, RTL (right-to-left) layout support for Arabic/Hebrew/Farsi/Urdu locales, character encoding (UTF-8 end-to-end) and font-fallback coverage for non-Latin scripts, locale detection/switching/persistence and regional-variant fallback chains (e.g. de-CH -> de -> default locale), translation-file/source-key
-
finnley07 Bundle Performance AuditRuns a structured performance and resource-usage audit across a project's backend, frontend, database, and infrastructure/deployment configuration, then reports the results as one table (check, area, status, evidence, recommendation). Covers backend hot-path efficiency (algorithmic complexity, N+1 queries, missing indexes, connection pooling, caching, blocking I/O, missing timeouts, unbounded pagination, serialization overhead, hot-path logging), frontend performance (bundle size/code-splitting, unnecessary re-renders, image optimization, render-blocking resources, duplicate/unparallelized network requests, Core Web Vitals-relevant patterns), and infrastructure/cost (container resource requests & limits, autoscaling/HPA config, database sizing, connection-pool-vs-max-connections mismatches, CDN/caching-layer usage, serverless cold starts, queue backpressure, always-on cost waste). This is a performance/throughput/latency/memory/CPU/cost review, not a security review and not a general code-quality/readability
-
finnley07 Bundle Accessibility CheckRuns a comprehensive digital accessibility conformance check for a project's web frontend and/or mobile app against WCAG 2.1/2.2 (target Level AA), semantic markup and correct ARIA usage, full keyboard operability, screen-reader/assistive-technology compatibility, platform accessibility APIs (iOS VoiceOver, Android TalkBack, React Native, Flutter Semantics), and applicability of accessibility-specific EU/national law — the European Accessibility Act (EAA, Directive (EU) 2019/882) and Germany's Barrierefreiheitsstärkungsgesetz (BFSG) — then reports the results as one table (check, area, status, evidence, recommendation). Use this whenever the user asks for an "accessibility check", "accessibility audit", "a11y check", "a11y audit", "WCAG check", "WCAG conformance", "WCAG audit", "barrierefreiheitsprüfung", "barrierefreiheit check", "barrierefrei prüfen", "ist das barrierefrei", "BITV check", "BFSG check", "BFSG-konform", "BFSG readiness", "European Accessibility Act", "EAA readiness", "EAA conformance", "scree
-
finnley07 Bundle Cybersecurity CheckRuns a comprehensive, EU-focused security and GDPR/DSGVO compliance check across a project's backend, frontend, and deployment configuration, then reports the results as one table (check, area, status, evidence, recommendation). Covers application security (OWASP-style: SSRF, injection, auth, access control, headers, secrets, rate limiting, ...), GDPR (Art. 5–49: legal basis, special-category data, data subject rights, international transfers, DPIA, DPA/AVV, breach handling, retention/deletion), ePrivacy/cookie & tracking consent, email authentication (SPF/DKIM/DMARC), mobile-app specifics, and applicability of adjacent EU regulations (AI Act, Accessibility Act, NIS2, DSA, PSD2). Use this whenever the user asks for a "security check", "cybersecurity check", "security audit", "sicherheitscheck", "pentest-light", "security readiness review", "DSGVO check", "GDPR compliance check", or asks about any specific item this covers (SSRF, open redirects, webhook replay, email verification, staging data, SPF/DKIM/DMARC,
-
finnley07 Skill Test Strategy AuditAudits a project's overall test strategy, infrastructure, and process from a tester/QA perspective — test pyramid balance (unit vs. integration vs. e2e ratio and execution time), real coverage numbers per module from the ecosystem's actual coverage tool (jest --coverage, pytest-cov, dotnet test /p:CollectCoverage, go test -cover, etc.) cross-referenced against high-change-frequency files, test quality (assertion-free tests, over-mocked tests, unreviewed snapshots, long-skipped/disabled tests via git blame), flaky-test evidence (CI retry configuration, sleep/timeout-based waits, ordering dependencies), test data & environment management (fixtures/factories vs. hardcoded duplication, isolated test DB vs. shared/prod-adjacent state, real vs. mocked external calls), existence of contract/load/performance/accessibility/security test automation, whether CI actually gates merges on test failure and coverage thresholds or just runs tests informationally (continue-on-error, allowed-to-fail, excluded required-checks),
-
graphistry Bundle Graphistry REST APIGraphistry Hub REST API: auth, upload, URL controls, sessions, and sharing. Use when asked to "call the graphistry API with curl", "get a JWT token from graphistry", "upload a graph via REST", "graph.html URL parameters", "graphistry session API", or "share a graph link safely". Also triggers on "/api/v2/", "Bearer token", "graphistry upload endpoint", or any direct HTTP endpoint question about Graphistry Hub. Prefer this over pygraphistry when the user explicitly uses curl, requests, or raw HTTP rather than the Python SDK.
-
griddynamics Skill Specflow Compare VariantsCompare and assemble code from 1–3 SpecFlow-generated workspace repos. Produces per-workspace inventory, a side-by-side comparison matrix, interactive component selection, and a concrete file-level assembly plan for migration to a production repo.
-
kemiljk Bundle Apple Native UIBuild or review native Apple interfaces, including platform controls, accessibility, state, navigation, and macOS window behavior.
-
kemiljk Bundle Modern CSS HTMLChoose native CSS and HTML features, assess browser support, or replace legacy workarounds with progressive enhancement.
-
kemiljk Bundle Android Native UIBuild or review Android interfaces in Compose or Views, including Material conventions, accessibility, adaptive layout, and state.
-
kemiljk Skill Semantic HTML FirstChoose HTML semantics and accessible behavior for controls, forms, and custom interaction primitives.
Audited -
kemiljk Skill Prototype To ProductionHarden an existing prototype for real use, including failure states, accessibility, security boundaries, and maintainability.
-
lensetek Skill Tax UI VisualizerMenggenerasikan antarmuka visual on-demand baik dalam bentuk aplikasi Python Desktop GUI (CustomTkinter/PyWebView) maupun Dasbor Single-File HTML interaktif tanpa dependensi luar.
Audited -
lubusin Bundle Frontend DevelopmentBuild modern Vue 3 frontend apps using Frappe UI with components, data fetching, and portal pages. Use when creating custom frontends, SPAs, or portal interfaces for Frappe applications.
-
m3dcodie Skill Eng Flow BrowseGeneral-purpose visual-verification tool wrapping the plugin-bundled Playwright MCP server — navigate a URL, screenshot, check console errors, verify a page/component renders correctly. Usable standalone by any agent/skill in this plugin, any time — not tied to a production-track stage.
-
majiayu000 Skill Wbr System OverrideA synthetic regression fixture for a zero-width HTML break opportunity.
567 -
mendix Skill Code ReviewReview a pull request in the mendix/web-widgets monorepo. Checks Mendix widget conventions, React/MobX patterns, versioning, test coverage, Atlas UI styling, security, and accessibility.
-
metagalaxy-crystal Bundle XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
metalogica Skill InitScaffold a new Substrate project in an empty directory. Drops a Vite + Convex + Clerk + TanStack Router + Tailwind v4 kernel that follows DDD, railway-oriented programming, and the testing pyramid. Runs product-focused Socratic Q&A, copies doctrines and SDD protocol into docs/, and generates the twin Gemini AI Studio scaffolding prompt plus runtime AI system prompt. Invoke in a blank folder before /substrate:migrate.
-
metalogica Skill MigrateMigrate a Gemini AI Studio prototype into the substrate kernel. Expects prototype/ (Gemini Build export) alongside a scaffolded substrate project. Spawns domain/backend/frontend architects in parallel to analyze the prototype against substrate doctrines, drafts Convex schema + functions from inferred data shapes, moves components into src/ with doctrine alignment, wires Clerk+Convex providers, and presents a migration plan for approval before executing. Invoke after /substrate:init + Gemini handoff, before /substrate:deploy.
-
microsoft Bundle Ort Release NotesDraft ONNX Runtime release notes using preset configurations for full ORT or scoped component releases. Use when generating highlights with PR links, compiling human contributor acknowledgments from compile_contributors.py output, and applying preset path filtering.
2.7k -
mirandaplayer1 Bundle ScoutCompetitor / product research — analyzes how others solve the same problem in order to make a decision, producing an HTML report with screenshots and a judgment framework. Trigger when the spec has several approaches still undecided, when building a new feature and wanting to know how the industry solves it, or when the user says "competitor research", "competitive analysis", "find competitors", "how do others do this", "check Mobbin for references", or "product research". Not for hunting visual inspiration, and not for looking up what a particular screen in a particular product looks like.
-
mwillbanks Bundle Github Pr ReviewReview GitHub pull requests directly in GitHub using GitHub MCP or gh, leave precise inline comments and final review states, and apply hard-nosed scrutiny for security, architecture, maintainability, testing, accessibility, and frontend compliance. Use whenever the user asks to review a PR, inspect a GitHub pull request, request changes, re-review a PR, post inline review comments, or submit a GitHub review instead of a local-only code review.
-
mwillbanks Bundle Cloud Native RuntimeUse when implementing, reviewing, or hardening cloud-native backend/runtime work: APIs, Lambda/serverless functions, background workers, Pulumi or IaC, EventBridge or scheduled jobs, S3/object-storage file uploads, media processing, CloudFront/CDN, networking, caching, secrets, observability, production deployment, architecture review, resilience, or cloud-service equivalency. Do not use for UI-only React/CSS/design/copywriting/blog/README-only tasks unless they change runtime, infrastructure, deployment, security, or observability behavior.
-
mwillbanks Bundle Frontend System DisciplinePrevent frontend work from inventing local design tokens, theme constants, helper layers, or style-file sprawl. Use when building or reviewing UI, components, pages, theme tokens, styled files, composition, or helper placement in frontend code.
-
ncklrs Bundle User TestingComprehensive persona-based user testing skill for web applications. Simulates how real users from different demographics interact with interfaces, including realistic timing, behavioral patterns, and frustration triggers. Use when: - Testing user interfaces before release - Validating UX flows from diverse perspectives - Conducting accessibility reviews - Optimizing onboarding or checkout experiences - Getting feedback on form design
-
ndisisnd Bundle CookReact, Next.js, Flutter, Swift, macOS, TypeScript, Node.js, SQL, PostgreSQL, Supabase, GraphQL and CSS coding standards for refactor, audit, bug fix, feature and code review work — this keyword-driven orchestrator receives a code-task summary from the invoking agent, extracts keywords, matches them against the global concern index and the relevant domain indexes, loads only the matched rules, and returns a single compiled standards payload.
-
ndisisnd Bundle CSSPragmatic, battle-tested CSS conventions. Use when authoring or reviewing styles — a small set of durable principles (keep specificity low, scope by default, tokenize, respect the user) plus a minimal accessibility/security floor. CSS is forgiving, so this favours judgment and consistency over rigid rules; depth (layout, theming, performance, Tailwind, tooling) lives in refs.
-
ndisisnd Bundle MacosmacOS app development standards — SwiftUI/AppKit app structure, scenes and windows, menu bar apps, sandboxing and TCC, signing and notarization, distribution, persistence, localization and formatting, and platform conventions (HIG, Liquid Glass, accessibility, undo). Scoped to macOS only — not iOS/iPadOS/watchOS/visionOS.
-
ndisisnd Bundle ReactWrite correct, idiomatic React with TypeScript. Use when building or reviewing React components, hooks, or JSX — covers hook rules, component structure, TypeScript prop typing, and boundary safety.
Audited -
ndisisnd Bundle NextjsWrite and review modern Next.js App Router code with secure RSC boundaries, direct server data access, async route APIs, Server Actions, rendering/cache strategy, and legacy Pages Router awareness.
-
nekomangaorg Bundle Frontend ArtisanElevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish. Use this skill to extract hardcoded styles to AppTheme, add TalkBack semantics, implement AnimatedVisibility or micro-animations, extract stateless Composables, and add @Preview annotations.
-
nekomangaorg Bundle Frontend MaestroOrchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows. Use this skill to implement adaptive layouts (WindowSizeClass), migrate to type-safe Navigation Compose graphs, design cross-module Design Systems, wire complex screen-level state (MVI/MVVM), or orchestrate deep links and multi-screen workflows.
-
antongulin Bundle LocatorsPlaywright + TypeScript locator conventions — strict priority ladder (getByTestId first, then role/label, then chained, then class/id, then text, CSS/XPath as last resort), data-testid naming convention, parameterized locators, filter/narrow patterns, and anti-patterns. Use when writing or reviewing locators in page objects, when choosing how to target an element, when fixing brittle CSS/XPath selectors, when a test has 'resolved to N elements' errors, or when reviewing test code.
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 performance-audit, graphistry-rest-api, github-pr-review. 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.