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.
-
ehmo Bundle Code Overhaul ReviewAudit a codebase for maintenance and modernization. Challenges scope, reviews architecture/quality/tests/performance/dependencies, files deferred work via bd. Language-specific addendums for iOS/Swift, Go, and Web/JS/CSS activate automatically based on what's in the repo. Supports monorepos with mixed stacks.
-
elayadesign Skill Redesign Existing ProjectsAudits and upgrades existing websites and apps to premium quality. Diagnoses generic AI design patterns, weak states, and sloppy code, then applies targeted fixes without breaking functionality. Use this skill whenever the user wants to improve, polish, upgrade, refine, audit, fix, or redesign an EXISTING site, page, app, or component, even when they only say it looks bad, cheap, generic, or AI made. Works with any CSS framework or vanilla CSS.
-
element-ai-vue Bundle Element AI Vue Helper帮助用户集成和使用 element-ai-vue 组件来构建 AI 聊天界面、Markdown 渲染、代码高亮、打字机效果等 AI 交互功能。当用户提到 AI 聊天、对话界面、Markdown 展示、代码高亮、思考链、消息气泡、聊天中的文件上传,或者提到 element-ai-vue 的任何具体组件名称(如 ElAMarkdown、ElABubble、ElASender、ElAThinking、ElATypewriter 等)时触发此技能。当用户在 element-ai-vue 项目本身中工作并想要添加或修改组件时也使用此技能。确保在用户提到任何与 AI 对话、聊天界面、打字机效果、Markdown 渲染、思考过程展示相关的需求时都主动使用此技能。
-
eliaalberti Bundle UX AuditRun a heuristic UX audit of a customer journey from screenshots. Use when the user asks for a UX audit, heuristic evaluation, usability review, design teardown, or expert review of screens, mockups, or a flow, whether your own product or a competitor's. Evaluates against named frameworks (Nielsen, Shneiderman, Gerhardt-Powals, Bastien & Scapin, Hick/Fitts/Miller/Jakob/Peak-End, Fogg, Cialdini, Gestalt, Norman, Tognazzini, WCAG 2.1, content design heuristics) and produces severity-rated findings with heuristic citations, annotated screenshots, and a structured markdown report. Do not use for generating new designs or for code-level accessibility scans of a live DOM.
-
elias-khalil-eng Bundle Khalil Zero Cost StackUse when building or extending an internal business/operations app — bookings, clients, stock, jobs, invoices, appointments — that must run on free hosting with no database and no monthly bill, or when porting the React SPA + single serverless function + spreadsheet-as-database architecture to a new project. Also use when adding roles, public one-time client links, document generation, or a spreadsheet schema change to such an app.
-
eljun Skill Bootstrap ProjectUse this skill when the user wants to bootstrap a new web project from the kt-monorepo-template (Next.js 16 + Sanity v5 + Tailwind 4 + shadcn/ui). Walks through project naming, design token import, GitHub/Vercel/Sanity wiring, and an initial commit. Stops with a runnable scaffold and a final URL report.
-
emamulmursalin47 Bundle Competitor TeardownTear down any public website or product from its URL: crawls the whole site with Playwright, captures full-page screenshots and HTML, auto-generates approximate wireframes per page, classifies every page into sections (nav, hero, social proof, features, pricing, FAQ, CTA…), detects the tech stack, then guides a UX/UI critique, information-architecture map, business-model decode (pricing tiers, ICP, sales motion), and hook/funnel analysis (AARRR + Hook Model + persuasion and dark patterns), and assembles a self-contained HTML report that can be published as an Artifact. Use when the user says 'tear down', 'teardown', 'competitor analysis of <url>', 'break down this website/product', 'wireframe this site', 'how does <site> hook/convert users', 'analyse <competitor>', or asks to compare a rival's website, pricing, onboarding, or UX.
-
ember-tooling Bundle Ember Best PracticesEmber.js performance optimization and accessibility guidelines. This skill should be used when writing, reviewing, or refactoring Ember.js code to ensure optimal performance patterns and accessibility. Triggers on tasks involving Ember components, routes, data fetching, bundle optimization, or accessibility improvements.
-
emersimeon Bundle Elementor MCPHelps with WordPress + Elementor work via the elementor-mcp MCP server — building new pages, editing existing ones, inspecting site state, or exploring what's possible. Asks what the user wants before acting. Use when the user references the Elementor MCP, invokes `/elementor-mcp`, or runs `mcp__elementor__elementor-mcp-*` tools. Also covers initial install of the MCP Adapter + elementor-mcp plugins, app-password auth wiring, schema-loading discipline, and the widget-vs-HTML decision tree. SKIP for Bricks, Divi, Beaver Builder, or non-Elementor WordPress builds.
-
enegaltech Bundle Lottie DesignSearch, fetch, and integrate free Lottie animations into React, React Native, Vue, Svelte, Angular, Flutter, and Vanilla web projects. Use when the user asks for any Lottie/dotLottie/animation work — loaders, success checkmarks, splash screens, empty states, onboarding, micro-interactions. Triggers on keywords like "lottie", "dotlottie", ".lottie", "animasyon ekle", "splash animation", "loader animation", "success animation", "empty state animation".
-
enisakarsu Skill SuperdesignSuperDesign CLI ile UI tasarımları üret ve iterasyonla geliştir. Mevcut bir sayfayı/component'i yeniden tasarlarken, yeni sayfa tasarımı oluştururken, tasarım varyasyonları üretirken veya kullanıcı 'superdesign' dediğinde kullan. Önce SuperDesign'de tasarım üretir, kullanıcı onayından sonra kod yazar.
-
enze00 Bundle Uniapp Frontenduni-app cross-platform frontend development with Vue 3 + TypeScript. Use for: (1) Creating new uni-app projects or pages, (2) Integrating UI libraries (uView Plus, uni-ui, TuniaoUI), (3) Implementing multi-theme design systems, (4) Building WeChat Mini Programs, H5, and other platforms, (5) Setting up SCSS theming and global styles, (6) Configuring Vite build system. Includes reusable templates, component patterns, and best practices applicable to any uni-app project.
-
enzomanuelmangano Bundle ReactiiveReact Native animation craft. Patterns for Reanimated, Gesture Handler, and Skia that make mobile interfaces feel alive. Use when building gestures, transitions, or any motion in React Native.
-
ericshang98 Bundle Perfect Web CloneReproduce a live website from its URL as a clean, deployable Vite + React project by running the complete agent-driven Perfect Web Clone harness: capture source evidence, plan the full page, author every section, implement common interactions, build, compare, repair, and hand the measured result to the user for review. Use whenever the user asks an agent to clone, copy, reproduce, replicate, rebuild, or 复刻 a website or web page, including a minimal request containing only an action and URL. The user gives one natural language instruction; the current agent runs the internal multi-step loop through the deterministic pwc hands and eyes.
-
erikfiala Bundle TesterRun end-to-end web quality audits with Playwright and Lighthouse using existing project scripts first. Use when the user says /tester, e2e test, smoke test, Playwright audit, Lighthouse audit, performance audit, accessibility audit, dark mode audit, mobile audit, or asks for 100/100 Lighthouse improvement guidance.
-
esmuellert Bundle BrowserDrive a real Chrome window — read pages as an accessibility tree, click, type, upload, wait, and run JavaScript. Use for anything on a site that needs a logged-in session, a rendered page, or interaction — reading a page that needs JavaScript, filling a form, checking how something looks, or working through a site the way a person would.
-
esramulkpinar Skill Frontend PrimeBuild distinctive, production-grade frontend interfaces. Use when creating any web UI — sites, apps, dashboards, components. Focuses on design quality and avoiding generic AI aesthetics. Composable with other skills (docx, pdf, xlsx).
-
esthersjw Bundle Esther Design System不二的个人IP设计系统。做HTML页面、个人网站、教程页面、介绍页面、landing page等任何前端设计时自动触发。包含品牌DNA和多个场景子规范。
-
esthersjw Skill Poem Collage拼贴诗生成器 — 从对话或用户提供的文字中提取关键词,AI 排列成一首拼贴诗, 生成可交互的 HTML 拼贴板(支持拖拽、缩放、翻译、导出图片)。 由 ColaOS 出品。 触发词:"帮我做一首拼贴诗"、"生成今日拼贴"、"拼贴诗"、"collage poem"、 "把我们的对话做成拼贴诗"、"给我做个拼贴"。
-
johnisanerd Bundle Apify Successfactors Jobs APIPull live SAP SuccessFactors job postings from any public SuccessFactors career site with the Apify SAP SuccessFactors Jobs API Actor (johnvc/sap-successfactors-jobs-api). Returns job rows as JSON: title, company, employer, requisition ID, job function, location and country code, expiration date, remote flag, and the description as Markdown by default, with optional HTML or plain text. Turn on the detail add-on for the posted date, department, facility, shift type, and travel that only the job page carries. Takes a career-site host like jobs.sap.com, a full career-site URL, a single job URL, or a company name; filters by title, job function, location, remote, and active-only before billing. Use when someone wants successfactors jobs, a successfactors jobs api, a successfactors api without a key, to scrape SAP SuccessFactors career sites, or to feed a job board, aggregator, or sourcing tool with enterprise postings. Billed per job delivered with no start fee, and MCP-ready for Claude and other AI agents.
-
johnlombardo-dev Bundle Xstate V5Implement, refactor, and review XState v5 state machines (TypeScript and React) using a strict setup().createMachine() ruleset, params-first typing, canonical actor/spawn patterns, and createActorContext() patterns from @xstate/react. Includes guidance for planning/designing statecharts before implementation.
-
johnsmithca-sta Bundle AI Subscription Manager管理AI产品订阅与API余额资产的综合工具,内置50款AI产品定价库,覆盖订阅增删改查、到期提醒、成本统计、续费指导、同类比价、导入导出、功能重叠检测、token级任务成本预测、API余额寿命折算、HTML可视化仪表盘等全流程。当用户提到以下任意关键词时立即触发:管理订阅、订阅管理、我的订阅、查看订阅、订阅列表、订阅状态、订阅仪表盘、AI订阅、AI会员、AI工具订阅、会员管理、查看会员、续费提醒、到期提醒、即将扣费、续费评估、续费建议、要不要续费、成本分析、花了多少钱、订阅开销、月度支出、年度支出、订阅费用、订阅比价、同类比价、价格对比、哪个便宜、性价比排行、替代方案、功能重叠、重复订阅、订阅导入、订阅导出、订阅备份、添加订阅、新增订阅、删除订阅、修改订阅、取消订阅、自定义产品、定价过时、定价更新、砍订建议、订阅优化、API余额、余额还剩多少、余额能用多久、充值提醒、token成本、任务成本预测、跑一批要多少钱、哪个模型便宜、模型计价。触发后必须生成HTML仪表盘并交付给用户,同时根据用户具体需求执行对应分析。
-
johnsmithca-sta Bundle Health Report Trend Analysis体检指标趋势分析系统。当用户要求对历年体检报告进行数据化处理、指标趋势分析、健康管理工作台展示(体检报告、指标趋势、历年体检、健康管理、体检数据解析、化验单分析)时使用。支持 3 种输入形态:电子版 PDF(文本层)、扫描件 PDF、照片 JPG(自动合成 PDF);产出统一指标字典(114 指标)、历年趋势比对(异常/显著变化/趋好趋坏)、权威医学解读(默沙东/丁香医生/中国指南)、结构化 Markdown 报告与离线 HTML 工作台。全程本地处理,自动生成脱敏数据集。趋势判定聚焦近三年(--focus-years 可配置)。不适用于股票/账单/合同等非体检文档的分析。
-
jonascript Skill Guided TourRun a live, interactive guided tour of a codebase — you act as a hands-on tutor who leads the user through how the code actually works, one digestible piece at a time, pausing often so they can ask questions, go deeper, or redirect. This is a real-time conversation, NOT a document or HTML file you generate and hand off. Diagrams are used freely (ASCII, Mermaid, or rich widgets) wherever they make a concept click. TRIGGER this skill whenever the user wants to UNDERSTAND a codebase through conversation rather than receive a static artifact. Match phrases like: - "give me a guided tour", "walk me through this codebase interactively", "onboard me to this project", "teach me how this works", "help me understand this repo" - "explain how X works and let me ask questions", "I want to explore how X is built" - "I'm new to this codebase, where do I start", "trace how a request flows and stop so I can follow", "be my tour guide for this code" Also trigger when someone drops into an unfamiliar repo and expresses confusi
-
jonaskahn Bundle PrimevueUse when building UI with PrimeVue components — covers setup, configuration, theming, forms, inputs, buttons, data, overlays, menus, layout, media, directives, accessibility, migration, and Pass Through for Vue 3 / Nuxt projects
-
joncutrer Bundle Astro ExpertExpert guidance for building websites and applications with the Astro web framework (v5 and v6). Use this skill whenever the user mentions Astro, .astro files, Islands Architecture, Content Collections, Live Content Collections, SSR/SSG with Astro, Astro integrations (React, Vue, Svelte), View Transitions, Astro DB, Astro Actions, Server Islands, Astro Fonts API, or any Astro-specific concepts. Trigger for questions like "how do I do X in Astro", "build me an Astro component/page/layout", "set up a blog with Astro", "add React/Vue to my Astro site", "configure Astro for SSR", "migrate to Astro v6", or any task involving astro.config.mjs or the astro CLI. When in doubt, use this skill — Astro has many unique patterns that differ from other frameworks, and getting them right (especially v5→v6 migration changes) matters.
-
jorgempenalva Bundle SlidesGenerates branded presentations as PDF using Slidev. Auto-detects brand colors and fonts from the repo's Tailwind config, CSS variables, or design tokens. Use when asked to create a presentation, make slides, generate a deck, or prepare a slide deck on any topic.
-
josecortezz25 Bundle Acf Local JSONGenerate Advanced Custom Fields (ACF) Local JSON configurations for WordPress from visual designs or HTML structures. Use when creating ACF field groups, converting designs to ACF schemas, building WordPress custom fields from mockups, or when working with ACF Pro Local JSON format. Supports flexible content, repeaters, clone fields, and all ACF field types.
-
jotaijs Bundle JotaiWrite, review, refactor, or debug idiomatic Jotai state code for React and TypeScript. Use when work involves Jotai atoms, derived atoms, write-only action atoms, async atoms, Provider/store usage, jotai/utils, atomWith* helpers, atomFamily or jotai-family migration, large-object/list state, render performance, testing Jotai code, or converting React Context/useState/reducer-style state into a more Jotai-like atom model.
-
jovd83 Bundle Project Constitution SkillUse this skill when a user needs to create, update, or review a project constitution for a software project: an agent-readable governance document that defines durable product, engineering, architecture, testing, UX/accessibility, security/privacy, release, memory, and skill-routing principles before or during delivery. Prefer it for new projects, early-stage repositories, repo onboarding, SDLC kickoff, implementation planning, or when downstream agents need explicit quality gates and decision guardrails. Do not use it to choose a full architecture, write implementation code, or store cross-project policy unless the user supplied it.
-
jovd83 Bundle Prototype Sketching SkillUse when a working Angular, React, Vue, or static web app must look hand-sketched (Balsamiq wireframe, Sharpie marker, pencil, doodle, or blueprint) for a client demo, so clients read it as a draft and understand it is not production. Applies a reversible, non-destructive visual skin with an adjustable sketchiness level (0-100%) without touching components, markup, routing, state, or any logic.
-
jovd83 Bundle Responsive TestingUse when an agent must plan, add, extend, or run responsive frontend testing across phones, tablets, laptops, desktops, or large screens, reuse existing tests before creating new ones, and generate a normalized responsive testing report in markdown, json, or html.
-
jovd83 Bundle Stack Aware Unit Testing SkillStack-aware unit and component test planning, authoring, and review. Use to inspect a codebase, detect the test framework, decide whether to reuse or introduce a stack, design coverage, write isolated tests without changing production, or report unit-test gaps and risks.
-
jovd83 Bundle Token Usage Cost ReportUse when an agent must produce an auditable token-usage and cost report from structured runtime evidence, normalized usage bundles, or repository-level report sets. This skill discovers trustworthy evidence, resolves official pricing, refuses transcript-only estimation, and generates provenance-backed Markdown, HTML, and JSON artifacts with explicit exact, partial, estimated, or unsupported cost labels.
-
joyhpc Bundle Dashboard Builder根据用户提供的数据集(Excel、CSV、API 或数据库)快速生成一个完整可部署的 Flask + ECharts 数据可视化仪表盘项目。当用户提到"做一个仪表盘"、"数据可视化"、"看板"、"dashboard"、"BI 页面"、"数据监控页",或者拿着表格数据问"怎么把这些数据用图表展示在网页上"时,请使用此技能——即使用户没有明确说"仪表盘"三个字。产出的项目结构固定为:Flask 后端提供 3-4 个 JSON API、单页 HTML 前端展示 KPI 卡片和 ECharts 图表、附带 requirements.txt。不适用:单张静态图表(用 matplotlib 即可)、纯前端组件(不涉及数据后端)、Tableau/PowerBI 等第三方 BI 工具配置。
-
jp4g Bundle Aztec DeveloperPatterns for Aztec development: contracts, frontend, testing. Use when working with Aztec contracts in any capacity unless otherwise specified
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 code-overhaul-review, redesign-existing-projects, element-ai-vue-helper. 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.