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.
-
leoyeai Bundle Openclaw SlidesCreate stunning, animation-rich HTML presentations from scratch or convert PowerPoint files (.ppt/.pptx) to beautiful web slides. Use when the user wants to build a pitch deck, presentation, slideshow, or slide deck — or convert an existing PPT to a web presentation. Generates zero-dependency single HTML files with keyboard/touch navigation and scroll-triggered animations. Style options include Neon Cyber, Bold Signal, Swiss Modern, Paper & Ink, and 8 more curated presets.
-
leoyeai Bundle Openclaw Ultra ScrapingPowerful web scraping, crawling, and data extraction with stealth anti-bot bypass. Bypasses anti-bot systems (Cloudflare Turnstile, CAPTCHAs) out of the box. Use when: (1) scraping websites that block normal requests, (2) extracting structured data from web pages, (3) crawling multiple pages with concurrency, (4) taking screenshots of web pages, (5) extracting links, (6) any web scraping task that needs stealth/anti-detection, (7) user asks to scrape/crawl/extract from URLs, (8) need to bypass Cloudflare or other bot protection. Supports CSS/XPath selectors, adaptive element tracking (survives site redesigns), multi-session spiders, pause/resume crawls, proxy rotation, and async operations. Powered by MyClaw.ai.
-
module-federation Skill Side Effect AnalyzerRun and interpret @module-federation/side-effect-scanner (se-scan) results to detect frontend side effects: CSS leaks/conflicts, global variable pollution, global event listener leaks, and risky DOM mutations. Use when you need a Markdown/JSON report, want to review a PR/build artifact for side effects, need help choosing scan mode (entry vs dist), configuring .serc.ts/alias/max-depth/ignore/adapter, or turning findings into actionable fixes.
Audited -
mohitmishra786 Bundle Never ConstraintsComprehensive coding standards and constraints for AI assistants. Covers code quality, security, hygiene, communication, workflow, and framework-specific rules for React, TypeScript, Python, Node.js, Django, FastAPI, NestJS, Docker, AWS CDK, Terraform, Supabase, and more.
-
actionbook Skill Ascent ResearchFull ascent-research CLI — incremental, resumable research sessions driven from a Claude Code or Codex instance. Orchestrate postagent (HTTP API) + actionbook browser (CDP) + local file ingest to build reproducible sessions with a persistent wiki layer, autonomous LLM loop, and editorial HTML reports. Covers all command surfaces — online fetch (add / batch / route), local ingest (add-local), session lifecycle (new / list / status / resume / close / rm / series / fork via --from), autonomous loop, wiki knowledge layer (list / show / rm / query / lint), user-editable SCHEMA.md, and renderers (synthesize / report / coverage / diff). Use for any "build a reproducible report on topic X" or "investigate source tree Y" or "compare technologies A and B with citations" request.
-
adobe Bundle Leonardo ColorsGenerate accessible color themes using @adobe/leonardo-contrast-colors. Use when the user needs help building contrast-based color palettes, checking WCAG accessibility, creating adaptive themes, or using the Leonardo API.
142 -
andreagriffiths11 Bundle Publish To PagesPublish presentations and web content to GitHub Pages. Converts PPTX, PDF, HTML, or Google Slides to a live GitHub Pages URL. Handles repo creation, file conversion, Pages enablement, and returns the live URL. Use when the user wants to publish, deploy, or share a presentation or HTML file via GitHub Pages.
-
0hang Bundle Comment Intel评论区情报一站式 skill。当用户说「分析我的评论区」「看看大家关心/焦虑什么」「评论区图谱」「采集评论并分析」「每日评论区情报」「多平台评论区监控」「分析这个视频/账号的评论」「市场调研」「需求探索」「竞品评论区分析」「用户研究」时使用。单次调用自动完成:判定数据来源 →(B站/小红书/抖音/YouTube/X/Reddit 多平台采集公开评论,只读)→ 格式化为标准输入 → 定制关注点词表 → 逐条抽取(识别阴阳怪气/提问/成果汇报)→ 建图渲染出可交互知识图谱(atlas.html + graph.json)→ 交付关注点 TOP、内容缺口选题、共现簇、金句库、成果案例。也支持每日定时情报简报:多平台关键词采集 → 分析 → 生成飞书文档发送。完全自包含,不依赖其他 skill。适用于内容创作、市场调研(竞品评论区=免费焦点小组)、需求探索(提问=未被满足的需求)、用户研究与品牌舆情。
-
0x-man Bundle MindmapCRITICAL — if the user asks for a mind map, concept map, knowledge map, visual summary, or says "map this out", "map this", "mind map this", "visualize the structure", "break this down visually", or "turn this into a mind map", you MUST use this skill. Stop everything and read this SKILL.md immediately. The default output is a React (.jsx) artifact with an interactive radial mind map. If the user says "markmap", "markdown map", "--md", "portable", or "I want to open it outside Claude", output Markmap-flavored Markdown (.md) instead. Do NOT respond with a plain text summary or outline. Do NOT use Mermaid.js or Excalidraw.
-
0xmoat Bundle Resume StudioRewrite, tailor, and design resumes end to end. Use this whenever the user wants to improve a resume or CV, adapt it to a job description, convert an existing resume file (PDF, DOCX, markdown, or plain text) into a stronger version, generate an ATS-friendly resume, or produce a polished single-page A4 resume as HTML or PDF. Trigger even for casual requests like "make my resume look better," "redo my CV," "turn this into a one-page resume," "optimize this for this role," or "export my resume as PDF" when the task is primarily about resume content plus layout. Do not use this for general portfolio website design or cover-letter-only tasks unless the resume itself is the main deliverable.
-
0xry4n Bundle Hubspot Developer Skilluse this skill when building, reviewing, migrating, or planning hubspot developer platform apps (cli projects, app-hsmeta.json), ui extensions (app cards, app pages, settings), @hubspot/ui-extensions components, crm hooks and crm data/action components, hubspot.fetch and serverless app-function hsmeta (config.endpoint, endpoint.methods array), hs project validate upload errors, oauth vs static token distribution, webhooks, custom workflow actions, agent tools, app events/objects, scopes and sensitive data, or marketplace readiness. use for coding agents that need architecture, extension-point choice, file layout, component selection, security constraints, checklists, and testing guidance.
-
1771-technologies Bundle Lytenyte GridUse this skill when the user is working with LyteNyte Grid (@1771technologies/lytenyte-pro or @1771technologies/lytenyte-core), a headless React data grid. Activate for tasks like: installing or licensing LyteNyte Grid, configuring columns or rows, building cell renderers or editors, adding filters or sort controls, grouping or aggregating rows, pivoting, exporting to CSV/Excel/Parquet/Arrow, row selection, cell range selection, theming or styling, TypeScript GridSpec patterns, server-side or tree data, annotations, cell notes, marching ants, row/column animations, row banding, scroll flash suppression, and any PRO component (SmartSelect, PillManager, Menu, Dialog, TreeView, RowGroupCell). Also activate when the user describes grid problems without naming the package — e.g. "my rows won't group", "cells aren't editable", "add a loading overlay", "pin this column", "the filter isn't working", "how do I export this table", "select a range of cells", "copy cells to clipboard", "build me a grid", "animate rows",
-
1broseidon Bundle AnvilBackend craft skill for language-agnostic CLIs, REST APIs, gRPC services, package APIs, and backend repo structure. Use when building, auditing, reshaping, or studying backend surfaces: command trees, HTTP/gRPC contracts, error envelopes, config precedence, operability hooks, package boundaries, dead code, shared-package shape, and agent/script-friendly tools. Not for browser UI, ORM schema design, business domain modeling, Kubernetes/Terraform, or frontend design.
-
1marcelserrano Bundle LLM CouncilPassa qualquer pergunta, ideia ou decisão de alto custo de erro por um conselho de 5 conselheiros de IA que analisam o caso de forma independente, revisam o trabalho uns dos outros de forma anônima (peer review) e sintetizam um veredito final. Baseado no método LLM Council de Andrej Karpathy. Cada conselheiro pensa por uma lente diferente — o Contrário, o Pensador de Primeiros Princípios, o Expansionista, o Forasteiro e o Executor — que criam tensão proposital entre si. Entrega onde o conselho concorda, onde diverge, os pontos cegos que só a revisão cruzada pegou, uma recomendação direta e o primeiro passo concreto. Gera relatório HTML + transcrição. TRIGGERS: passa no conselho, roda o conselho, convoca o conselho, leva pro conselho, conselho disso, conselho dessa decisão, war room isso, sala de guerra, põe à prova, pressiona essa ideia, stress test disso, testa essa decisão, debate isso, debate essa ideia. TRIGGERS FORTES (quando vier com decisão real e trade-off): devo fazer X ou Y, X ou Y, qual das opções,
-
1marcelserrano Bundle PremortemRoda um premortem sobre qualquer plano, lançamento, produto, contratação, pricing, estratégia ou decisão de alto custo de erro. Assume que a decisão JÁ FALHOU num horizonte futuro e trabalha de trás pra frente pra achar todo motivo que a matou — antes de você gastar dinheiro, tempo ou reputação. Método Gary Klein (hindsight prospectivo) + triagem Tigre / Tigre de Papel / Elefante + matriz Probabilidade × Impacto + visão de fora (base rates) + tripwires datados. Entrega plano revisado, premissa oculta exposta e relatório HTML. TRIGGERS: roda um premortem, premortem disso, premortem desse plano, faz um premortem, o que pode matar isso, o que pode dar errado, onde isso quebra, que ponto cego eu tenho, pré-morte, stress test desse plano, testa esse plano, advogado do diabo, devil's advocate, o que estou deixando passar, no que não estou pensando, fura esse plano, ataca esse plano, isso vai dar certo, me prova que isso falha, premortem de lançamento, premortem de contratação, premortem de pricing. Use SEMPRE que h
-
2389-research Bundle Terminal TitleMANDATORY at session start. REQUIRED when user topic shifts (debugging to docs, frontend to backend, new subject, different component). The agent MUST invoke on all topic changes.
-
2992638402-art Bundle Wedding Friends Invitation制作或修改新人共同第一人称邀请朋友的婚礼请柬,使用真实白色窗帘背景、酒红文字和居中婚纱照,输出可离线打开的单页 HTML。适用于窗帘风格的朋友请柬,不默认生成父母署名的双版本。
-
4ier Bundle A11Y BridgeControl Android devices via Accessibility Service HTTP bridge. 100x faster than screencap + uiautomator dump. Read UI tree in 50ms, click elements by text/id/description. Use when automating Android apps, controlling a phone via ADB, or building an AI-powered phone agent. Replaces the slow screenshot → parse → coordinate-tap cycle with instant semantic access.
-
88plug Bundle Break DogmaUse when an inherited assumption is steering a decision and nobody has checked whether it still holds HERE — "that's how vLLM/SGLang/everyone does it", "you need X to do Y", "this is compute-bound / physics-capped / can't beat Z", "we always do it this way", "best practice is". Triggers on any borrowed runtime/algorithm/protocol adopted by default, any asserted wall or limit, any "must have" that was never measured in our regime, and any "break all dogma / challenge the assumption / why do we even do this" request. The move: name the dogma, mine where it came from and why (competitor issues/PRs/RFCs + searxng + repomix + deepwiki), test whether the constraint is actually load-bearing in OUR regime or cargo-culted from a different one, and if it is not necessary, break it and route to invention. Reach for it by default before adopting any borrowed component or accepting any asserted limit; skip only when the practice is a genuine leaf you are reusing on purpose (KISS).
-
caciniep Bundle Video2knowledgeConvert videos into timestamped subtitles and structured knowledge artifacts. Two ingestion paths: (1) a native multimodal VLM (at most 4B params, via Ollama) reads sampled video frames into timestamped captions; (2) faster-whisper ASR transcribes the audio into timestamped subtitles. Then refine into a structured knowledge doc (custom template supported), a self-contained HTML page, a knowledge-card CSV, and an Anki apkg deck. Fully local — no video, audio, or output ever leaves the host; the repo tracks only code and config changes. Use when transcribing or summarizing a video, building study cards from a lecture or recording, turning a silent or screen-recording video into notes, or producing reviewable knowledge from any video file.
-
calvin-llc Bundle HardenEvidence-driven codebase hardening. Audits security (OWASP Top 10:2025), supply chain (inventory vs SBOM vs SLSA v1.2), reliability (OTel + operational limits), tests (sandboxed tiers), and accessibility (WCAG 2.2 AA). Every finding is quoted, matrix-scored, and cited. Does not fix. Reports with file:line and a verification plan. Use when asked to harden, audit security, run /harden, or review OWASP/WCAG/SLSA posture.
-
chenzihong-gavin Bundle Planet SlideCreate standalone HTML slide pages with immersive Three.js 3D planet/cosmic scenes, layered HTML text overlays, and rich interactive details — following the same architecture as the AI World Guide cover slide.
-
tomevault-io Bundle Nuxt UIBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces. Use when this capability is needed.
-
tomevault-io Bundle G2 Legend ExpertExpert skill for G2 legend development - provides comprehensive knowledge about legend rendering implementation, component architecture, layout algorithms, and interaction handling. Use when implementing, customizing, or debugging legend functionality in G2 visualizations. Use when this capability is needed.
-
tomevault-io Bundle Jalco Writing Component DocsWrite and review jalco ui component documentation with consistent structure, concise descriptions, realistic examples, and registry-aligned metadata. Use when creating new component docs, updating existing docs, reviewing doc quality, or syncing registry-backed component copy. Use when this capability is needed.
-
tomevault-io Bundle Changeset DecisionDecide whether IX changes need a changeset, which packages to include, and draft the changeset summary. Use for pull requests, code reviews, component changes, styling or theming updates, accessibility changes, public API changes, behavior changes, and internal-only change classification in the Siemens IX monorepo. Use when this capability is needed.
-
tomevault-io Bundle Vercel React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Use when this capability is needed.
-
tomevault-io Bundle Cofin Flow VueVue 3 Framework Skill
-
tomevault-io Bundle React DoctorUse when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
-
tomevault-io Bundle Trpc Trpc TrpcThis skill builds on [react-query-setup]. Read it first for foundational concepts.
-
tomevault-io Bundle Dallay Cvix VueVue 3 Skill
-
tomevault-io Bundle IdmpUse when you need to deduplicate concurrent or repeated async calls, prevent duplicate API requests, cache async function results, add automatic retry with exponential backoff, memoize heavy computation wrapped in Promise, replace SWR/Provider for request sharing, invalidate cache with flush, or persist cached data to localStorage, sessionStorage, node-fs, or redis. Covers install, usage, and plugin code generation for idmp in browser, React, and Node.js projects.
-
tomevault-io Bundle Olore Tanstack Query 4Local TanStack Query documentation reference (v4). Use for server state management, data fetching, caching, queries, mutations, and React/Vue/Solid/Angular query integration. Use when this capability is needed.
-
88plug Bundle Scientific MethodUse this skill whenever someone doubts a number, demands rigorous proof of a cause, or wants something invented and proven — any time a benchmark, metric, ceiling, or root-cause story must be verified rather than trusted, or a limit must be broken with a built, measured mechanism. Typical situations: a measurement looks suspicious ("2x faster but I don't trust it"); an incident needs its true cause before a decision ("the team blames X — confirm it, no guessing"); ANY production incident, outage, brownout, latency/error spike, regression, or "started failing" / "load suddenly went 5x" / "every component met spec but it still broke" report where the cause is not yet proven — especially when a recent deploy or change is suspected ("is the deploy to blame", "this coincided with the rollout"), since the obvious suspect is exactly what needs a control case; an asserted ceiling or "impossible" limit needs breaking or proving real; numbers need validation before publishing; a problem needs an invented solution that
-
a19235972428 Bundle Product VideoProduce product videos end to end - product demos, feature launches, explainers, walkthroughs, tutorials, release notes, onboarding and social cuts - from a script, an AI voiceover, animated HTML slides and real screen recordings, rendered deterministically to MP4 with ffmpeg. Use when asked to create, edit, re-cut, re-voice, shorten or re-brand any video about software.
-
anc1024go Bundle Plan DiagramGenerate a visual plan diagram in a dark, hand-drawn (excalidraw) house style. Graphs any logic (not tied to a specific project); prose is written in whatever language the plan is in — English, Chinese, Russian, etc., with full RTL (right-to-left) support. Use when the user asks to turn a plan, flow, decision order, architecture, or multi-system design into an HTML diagram ("plan diagram", "flow chart", "diagram", "流程图", "示意图", or the equivalent in any language). Picks between a vertical FLOW layout (single decision path) and a pan/zoom BOARD layout (multiple parallel coexisting systems), fills the chosen template, writes the HTML into the project, and validates structure.
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 openclaw-slides, openclaw-ultra-scraping, side-effect-analyzer. 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.