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.
-
loadingx865-star Bundle Dashboard Craft数据看板 / 运营大屏 / 工业控制台的前端工程化开发规范与交付门禁。Engineering workflow, design tokens, chart and component unification, multi-resolution and multi-browser verification, quality gates, and delivery handoff for dashboard, KPI screen, control room, large display, data visualization, admin console, and plant TV projects. Use when building, iterating, refactoring, or reviewing a dashboard-type frontend, when a UI must render correctly on factory TVs, video walls, or control-room displays at 1080p/1440p/4K, or when the user mentions 看板, 大屏, 控制台, 数据可视化, KPI 大屏, 拼接屏. Also use to audit an existing dashboard for hardcoded styles, inconsistent chart theming, or missing responsive verification. 不适用于营销官网、作品集等表达型页面(那类页面请用 frontend-design 类 skill)。
-
andersonlimahw Bundle Google Play Release AgentAI release agent for Google Play Store. Audits Android/Expo/React Native/Firebase/RevenueCat apps before submission — build readiness (app.json, eas.json, AAB, versionCode), Play Console metadata, Data Safety Form, Android permissions, RevenueCat/IAP, i18n parity (PT/EN/ES), policy-risk copy, internal/closed testing and staged rollout. Generates reports and a GO/NO-GO checklist. NEVER publishes or rolls out without explicit human approval. Use when preparing an Android app for Google Play, auditing a submission, generating release notes, validating Data Safety or permissions, or running a release go/no-go. Triggers on "prepara meu app para Google Play", "audita minha submissão Android", "gera checklist Google Play Review", "valida Data Safety", "valida permissões Android", "valida RevenueCat/IAP Android", "gera release notes para Google Play", "faz go/no-go de release Android", "prepara internal testing/closed testing", "audita risco de rejeição por policy".
-
andersonlimahw Bundle Create PluginScaffold a new AI agent plugin directory with valid manifest, component directories, and marketplace wiring. Use when starting a new plugin, adding a plugin to a multi-plugin repository, or reviewing a plugin before submission.
-
andersonlimahw Bundle Design ExpertCreate, redesign, critique, and ship distinctive production frontend pages and components. Orchestrates design, design-taste-frontend, frontend-design, impeccable, revenue-centric-design, scroll-world, and ui-ux-pro-max in lexical order. Use for UI structure, visual systems, responsive layouts, interaction, motion, and visual QA; skip backend-only work.
-
andersonlimahw Bundle Heygen ExpertCanonical HeyGen orchestrator. Routes any request touching HeyGen — AI avatars, presenter videos, video translation/dubbing, lipsync, or HyperFrames HTML-based video composition (motion graphics, captions, slideshows, Remotion ports, faceless explainers, product launch videos, PR-to-video, music-to-video, talking-head recuts) — to the correct skill and CLI (`heygen`, `npx hyperframes`) instead of guessing or reimplementing what those skills already do. Use when the user says "create an avatar", "make a HeyGen video", "translate/dub this video", "lipsync", "clone my voice into another language", "generate a talking head video", "make a promo/explainer/motion graphic", "hyperframes", "render a composition", or names any heygen-* / hyperframes-* skill directly. Decides HeyGen API vs HyperFrames vs CLI-only, and how to bridge a HeyGen-generated clip into a HyperFrames composition.
-
andersonlimahw Bundle Karpathy GraphBuild typed, provenance-tracked knowledge graphs from any context — documents, codebases, incidents, research — so one or many AI agents share durable memory instead of copying transcripts. Use when the user says "build a knowledge graph", "criar grafo", "map this codebase/domain", "graph these documents", "extract entities and relations", "ground this claim", "visualize the graph", or asks how facts, sources and experiments connect. Every claim carries a source, every merge is reversible, every answer cites edge ids. Writes to the given path, or to ./.karpathy-graphs/<graph-name>/ by default, and renders an interactive HTML explorer for humans.
-
andersonlimahw Skill New ScreenNew screen/page creation workflow. Use when adding a new screen or page to web or mobile application, coordinating between UX, UI, frontend, and mobile engineers.
-
andersonlimahw Bundle App Store ReviewPrepare for Apple App Store review and prevent rejections. Covers generic App Review guidelines, PrivacyInfo.xcprivacy and required-reason APIs, ATT, EU DMA, HIG, metadata, screenshots, entitlements, StoreKit/IAP, widgets, Live Activities, and submission workflow. Includes React Native, Expo, EAS, and RevenueCat field patterns: dead buttons without onPress, auth listener null-flash login loops, entitlement locked after sandbox purchase, subscription price hierarchy, duplicate IAP metadata, pre-permission button copy, screenshot slot audits, build number and lockfile pipeline gates, and App Store Connect API automation limits. Use when preparing for submission, responding to an App Review rejection, fixing rejection reasons, auditing privacy/metadata/IAP, implementing ATT, or debugging why premium stays locked after purchase.
-
andersonlimahw Skill Prompts Vercel ReactReady-to-paste prompts for the Vercel/React family — React and Next.js best-practice audits, performance optimization, composition refactors, view transitions, React Native/Expo, and deploys.
-
andersonlimahw Skill Karpathy Graph VisualizeRender a karpathy-graph for humans — an interactive HTML explorer, a Mermaid diagram for docs and PRs, and a health report — then explain what the picture actually shows. Use when the user asks to see, visualize, draw, or open the graph, wants a diagram for documentation, or asks what the graph looks like.
-
andersonlimahw Skill Prompts Design FrontendReady-to-paste prompts for UI and frontend design — intentional visual direction, design-system data, accessibility gates, screenshot-to-code, and redesigns. One aesthetic at a time.
-
andersonlimahw Bundle Worktree JanitorLimpa worktrees git abandonadas por agentes de IA (Claude Code, Codex, Gemini CLI, Agy/Antigravity, OpenCode, Cursor) em todos os projetos da máquina, com autorização explícita do usuário e relatório HTML autocontido. Classifica cada worktree por risco — órfã, mergeada, upstream removido, sem commits próprios, stale, suja, ativa, protegida — lista projetos/branches/diretórios antes de remover qualquer coisa, aplica só a seleção aprovada e gera undo.sh. Use quando o usuário pedir para limpar worktrees, remover worktrees órfãs ou mergeadas, fazer faxina de branches de agentes, liberar espaço de worktrees, auditar worktrees da máquina, ou disser "limpar worktrees", "worktree cleanup", "faxina de worktrees", "clean worktrees", "remover worktrees antigas", "relatório de worktrees".
-
andersonlimahw Skill Build Agent OrchestratorDesign and create a project, workspace, or domain agent orchestrator with optional Spotify Squad-style subagents. Use when the user wants agents, subagents, a squad orchestrator, cross-repo coordination, or backend/frontend/mobile domain delegation.
-
john-walks-slow Bundle Code Deep Dive为 vibe coding 项目编写中文深度 markdown 长文,帮助用户在碎片时间(通勤、午休、睡前,手机观看)补齐代码知识。每次由用户明确指定主题(如某个框架机制、某段核心逻辑、某个技术概念),输出一篇完全自包含(代码完整内嵌、无需电脑即可学习)、附带充分外部链接与资料、单篇学习时长约 1.5 小时的深度长文,保存到项目的 docs/learning/ 目录。用户可要求 format=html 生成带目录、交互测验、代码高亮的单文件网页版。当用户说'帮我写一篇学习 XX 的文章'、'把这个项目的 XX 讲透'、'我想深入理解 XX 原理'、'碎片时间想学一下 XX'、'写一篇 XX 的深度笔记',或任何 vibe coding 后想系统补齐代码知识的请求时,务必使用本技能,即使没有明确提到'文章'或'笔记'字样。
-
veekunth217 Skill WebappFull-stack web app wizard — Angular/Node, React/Node, Vue/Node — with optional deployment to AWS or DigitalOcean
-
elabalice-code Bundle FastdeaiMarkdown 去'AI 味儿'清洗工具(fastdeai.exe · self-contained 单文件,.NET 9,目标机免装运行时)。何时调用——★首要触发:拿到一份 AI 生成的 Markdown,想去掉那些'人类不会写'的格式装饰(装饰 emoji、引用框 >、分隔线 ---、斜体 *x*、删除线 ~~x~~、行内代码 `x`、加粗 **x**、图片、HTML 标签、脚注),只留纯文本结构(标题/表格/列表/段落),强调由作者后续手动重施加时 → 优先本 skill。①清洗 AI 生成的文档/报告/笔记;②批量给一个目录下的 .md 统一去味儿;③粘贴进来的大模型输出太花、要变成干净底稿。核心心法:代码围栏块是绝对原文保护区(里面的 **、`、>、emoji 一律不动)+ 正文行紧跟 --- 会被当 setext 标题而非删除分隔线(易误判)+ snake_case 的下划线保留。含完整清洗规则(保护/保留/转换/删除)、已验证语义坑、bash 调用约定、批量 recipe、与 fastsearch/Read 分工。载体为 self-contained exe(依赖 System.Text.Rune,无法内嵌进 PS5.1),源码在源码树。
-
elabalice-code Bundle Fastsignaltrace Rusttauri使用内置单文件 CLI 联合扫描 Rust 后端和 Tauri TypeScript/TSX 前端,发现 static/const/struct 字段、模块/类状态和 Zustand 泛型状态字段,标记生产消费角色并生成 if/match/switch 标准方程。适用于 Rust+Tauri 项目信号地图、状态读写审计和 AI agent 自动化验证;不要用于 C#、GDScript、React hook 局部状态或完整跨语言调用链推断。
-
veekunth217 Skill Dark ModeAdd dark mode to any frontend project — generates dark variants of CSS tokens, a smooth animated toggle (MJ Black or White tribute), supports system preference, invert mode, and PDF read mode
-
veekunth217 Skill TerraformInteractive Terraform/Terragrunt wizard — preset full-stack skeletons (AWS EKS, DigitalOcean Kubernetes) or custom AWS component picker, generates production-ready .tf files
-
andy922200 Skill Vue Typescript Frontend新增、修改、重構、除錯、測試或審查 Vue 3 + TypeScript 前端時使用,包含建立 Vite/Vue 前端骨架、Vue 元件、頁面與路由、Composable、Pinia Store、Tailwind CSS、i18n、Axios API 存取、響應式與深色模式。常見觸發句式:「做 Vue 頁面」、「新增元件」、「改前端」、「建立 composable」、「加 Pinia store」、「串 API」、「加 i18n」、「做 RWD」、「用 Tailwind 重構」、「建立 Vue 專案」。SKIP:純後端 / API / 資料庫 / 基礎設施工作、非 Vue 前端檔案的獨立維護、只討論 git commit / branch / PR 而不變更前端實作。
-
yourpovv Skill ErrorsUse this skill for anything about failure, both how code should fail and how failures should read to a human. Part A covers Robert C. Martin's ("Uncle Bob") error-handling principles from Clean Code: exceptions over return codes, try-catch-finally first, providing context, defining exceptions by the caller's needs, the Special Case pattern, and never returning or passing null. Part B covers user-facing error messages: the three laws (what / why / action), severity levels, copy rules, and accessibility. Trigger on "handle this error", "this exception is useless", "should I return null", "improve this error message", "write an error state", or any review of failure code or copy. Language- and framework-agnostic.
-
royalmilkteamaster Bundle Milktea Skills Brownfield Refactor Planner 2既有專案的重構規劃入口。先唯讀盤點現況並產生一份 HTML 架構報告,讓使用者決定是否繼續;核准後才確認目標架構、產生 Spec 與 Tickets,最後產生可貼到新 Task 的 Brownfield Implement 交接文字。整理混亂架構、去重、清理廢棄內容、局部重建,或新增功能前必須先調整既有結構時使用;不修改來源碼或資料。
-
planexeorg Bundle Extract Parameters From FullUse when the user wants to extract parameters, modelling values, or key variables from a PlanExe report (HTML or text) for napkin math, triage, or Monte Carlo simulation
-
planexeorg Bundle Extract Parameters From DigestUse when the user wants to extract parameters from a PlanExe extraction-input digest (the markdown produced by experiments/napkin_math/prepare_extract_input.py — the 137-recommended section bundle, with the four "Keep or compress" sections compressed) instead of the full PlanExe HTML report
-
jiangeplus Bundle UI DesignerUI 设计师(像素君)单入口技能,一条流水线覆盖:设计令牌 → 组件与状态矩阵 → 响应式布局 → WCAG AA 无障碍审计 → 开发交付文档,也可只调用其中任一阶段。触发词:设计令牌、design tokens、生成token、颜色体系、CSS变量、暗色主题变量、design token system、组件设计、组件库、component library、按钮样式、表单样式、组件状态、ui components、设计组件、响应式设计、responsive、断点、栅格系统、grid布局、mobile first、自适应布局、breakpoints、无障碍、accessibility、a11y、WCAG、对比度检查、屏幕阅读器、键盘导航、可访问性审计、设计交付、handoff、设计规格、开发交接、还原度、design spec、设计QA、UI设计、设计系统、像素君、ui-designer。适用场景:新项目初始化样式基础、搭建跨平台设计系统、补全组件交互状态、多端适配方案制定、上线前无障碍验收、设计稿定稿后的开发交接与还原度验收。
-
jiangeplus Bundle Algorithm Engineer算法总纲与路由:算法设计、讲解、实现、调试、性能剖析与方案审查。TRIGGER —— 设计/实现/优化/证明/调试/Review 算法、复杂度分析、面试算法讲解、最短路与 DP/贪心/图论/字符串/几何、数值优化与机器学习建模评估、算法选型。DO NOT TRIGGER —— 纯业务 CRUD 与页面开发(→ fullstack-dev / frontend-dev)、只做 UI 视觉设计、不含算法内核的数据搬移脚本。
-
keeveeg Skill 09a Game Accessibility LocalizationSpecify and review accessibility and localization workflows for selected game devices, languages, and audiences. Connect requirements to actions, text, signals, and future acceptance.
-
jcaraballo113 Skill Setup ToolingBootstrap a project with my preferred tooling. Drives an intent interview first, then composes the matching modules — a per-platform stack (JS/TS web via setup-js-stack, Expo/React Native mobile via setup-expo-stack), lint-guardrails, setup-evm-stack for on-chain web projects, design-tooling, and agent-rules. Use when the user says "setup tooling" or "bootstrap this project", sets up a mobile/expo app, or starts a fresh repo.
-
jcaraballo113 Bundle Setup JS StackThe JS/TS stack module for setup-tooling — TanStack Start (or Vite for SPAs), TanStack Query/Form, Zustand for client state when needed, GSAP for motion/animation, Hono for pure backends, Drizzle + Docker/Supabase Postgres, Zod, Tailwind, shadcn, Vitest, tsc typecheck and lefthook commit gates, GitHub Actions CI, all on pnpm with the 1-day package-age guard. Use when the user says "setup js tooling", "setup the js stack", or bootstraps a fresh JS/TS repo — usually composed by setup-tooling.
-
jcaraballo113 Bundle Setup Expo StackThe Expo/React Native mobile stack module for setup-tooling — Expo (latest SDK) + Expo Router, NativeWind v5 + Tailwind v4, TanStack Query, Zod, Zustand when needed, react-native-reanimated for motion, jest-expo + @testing-library/react-native for tests, tsc typecheck and lefthook commit gates, EAS for build/update/CI/submit, all on pnpm with the 1-day package-age guard. Backend decided per project (Supabase client SDK or a shared API + Drizzle). Use when the user says "setup expo", "setup the mobile stack", "bootstrap an expo app", "scaffold a react native app", or bootstraps a fresh Expo repo — usually composed by setup-tooling.
-
chambear2809 Bundle Splunk Appdynamics Eum SetupUse when the user asks for AppDynamics EUM, Browser RUM, BRUM, Mobile RUM, IoT RUM, app keys, JavaScript injection, Session Replay, Mobile Session Replay, source maps, mobile SDKs, or EUM beacon validation. Render and validate Splunk AppDynamics End User Monitoring workflows, including Browser RUM, Mobile RUM, IoT RUM, EUM account and application keys, JavaScript injection, iOS, Android, React Native, Flutter, .NET MAUI snippets, Browser Session Replay, Mobile Session Replay, mapping, source-map upload, and beacon validation.
-
chambear2809 Bundle Splunk Observability Browser Rum SetupUse when the user asks for Splunk Browser RUM, JavaScript RUM, @splunk/otel-web, source maps, frontend Session Replay, DXA prerequisites, or non-Kubernetes browser instrumentation. Render, validate, apply, and hand off generic Splunk Observability Cloud Browser RUM and Session Replay setup for web applications outside the Kubernetes injection path, including CDN snippets, npm/TypeScript initialization, Next.js/Vite/ Webpack source-map upload helpers, CSP headers, Session Replay privacy controls, RUM-to-APM Server-Timing trace linking validation, and dashboard or detector handoffs.
-
chambear2809 Bundle Splunk Observability K8S Frontend Rum SetupUse when wiring a React, Vue, Angular, Next.js, Nuxt, Remix, nginx/httpd, SPA, or MPA frontend to Splunk Browser RUM, enabling Session Replay, configuring Frustration Signals, preparing browser-side Digital Experience Analytics (DXA), uploading source maps, validating trace linking, or uninstalling RUM. Do not use for AppDynamics BRUM. Render, apply, verify, and uninstall Splunk Browser RUM and browser-side Digital Experience Analytics (DXA) prerequisites plus optional Session Replay injection for Kubernetes- served frontends. Supports nginx sub_filter, ingress-nginx snippets, initContainer HTML rewrites, runtime config, backup and revert manifests, SplunkRum.init options, Frustration Signals, source-map upload helpers, RUM-to-APM Server-Timing validation, multi-workload specs, distroless detection, version pinning, SRI hashes, IE11 opt-in, and dashboard, detector, SIM, and backend auto-instrumentation handoffs.
-
chambear2809 Bundle Splunk Observability Mobile Rum SetupUse when instrumenting mobile apps with Splunk RUM, preparing Mobile Session Replay, preparing mobile- side Digital Experience Analytics (DXA), validating RUM-to-APM linking, or rendering mobile source patches. Do not use for AppDynamics EUM or Kubernetes Browser RUM injection. Render, validate, and optionally apply guarded source patches for Splunk Observability Cloud Mobile RUM and mobile-side Digital Experience Analytics (DXA) prerequisites across native iOS, native Android, React Native, and Flutter apps. Covers pinned agent versions, Session Replay enterprise gating, privacy controls, release attributes, dSYM and Android mapping upload helpers, React Native and Flutter native artifact handoffs, WebView Browser RUM bridge snippets, and RUM-to-APM Server-Timing traceparent validation.
-
univates-deadlock Bundle Developing Vanilla Web InterfacesUse when creating, modifying, reviewing, or refactoring framework-free web interfaces built with HTML, CSS, and vanilla JavaScript, especially when BEM naming, design tokens, reusable components, responsive behavior, accessibility, or CSS architecture must stay consistent.
-
univates-deadlock Bundle Developing Nextjs App Router InterfacesUse when creating, modifying, reviewing, or refactoring Next.js App Router interfaces or React components inside a Next.js application, especially pages and layouts, Server/Client Component boundaries, data-driven UI, forms, API integration, responsive behavior, or accessibility.
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 dashboard-craft, google-play-release-agent, create-plugin. 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.