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.
-
ivanli-cn Bundle Loadlynx Release DecisionDecide LoadLynx release labels and backfill releases from merged PRs. Use when Codex needs to choose type/channel/component labels, decide whether skill/docs changes require a GitHub Release, update a merged PR's release intent, or dispatch Release (LoadLynx) with a PR number.
-
ivanovishado Bundle Openpay MexicoOpenPay payment integration for Mexican market with card, SPEI, and OXXO support. Use when integrating Mexican payment processing, adding OpenPay to Next.js/React apps, implementing SPEI/OXXO/card payments, or handling payment webhooks. Covers REST API setup (no SDK), webhook verification, and security patterns.
-
jandedobbeleer Skill Mobile LayoutMobile layout contract for Punch. Use when any task changes component layout, adds a new page or panel, modifies the sidebar or modal, touches index.css, or mentions mobile/responsive/viewport.
-
javimosch Skill Hart Artifact DesignDesign and publish a polished, self-contained HTML deliverable to a live hart URL (https://hart.intrane.fr) — pairs the artifact-design craft standard (deliberate palette/type/layout, no templated AI look) with hart's publish/versioning/visibility workflow. Use whenever the human wants a hart link (not a claude.ai artifact) for a report, briefing, dashboard, or one-pager, especially when the content should be password-gated or living/updatable.
-
javimosch Skill Hart Skill AuthoringPublish agent skills as minimal, discoverable hart HTML artifacts using meta title/description/keywords.
-
jcarterjohnson Bundle Unslop UIStrips the cues that make a website read as AI-generated and forces a deliberate, project-specific design choice instead of the model's default. It does not impose a look or hand you taste. It removes tells (default shadcn/Tailwind, AI-purple gradients, gradient heading text, unprompted neon glow, emoji-as-icons, the centered hero plus three feature cards) AND the newer cream-plus-serif-plus-sage "tasteful default" that trading one default for another creates. Grounded in a 47-subreddit, 3.2M-post Reddit analysis of what people flag as AI slop. Use whenever building, styling, reviewing, refactoring, or auditing any website, landing page, web app UI, dashboard, or front-end component, especially when the user wants a site to look custom or human rather than AI-generated, or mentions AI slop, looks AI-made, generic, vibe-coded, Tailwind, or shadcn. Trigger even if they never say vibe-coded.
-
jenishshrestha Bundle Code ReviewValidates code against project skills and standards. Use this skill when the user asks for a "code review", "review this PR", "check this code", "security audit", or wants to verify code matches project conventions. This skill does not define its own architectural or styling standards — it checks code against FDD-architecture, tailwind-v4-best-practices, and frontend security best practices. Also use this when merging, approving PRs, or when the user asks "does this follow our standards?"
-
jenishshrestha Bundle Fdd ArchitectureFeature-Driven Development architecture and React coding standards for React + Vite applications. Use this skill when organizing features, structuring components, setting up imports, designing folder architecture, writing new components, or building new features in React apps. Also use when the user asks about project structure, feature organization, component placement, code quality principles (KISS, SOLID, YAGNI), or React patterns like hook extraction and composition. Apply these standards during active coding, not just review.
-
jhuse25 Skill Antislop DecksUse when designing or reviewing any presentation (pptx, Google Slides, HTML/reveal) so it does NOT look AI-generated. A bias-correction engine for decks: kills bullet soup with an assertion-evidence structure, sets DENSITY/MOTION/VARIANCE dials, bans the tells of a generated deck, requires one signature element, and generates a DECK.md per project. Pairs with antislop-web for shared visual discipline.
-
joelhooks Bundle Brain Component CompositionDesign and maintain composable data-backed Brain MDSvX components for pi-notes. Use when creating or editing `.brain/**/*.svx`, `.brain/components`, `.brain/data`, pi-notes Document Host components, review surfaces, or notes that should render JSONL, SQLite, Postgres, remote data, or reusable web shapes.
-
kyh Skill Cover VideoRecord a cover video for a content component, verify it looks right, upload it to Vercel Blob, and wire it into meta.json. Use when asked to generate/update a component's cover, preview video, or gallery thumbnail.
-
kyh Bundle Build ContentFull lifecycle for a new uicapsule content component: take an idea (or pitch ideas if none given), scaffold it, build the component, record a screen capture of it running locally, and open a PR with the recording embedded in the description. Use whenever the user pitches a component idea, says "build X and PR it", "add a <thing> component", describes a UI interaction/effect they want added to the gallery, or invokes /build-content with no arguments at all. Not for editing existing content components (unless re-recording their PR preview) and not for gallery covers (use cover-video).
-
kyh Skill Build RequestsDrain the queue of accepted component requests: every open GitHub issue labelled `ready` becomes a built, recorded, covered component with a PR that closes the issue. Use when asked to "build the ready requests", "run the request queue", "process component requests", or when invoked as /build-requests on a schedule. Not for building an ad-hoc idea (use build-content) or a single cover (cover-video).
-
kylezantos Bundle Thumb First PlatformThe technical-verification layer of the thumb-first mobile suite — finds and fixes objective platform defects in mobile web apps and PWAs (iOS Safari, Android Chrome). Covers viewport/100vh bugs, safe-area insets, touch targets and tap delay, service workers, web push, PWA manifest, and Core Web Vitals — with file/line defects and fixes, not opinions. Target-aware: full coverage for web/PWA; for native apps (React Native, Expo, SwiftUI, Flutter) it detects the target and hands off to a native skill if one is installed, otherwise states plainly that it does not do native-platform audits. Use for mobile-web/PWA technical audits, safe-area/notch issues, 100vh overflow, service-worker/offline, install/manifest, or mobile performance. Usually run via the /thumb-first umbrella (which also runs the design pass); invoke directly for technical checks only.
-
leechen298 Bundle Code2skill GenerateGenerate runnable, installable Functions, MCP tools, and Agent Skills from authorized frontend, backend, or full-stack code, including page features, interfaces, workflows, and fixes to existing generated packages;从已有前端、后端或全栈代码中提取业务功能,生成可运行、可安装的 Function、MCP 和 Agent Skill,适用于页面功能、接口功能、业务流程及已有生成结果的修正。
-
leohuang0423 Bundle Research Feishu Report CocreateUse for high-standard topic reports that need creator-first evidence, explicit audience and decision framing, non-consensus synthesis, structured dossiers, and optional Feishu or HTML delivery. Trigger when the user needs a deep report, build/no-build memo, high-rework-cost synthesis, a local-only method playbook, or a shareable research package rather than lightweight research or generic writing.
-
liangxp1990 Bundle Mp Weixin Skills微信公众号文章管理工具。用于管理微信公众号文章的发布和更新。使用场景:需要将文章发布到微信公众号草稿箱时;需要更新已有草稿内容时;需要上传图片素材到微信素材库时。核心功能:通过 AI 将文档转换为微信公众号 HTML,然后使用 Python 脚本调用微信 API 完成素材上传和草稿管理。
-
callstack Skill IOS SimulatorVerify and debug native, React Native, Expo, or Flutter apps on an iOS Simulator with agent-device. Use when an agent needs to launch an app, inspect its live UI, tap, type, scroll, validate a code change, collect failure evidence, or reproduce a workflow on an iPhone or iPad Simulator.
-
callstack Skill Android EmulatorVerify and debug native, React Native, Expo, or Flutter apps on an Android Emulator with agent-device. Use when an agent needs to launch an app, inspect its live UI, tap, type, scroll, validate a code change, collect failure evidence, or reproduce a workflow on an Android virtual device.
-
ailabs-393 Bundle Cicd Pipeline GeneratorThis skill should be used when creating or configuring CI/CD pipeline files for automated testing, building, and deployment. Use this for generating GitHub Actions workflows, GitLab CI configs, CircleCI configs, or other CI/CD platform configurations. Ideal for setting up automated pipelines for Node.js/Next.js applications, including linting, testing, building, and deploying to platforms like Vercel, Netlify, or AWS.
-
syedanabila559 Bundle NextjsNext.js Development Skill
-
chrisallenlane Bundle Lead ReviewAutonomous comprehensive review. Once-through pipeline over /review-health, /review-arch, /review-security, /review-perf, /review-a11y, /review-test, /review-release. Operator-configurable ticket creation at startup — when ON, auto-approves sub-skill ticket proposals per the orchestrator-family contract; when OFF, uniformly declines and surfaces findings in the consolidated report. Auto-detects sub-skills that do not apply (no web content → skip /review-a11y; no tests → skip /review-test).
-
linuxfoundation Bundle VueUse when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
-
linuxfoundation Bundle UikitUse when building any UI element in the crowdfunding frontend — covers when to use existing uikit components, how to extend them, and when to ask before creating new ones
-
coreeng Skill Support Bot ReviewUse when reviewing a support-bot change, local branch, or GitHub PR before merge, especially when focused security, ADR, frontend, backend, or high-risk-surface feedback is needed.
-
crustacean-dev Skill NodejsALWAYS consult this skill before writing, editing, reviewing, or refactoring any Node.js code. It prevents the most common LLM-generated Node.js mistakes: bare 'fs'/'path' imports without the node: prefix, sync APIs (readFileSync) in async contexts, exec() shell injection, JSON.parse(JSON.stringify()) instead of structuredClone(), Math.random() instead of crypto.randomUUID(), missing graceful shutdown, and callback-style APIs when promise versions exist. Trigger on: any server-side JavaScript/TypeScript, CLI tools, scripts, Express/Fastify/Koa apps, anything importing fs/path/crypto/child_process/http/stream/worker_threads, package.json edits, require()-to-ESM refactors, or any mention of Node.js, npm, or server-side JS. Also trigger when you see code with require(), readFileSync, exec(), JSON.parse(JSON.stringify()), or Math.random() in a Node.js context — the skill tells you what to replace them with. Do NOT trigger for browser-only JS, React/Vue/Svelte components, Deno, or Bun-specific code.
-
crustacean-dev Skill TypescriptEnforces strict TypeScript guardrails whenever writing, reviewing, refactoring, or generating .ts/.tsx/.mts/.cts code. Applies automatically to any TypeScript task — creating functions, components, types, configs, utility libraries, or converting JS to TS. Catches violations like enum (use as const), any (use unknown), default exports, barrel files, empty catch blocks, var, @ts-ignore, missing return types, and non-readonly properties. Also triggers for tsconfig changes, React/JSX with TypeScript props, API clients, CLI tools, and code reviews mentioning type safety. If the file extension or code context is TypeScript, use this skill — even if the user doesn't say 'TypeScript' explicitly.
-
cst2989 Skill React Tips10 high-impact React patterns and anti-patterns - state management, performance, hooks, and component design. Use when writing or reviewing React components.
-
cst2989 Skill No Unnecessary EffectsBefore writing useEffect, run through a decision tree to verify it's actually needed. Prevents the most common React anti-pattern in AI-generated code.
-
cygnusfear Skill FrontpageUse when chat output is getting dense — tables, comparisons, architecture, graphs, evolving findings. Compose an HTML frontpage via `frontpage_create` instead of typing raw HTML. Structured spec in, editorial page out. Mermaid / Chart.js / D3 / bespoke HTML all supported.
-
dahlia Bundle Rspress Custom ThemeCustomize Rspress themes using CSS variables, Layout slots, component wrapping, or component ejection. Use when a user wants to change the look and feel of an Rspress site, override theme components, add custom navigation/sidebar/footer content, inject global providers, or modify the default Rspress theme in any way. Also use when a user mentions theme/index.tsx, Layout slots, BEM class overrides, or rspress eject.
-
dahlia Skill FedifyUse this skill whenever writing JavaScript or TypeScript code that uses Fedify to build an ActivityPub server, handle federation activities, implement fediverse features, or integrate Fedify with a web framework such as Hono, Express, Next.js, Nuxt, Fastify, Koa, NestJS, Astro, SvelteKit, Fresh, h3, Elysia, or Cloudflare Workers. Covers the `Federation` builder pattern, actor/inbox/outbox/collection dispatchers, inbox listeners, vocabulary objects from `@fedify/vocab`, key pair management, HTTP Signatures, Object Integrity Proofs, the `KvStore` and `MessageQueue` interfaces, database adapter packages, structured logging with LogTape, OpenTelemetry tracing, the `fedify` CLI toolchain, and common mistakes. Also apply when the user mentions ActivityPub, federation, fediverse, WebFinger, NodeInfo, FEPs, or Mastodon interoperability, even if they do not name Fedify explicitly.
-
dakheera47 Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
dannote Bundle ElixirExisting Elixir application/library development and debugging. Use for .ex/.exs, Mix, OTP, Ecto, backend Phoenix, dependencies, docs, tests, or BEAM runtime state. Use elixir-web instead when the primary task is UI/LiveView/frontend work, and elixir-new-project instead for creation/bootstrap.
-
dannote Bundle Elixir WebExisting Phoenix/LiveView UI and frontend work: HEEx/components, styling, assets, browser behavior, runtime UI feedback, PhoenixReplay, Volt, icons, Tailwind, and interactive verification. Use instead of elixir when UI/frontend behavior is the primary task; not for project creation.
-
dannote Skill Elixir New ProjectCreate or bootstrap an Elixir/Phoenix project or package with Igniter and VibeKit. Use only for new-project generation or applying initial quality/tooling setup; use elixir for an existing backend project and elixir-web for existing UI/frontend work.
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 research-feishu-report-cocreate, loadlynx-release-decision, openpay-mexico. 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.