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.

varunr89 Skill

Flight Sweep

Batch-collect flight data across date ranges and analyze with filtering, scoring, and HTML viewer generation

Sep 17
vinceservidad Bundle

Shopify Theme Development

Diagnoses and implements scoped Shopify theme work in Liquid, JSON templates, sections, blocks, CSS, and JavaScript. Use for code changes and technical debugging.

Audited Sep 17
vlabsai Bundle

Vercel Deploy

Faz deploy de projetos na Vercel direto pela CLI autenticada. Suporta sites estaticos, Next.js, Node.js e outros frameworks. Resolve automaticamente escopo, linking de projeto e modo nao-interativo.

Audited Sep 17
wikimedia Bundle

Wiki Apis

How to fetch live data from MediaWiki and Wikipedia — the two API surfaces (REST API for read-mostly endpoints, Action API for everything else), which to choose when, and the etiquette every consumer must follow (User-Agent, rate limits, anonymous vs authenticated, exponential backoff). Use when adding live Wikimedia data to a frontend, picking between REST and Action API, or debugging a 4xx / rate-limited response.

Sep 17
wikimedia Bundle

Codex Icons

How to use the Codex icon library (@wikimedia/codex-icons) — import a `cdxIcon…` constant, render it through CdxIcon, and look up the right name in the full icon list (references/icons.md) or the upstream catalogue. Covers bidi-aware icons, the langCodeMap variants (e.g., bold-x), and accessibility. Use when adding a glyph anywhere — toolbar buttons, actions, menus, pills.

Sep 17
wikimedia Skill

Protowiki Skins

How desktop (Vector 2022) vs mobile (Minerva) web skins work in ProtoWiki — the boot-time resolution of ?skin= URL param + stored Web skin preference + viewport into a data-skin attribute on <html>, the per-component skin prop for embedding mobile previews on desktop pages, and the read-only useSkin() hook. Skins are a web-only axis; native app prototypes use data-app-platform instead. Use when adding skin-specific styles, embedding a mobile preview, debugging the responsive breakpoint, or wiring a "show mobile" toggle.

Sep 17
wikimedia Bundle

Protowiki Theme

How light / dark theming works in ProtoWiki — boot-time resolution of ?theme= URL param + prefers-color-scheme into a data-theme attribute on <html>, the runtime-injected Codex token sets scoped to [data-theme], the per-component theme prop for subtree overrides (including full-route demos), and the read-only useTheme() hook. Use when adding theme-specific styles, embedding a dark snippet on a light page, debugging colour cascades, or wiring a "preview in dark" toggle.

Sep 17
wikimedia Bundle

Codex Components

Catalogue of every Codex Vue component shipped via @wikimedia/codex — what each component is for, the most common props/slots/events, and which ones to reach for in typical Wikipedia UI patterns. Use when you need a button, input, dialog, menu, message, card, tabs, lookup, etc., or when you're picking between similar components ("Lookup vs TypeaheadSearch?").

Sep 17
wikimedia Bundle

Wiki Snapshot Data

When and how to snapshot Wikipedia data — committing JSON / HTML fixtures and the Wikipedia skin CSS — instead of fetching live, plus a reusable fetch_page.py snapshotter and a fetch_skin_css.sh recipe for grabbing the ResourceLoader bundles needed to style .mw-parser-output. Use when you're demonstrating a fixed page, want offline-capable demos, are hitting API rate limits, or want full visual fidelity for an article body.

Sep 17
wikimedia Bundle

Protowiki Components

Catalog of every shipped component in src/components/ — the single-concern layout wrappers (ChromeWrapper, SpecialPageWrapper, PlainWrapper, MobileWrapper), web chrome primitives (ChromeHeader, VectorChromeHeader, MinervaChromeHeader, ChromeFooter), app chrome (AppChromeWrapper, AppChromeHeader, AppBottomMenu), Article surfaces (`ArticleWrapper` + `ArticleRenderer`, ArticleLive, ArticleSnapshot, ArticleCustom, ArticleHeader — all three surfaces take an `app` prop for in-app screens), dashboard layout (`Dashboard`, `DashboardModule`), attribution (`AttributionCard`, `useAttributionSignals`), and Search — including hand-authored article HTML in `ArticleRenderer`'s default slot (see `src/prototypes/template-article-custom/`) and newcomer homepage templates (`template-dashboard`, `template-homepage`). Use when picking a wrapper, composing a page, looking up props/slots/events for any ProtoWiki component, or asking "what components does ProtoWiki ship?".

Sep 17
wikimedia Skill

Protowiki Snapshot Data

ProtoWiki-specific integration of the snapshotting pattern — the npm scripts that wrap the agnostic fetchers, where snapshots land in this repo (public/snapshots/, src/styles/wiki-skins/), how `ArticleSnapshot` consumes a pre-baked HTML body, and how the skin CSS gets scoped to [data-skin]. Use when adding a new article snapshot to ProtoWiki, refreshing the Wikipedia skin CSS, or wiring `ArticleSnapshot` up to a static fixture.

Sep 17
wikimedia Skill

Protowiki Getting Started

Orientation for the ProtoWiki repo — what it is, the Vite + Vue 3 + Codex + GitHub Pages stack, where code lives, where skills live, and the first thing to do. Use when first opening this repo, when asked "what is ProtoWiki" or "how does this repo work", or when an agent needs a high-level map before doing anything else.

Sep 17
yacb2 Bundle

Aidex Coverage

Use when writing, placing, or running tests in any project — which layer a behaviour belongs in ("unit or E2E for X", "component test or browser test"), which tests to run for a change instead of the whole suite, when to extract a fixture, setting up an isolated disposable E2E environment, or the per-project testing profile and the stack pack it names for the concrete test shapes (Django, Vue, Playwright, Payload, Svelte). Fires on "write a test for", "add a regression test", "which tests should I run", "run only the affected tests", "set up E2E for this project", "generate test-e2e.sh", "how do we test this stack". Not for: running a coverage audit, the module map / coverage matrix, tracking a finding, or suite-speed measurement — all of that is aidex-audit's test-coverage playbook.

Sep 17
demon673 Bundle

Dota2 Custom Game Dev

Use when working on DOTA2 custom game addons, including server Lua, TypeScriptToLua/TSTL vscripts, SolidJS Panorama UI, TypeScript Panorama, Panorama JavaScript, Panorama CSS/XML, KV files, abilities, modifiers, custom game events, net tables, Dota2 MCP live status/testing, and API lookup against Dota 2 runtime or BigCiba/vscode-dota2-tools references.

Sep 17
zszz3 Bundle

Frontend Design

Use when building or substantially reshaping a user interface, page, website, dashboard, or interactive frontend.

Sep 17
avinashp Bundle

Scaffolding

Generates boilerplate following project conventions. Use when asked to create a new component, module, service, or scaffold code.

Sep 17
ben2pc Bundle

Scaffold Typescript Frontend Quality Gates

为 TypeScript 前端仓库搭建质量门禁，按检查工具、检查规则和调用时机三层组织方案，并在写入前确认。

Sep 17
drafael Bundle

Write Tests

Write unit, integration, component, and end-to-end tests for code. Use when the user asks to "write tests", "add tests", "add test coverage", or "create test cases" for functions, services, components, CLIs, or user flows.

Sep 17
drafael Bundle

Explain Code

Explain current code behavior, structure, runtime flow, data flow, and component ownership. Use for ordinary walkthroughs, line-by-line explanations, subsystem mental models, and questions about what code does or how it works. Use teach, when explicitly invoked and available, for progressive learning; technical-writing, when available, for substantial standalone documentation; clarify for expectation mismatches or historical intent; code-review for finding problems; refactor-code for structural changes; brainstorm for unresolved future design; and architect, when explicitly invoked and available, for implementation-ready structural design.

Sep 17
drafael Bundle

Typescript Coder

Mandatory for every task in a TypeScript or mixed TypeScript codebase, including planning, implementation, debugging, refactoring, review, testing, dependency and build changes, CI, security analysis, and TypeScript-related documentation. Detect projects from tsconfig files, .ts/.tsx sources, TypeScript dependencies, or TypeScript framework configuration. Load before inspecting or changing such repositories. Covers Node.js, Bun, existing Deno projects, backend, frontend, CLI/TUI, Electron, Electrobun, Tauri, AWS CDK, and modern tooling.

Sep 17
justbecauselabs Bundle

Remotion

Best practices for Remotion - video creation in React. Use when building video compositions, animations, handling media assets, implementing transitions, working with captions, or using Remotion-specific APIs.

Sep 17
justbecauselabs Bundle

Hero UI Native

HeroUI Native component system guidance. Use when composing React Native UI with HeroUI Native components, configuring providers, referencing theme tokens, or looking up component APIs.

Sep 17
justbecauselabs Bundle

Tanstack Query

TanStack Query usage patterns. Use when building or refactoring data-fetching hooks, defining query keys, handling mutations, cache invalidation, or optimistic updates in React/React Native apps.

Sep 17
jinfanzheng Bundle

Data Viz

Data visualization for charts and graphs. Use when user needs "画图/图表/可视化". Creates static PNG or interactive HTML charts from data.

Sep 17
jinfanzheng Bundle

Data Files

File router that routes uploaded files to appropriate analysis skills. CSV/Excel/JSON → data-analysis, Images → data-viz, PDF/HTML → data-base.

Sep 17
jinfanzheng Bundle

Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Activate when user needs: "生成网页/创建网页/设计界面/前端设计/UI设计/网页制作/交互式网页". Output: Interactive HTML/CSS/React (web UI, components, dashboards, landing pages). Use for websites, web apps, interactive interfaces, posters with visual impact. NOT for document-style HTML reports (use document-creation for reports/docs).

Sep 17
lantisprime Skill

Analyze

Use this skill after Phase 1 Plan to create or intake requirements for a task. Produces requirements with stable IDs (REQ-001, REQ-002, ...), validates each requirement against the project's scope statement, and — critically — halts and asks for UX designs and brand guidelines whenever the work touches a frontend or user interface. Trigger whenever a plan has been approved and requirements are not yet written, or when the user asks to "gather requirements", "write user stories", or "define acceptance criteria". Runs before Design.

Sep 17
mehdibha Skill

Dev Tweaker

Add throwaway useTweak() controls to a www feature component so the user can flip design/layout options live in the dev-only tweaker panel and pick one, then bake the choice in and remove the scaffolding. Use only when they explicitly ask for tweaks or options on a specific feature during PR/feature-branch work.

Sep 17
mehdibha Skill

React Start

React bindings for TanStack Start: createStart, StartClient, StartServer, React-specific imports, re-exports from @tanstack/react-router, full project setup with React, useServerFn hook.

Sep 17
mehdibha Skill

Router Core Navigation

Link component, useNavigate, Navigate component, router.navigate, ToOptions/NavigateOptions/LinkOptions, from/to relative navigation, activeOptions/activeProps, preloading (intent/viewport/render), preloadDelay, navigation blocking (useBlocker, Block), createLink, linkOptions helper, scroll restoration, MatchRoute.

Sep 17
mehdibha Skill

Devtools App Setup

Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.

Sep 17
mehdibha Skill

Router Core Data Loading

Route loader option, loaderDeps for cache keys, staleTime/gcTime/ defaultPreloadStaleTime SWR caching, pendingComponent/pendingMs/ pendingMinMs, errorComponent/onError/onCatch, beforeLoad, router context and createRootRouteWithContext DI pattern, router.invalidate, Await component, deferred data loading with unawaited promises.

Sep 17
mehdibha Skill

Start Core Execution Model

Isomorphic-by-default principle, environment boundary functions (createServerFn, createServerOnlyFn, createClientOnlyFn, createIsomorphicFn), ClientOnly component, useHydrated hook, import protection, dead code elimination, environment variable safety (VITE_ prefix, process.env).

Sep 17
okayus Bundle

Cloudflare Workers E2e Playwright

Wire Playwright e2e tests against a Cloudflare Workers app (Hono + Vite + @cloudflare/vite-plugin) without falling into the two traps that silently break things — the strict CSP vs Vite HMR inline preamble conflict that prevents React from mounting (on `page.reload()` with vite-plugin 0.1.x; from the initial load on 1.x), and the `wrangler dev --config` state-path quirk that makes the Worker query an empty D1 sqlite. Covers why you must target the build artifact via `wrangler dev` (not `vite dev`), why `--persist-to .wrangler/state` is mandatory, the WebAuthn virtual authenticator recipe (no `DEV_BYPASS_USER_ID` shortcut — the real register/login wiring is tested), the seeded-session seam for third-party OAuth apps (seed a real session row + inject its cookie; OAuth has no virtual authenticator), the narrow "3 specs only" scope (golden path / auth boundary / security headers), the `.dev.vars` copy that `@cloudflare/vite-plugin` 1.x writes into `dist/<worker>/` (it silently overrides your e2e vars), the unread

Sep 17
rimagination Skill

Scientific Visualization

Publication-aware scientific figure planning, generation, and review that preserves data meaning, provenance, uncertainty, accessibility, and reproducibility. Use for plots, schematics, dashboards, or figure redesign.

148 Sep 17
juspay Skill

React Artifact

Author app-like designs in React/JSX and bundle them in-sandbox into the same single self-contained HTML artifact Design Studio delivers. Use when the design needs real state, complex interactivity, or component reuse beyond what vanilla JS comfortably handles.

Sep 17

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include codex-icons, wiki-snapshot-data, protowiki-components. 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.