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.
-
gigio1023 Bundle Game ReviewUse when reviewing a stable game-design claim, playable build, prototype, milestone or release readiness, narrative content, accessibility, or playtest results, or judging whether a claim like "is this fun", "ready to ship", "playable", "vertical slice", or "done" is backed by real play and ready for a sign-off. NOT for choosing, repairing, or auditing unresolved direction artifacts (use game-direction) and NOT for planning or implementing work (use game-production).
-
glideapps Bundle Roto RooterStatic analysis for React Router applications. Use when building or debugging React Router apps to verify routes, links, forms, loaders, params, hydration patterns, and database persistence operations.
-
glideapps Skill Add CheckAdd a new static analysis check to roto-rooter. Use when the user wants to create a new check, validation rule, or analyzer for React Router applications. Guides implementation of checks that require cross-file application context like route/component relationships.
-
gmomakeshop Bundle Shop Analytics利用可能なデータ取得ツールで注文・会員データを取得し、売上分析・KPI算出・問題検知・原因分析・施策提案を行う。テキスト(会話内レポート)またはChart.js HTMLダッシュボードで出力する。基本指標(売上・客単価・受注件数)、リピート分析、新規/既存顧客分析、LTV、RFM、商品組み合わせ分析、離反分析、異常検知、購入トレンド分析に対応。「売上」「注文」「客単価」「リピート率」「LTV」「RFM」「売上レポート」「月次報告」「ダッシュボード」「売上が落ちた」「不振商品」「異常注文」「売上を伸ばすには」「キャンペーン設計」「クロスセル」「顧客育成」「会員分析」「購入傾向」「離反」など、注文・会員データの分析が少しでも絡むリクエストにはすべてこのスキルを使う。数値の確認だけでなく、なぜ変動したかの原因分析や次に何をすべきかの施策提案まで対応する。
-
gokhanamal Bundle IOS SimulatorDrive an iOS Simulator from plain-language instructions by discovering the project, launching the app, inspecting the visible UI, and interacting with elements through xcodebuildmcp. Use when the user wants an agent to open Simulator, navigate screens, tap buttons, type into fields, scroll, or capture screenshots and logs. ALSO auto-invoke this skill when you need to take a screenshot of a built iOS app, verify a UI component visually, or test a UI change you just implemented — any time seeing the running app in Simulator would confirm your work.
-
jacobjustin8 Bundle React Typescript ReviewReview React + TypeScript code — components, hooks, a PR, or a pasted file — the way a senior frontend engineer would, prioritizing correctness, hooks bugs, performance, accessibility, and type safety over style nits. Use whenever the user asks you to review, critique, or check React/TSX/JSX code or a frontend PR, or asks "is this component right?" — even if they don't say "code review".
-
jane-xiaoer Bundle Geo Collage「小耳几何风」——硬边几何一体化内容产线,一套色板贯穿三种介质:①横向翻页网页 PPT(单 HTML,20 种模块网格版式,7 套现代平面设计流派配色 + 内置换肤面板,零图片零 API,可导 PPTX 双模式);②小红书 3:4 卡片(同一套原子库,批量出 PNG);③公众号排版(深底满宽主题 7 套 + 11 个几何组件,零图片资产)。视觉特征 = 模块网格咬合、圆/三角/条纹平涂色块、零渐变零阴影零圆角、出血切断。当用户说「几何风 PPT」「包豪斯风格 PPT」「瑞士风格排版」「色块 PPT」「模块网格」「几何拼贴」「geo collage」「几何风小红书」「几何风公众号」「硬边几何」时使用。与小耳剪纸风(温暖手工)互为冷暖两极。
-
jane-xiaoer Skill Haoqi 3d WechatThis skill should be used when the user asks to "用 3D 卡通风做公众号", "做一个好奇果冻风公众号排版", "把这篇文章排成 3D 卡通风", "做 3D 黏土风公众号版面", or requests a WeChat Official Account article using the Haoqi 3D / cute clay / jelly visual language. Produces WeChat-safe static HTML and image guidance; does not run Three.js inside the article.
-
jfrog Bundle Dap Service CompositionUse when composing services — ServiceComponent sub-deployments, SharedResource, chaining blueprints, get_environment_capability. Triggers — service component, sub-deployment, dell.nodes.ServiceComponent, or requests to chain deployments.
-
jovesun-lab Bundle ArcgramGenerate an interactive node-and-edge diagram as a single standalone HTML file (Arcgram v2). Triggers on: arcgram, interactive/architectural diagram, topology, node graph, flow diagram, system map, dependency graph, workflow diagram, knowledge map, 'show me how X connects to Y', 'visualize this workflow', 'make this a topology', 'build a diagram of this'. Prefer for any system map, dependency graph, topology, or workflow picture even if interactivity wasn't asked for; on a follow-up 'make it inline' / 'show me' / 'render in chat', stay within Arcgram (Mode 1/2), don't switch tools.
-
jrswab Skill Kindle ImportImport reading notes from Kindle HTML exports into the slipbox. Use when the user sends a Kindle notebook export file (HTML/XHTML, including Telegram forwards as application/xml or text/plain).
-
jsar-project Skill Aiui DocsWrite, revise, and review official AIUI documentation under documentation/. Invoke for guides, component or API references, bilingual documentation updates, toc changes, and API Style code examples. Do not use for public skills under skills/.
-
buggregator Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
buggregator Skill E2e TestingWrite and run Playwright end-to-end tests for the Buggregator frontend. Use when the user asks to create e2e tests, test navigation flows, verify page transitions, test links, or validate UI interactions across pages. Also triggers on "e2e", "playwright", "end-to-end", "integration test", "navigation test".
-
buildatscale-tv Bundle Nano BananaNano Banana (nano-banana) image generation skill. Use this skill when the user asks to "generate an image", "generate images", "create an image", "make an image", uses "nano banana", or requests multiple images like "generate 5 images". Generates images using Google's Gemini models (Flash, Pro, or Nano Banana 2) for any purpose - frontend designs, web projects, illustrations, graphics, hero images, icons, backgrounds, or standalone artwork. Invoke this skill for ANY image generation request.
-
caesiumy Bundle Design MdAdd a new design.md catalog entry to ko-design-md. Use this skill IMMEDIATELY when the user wants to onboard a new brand into THIS project's catalog — produce services/{slug}.md (Stitch v0.1 format) plus services/{slug}.tokens.json (token-card sidecar) plus public/preview/{slug}/preview.html (one file carrying both themes) plus the OG image. Trigger phrases include "add to design.md catalog", "new design.md entry for X", "onboard X to ko-design-md", "X를 ko-design-md에 추가", "X의 design.md 만들어줘", "/design-md", "X 카탈로그 항목 만들기", or any variant where the user is asking to populate this catalog with a new brand entry. Do NOT use for editing prose in an existing entry, fixing one frontmatter field, generating non-catalog design docs, or working in any other repository. The skill operates only inside the ko-design-md repo and verifies this via `package.json` name.
-
caesiumy Skill Preview Prose Audit프리뷰 캡션(public/preview/*/preview.html — 라이트·다크 한 파일)이 services/*.md 나 상류 원본이 뒷받침하지 않는 주장을 하는지 대조·판정할 때 쓴다. 판정 근거의 등급, 상류(Claude Design 번들 vs 브랜드 발행물) 확인 절차, 슬러그별 상류 판정표, 되돌리기 대장 위치를 담는다. 캡션을 고치거나 "md에 없다"를 근거로 프리뷰를 정정하려 할 때 반드시 먼저 읽을 것.
-
captaincrouton89 Skill HeadlessStart/restart the alaria-map-site Next.js dev server (web) in background. Use when starting the dev server, checking status, debugging server issues, or needing to know where logs live.
-
chakshugautam Bundle Digit UI BuildingUse when building, modifying, or extending a PGR complaint management UI, or when asked to create a frontend for DIGIT platform.
-
changeflowhq Bundle AnimatorCreate short video animations from HTML/CSS/JS. Frame-by-frame capture at 30fps using Playwright + ffmpeg. Write CSS animations normally - the recorder pauses and steps them. Use for product demos, social clips, ad creative, feature announcements.
-
chenxiachan Skill Xhs Cover生成小红书封面图(HTML+CSS → Playwright 截图)
-
chillzhuang Bundle Avue DesignAvue 组件代码生成与配置指南。当用户需要创建、配置或生成基于 Avue (avue-crud, avue-form, avue-tree 等) 的 Vue 页面代码时使用此 skill。覆盖 CRUD 表格、表单、树组件、数据展示等全部 Avue 组件。支持 Composition API 和 Options API 两种代码风格。当用户提到 avue、crud表格、动态表单、JSON配置表单、低代码表单、avue-crud、avue-form 等关键词时,务必使用此 skill。
-
chunkytofustudios Bundle Android EmulatorRun, debug, screenshot, and interact with a Flutter app on a running Android emulator via adb and the qemu console — boot/shut down an AVD, launch `flutter run` in the background, capture compact 360px-wide JPEG screenshots, dump the Android accessibility tree to find addressable widgets, tap by label or coordinates, long-press, swipe, and pinch-zoom (multi-touch). Use this skill whenever the user wants to launch, test, QA, take screenshots of, reproduce a bug in, verify a layout on, or otherwise interact with a Flutter app on Android — even when they don't say "emulator", "adb", or "screenshot" explicitly (e.g. "see what the home screen looks like", "try the new button", "check the layout on Pixel"). Auto-detects the project's applicationId, AVD, and `fvm flutter` vs `flutter`; falls back to ANDROID_EMU_* env vars.
-
cloudwego Bundle Eino AgentEino ADK agent construction, middleware, and runner. Use when a user needs to build an AI Agent, configure ChatModelAgent with ReAct pattern, use middleware (filesystem, tool search, tool reduction, summarization, plan-task, skill, agents.md), set up the Runner for event-driven execution, implement human-in-the-loop with interrupt/resume, use Cancel/Retry/Failover for model resilience, build push-based multi-turn loops with TurnLoop, or wrap agents as tools. Covers ChatModelAgent, DeepAgents, and TurnLoop.
-
cloudwego Bundle Eino ComponentEino component selection, configuration, and usage. Use when a user needs to choose or configure a ChatModel, AgenticModel, Embedding, Retriever, Indexer, Tool, Document loader/parser/transformer, Prompt template, or Callback handler. Covers all component interfaces and their implementations in eino-ext including OpenAI, Claude, Gemini, Ark, Ollama, Milvus, Elasticsearch, Redis, MCP tools, and more.
-
juspay Bundle Jp ValidateTest/validate a Juspay payment integration after jp-executor has built it. Detects the repo's existing test stack and replicates it (Playwright, Cypress, Jest, Vitest, pytest, supertest, …), falling back to inline curl/bash when none exists. Risk-prioritized coverage of order/session creation, server-to-server status reconciliation, webhook signature + idempotency, per-method process payloads, constraint boundaries and error-code paths — backend and frontend/SDK as the built surface dictates. Ends with a traceability matrix, a PASS/CONCERNS/FAIL quality gate, and a written test report. Use after jp-executor, or standalone against an already-built integration.
-
kaelys-js Bundle Copy AuditReview product copy and UI microcopy against cited writing standards — plain language, inclusive language, UX microcopy, and voice and grammar — then apply the edits you approve, changing only the text and never the surrounding code or markup. It reads markdown prose, headings, and alt text, JSON, YAML, and TOML values, and UI strings in HTML, Astro, Svelte, Vue, and JSX/TSX across a repo or a diff. With --mode=comments it also reviews code comments and test names (it/describe/test) for low-value or misleading comments and vague names — this replaces the earlier comment-audit skill. Parallel subagents judge each item in full-file context, and nothing is written until you approve. Use for /copy-audit, a copy, content, or microcopy review, a readability, plain-language, or inclusive-language pass, a docs or markdown polish, or a comment and test-name audit — "comment cleanup", "AI comment slop", "test name audit", "Rule 9 sweep".
-
kaijuengine Skill UI System OverviewHow Kaiju's custom UI system works: it manually parses HTML/CSS into its own engine-driven panel/widget tree (not a real browser). Covers the fit-content layout model, scroll containers, and where the parsing/layout code lives.
-
kaijuengine Bundle Kaijuengine Game DevEssential reference for building games and tools on the Kaiju Engine (Go module `kaijuengine.com`, Vulkan-backed). Covers the GameInterface bootstrap, the Host runtime and frame/update order, entities and the custom matrix Transform, the custom `kaijuengine.com/matrix` math library (never use gonum/mathgl), the Vulkan rendering/Drawing system, the HTML/CSS-like UI system (no JS runtime), build tags, and integration testing. Use this whenever working in a kaijuengine project — writing or modifying Go that imports `kaijuengine.com/...`, scaffolding a new game, editing engine or editor source, or answering how-to/architecture questions about entities, rendering, materials/shaders, or the UI — even when the user doesn't explicitly say "Kaiju". Prefer this over generic guidance for anything touching the kaiju engine tree.
-
kilo-org Bundle UI Fix Draft PrUse when fixing any UI, CSS, or layout bug and producing a PR with visual evidence. Triggers when the user reports something looks broken on mobile or desktop (often with a screenshot), when you need before/after screenshots for a PR, when fixing Tailwind responsive issues, or when a layout overflows on certain viewports. Also use when the user says things like "fix this on mobile", "the layout is broken", "take a screenshot to verify", or "create a PR with screenshots". Covers diagnosis, fix, Playwright screenshot capture at mobile + desktop, image upload to GitHub without committing, and draft PR creation.
-
larashero3-dotcom Bundle Lieflat HTML DeckCreate polished horizontal HTML presentation decks from the Lieflat deck style pack. Use for HTML/PPT-style slides, strategy decks, AI or product analysis decks, creator brand manuals, portfolios, visual essays, and WebGL/canvas presentation decks. Contains 12 deck style families with fixed-template starters and style-understanding guidance.
-
larashero3-dotcom Bundle Lieflat HTML DesignRoute a user's request to the right Lieflat HTML Design skill. Use when the user asks for a polished HTML visual artifact but has not clearly chosen between a horizontal HTML deck, Xiaohongshu longform article card, or Xiaohongshu cover/first-image card.
-
lazuee Bundle React Router Best PracticesBuild applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.
-
leagueakari Skill League Akari UI ComponentsUse when implementing or reviewing League Akari renderer UI components, especially consistency across related components, i18n component interpolation, multiple independent pluralized counts, Tailwind utility usage in templates or SFC style blocks, or native semantic HTML elements in the Naive UI renderer.
-
ledgerhq Skill Dmk Intent VocabularyMap developer intent and natural language to the correct Ledger Device Management Kit (DMK) components, operations, and API methods. Use when a developer's request is phrased informally, incompletely, or in terms of outcomes rather than API methods, when the intent is ambiguous and needs mapping to a specific DMK component or operation, or when a developer asks 'how do I...', 'what's the difference between...', or describes a symptom rather than an API.
-
lee-agi Bundle Agent Readable DocEN: Convert txt, doc, docx, md, pdf, ppt, pptx, images, shell scripts, HTML, and mixed batches into Agent assets; use for PII-safe extraction, structure-preserving Markdown, source archival previews, large-file sampling, Insight extraction, and review workbench preparation. ZH-CN: 将 txt、doc、docx、md、pdf、ppt、pptx、图片、shell 脚本、HTML 和混合批次转换为 Agent 资产;适用于 PII 安全抽取、保留结构的 Markdown、来源归档预演、大文件采样、洞察提取和 review workbench 准备。
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 game-review, roto-rooter, add-check. 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.