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.
-
loopbackio Bundle Loopback CoreBuild large-scale, extensible Node.js applications and frameworks using LoopBack 4 core patterns. Use when building TypeScript/Node.js projects that need IoC containers, dependency injection, extension point/extension patterns, interceptors, life cycle observers, or component-based architecture. Triggers on tasks involving @loopback/core, @loopback/context, Context, Binding, @inject, @injectable, @extensionPoint, @extensions, LifeCycleObserver, Interceptor, or Component patterns. Also use when the user asks about structuring large-scale Node.js projects for extensibility and composability.
-
lopadova Bundle Playwright Enterprise TesterEnterprise-grade browser automation, E2E verification, AJAX-heavy UI testing, auth-protected flow testing, visual regression, and performance budget enforcement using Playwright Test. Autodetects Laravel, Vite, Mix, Node, Bun, Next.js and Cloudflare Worker contexts. Writes persistent Playwright specs, runs tests with rich diagnostics, classifies failures with deterministic playbooks, enforces silent-failure detection, reports frontend contract gaps, and emits a stable JSONL flakiness history for analytics dashboards. Two runner modes (local dev vs CI) with different defaults. 17 optional phase 2 features (cross-browser, axe a11y, Lighthouse, swarm mode, AI root cause analyzer, etc.), all toggleable independently via .playwright-tester.json. Defensive-minimal defaults, progressive opt-in. Never auto-triggers: invoked via /playwright-tester slash command or the playwright-enterprise-tester agent.
-
loping151 Skill Stackweft DeliveryDelegate full-stack field/feature delivery to StackWeft — a compiled, evidence-gated pipeline for React + Express + Sequelize repos. Use when the user wants to ADD or EXTEND a cross-stack field (Sequelize model → controller / API payload → frontend service → list-card AND detail-page DOM) and have it verified by counterexample sentinel probes. Cheaper and steadier than doing it yourself in a free agentic loop, and it remembers repeated work (0-LLM replay). Do NOT use for non-field work (algorithms, infra, cross-service refactors) or repos that don't fit this full-stack field-flow shape — handle those yourself.
-
loro-dev Skill AfterrayQuery this Mac's local AfterRay computer history — summaries, activity, memories, and (only if the user opened a 30-minute window) original screenshots, OCR, and accessibility trees. Use when the user asks what they saw, heard, decided, searched, or did earlier; or mentions AfterRay, recall, computer history, replay, or the afterray CLI.
-
lossless-group Bundle Create HTML Breakout HighlightsLive-capture a breakout group's discussion and turn it into two artifacts — a markdown highlights file and a branded, self-contained HTML page styled from the bundled DESIGN.md. Sorts winding, interleaved discussion into coherent named themes, nudges the operator to attribute comments to speakers, and resolves every company/service/media mention into a canonical link via web search. Use when the user says they're starting a breakout, wants to take discussion notes, says "capture this breakout", "breakout highlights", "take notes for my group", or asks to turn breakout notes into a shareable page. The skill runs in four phases — roster, live capture (with speaker-attribution nudges), theme-clustered summary with linked mentions, HTML generation — and never interrupts a live discussion with more than one short question at a time.
-
lottiefiles Bundle Dotlottie WebImplement Lottie animations using dotLottie runtimes (@lottiefiles/dotlottie-web and @lottiefiles/dotlottie-react). Use when building, debugging, or optimizing dotLottie or Lottie animations in web projects, including vanilla JS, React, and Next.js. Covers package selection, Web Workers, state machines, theming, dynamic slot overriding, performance best practices, and common patterns.
-
louisyoungx Bundle Lucide React Taro在 Taro 微信小程序和 Web 项目中使用 Lucide 图标。当用户需要在 Taro 项目中添加图标、使用 lucide 图标库、生成 TabBar 图标时使用此技能。
-
lovstudio Bundle Lov Integrate LovinspUse to integrate Lovinsp into an existing Vite/Webpack/Next.js/Nuxt frontend and verify click-to-source. Trigger when the user mentions 装 lovinsp、集成 lovinsp、接入点击跳转源码 or click to code.
-
lucashuang-an Bundle Data Analysis Report数据分析 HTML 报告生成器:读取 Excel/CSV 文件,结合业务背景和分析目标,自动完成数据质量审计、统计检验(Z 检验/置信区间/效应量/多重比较校正),生成含图表、结论建议、方法说明的完整 HTML 报告并启动本地预览。只要用户提供了表格数据(xlsx/csv)并希望做分析、看趋势、比较分组、评估效果、产出报告或可视化结论,即使没有明确说'报告'二字,也应使用本 skill。 | English: An HTML data-analysis report generator. Reads an Excel/CSV file and, given business context and an analysis goal, automatically performs data-quality auditing and statistical testing (Z-tests, confidence intervals, effect sizes, multiple-comparison correction), then produces a complete HTML report with charts, findings, and a methodology note, and launches a local preview. Use this skill whenever the user provides tabular data (xlsx/csv) and wants analysis, trends, group comparisons, impact evaluation, a report, or visualized conclusions — even if they never say the word 'report'.
-
lucaswangzcx Bundle Literature Downloader中文文献检索、筛选、批量采集和合法全文获取助手。用于用户需要查找论文、下载可合法获取的 PDF/HTML/XML 全文、生成关键词和检索式、查询 DOI/PMID、筛选高影响因子或高分区期刊、检查开放获取、做引用链扩展、批量文献候选表、下载日志、去重清单、Zotero/BibTeX 整理,或解决文献难下载问题;禁止绕过付费墙、盗版下载、共享账号或规避版权限制。
-
lucaswangzcx Bundle Paper Harbor文献港。自动化检索、筛选并把文献元数据保存到 Zotero。适用于用户要从 ScienceDirect 或中国知网按关键词、影响因子、出版时间和数量生成候选清单、优先级清单、Zotero 入库清单和可追踪输出目录。默认不下载 PDF/HTML 全文,禁止绕过登录、付费墙、验证码或机构权限限制。
-
lucaszhh Skill Vite To Nextjs App RouterMigrate a Vite + React Router SPA to Next.js App Router in production. Codified from a real migration on a +500k-user government platform (Mendoza por Mí). Use when the user asks to migrate a Vite/CRA app to Next.js, or to adopt App Router routing, SSR, or server components incrementally.
-
lucent-snow Bundle Mineru SkillMinerU 文档处理技能。将 PDF、DOCX、PPTX、图片、HTML 文件通过 MinerU API 转换为 Markdown。 当用户需要处理文档、转换文档格式、提取文档内容、检查 MinerU Token 状态、 续期 Token、或批量处理文档目录时使用此技能。 触发关键词:MinerU、处理文档、转换PDF、文档转Markdown、Token状态、批量处理文档。
-
lucent-snow Bundle Style ExtractorExtract evidence-based style guides and motion appendices from websites or web apps. Use when Codex needs reusable visual language, semantic tokens, component/state rules, runtime animation evidence, or style references that preserve design signal while stripping product-specific structure and content.
-
lucking7 Bundle Mapcn DocsUse when building documentation sites with live code previews, component library docs, API reference pages, or interactive code examples using Next.js App Router and shadcn/ui.
-
lucking7 Bundle MotionAnimates React, Vue, and JavaScript UIs with gestures, scroll effects, spring physics, and layout transitions. Use when building drag-and-drop, hover effects, scroll animations, modals, carousels, or troubleshooting AnimatePresence exit issues.
-
luispitik Bundle Salgadoia Web Design Engineer ProSkill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-log para no repetir combos. Incluye módulos opcionales de excelencia (Lenis smooth scroll, SplitText cinético, parallax, scroll storytelling, Three.js). USAR cuando el usuario diga: "crea una web", "diseña una landing", "haz una página para mi negocio", "rediseña esta web [URL]", "construye el frontend", "preview de estilos", "monta una web para [nombre]", "necesito web nueva", "quiero ver opciones de diseño", o cualquie
-
lujiaheng-artpivot Bundle Immersive Web Design沉浸式3D网页前端设计引擎——生成具有电影级视觉冲击力的Web前端界面。 集成Three.js 3D场景、GSAP动画、Parallax.js视差、光柱/粒子动态背景、 AI图像生成(NanoBanana Pro/即梦)调用。输出生产级HTML/CSS/JS或React JSX。 强制触发词:3D网页、沉浸式设计、Three.js、GSAP动画、WebGL、parallax视差、 光柱动画、粒子背景、流光效果、hero section、landing page、3D hero、 动态背景、交互式网页、cinematic web、电影感网页、霓虹外发光、 scroll animation、GSAP ScrollTrigger、Spline嵌入、shader、着色器、 NanoBanana、即梦、AI生图嵌入、React Three Fiber 当用户要求"炫酷网页""3D首页""带动画的landing page""沉浸式体验"时触发。
-
lukinov Bundle AI Form BuilderTurn a text description, screenshot, PDF, or HTML of a form into a production-ready FormEngine JSON schema plus runnable React code. Use this skill whenever the user asks to build, generate, scaffold, or convert a React form — especially when they mention FormEngine, a JSON schema form, a signup/login/contact/onboarding/checkout/survey form, or drops a screenshot/PDF/HTML of a form into the chat. Also use it when the user says "make me a form with fields X, Y, Z", "convert this to React", "alternative to Formik/React Hook Form", or imports a form definition into a React project. Default target is FormEngine Core (MIT, free).
-
luko248 Bundle CSS FirstCSS-first expert guidance with live Web Platform Baseline data. Use for CSS implementations, modern CSS features, browser support, Baseline status, progressive enhancement, or newly available web-platform features.
-
lumacoder Bundle Reactbits UI SkillsReact Bits UI 组件框架专家。在开发前端页面时,总是优先使用 react-bits 框架的组件产出标准化代码。支持自然语言描述需求,自动匹配最佳组件组合。触发词:react-bits、reactbits、动效组件、落地页、landing page、hero section、animated component、前端页面开发、做个页面。
-
luongs3 Bundle Skill AtlasFind the right public AI-agent skill for a job — and know whether to trust it. Load when about to start a task type (Upwork freelancing, technical interviews, office documents, MCP/tool building, prompt engineering, web/frontend, data analysis, learning English) and you want to know which existing public skills to pull in, rated by source reputation and freshness. Answers "which skill do I load for X, and can I trust it?"
-
lxgicstudios Bundle A11Y CheckerScan HTML and JSX for accessibility issues with AI-powered fix suggestions
-
lxgicstudios Bundle Animation GenGenerate CSS and Framer Motion animations from plain English. Use when you need smooth animations without the math.
-
shivadharmi Bundle LucidTurn long, dense, or hard-to-follow responses into a tight chat summary PLUS a polished, single-file HTML artifact that holds the full depth and doubles as learning material. Use this skill PROACTIVELY whenever a reply is shaping up to be long or multi-part — explaining a concept or how/why something works, walking through code or describing what changed across files, laying out an implementation plan or architecture, comparing options/tradeoffs, or otherwise producing a wall of text the user would have to wade through. Trigger it even when the user does NOT say the word "artifact" — if the honest answer is "this is going to be a lot to read," reach for Lucid. Also trigger on explicit asks like "make this an artifact", "show me this visually", "this is too much text", "I can't follow this", "summarize this so I can actually understand it", or "turn your last answer into a page I can study." Do NOT use it for short, one-line answers, quick factual lookups, or simple confirmations; for a fast back-and-forth whe
-
shovonsheikh Skill Universal Genius UI UX FrameworkUniversal UI/UX design intelligence applicable to any digital platform (web, mobile, tablet, desktop) and any industry. Focuses on core psychological principles, structural architecture, color mastery, and fluid interactions. Actions: design, layout, color-grade, animate, review, architect. Projects: web app, mobile app, SaaS, e-commerce, enterprise software, landing page, portfolio. Elements: screens, layouts, navigation, interactions. Topics: cross-platform design, touch-ergonomics, accessibility, spatial psychology, 60-30-10 color rule, grayscale-first.
-
shovonsheikh Bundle Piprapay IntegrationImplements the PipraPay payment gateway for any web project. Use when the user wants to integrate PipraPay payments, handle checkout redirects, verify transactions server-side, process refunds, or set up PipraPay webhooks. Supports Next.js, Node.js/Express, PHP, and plain HTML/JS. Trigger on phrases like "PipraPay", "payment gateway", "bKash checkout", "payment integration", "pay now button", or any request to add, fix, or extend a PipraPay integration.
-
shuyicc Bundle Mathlens专业的数学老师辅导技能,用于深入浅出的解答数学题,生成HTML讲解文档和带配音的Manim动画视频, 解答细致,深入浅出,浅显易懂,比较适合一般学情的学生。 核心工作流:数学分析 → HTML可视化 → 分镜脚本 → TTS音频 → 验证更新 → 脚手架 → Manim代码 → 渲染验证 触发条件:学生粘贴数学题图片、需要教学视频、需要HTML讲解资料
-
siddik-web Bundle Wp Block Theme ConverterConvert any HTML/CSS/JavaScript project into a production-ready WordPress Block Theme (Full Site Editing) with Interactivity API, Block Bindings, per-block CSS, and WordPress 6.5+ best practices. Use this skill whenever the user wants to convert, port, transform, migrate, or rebuild static HTML/CSS/JS into a WordPress block theme, FSE theme, or Gutenberg-compatible theme. Also triggers for scaffolding themes from scratch, generating theme.json from design tokens, creating block patterns from HTML snippets, or building WooCommerce-compatible block themes. Trigger on phrases like "convert to WordPress", "make this a WP theme", "block theme from HTML", "FSE theme", "Gutenberg theme", "WordPress theme from scratch", "port my landing page to WordPress", "WooCommerce theme from HTML", "create a block pattern", "generate theme.json", or any request involving WordPress block theme development. Also use this skill when the user invokes the slash commands /convert-to-wp-theme, /scaffold-wp-theme, /wp-pattern, /wp-theme
-
sikandarjodd Bundle Motion SvDocumentation and patterns for using motion-sv, a Svelte 5 port of Motion (Framer Motion). Use this when the user wants animations, gestures, or transitions in Svelte.
-
silkyland Bundle Ground My ShopwareBuilds and repairs Shopware 6 Administration and Storefront UI by reading the INSTALLED vendor source first — `mt-card`'s real slot list, `sw-data-grid`'s preview slot, `sw-modal`'s variants, the Meteor token files, the snippet catalogues — and reusing the component core already ships instead of hand-rolling markup. Built for Shopware's silent failure class, where nothing throws: content addressed to a slot the component does not declare is dropped without a warning, a `variant="small"` media uploader renders no preview at all, a BEM class with no stylesheet leaves a section looking cramped, a scoped `.mt-card[data-v-…]` rule beats your single-class override and computes to `0px`, a required `description` prop passed as a bare attribute prints an empty block, a `<h3>` inside a `{# … #}` comment renders fine in the browser and crashes every template spec. Use this skill whenever the task touches a Shopware admin module, page, card, data grid, modal, media or colour picker, admin SCSS or snippets, a storefront
-
simbo1905 Bundle Kapture Dom ErodeSearch and extract readable text from multi-megabyte Kapture MCP DOM snapshots by eroding away HTML tag soup. Use when you have a saved DOM from kapture_dom and need to find or read visible on-screen content.
-
simonlin1212 Bundle GlobalpercentGlobalPercent — build a global-macro-probability panel for an investment research system. Merges public probability data from prediction markets (Polymarket + Kalshi), classifies every market into macro modules (monetary policy / macro economy / AI / etc.), and shows the whole market's expected-probability state at a glance as a sentiment/risk overlay (not a trading signal). Use when building a macro-probability or "event probability" dashboard, or wiring Polymarket/Kalshi APIs. Includes verified API details, the full architecture, hard-won gotchas, and adaptable reference code (Python backend + React panel).
-
simple11337 Skill No AI SlopStrip AI slop from UI and Next.js code output. Use when generated or reviewed React, Next.js, or TypeScript code contains redundant comments that restate the code, leftover TODO and placeholder stubs, debug remnants like console.log and debugger, bloated JSDoc, decorative banner comments, or lazy type escapes like as any and ts-ignore. Trigger when the user asks to clean up generated code, remove AI comments, deslop, or tidy UI output, and run automatically as a review pass in the DO-UI pipeline.
-
siri2026-design Bundle Exhibition Layout Planner展览/展厅空间规划出图工具。当用户上传展厅平面图纸(CAD导出图、建筑平面图、毛坯/精装平面、手绘草图等)并希望生成展陈规划方案图时使用。能基于图纸生成四类专业出图:①分区规划平面图(不同功能区/展区用不同色块表示,带区域编号与名称)②参观动线图(带方向箭头的参观流线,区分主动线/次动线/疏散动线)③情绪/体验节奏曲线图(按参观顺序映射观众情绪起伏)④图例与区域内容说明图(色块图例+各区域展项点位说明)。只要用户提到"展厅平面图""展陈规划""分区图""参观动线""观展动线""布展方案""展区划分""色块分区""展览规划图"或上传了任何展馆/展厅/博物馆/展览空间的平面图纸并想要规划方案,就应使用本skill,即使用户没有明确说"出规划图"三个字。输出为可缩放、清晰、便于截图的HTML网页图。
-
sklls Bundle Betting AppBuild full-stack sports betting web apps using pari-mutuel odds with Next.js 14 (App Router), TypeScript, Tailwind CSS, and Supabase (PostgreSQL + RLS). Encodes proven patterns for wallet management, atomic bet placement, dynamic odds calculation, admin dashboards, leaderboards, live score integration, and early-bird incentive mechanics. Use this skill whenever someone wants to build a betting platform, prediction market, sports pool, fantasy league money app, or any app where users wager on outcomes with a shared prize pool. Also trigger for requests to add betting markets, pari-mutuel odds, wallet systems, or settlement logic to an existing app.
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 loopback-core, playwright-enterprise-tester, stackweft-delivery. 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.