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.
-
adelabdelgawad Skill Backend Migration From FrontendMigrate a backend to a new framework by reverse-engineering behavior from the frontend — trace every UI request down through router, controller, middleware, service, repository, DB, jobs, events, and side effects, then reproduce equivalent behavior (validation, permissions, transactions, responses, status codes, logging, caching, events) in the target. Use when porting/rewriting a backend and behavioral equivalence with the existing app matters. Do not use for greenfield backends (use fastapi / python-clean-architecture / rust-clean-architecture) or pure frontend migrations (use frontend-transformation).
-
camunda Skill Create IssueCreate a GitHub issue in camunda/camunda with the correct template, component label, and parent link. Use when asked to create, file, or open an issue — for bugs, features, tasks, tech debt, or CVEs.
-
camunda Skill Frontend FeatureUse when building or modifying pages, components, modules, routes, data loading, forms, API integration, or UI features — including small changes like a column, filter, or panel — in the orchestration cluster webapp (webapp/client/apps/orchestration-cluster-webapp/).
-
camunda Bundle Operate FrontendUse for any Operate frontend work — the target pod at webapp/client/apps/orchestration-cluster-webapp/src/operate/ and the legacy client at operate/client/. Covers routing, data fetching, state, styling, testing, forms and conventions in both. For porting a page from legacy to target, use frontend-operate-migrator.
-
camunda Skill Tasklist FrontendUse when building, changing, or testing Tasklist features in the orchestration cluster webapp (webapp/client/apps/orchestration-cluster-webapp/src/tasklist/). Trigger for Tasklist pages, modules, components, hooks, stores, routes, or schema — even small changes like a column, filter, or panel — and questions about Tasklist pod structure and conventions.
-
camunda Skill Frontend Unit TestUse when writing, modifying, or debugging unit tests (*.test.tsx) in the orchestration cluster webapp (webapp/client/apps/orchestration-cluster-webapp/src/). Covers Vitest browser mode, MSW mocking, and vitest-browser-react rendering.
-
camunda Skill Create Rt IssueCreate a GitHub issue in camunda/camunda for load-test/Reliability Testing (RT) work, extending create-issue with the component/load-tests label and an rt/foundation, rt/coverage, or rt/enablement classification. Use when asked to create, file, or open an RT/load-test issue.
Audited -
camunda Bundle Zeebe Flamegraph DiffParse and compare async-profiler CPU flamegraphs from Camunda/Zeebe brokers — benchmark nodes or production. Use when investigating a CPU regression or outlier with .html flamegraphs (e.g. from dashboard.benchmark.camunda.cloud daily runs, or pulled from a live cluster/customer incident) — attribute a node's CPU to Zeebe subsystems and diff a suspect run against a healthy baseline.
Audited -
camunda Bundle Operate Engineering LoopDrive a tracked Operate change in the orchestration cluster webapp (src/operate/) end to end — issue branch, implementation, gated validation, independent review, a draft PR, and repeated Copilot review resolution. Use when asked for the engineering loop, an end-to-end implementation loop, or branch -> implement -> review -> draft PR -> Copilot review. For a migration, frontend-operate-migrator drives this loop and adds the fidelity gate.
-
camunda Skill Frontend Integration TestFrontend Integration, Visual, and Accessibility Testing
-
camunda Bundle Frontend Operate MigratorUse when porting an Operate page or component from the legacy client at operate/client/ to the Operate pod in the orchestration cluster webapp, including end-to-end execution from a migration ticket number. Covers the page inventory, MobX decomposition, behavior fidelity, and the ticket-to-draft-PR loop.
Audited -
mqmalagris Bundle Code CraftLanguage- and framework-specific code best practices and idioms — complementary to compass (stack-agnostic architecture coach). Two modes: reader (rule + reason + example for a topic) and reviewer (apply rules to user code, flag violations with fixes). Ships rules for TypeScript, Rust, CSS/SASS, Tailwind, Dart, Go, Python and frameworks React, Next.js, RN+Expo, Hono, Cloudflare Workers, Astro, Svelte, Drizzle, Supabase, AWS Lambda+SAM, Terraform, Flutter. Use when the user asks for language-specific best practices ("TS best practices", "is this idiomatic Rust", "/code-craft ts"), wants a code review focused on language idioms (not architecture — see compass), or asks how to do X the right way in a specific language/framework.
-
mqmalagris Bundle Testing PhilosophyDefines what a good test is: behavior over implementation details, and the Testing Trophy with a hard floor on end-to-end coverage for user-facing features. Stack-agnostic, any language (TS/JS, Rust, Go, Elixir, Python, ...) and any layer (frontend, backend, CLI, library). REQUIRED BACKGROUND for skills that plan or review tests (implementation-review, heist, review-pass). Use when proposing, writing, or reviewing automated tests, or when the user asks whether tests are good, what to test, why a test is brittle, or whether e2e is needed.
-
mqmalagris Bundle Wstg Security TestingWeb application security testing using the OWASP Web Security Testing Guide (WSTG) methodology — its 12 categories and ~109 test cases (INFO, CONF, IDNT, ATHN, ATHZ, SESS, INPV, ERRH, CRYP, BUSL, CLNT, APIT). Four modes — guide an authorized pentest, self-review your own app, generate/score a coverage checklist, or review a code diff/PR against relevant WSTG tests. Mode 2 is the whole-codebase audit path and carries a systematic protocol (reference/CODEBASE-AUDIT.md) for stack detection, route-handler enumeration, tenant-isolation sweeps, frontend-gate-to-endpoint cross-referencing, and secret sweeps across git history and deploy configs. Bundles the full test reference, detection payloads, a reporting template, and scripts to look up WSTG IDs and build/score checklists. Use when the user mentions OWASP WSTG, web security testing, pentesting a web app or API, security review against WSTG, XSS/SQLi/SSRF/IDOR/auth/session/CSRF/JWT testing, multi-tenant or RLS isolation gaps, hardcoded secrets, a WSTG-XXXX-NN ID
-
polyxgo Bundle Deploy DocumentationTự động hoá quy trình chụp screenshot và cập nhật documentation sau mỗi lần build & deploy — discover routes, generate manifest, capture screenshots, update HTML. Hoạt động với mọi loại web application.
-
microsoftdocs Skill Check AccessibilityChecks image accessibility compliance per Microsoft Learn standards. Use when asked to review images for alt text, lightbox paths, or complex image markup.
-
miketromba Skill AstroAstro web framework documentation and guidance. Use when working with Astro - an all-in-one web framework for building content-driven websites using island architecture and server-first design. Triggers on questions about Astro setup, .astro components, content collections, Markdown/MDX, islands, SSR, SSG, routing, integrations (React, Vue, Svelte, Preact, Solid), Astro config, deployment, CMS integration, migration, or ANY Astro-related development tasks.
-
miketromba Skill AutumnAutumn billing and monetization platform documentation and guidance. Use when working with Autumn - an open-source billing control layer for AI and SaaS monetization. Triggers on questions about Autumn pricing, usage-based billing, feature gating, plan management, credit systems, metered billing, subscription lifecycle, Stripe integration via Autumn, check/track API, customer balances, entities, React billing hooks, CLI config, or ANY Autumn-related development tasks.
-
miketromba Skill PosthogIntegrate and work with PostHog analytics, feature flags, experiments, session replay, surveys, error tracking, and all other PostHog products. Use when the user asks to add PostHog tracking, capture events, set up feature flags, run A/B tests, configure session replay, create surveys, use the PostHog API, work with PostHog SDKs (JavaScript, Node, React, Python, etc.), debug PostHog integration issues, or implement any PostHog functionality. Also use when questions arise about PostHog configuration, data pipelines, webhooks, or the PostHog data model.
-
miketromba Skill FumadocsFumadocs documentation framework guidance. Use when working with Fumadocs - a flexible docs framework for Next.js, React Router, TanStack Start, and Waku. Triggers on questions about Fumadocs setup, page tree, MDX content source, Fumadocs UI, Fumadocs Core, search integration, OpenAPI docs, internationalization, layouts, components, navigation, deploying, or ANY Fumadocs-related development tasks.
-
miketromba Skill Tanstack QueryTanStack Query (React Query) documentation and guidance. Use when working with TanStack Query - a powerful async state management library for data fetching, caching, synchronization, and server state management. Triggers on questions about React Query, TanStack Query, useQuery, useMutation, query invalidation, caching strategies, optimistic updates, infinite queries, prefetching, or ANY TanStack Query-related development tasks.
-
mshahiddigital Bundle PDF ReportGenerates professionally designed PDF audit reports. Activates when the user requests a PDF report, wants to export audit findings, asks for a printable report, or uses the generate-pdf or export-html commands. Produces a visually stunning HTML report with SVG gauge charts, color-coded severity cards, and professional tables, then converts to PDF. Uses Python script for reliable multi-engine PDF generation. All files saved to {REPORTS_DIR}/.
-
mshahiddigital Skill Accessibility AuditAccessibility Audit
-
nahiddotai Bundle HTML SlideshowCreate a responsive browser-based presentation, keynote-style HTML deck, workshop deck, pitch deck, or shareable horizontal slideshow and verify navigation and layout.
-
orangehrm Skill EventsReference for OrangeHRM's event system — the `EventDispatcher` (Symfony EventDispatcher with no project-level customization), `AbstractEventSubscriber` for class-based subscribers, the per-plugin `Subscriber/` and `Event/` directories, the `<Plugin>Events` constant-holder class convention, `Event`-extending event payload classes, plugin-level subscriber registration in `<Plugin>PluginConfiguration::initialize()` via `getEventDispatcher()->addSubscriber()`, listener priorities, propagation control, and the distinction between Symfony `KernelEvents` (used by core subscribers like `ApiAuthorizationSubscriber`, `AuthenticationSubscriber`) and OHRM custom events (used by feature plugins to react to business actions like `EmployeeSavedEvent`, `LeaveApply`). Use whenever the user is dispatching a new event, writing a subscriber, registering a subscriber on plugin boot, debugging "why didn't my listener fire", or asking about event order / priority. Companion to `services` (services dispatch events), `authorization`
-
orangehrm Skill TestingReference for OrangeHRM's test layers — PHPUnit per-plugin testsuites declared in `phpunit.xml`, the test-DB lifecycle (`instance:create-test-db` builds a populated MySQL DB plus a `CoreFixtureService` dump that bootstrap restores per test), test base classes (`TestCase` for plain unit tests, `KernelTestCase` for tests that need the full framework + DI container, `EntityTestCase` for entity-only tests, `EndpointTestCase` and `EndpointIntegrationTestCase` for API endpoint tests with request mocking + exception expectations), the YAML fixture pattern (per-plugin `test/fixtures/<DaoName>.yml` + `TestDataService::populate($yamlPath)` in `setUp()`), Jest configuration for frontend unit tests (`@vue/cli-plugin-unit-jest/presets/typescript-and-babel`, `__tests__/` siblings), and Cypress for E2E (separate workspace under `src/test/functional/`). Use whenever the user is writing a test, deciding which base class to extend, debugging fixture loading, setting up the test DB, running a single test class, or trying to fig
-
orangehrm Skill WorkflowReference for OrangeHRM's workflow state machine — the `WorkflowStateMachine` entity that models `(workflow, state, role, action) → resultingState` transitions in `ohrm_workflow_state_machine`, the eight `FLOW_*` constants for the workflow types (Leave, Recruitment, Timesheet, Attendance, Employee, Review, Self-Review, Claim), `AccessFlowStateMachineService` for querying allowed actions / states / next-state lookups, the per-flow `<ACTION>_*` integer constants on the entity (e.g. `LEAVE_ACTION_APPROVE`, `CLAIM_ACTION_SUBMIT`), and the typical pattern of dispatching an event after the state transition is persisted so subscribers can react (notifications, audits). Use whenever the user is adding a new workflow transition, debugging "why can this role not approve this leave", asking about state-machine state strings, or wiring a new approval-style feature. Companion to `events` (transitions dispatch events), `mail` (transitions are the primary trigger for notification emails), `authorization` (workflow access is
-
orangehrm Skill DependenciesReference for managing OrangeHRM Composer and Yarn dependencies — where composer.json and package.json files live, running package-manager commands inside the Docker dev environment, using the lowest supported PHP version from the relevant composer.json for Composer install/update/require, respecting packageManager fields, avoiding npm/package-lock drift, and keeping lockfiles generated by package managers. Use whenever the user adds, updates, removes, installs, audits, or troubleshoots PHP Composer packages, frontend packages, Yarn workspaces, Node/npm tooling, or dependency lockfiles.
-
orangehrm Skill REST OpenapiReference for OrangeHRM's OpenAPI v3 annotations via zircote/swagger-php — what to add to Endpoint methods and Model classes, the project's shared component refs (RecordNotFound, ForbiddenResponse, sortOrder, limit, offset), how class constants are used inside annotations, and the `generate-open-api-doc` command. Use whenever the user is annotating a new endpoint, debugging a `generate-open-api-doc --throw` failure in CI, asking which `#/components/…` ref to use, or referencing constants inside `@OA\*` blocks. **CI enforces this** — the `Lint` workflow runs `generate-open-api-doc --throw`, so a PR without proper annotations fails the build. Companion to `rest-endpoints` (where the annotations live, on handler methods) and `rest-serialization` (where Model `@OA\Schema` blocks live).
-
orangehrm Skill AuthorizationReference for OrangeHRM's authorization model — how REST endpoints and Vue/page controllers are gated by authentication, role-based screen/data-group permissions, and the marker interface that opts controllers out for pre-login routes. Use whenever the user is adding a new REST endpoint or page, making something public (login / forgot-password / version / captcha-style routes), debugging a 403 / "Unauthorized" / "Session expired" response, asking about user roles, data groups, screen permissions, the `self` flag, or `CapableViewController`. Covers both the runtime mechanism and the seeding patterns (the `permission/api.yaml` and `permission/screens.yaml` conventions). The actual seeding executes inside a database migration — migration mechanics are a separate concern (see the `migrations` skill), this skill includes only the minimal migration stub needed to land a permission change.
-
orangehrm Skill CompatibilityReference for OrangeHRM supported-version alignment across PHP, Composer, installer system requirements, MySQL/MariaDB, webservers, browser/frontend targets, Node/Yarn, Docker dev-environment services, and GitHub Actions matrices. Use whenever the user asks about supported versions, changes PHP/database/browser/Node/webserver support, edits composer constraints, installer/config/system_requirements.php, package-manager metadata, CI workflow matrices, Docker dev-env versions, or release/runtime compatibility.
-
orangehrm Skill Frontend DataFrontend data flow
-
orangehrm Skill Frontend PagesVue frontend — pages and components
-
orangehrm Skill Frontend PlatformReference for OrangeHRM's cross-cutting Vue app plugins — i18n (`$t(key, params)` with module-grouped keys matching backend lang-string groups, the `translate()` factory for non-component contexts), ACL (`$can.read/create/update/delete('data_group_name')` where the data group string matches `ohrm_data_group.name` from the backend permission seeds), toaster (`$toast.success/error/info/warn` plus the project's semantic shortcuts `saveSuccess`, `addSuccess`, `updateSuccess`, `deleteSuccess`, `cannotDelete`, `noRecordsFound`, `unexpectedError`), the global loader, the `navigate()` / `reloadPage()` helpers, and `useDateFormat` for the user's date format. Use whenever the user is translating a string, gating a button with `$can`, picking a toast variant, navigating between pages, formatting a date for display, or asking why an automatic toast appeared. Companion to `authorization` (backend side of the data-group strings used by `$can`), `rest-validation` (the i18n keys used by the validation rule messages), and `fr
-
wachawo Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and reviewing browser logs.
Audited -
onekeyhq Bundle 1k PerformancePerformance optimization for React/React Native — re-renders, memoization, FlashList, memory leaks, and bundle size.
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 tasklist-frontend, webapp-testing, backend-migration-from-frontend. 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.