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.
-
aprilnea Bundle Openlogi Macos PermissionsDecide whether a macOS problem is a privacy-permission (TCC) problem, and act on it correctly. Use when triaging a report that no devices appear / the GUI is empty while `openlogi list` works / "Failed to open device" / "Pairing failed" on macOS; when a user asks which permission OpenLogi needs or why they were never prompted; when reasoning about Input Monitoring, Accessibility, kTCCServiceListenEvent, kTCCServiceAccessibility, code-signing identity, responsible process, or bundle identifiers; and before changing anything under openlogi-permissions, openlogi-hid/permissions.rs, the agent's launch/self-restart path, the GUI's settings permission rows, or the macOS bundling and signing code in xtask.
-
archetype2142 Bundle Deploy Vite AppDeploy a Vite + React app (or any static/SPA frontend) to the user's own Docker + Traefik server over SSH, on a Cloudflare-managed subdomain with automatic HTTPS. Use this skill whenever the user wants to deploy, ship, publish, push live, or host a Vite/React/frontend project on their server — e.g. "deploy this app", "put this on my server", "ship the dashboard to a subdomain", "host this on a subdomain", "make this live". Also use it to redeploy/update an already-deployed app, list what's deployed, take an app down, or free up disk space on the server. Trigger even when the user doesn't say "Docker", "Traefik", or "Cloudflare" explicitly — if they have a frontend project and want it on the internet on their box, this is the skill.
-
archlizheng Bundle Presentation Report PreflightPreflight planning skill before HTML/PPT deck generation. Use when the user wants to create, rewrite, convert, or strengthen a real report deck, sales proposal(销售提案), investor roadshow(融资/路演), product launch(产品发布), promotion defense(晋升答辩), consulting/strategy deck(咨询/战略汇报), training(培训), technical talk(技术分享), retrospective(复盘), case-study deck(客户案例), or a downstream HTML PPT workflow handed to a slide-generation skill (e.g. `frontend-slides-editable`, `guizang-ppt-skill`, `huashu-design`, or any future skill — these are illustrative; the actual downstream is resolved at runtime against the available skills, never assumed to exist). Turns a topic, source document, old deck, PDF, data, or notes into a Presentation Strategy Brief with audience, scenario, goal, narrative framework, timing brief, conclusion-style title chain, page-level content_spec, evidence plan, speaker notes, Q&A risks, visual intent, constraints, universal handoff contract, and optional adapter appendix. Infer direction first, confirm directi
-
archlizheng Bundle Presentation Script CoachTurn an existing PPT, slides file, or strategy brief into a tailored speaking strategy, natural page-by-page verbatim script, transitions, Q&A prep, rehearsal notes, and non-destructive PPT/slides revision suggestions. Reads charts, diagrams, and screenshots on the pages via multimodal page images, so image-heavy PPT/slides get real scripts, not placeholders. Use when the user provides or references a PPTX, PDF, HTML presentation, slides, speaker notes, or `presentation-report-preflight` brief and asks for a 汇报逐字稿, 讲稿, 口播稿, speaker script, 按页讲解, 看图讲解, 图表怎么讲, 演讲策略, 汇报策略, 答辩话术, 路演话术, 销售提案讲法, Q&A preparation, rehearsal plan, 说人话, 自然一点, 不要太像 AI, 提词器, teleprompter, speaker notes, 备注注入, T 键弹窗, 提词卡, cue cards, 汇报辅助, or advice on how to present existing PPT/slides to a specific audience, occasion, industry, duration, or decision-maker.
-
archlizheng Bundle Ziwei AI HTML ReportUse when a user needs a saveable Zi Wei Dou Shu HTML report from birth data or chart context in an agent workflow that must stay self-contained, avoid invented placements, and validate K-line JSON before delivery.
-
arcjet Bundle Arcjet Writing StyleWrite and edit technical documentation to the Arcjet writing style, based on the Google developer documentation style guide (developers.google.com/style) – voice and tone, second person, active voice, sentence-case headings, list and procedure structure, code and UI formatting, punctuation, accessibility, inclusive language, and the A-Z word list. Use this whenever the user is writing, reviewing, editing, or restructuring developer-facing documentation – READMEs, API reference, quickstarts, tutorials, how-to guides, release notes, SDK docs, CLI docs, error messages, or docs-site pages – and whenever they ask to "follow the Google style guide," "make this sound like good docs," "edit my docs," or "review this documentation." Also use it for questions about a specific usage decision (hyphenation, capitalization, whether a term is allowed, how to format a placeholder or a command).
-
arcsin1 Bundle Style Package Generate把 Markdown、纯文本、HTML、PPTX 或风格参考图转换为可安装的 PPT 风格包(style.json、SKILL.md、preview.html)。当用户要求生成、导入、提取、复刻或更新 PPT 风格,提到风格包、风格技能、style.json、preview.html,或希望把视觉描述、参考图、PPTX 落成可复用风格资产时使用。不要用于生成 PPT 正文或无关的文案处理。
-
aref-vc Bundle TufteApply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic. Use when the user asks to produce, design, critique, or improve a chart, graph, dashboard, KPI tile, table-with-data, sparkline, small multiple, time series, distribution plot, choropleth, or any other visual that communicates quantitative or categorical information. Also triggers on words like "visualize", "viz", "data viz", "chart", "graph", "dashboard", "infographic", "Tufte". Outputs Tufte-compliant designs in either self-contained HTML/SVG or React (Recharts/D3). Defaults to Tufte rules; user can opt out per chart.
-
aresbit Bundle AI Music SkillDeploy, compile, and operate acestep.cpp for local GPU-accelerated AI music generation, plus full-stack Codi webapp deployment. Use when: (1) Building/compiling ace-server with CUDA support on Windows, (2) Selecting appropriate models for GPUs with 8GB VRAM, (3) Starting ace-server and generating songs via HTTP API, (4) Troubleshooting build issues (MSVC/CUDA version conflicts), (5) Writing song generation prompts for the 5Hz LM model, (6) Running the complete Codi webapp (FastAPI backend + Vite frontend + SQLite), (7) Open-sourcing or modifying the Codi app (removing payment/sheet music, adding MP3/MP4 downloads). Covers end-to-end workflow from engine compilation through full-stack web deployment.
-
aresbit Skill Hm Fetch SkillFetch Huawei HarmonyOS developer document正文 by calling documentPortal getDocumentById API with slug objectId, convert HTML content to Markdown, and maintain local-first migration references. Use when scraping Huawei HarmonyOS docs that are SPA-rendered and not directly readable by generic web fetchers.
-
argonauts-inc Bundle Frontend SkillsArgonauts Inc. フロントエンド開発スキル。Next.js App Router または React SPA (Vite) を使ったゼロからのプロジェクト構築、Tailwind CSS v4 + shadcn/ui によるスタイリング、render-as-you-fetch パターンのデータ取得実装を行う際に使用する。 フロントエンドの新規プロジェクト作成、コンポーネント実装、データ取得、状態管理、スタイリングに関するタスクすべてに適用される。 Use when: building new React/Next.js projects, implementing components with shadcn/ui, setting up data fetching, choosing state management solutions, configuring Tailwind CSS v4.
-
arindampradhan Bundle React Use HooksApply react-use hooks where appropriate to build concise, maintainable React features.
-
arjun-ingole Skill Vue DoctorDiagnose and fix Vue/Nuxt codebase health issues. Use when reviewing Vue code, fixing performance problems, auditing security, or improving code quality.
-
arm-software Skill Cmsis StreamThis skill must be used to create new components for CMSIS Stream. It generates the Python description and C++ wrapper for a component.
-
artifact-cafe Bundle Artifact Cafeartifact.cafe is the home for AI-generated work: publish interactive static artifacts (HTML apps, dashboards, mockups, reports, slides, docs) to a review URL that humans open with no login and comment on directly — pinning feedback to elements and text. Authors then publish new immutable versions. Use when asked to "publish this for review", "share this for feedback", "put this online for comments", "get review on this", "ship a preview", "make a review link", "publish an artifact", "send this to a reviewer", or "publish v2".
-
artifact-kit Bundle HTML To PPTX JsxCreate downloadable, editable PowerPoint decks from HTML pages by copying the source into a browser exporter page, laying slides out vertically, measuring DOM nodes, and using the CDN browser build of @artifact-kit/pptxgenjs-jsx with inline JSX. Use for local HTML files, generated web pages, dashboards, reports, slide-like Tailwind pages, SVG-heavy pages, or any workflow that needs HTML-to-PPTX reconstruction with DOM measurement rather than guessed coordinates.
-
artmsilva Bundle Lit Best PracticesLit web components best practices and performance optimization guidelines. Use when writing, reviewing, or refactoring Lit web components. Triggers on tasks involving Lit components, custom elements, shadow DOM, reactive properties, or web component performance.
-
artshooter Bundle Wechat Publisher将 Markdown 文章智能排版并发布到微信公众号草稿箱。 AI 生成创意 HTML,上传图片,发布到草稿箱。 触发场景:用户说"发布到微信"、"推送到公众号"、"微信文章发布"
-
ascending-llc Skill Local Frontend CheckSmoke-test or verify UI behaviour on the local Jarvis Registry frontend running at http://localhost/gateway. Use for manual regression checks, bug-fix verification, and end-to-end confirmation of specific flows without running the automated test suite.
-
ash-harris Bundle Carousel GeneratorGenerate Instagram carousel posts as swipeable HTML previews with export to 1080x1440 (3:4) PNG slides. Use when the user wants to create a carousel, social post, or slide deck for Instagram.
-
asimfish Bundle Agentic ReportingCreate and finalize task-appropriate, evidence-calibrated agent reports, research ideas, experiment readouts, academic presentations, and handoffs. Use for substantive progress or final reports, implementation handoffs, investigations, experiment analysis, decisions, risks, incidents, postmortems, reviews, academic synthesis, research proposals, and reports that must present figures, tables, HTML/PPT-style slides, or multiple artifacts. Also use near the start of likely long, multi-session, or multi-agent work to save a tiny reporting checkpoint, and at its final reporting boundary. Do not use for casual conversation, exact-format transformations, raw code-only output, or trivial direct answers.
-
askuma Bundle Workflow GeneratorFIRE when user intent matches any of the following conditions — EXPLICIT TRIGGERS: /workflow-generator; "generate workflow"; "create workflow diagram"; "show workflow" ARCHITECTURAL VISUALIZATION INTENT: user wants to visualize, diagram, draw, map, or generate a system architecture diagram / component diagram / service topology / service map / architecture overview / system overview / data flow diagram / pipeline diagram for the current project or a specified project path. PHRASING VARIANTS THAT SHOULD ROUTE HERE: "how does this system work", "what talks to what", "show me the components", "map the services", "diagram this", "visualize the stack", "show request flow", "show data flow", "trace the pipeline", "architecture of this project", "system map", "service dependencies", "component graph", "what calls what", "show me the architecture", "draw the architecture", "explain the system design", "infrastructure diagram", "dependency graph", "call graph", "module graph", "what imports what", "import graph". CAPA
-
aston1690 Bundle Baoyu Post To WechatPosts content to WeChat Official Account (微信公众号) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text posting (贴图, formerly 图文) with multiple images. Markdown article workflows default to converting ordinary external links into bottom citations for WeChat-friendly output. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "贴图/图文/文章".
-
chouheiwa Bundle Zhihu HTML将 Markdown 转换为知乎编辑器兼容的 HTML。脚本处理确定性格式转换,AI 处理引用标记的 data-text 描述。Use this skill when: 用户要求生成知乎格式/知乎 HTML、将 Markdown 转为可粘贴到知乎编辑器的 HTML、提到知乎发文/排版/专栏、需要将带链接的文章转换为知乎 sup 引用格式。
-
chrismaz11 Bundle Devvit ExpertCurrent Devvit coding assistant for Reddit apps. Use this skill whenever the user is building, debugging, migrating, or publishing a Devvit app. Default to modern Devvit Web with `devvit.json`, `post` + `server`, typed shared contracts, and `/api` and `/internal` endpoints. Prefer current React, Three.js, Phaser, Unity, or GameMaker starters based on the product shape. Treat legacy `@devvit/public-api`, `useWebView`, `webroot`, and `addCustomPostType()` as migration-only paths for existing apps.
-
chyiiiiiiiiiiii Bundle Meetup Deck製作社群小聚/技術月報的圖文並茂 HTML 簡報。涵蓋研究取材(含被封鎖來源的替代路徑)、視覺優先的版面、事實導向的撰稿規則、放映前的驗證閘門、以及部署到 GitHub Pages。This skill should be used when the user asks to build a meetup deck, monthly tech digest slides, community talk slides, 小聚簡報, 月報簡報, 技術分享投影片, or wants to research a month of news and turn it into slides.
-
citizenll Bundle Frontend Style OrchestratorTransform user-provided visual style prompts into frontend webpage design or redesign implementations through a repeatable pipeline (style extraction, design contract, token system, implementation, and QA). Use when the user asks to build a web page in a specific style, refactor an existing page to a new style, or iterate through multiple style directions across rounds.
-
ckeditor Bundle CkeditorInstall, set up, configure, or troubleshoot CKEditor 5 — the rich text editor / WYSIWYG editor — in any JavaScript project, vanilla or with a framework (React, Vue, Angular, Next.js, …). Covers install method (npm, CDN, ZIP), wiring the editor component, editor type, configuring plugins / toolbar / menu bar, loading editor CSS, license keys, free and premium features, starting a free trial, and setup errors. NOT for authoring custom plugins, upgrading versions, or CKEditor 4.
-
clawdbrunner Bundle Agent BrowserBrowser automation CLI for AI agents using Vercel's agent-browser. The best tool for AI-driven browser automation — uses deterministic refs from accessibility trees instead of fragile selectors. Optimized for LLMs with fast Rust CLI, JSON output, and purpose-built AI workflows. Use when you need reliable, scriptable browser automation that just works.
-
cloudinary-devs Bundle Cloudinary Get StartedGuide Cloudinary onboarding for new or existing projects through a gated, stack-detected setup flow. Use when the user asks to get started with Cloudinary, configure Cloudinary in a repo, set up Cloudinary in an IDE or agent environment, validate an existing integration, configure MCP or skills, handle credentials safely, choose the right SDK, validate upload presets, test delivery URLs, document environment setup, or identify next steps. Detect the project stack first; never assume React, Python, Node.js, or any other SDK unless detected or explicitly chosen.
-
cocoon-ai Bundle Process Flow DiagramCreate polished dark-themed process flow diagrams as self-contained HTML+SVG files. Use when the user asks for workflow diagrams, process maps, approval flows, or automation sequences.
-
code-on-sunday Bundle Slide DeckUse when building browser-based presentation slide decks, creating training presentations, generating React+Vite slide decks with animations, or making professional slides. Triggers on slide deck, presentation, training slides, Vite slides, Framer Motion slides, animated presentations.
-
code-yeongyu Bundle Web FetchFetch a URL and save the body to a temp file so you can pipe it through rg / jq / awk instead of dumping the whole page into the conversation. Use this whenever a user gives you a URL to read - articles, docs, PRs, gists, README files, blog posts, anything HTTP. Returns a path on disk; the agent then greps the path for the relevant section and quotes only what matters. Strongly preferred over the built-in webfetch tool when (a) the page is more than a few KB, (b) the user wants to find a specific phrase / table / code block on the page, (c) you need to keep the long page out of context, or (d) you want to inspect raw HTML alongside rendered markdown. Triggers: 'fetch', 'fetch this URL', 'fetch and save', 'fetch the page', 'pull this', 'grab this article', 'read this URL', 'read the docs at', 'mirror this page', 'page is too long', 'save the page so I can grep it', 'put it on disk so I can rg', 'cache this URL'.
-
codemod Bundle Sample CodemodMove React components defined inside other components to module scope to prevent state resets and re-render bugs
-
codesstar Bundle Next SlideNext Slide (a.k.a. Next PPT / 下一代 PPT) — create stunning HTML presentations from scratch or convert PowerPoint files. 50+ curated styles, bilingual (EN/中文), zero dependencies. Works on Claude Code, Hermes Agent, and OpenClaw. Trigger when the user says: "make a presentation", "build slides", "create a deck", "pitch deck", "PPT", "PowerPoint", "convert pptx", "presentation about", "talk slides", "slide deck", "next-slide", "next ppt", "做个 PPT", "帮我做 PPT", "做个演示", "做个幻灯片", "做演示文稿", "做个 slide", "做个分享", "做个 pitch", "做个汇报", "做个演讲材料", "PPT 转 HTML", "把 PPT 改成网页", "PPT 转网页", "把 ppt 转成 HTML", "做一份关于 X 的 PPT", "做一个 X 主题的演讲", "下一代 PPT", "下个 PPT", "做幻灯片", "做提案", "做 demo deck". Slogan: 你的下个 ppt,何必是 PPT.
-
codewalnut-labs Bundle Codewalnut Backend Resume Shortlisting SkillEvaluate and rank CodeWalnut candidates for Java backend, React frontend, and Java + React full-stack roles using evidence-weighted rubrics. Use this skill whenever a user asks to shortlist, screen, compare, rank, classify, or explain hiring recommendations for resumes in PDF or Microsoft Word format from uploads, local folders, Google Drive, or a two-tab Google Sheet. In Sheet mode, reconcile the shortlisted tab first, review at most five unevaluated candidates per run, update Resume Status - CW with shortlisted or not shortlisted, and append shortlisted candidates without duplicates.
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 openlogi-macos-permissions, deploy-vite-app, presentation-report-preflight. 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.