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.
-
horizon-foundry Bundle Production AuditUse when a product is approaching launch, an invite wave, or a release decision and needs a whole-application readiness audit ending in a scope-qualified ship/no-ship verdict. Also for "is this safe to ship", "pre-launch review", or "audit the whole app", or to audit one dimension alone (security, concurrency, reliability, accessibility, ui, infra, operability, testing-confidence, data-migration-safety, release-safety, performance-capacity). Not for reviewing a single diff or applying fixes; it reads the whole application and only reports.
-
hugohe3 Bundle Epub TranslatorTranslate English EPUB books into Simplified Chinese EPUB files with the current agent's model, without requiring any model API key or vendor-specific SDK. Preserve the original EPUB structure, images, CSS, metadata, links, and reading order. Use when the user asks to translate an .epub book, "英文 epub 翻译成中文 epub", "translate epub to Chinese", or produce a Chinese EPUB from an English EPUB.
-
hugohe3 Bundle Markdown ConversionConvert source documents (PDF / Word / Excel / PowerPoint / EPUB / HTML / Jupyter / subtitles / web URL) into clean Markdown with links and images extracted alongside. Default is a sensible auto-clean transcription; use --raw for archival fidelity, or combine --filter-images / --no-images for image control. Also batch-converts directories. Use when the user asks to turn a document into Markdown, "extract text from a PDF", "把文档转成 md", "网页转 markdown", "批量转 md".
-
iflytek Bundle Animated Sketch Diagram生成"黑墨手绘涂鸦"风格的动画架构图/流程图:米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML(SVG+CSS),可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化,或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用;即使用户没明说要动画,做技术概念科普配图时也应优先考虑本 skill。
-
johnlindquist Skill HardenStrengthen a UXSpec against real-world conditions — overflow, missing data, network failures, and accessibility
-
johnlindquist Skill ReviewRun a systematic quality audit on a completed UXSpec — design intent, consistency, accessibility, and state coverage
-
jointsome0-lgtm Bundle Improve Codebase ArchitectureUse when a codebase feels harder to change than it should and the friction needs locating — scans git-history hot spots and deletion-test candidates into a visual HTML report, then grills through whichever candidate the owner picks.
-
clockworklabs Skill Typescript ClientSpacetimeDB TypeScript/React client SDK reference. Use when building web clients that connect to SpacetimeDB.
-
memi-design Bundle Enforce Design CIUse when a repository needs deterministic pull-request checks for new accessibility, design-token, component-structure, responsive, and UI-state regressions with file-level evidence.
-
memi-design Bundle Audit Frontend DesignUse when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.
-
memi-design Skill Build Swiftui InterfaceUse when a coding agent must design, scaffold, implement, or verify an iOS or macOS SwiftUI interface with Apple-platform state, accessibility, availability, testing, and Xcode evidence.
-
fellipeutaka Bundle Tanstack PacerTanStack Pacer best practices for execution control in React — debouncing, throttling, rate limiting, queuing, and batching. Use when implementing search inputs, scroll handlers, API rate limits, task queues, bulk operations, or any scenario requiring controlled execution timing with reactive state.
-
fellipeutaka Bundle Tanstack HotkeysGuide for implementing keyboard shortcuts in React using @tanstack/react-hotkeys. Use when building hotkey/shortcut features, registering keyboard shortcuts, handling key sequences, recording custom shortcuts, tracking held keys, or formatting hotkeys for display in React applications.
-
fellipeutaka Bundle Tanstack VirtualTanStack Virtual headless virtualization for React. Use when rendering large lists (100+ items), implementing virtual scroll, building infinite scroll feeds, virtualizing grids or tables, using window-level scrolling, or implementing masonry/lane layouts with @tanstack/react-virtual. Triggers on: useVirtualizer, useWindowVirtualizer, virtual list, virtual scroll, list virtualization.
-
getsentry Bundle PrCreate a draft PR for the current branch following repo conventions. Writes a concise PR description from the implementation plan, embeds the full plan as a hidden HTML comment so reviewers can read it without leaving GitHub, and reuses an existing branch when one is already checked out. Use this once your implementation is committed and pushed.
845 -
xiaoyuge886 Skill Meta Agent综合智能代理系统,整合任务分析、规划和ReAct执行循环能力。当用户需要处理复杂任务、多步骤工作流或需要自主决策和反思的任务时使用。
-
dobroslavradosavljevic Bundle T3 EnvBuild, review, debug, configure, migrate, or plan type-safe environment variables with T3 Env (@t3-oss/env-core, @t3-oss/env-nextjs, @t3-oss/env-nuxt) and current docs. Use for t3-env, createEnv, runtimeEnv, runtimeEnvStrict, experimental__runtimeEnv, clientPrefix, NEXT_PUBLIC_, NUXT_PUBLIC_, VITE_, PUBLIC_, emptyStringAsUndefined, skipValidation, onValidationError, onInvalidAccess, isServer, shared, extends, createFinalSchema, Standard Schema, Zod, Valibot, ArkType, presets-zod, presets-valibot, presets-arktype, vercel, railway, netlify, fly, render, coolify, vite, wxt, neonVercel, supabaseVercel, uploadthing, upstashRedis, and Next.js or Vite env validation.
-
rm2thaddeus Bundle Skills SummarizerSummarize skill usage logs into JSON and HTML upkeep reports, and propose conservative skill improvements with human approval. Use when asked to digest skill telemetry, generate upkeep summaries, or produce skill usage stats.
-
rm2thaddeus Bundle Start Pixel DetectiveStart, stop, or check Pixel Detective services on this machine. Use when the user asks to start Pixel Detective, start backend only, start full stack, restart, stop, or check Docker, Qdrant, ML, UMAP, or frontend status, or to provide a specific Pixel Detective page URL.
-
alibaba Bundle Esa DeployDeploys React/Vite applications to Alibaba Cloud ESA Pages. Use when the user needs to deploy frontend applications, manage deployments, configure custom domains, or troubleshoot deployment issues on ESA (Edge Security Acceleration) platform.
-
alibaba Bundle Auto DevelopOPC-Starter 智能开发技能。AI 亲和的 React Boilerplate 项目开发规范,支持动态上下文感知、TDD 驱动开发、Agent Studio 扩展。适用于认证系统、组织架构、Agent 工具、数据同步等模块的迭代开发。
-
alibaba Bundle Design System UICreate distinctive, production-grade frontend interfaces with high design quality using Mobile First strategy. Analyzes design systems from screenshots, generates Tailwind CSS + Shadcn UI configurations, and retrofits existing projects. Optimized for Claude Opus 4.5 with structured decision trees and self-verification checkpoints.
-
waynesutton Skill Workos Convex AuthSet up and configure WorkOS AuthKit authentication with Convex backend. Use when integrating AuthKit, configuring JWT providers, setting up environment variables, or implementing sign in and sign out flows with React and Vite. Supports Netlify deployment.
-
0xkangl Bundle Codebase AuditMulti-agent codebase audit / 代码库审计 spanning architecture, performance/scalability, code quality, security, testing, dependencies/debt, maintainability/observability, build/deploy/infra, and conventions compliance (against the code-conventions skill), plus conditional dimensions — frontend a11y/i18n on web stacks, per-endpoint-group interface audit(接口审计)when an HTTP service is detected, and per-business-flow audit(业务流程审计)whenever important flows are identified (any project type): scopes the target, fans out parallel auditors, adversarially verifies every finding to cut false positives, then synthesizes two standalone documents — 审计报告 + 按严重度问题汇总。只发现与整理问题,不产出修复方案;issues-report 可交下游 remediate-suggest skill 补推荐方案(完成时提示、不自动调用)。
-
0xkangl Bundle Code ConventionsUse when writing or modifying code, maintaining project documentation, configuring Git workflows or ignore rules, preparing commits, or deploying services. Routes to conventions for APIs, logging, testing, errors, configuration and secrets, security, containers, database migrations, releases, code style, and Go, Python, TypeScript/JavaScript, Rust, React, or Flutter/Dart.
-
4thfever Skill Test Validate运行项目测试(涵盖 Python 后端、Vue 前端及多语言校验)
-
4thfever Skill Roleplay Mode Implementation规划、实现或重构角色扮演模式(默认上帝视角下的单角色接管)时使用。适用于一期文本决策、二期统一有限选择框架、三期依附 Conversation 动作的自由对话,以及对应的 runtime/API/frontend/test 收口。
-
alexyskoutnev Bundle Method WritingWrite or revise a paper's Method section using recipes distilled from dissecting top ML researchers' papers. Use when drafting or restructuring a method section, choosing its architecture figure, algorithm box, or notation, deciding how to introduce and defend a system's components, or fixing a method that reads as a flat wall of mechanics. Applies the N-named-parts skeleton, the setup-banks-notation rule, the star-component discipline, the running-example rule, and mechanical checklists.
-
alexyskoutnev Bundle Results WritingWrite or revise a paper's Experimental Results section using recipes distilled from dissecting top ML researchers' papers. Use when drafting or editing a results section, its tables, figures, or captions, an ablation, or a limitations subsection, or when a results section reads as an undifferentiated scoreboard. Applies the claim-headed paragraph rule, the measurement-over-scoreboard weighting, the named-component lesion, paired-number discipline, and mechanical checklists.
-
andrewdongminyoo Skill Rn AuditUse when you need a broad, evidence-based React Native or Expo code audit of a project, feature, or diff. It reviews rendering, hooks, lists, native boundaries, and effects without changing source.
-
andrewdongminyoo Skill Rn Device QAUse when React Native or Expo acceptance work needs runtime evidence from a simulator, emulator, or physical device, including screenshots, logs, UI interaction, or exploratory QA.
Audited -
andrewdongminyoo Skill Rn Asset HygieneUse when a React Native project has messy assets — unreferenced/unused image, SVG, or Lottie files, scattered or deeply-relative require() paths, or string-based asset references you want made type-safe. Audits first (read-only), then offers git-safe cleanup. Wraps the rn-typed-assets CLI.
-
andrewdongminyoo Bundle Rn Metro ConsoleUse when you need to read a running React Native app's console output — confirm a log fired, watch console.warn/error, or verify runtime behavior — without opening the DevTools GUI. Reads logs from Metro's CDP endpoint; bounded by default. Read-only with respect to project source. Runs the bundled rn-console.mjs helper.
-
andrewdongminyoo Skill Rn Newarch AuditUse when planning a React Native upgrade or asking "is my app ready for the New Architecture?" — audits which dependencies and app-local native modules block enabling the New Architecture. Read-only; reports and interprets, changes nothing. Wraps the rn-newarch-ready CLI.
-
andrewdongminyoo Bundle Rn Upgrade PulseUse when a React Native or Expo upgrade is being planned and you need the current upgrade surface recorded as evidence — installed versions, package-manager and lockfile candidates, native ownership, CI verification gaps. Wraps the bundled, tested rn-upgrade-pulse.mjs and stable read commands; read-only, and it never selects a target version. For a fast setup overview use rn-project-snapshot, and for New Architecture readiness specifically use rn-newarch-audit.
-
andrewdongminyoo Bundle Rn Device CaptureUse when an agent needs to see the running React Native app — verify a screen rendered as intended, capture the iOS simulator or Android emulator, or screenshot an iOS 17+ physical device. Read-only with respect to project source; writes only a screenshot artifact. Runs the bundled device-shot.sh helper.
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 harden, tanstack-hotkeys, pr. 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.