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.
-
blockrunai Skill Clone Website 2Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
-
breakthrough-edu Bundle Breakthrough Meeting Scribe 2Turn meeting audio into three artifacts (a corrected transcript, an HTML visual canvas, and a Markdown summary with AI insights), transcribed locally with Whisper on any platform: no cloud, no external transcription app. Use when the user hands over a meeting recording or wants meeting notes from one ("处理这个录音", "会议纪要", "把录音转成文字", or an audio file lands in the configured drop-zone), wants an existing transcript corrected or cleaned ("处理 transcript", "转录纠错", "转写文本", or a .txt lands in the drop-zone), wants a recording pulled from their connected PLAUD account ("process my Plaud recording", "从 Plaud 拿"), asks for edits to a transcript, canvas, or summary this skill just produced, or asks for cross-meeting Insights on their communication patterns instead of processing one recording ("analyze my meetings", "how do I come across in meetings", "分析我的沟通模式", "复盘我最近的会议", "跨会议分析").
-
brickspacelab Bundle Theme Skill 2Edit Shopify theme JSON templates, settings data, and settings schema using the target theme's existing sections, blocks, nested block structures, and schema-defined settings. Use when updating, editing, or tweaking Shopify `templates/*.json`, JSON section data, `config/settings_data.json`, `config/settings_schema.json`, section settings, or block settings. Do not use for custom Liquid, new theme sections or blocks, snippets, assets, JavaScript, CSS, checkout extensions, or non-JSON theme-code work.
-
hubeiqiao Bundle Apple Bento Grid 2Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. Supports both light (Apple signature #f5f5f7) and dark (#000) themes. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, Apple-style presentation layouts, project overviews, achievement showcases, or any visual summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.
-
imsus Bundle Vueuse Functions 2Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
-
invergent-ai Bundle Shadcn 2Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
isatimur Bundle Presentation Generator 2Create stunning slide decks from notes — vibe → preview → craft. Self-contained HTML plus editable PowerPoint. 75 themes, Studio share links, MCP craft gates. Use for pitch decks, investor updates, keynotes, product launches, sales demos, and any presentation request.
-
jane-xiaoer Bundle Web Clone 2网站复刻 / 克隆方法论。USE WHEN 用户说 复刻网站、克隆网站、clone website、抄个站、仿站、 照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、 复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树,覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支,并强制核对任何 AI 二手分析里的可执行代码。
-
jasonkneen Bundle Threejs Primitive Reconstructor 2create robust, browser-runnable three.js primitive reconstructions from static low-poly, voxel, isometric, or stylized game-art reference images. use when the user asks to turn an image or prompt into a three.js/html asset, generate a primitive-only scene, debug non-rendering three.js output, or produce a reusable prompt/template for low-poly three.js reconstruction.
-
jetbrains Bundle Vitepress 2VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
-
jimmylv Bundle Vercel React Best Practices 2React 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.
-
jojoprison Skill Shirman Digest 2Собирает дайджест AI & Tech трендов за день с shir-man.com и генерирует красивый HTML-отчёт с вкладками. Используй когда пользователь просит: дайджест, тренды, новости AI, что нового в tech, shirman, shir-man, ежедневный обзор технологий, tech digest, trend report — даже если не упоминает shir-man напрямую.
-
kaerez Bundle Puml Plantuml 2Full-stack PlantUML expert: create PUML from descriptions, convert images to PUML (vision reverse engineering), render locally (PNG/SVG/PDF) with no internet. macOS/Windows/Linux; auto-installs PlantUML+Java+Python. Covers all 27 chapters of the PlantUML Language Reference Guide v1.2025.0 (607 pages): Sequence, Use Case, Class, Object, Activity (legacy+new), Component, Deployment, State, Timing, JSON, YAML, nwdiag, Salt/Wireframe, Archimate, Gantt, MindMap, WBS, Maths, ER, Common Commands, Creole, Sprites, Skinparam, Preprocessing, Unicode, StdLib (C4/AWS/Azure/K8s/ArchiMate). Use for: draw a diagram, create PUML, convert image to PUML, render .puml, debug PUML, explain PlantUML syntax, any UML task.
-
kasonye Skill UI Aesthetics 3Raise frontend visual judgment for web interfaces with a bias toward refined product-grade composition, precise component craftsmanship, disciplined interaction states, controlled motion, and coherent depth systems. Use when generating, reviewing, or refactoring web UI that feels generic, cluttered, flat, over-styled, theatrically animated, visually imprecise, or AI-generated.
-
kaushal-205 Bundle Clawlogic Trader 3Use this skill when the agent needs to interact with CLAWLOGIC prediction markets. This includes: registering as an agent on-chain, creating new prediction markets, analyzing market questions to form opinions, buying YES/NO positions, asserting market outcomes via UMA Optimistic Oracle, disputing incorrect assertions from other agents, settling resolved markets to claim winnings, and posting bet narratives ("what I bet and why") to the frontend feed. Triggers: - "create a market about..." - "what do you think about [market question]?" - "buy YES/NO on market..." - "assert the outcome of market..." - "dispute the assertion on market..." - "check my positions" - "settle market..." - Any discussion about prediction markets, trading, or information markets
-
keepyaoung Skill Artifact Organizer 2Generate self-contained HTML pages and slide decks (diagrams, comparison tables, architecture overviews, diff reviews, visual recaps) by emitting semantic component JSON. Use whenever a visual artifact communicates better than terminal prose — proactively trigger on 4+ row tables, ASCII flowcharts, multi-stage pipelines, or explicit "make a diagram / slides / recap" requests.
-
kenn-io Bundle Svelte Core Bestpractices 2Guidance on writing fast, robust, modern Svelte code. Load this skill whenever in a Svelte project and asked to write/edit or analyze a Svelte component or module. Covers reactivity, event handling, styling, integration with libraries and more.
-
kingbootoshi Skill Opus Agent Orchestrator 2Runs Opus/Claude Code agents through the local claude-agent tmux CLI/service for codebase exploration, frontend/workbench variants, implementation support, and second-model review. Trigger on /opus-agent-orchestrator, opus-agent, claude-agent, use opus agents, spawn opus, Claude Code agents, frontend variants, workbench variants, explore with Opus. Pairs with codex-orchestrator: Codex remains commander; Opus agents are specialist scouts/builders.
-
kiranism Bundle Vercel React Best Practices 2React 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.
-
knckknck Skill Fixing Accessibility 2Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
-
zhimaai Bundle Web2skill 2Convert one public website URL or an explicit batch of public URLs into a reusable skill zip backed by rendered HTML snapshots and a bounded JSONL retrieval index. Use to discover a documentation directory from one URL, crawl a supplied URL set sequentially, generate a source profile, or package indexed web content as a specialized skill.
-
zjp1997720 Bundle HTML Express 2把信息密集的内容做成结构化、可读的自包含 HTML——调研报告、对比矩阵、清单、数据看板、决策页。当 Agent 要输出大段信息、对比、指标、时间线,或用户说「做成网页/可视化报告/HTML 报告」时触发。产物是单个可双击打开的 .html 文件。郑重 PDF/简历/PPT/落地页交付请用 kami;视频/动画用 hyperframes;上线部署不在本 skill 范围。
-
zju-real Bundle Code Review Assistant 2代码 Review 助手。分析 Git diff 或代码片段,输出结构化中文 Review 报告,覆盖 Bug、安全漏洞、性能问题、可读性、最佳实践、类型安全、错误处理、测试覆盖。支持严格程度配置(信息/优化/标准/严重)和多种主流语言(Python/JS/TS/Java/Go/Rust)。支持 GitHub/GitLab PR diff 获取,支持 Markdown/JSON/HTML 多种输出格式。使用场景:用户说"帮我 review 代码"、"检查这段代码"、"review 一下最近的改动"、"review 这个 PR"、"看看这个 diff 有没有问题"、"代码审查"、"code review"、"严格模式 review"、"快速 review"。
-
zoonk Bundle Vercel React Best Practices 2React 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.
-
netease-youdao Bundle Frontend Design 2Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
-
nicobailon Skill Surf Codebase 2Navigate and modify surf-cli codebase - Chrome extension + native host for AI browser automation. Use for surf-cli code work, architecture questions, implementing browser control/CDP/accessibility/network features.
-
panaversity Bundle Fetch Library Docs 2Fetches official documentation for external libraries and frameworks (React, Next.js, Prisma, FastAPI, Express, Tailwind, MongoDB, etc.) with 60-90% token savings via content-type filtering. Use this skill when implementing features using library APIs, debugging library-specific errors, troubleshooting configuration issues, installing or setting up frameworks, integrating third-party packages, upgrading between library versions, or looking up correct API patterns and best practices. Triggers automatically during coding work - fetch docs before writing library code to get correct patterns, not after guessing wrong.
-
pchalasani Skill Visual Brief 2Publish substantial implementation, investigation, review, or design reports on a local structured HTML page. Use after meaningful work that benefits from layered detail, or when the human explicitly asks for a visual brief. Skip trivial updates, quick answers, tiny fixes, and routine status messages.
-
memorysaver Bundle Vercel React Native Skills 2React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
-
nilecui Bundle Shadcn 2shadcn/ui component library patterns with Radix UI primitives and Tailwind CSS. Use when creating tables, forms, dialogs, cards, buttons, or any UI component using shadcn/ui, installing shadcn components, or styling with shadcn patterns.
-
zangxin75 Bundle Frontend 2Build polished user interfaces across web and mobile with consistent UX patterns.
-
pydantic Skill Deckx 2Create a deck with deckx. Use when the user mentions "deckx", "deck" or "slides", asks to build a slide deck from MDX, asks to convert a brand palette into a deck stylesheet, or asks how to convert a deckx HTML deck into a PDF. Covers project layout, deckx.toml config, deck.mdx authoring, custom React components, the styles.css token contract, and the Chrome headless PDF command.
-
rare Bundle Slidesfly 2Publish or share an existing local HTML deck (HTML PPT / slide file) to Slidesfly to get a shareable short URL. Use ONLY when (1) a .html file already exists on disk AND (2) user mentions "publish / share / 分享 / 发布 / 传到网上 / 给我链接 / put online / 上线 / make this shareable", OR wants to manage existing Slidesfly decks (list / delete / change visibility / versions / restore / claim / login). DO NOT use this skill to generate the HTML deck. If the user wants to create a new deck, use a slide-generation skill (e.g. anthropic/slides, codex/slides, marp, reveal.js) or write HTML inline FIRST, then invoke this skill to publish the resulting file.
-
replete Skill Grug 2Channel the grug brained developer to give practical, hard-won software wisdom in grug's distinctive voice. Trigger this skill whenever the user says "/grug", "/grugmode", "grug mode", "grug take", "what would grug say", "give me the grug perspective", or asks for a simple/pragmatic/no-nonsense take on a software problem. Also trigger when the user asks to "think like grug", "be grug", or references "grug brain" in any way. This skill applies to any software topic: architecture, testing, refactoring, APIs, tooling, type systems, abstractions, frameworks, complexity, career decisions, code review, debugging, frontend vs backend, etc. When in doubt and the user seems to want blunt cave-developer wisdom, use this skill.
-
reskfa Bundle Ppt 2将 .md 或 .docx 文件转换为可投屏的单文件 HTML 演示文稿。设计风格:暖奶油×赭红×深棕黑,Cormorant Garamond + Noto Serif SC,键盘翻页+导航点。用法:/ppt <文件路径>
-
ruiwarn Bundle Daily Topic Selector 2Daily topic fetcher that collects articles from multiple sources (RSS, API, HTML), scores and ranks them by relevance, and generates enhanced Chinese reports.
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 clone-website, breakthrough-meeting-scribe, theme-skill. 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.