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.
-
xorbitsai Skill HTML Deck EditorialOne self-contained HTML slide deck with magazine-grade editorial styling: "html deck", "editorial slides", "美观 PPT", "网页版幻灯片". Not for posters, ad creatives, or standalone images.
-
xorbitsai Skill PDF Report EditorialAn editorial-styled PDF report rendered from HTML via the browser: "PDF report", "whitepaper", "executive brief", "research report", "case study PDF". Read-as-document, not slides.
-
xunyuai Bundle Flight Monitor Agent机票实时查价 Skill:RollingGo 查价、精简/全量穷举、暖色 HTML 分页报告。 用户说「查机票」「穷举搜索」「RollingGo 查价」「国庆特价」「开口程」「东南亚/日本/菲律宾机票」时使用。 适配 Cursor、Claude Code、Codex、OpenClaw 等支持 Skills 协议的 Agent 工具。
-
xunyuai Bundle Xunyu Hand Drawn Healing Story手绘视频生成(xunyu):自然语言一句话即可产出「白色极简手绘(通用)」竖屏短视频,主题不限。 顶部叠字、左→右 wipe、可选黑白→淡彩,默认静音,默认引擎 video-use(ffmpeg); 另支持 Remotion / Hyperframes / HTML。支持 mode=smoke(占位图快速测通)与 mode=full。 含 10 个通用示例主题池(可自拟覆盖)、完整流水线、四引擎、生图通道与 BGM 可选能力。 Use whenever the user mentions 手绘视频、手绘竖屏、白色极简手绘、横扫上色、通用手绘短视频、 视频号/抖音无配音叠字短视频、hand-drawn vertical shorts、xunyu 手绘、 或要从示例主题池选题 / 自拟题材出片—even if they do not name this skill. Prefer this over generic video-use or handdraw-story-video for this white-minimal hand-drawn vertical format.
-
xyoraclenetwork Bundle Xl1 Dapp KitPortable headless XL1 dApp architecture via @xyo-network/dapp-kit*. Covers definition/config/plan/incarnation, xl1.dapp.json, application ports, effect journals and crash recovery, durable events vs Event Kit wakes, Node/browser hosts, Vercel/Cloudflare target composition, and conformance evidence. Activates when building or migrating an XL1 dApp toward dapp-kit, writing xl1.dapp.json, hosting a headless runtime, or distinguishing UI clients from the protocol application. Complements xl1-patterns domain recipes and xl1-scaffold React+service apps — does not replace gateway/chain knowledge.
-
xyoraclenetwork Bundle Xl1 ScaffoldBootstrap a new XL1 application — a single React dApp, a single xl1-service backend, a plain Node.js service/CLI, or a full-stack pnpm monorepo with React + xl1-service + a shared TypeScript library. Activates when the user wants to create, start, bootstrap, initialize, or scaffold a new XL1 project. Do NOT activate for work in an existing project.
-
y-a-v-a Bundle HTMLUse this skill when the user wants to export the current "situation" — the state of the conversation, work done, findings, data, or context — to a standalone HTML file they can open in a browser. The agent decides what is most valuable to capture and visualize. Invoked as /html, optionally with hints about what to focus on.
-
y-a-v-a Bundle Social PreviewGenerate a GitHub social preview image (1280×640 PNG) for the current repo. Builds a throwaway social-preview.html styled after the project's own look (webapp theme colors, fonts, layout) with a minimal tagline from the README, screenshots it with headless Chrome, and iterates with the user until approved. Use when the user asks for a social preview, OG image, open-graph image, or repo card image.
-
yanhua1010 Bundle Self Media Wechat Publisher把已确认的公众号终稿 Markdown 排版并写入微信公众号草稿箱。用于用户说"发布到公众号、写入草稿箱、公众号排版、换个排版主题、发小绿书图片消息"等场景。自动上传封面与文内图片,支持多主题与自定义 CSS、多账号和 server 模式。只创建草稿不群发,凭据只通过环境变量提供,未安装适配工具时交付手动发布包。
-
yaojingang Bundle Geo DiagnoseDiagnose a brand, website, or page for evidence-backed GEO gaps and opportunities from user-supplied URLs, HTML, or evidence. Use for brand diagnosis, website or page audits, GEO gap analysis, and 品牌诊断、网站诊断、页面诊断. Excludes live AI-platform recall, ranking, and citation-share measurement.
-
yaojingang Bundle Geo Site DiagnoseCrawl one public website from a supplied URL, select up to ten representative page types, score evidence-lined GEO readiness, and generate a standalone visual HTML report. Use for 网站 GEO 诊断、全站 GEO 体检、网站 GEO 审计, or requests such as “帮我诊断网站GEO并附上网址”. Excludes single-page or brand-only diagnosis, live AI ranking or citation measurement, authenticated sites, and website modification.
-
yasserstudio Skill Perfex ThemeUse whenever the user is building or debugging a Perfex CRM custom client-area theme — files under `assets/themes/<theme>/` and `application/views/themes/<theme>/`, asset injection via `app_customers_head`/`app_customers_footer`/`app_admin_head`/`app_admin_footer` hooks, overriding core views, dark mode with `[data-theme="dark"]` plus anti-FOUC `<head>` scripts, RTL/Arabic support, or the jQuery Validate bug where a submit button's `name` is stripped from POST (breaks "Pay Now" / "Save Draft" detection). Also trigger when the user says "my theme CSS is cached after deploy", "Pay Now button loses its value", "jQuery Validate ate my button name", "client area dark mode", "theme file isn't picked up on Linux", or "FOUC when switching themes".
Audited -
yumih1129 Bundle Wechat News Publisher当用户希望基于指定主题与时间,一次完成新闻检索、公众号源件生成、固定版式 HTML、参考图约束的模型封面图与指定目录落地时使用。
-
yumih1129 Bundle Wechat Article Generator将用户提供的主题、素材、草稿、Markdown 或正文先在对话中整理为可审阅的公众号发布源稿:稳定给出标题、摘要、封面提示词和标准 Markdown 正文,保证内容准确、排版可稳定转 HTML;默认用户可见中间结果仅保留在当前会话中,执行中间结构只允许存在于执行内存或由内存生产者直接供应的标准输入中,不生成任何过程文件。内容确认后再生成对应的微信兼容内联样式 HTML;当用户明确要求输出微信封面图时,可在 HTML 之后追加可选封面图分支。用户明确要求落盘时,可按模式生成 final.html,或同时生成包含 frontmatter 的 source.md 与 final.html,并在需要时附加 cover.png。适用于需要先严谨整理内容、再稳定生成公众号发布资产的场景。
-
yysun Skill React AppUse when creating, modifying, refactoring, reviewing, or organizing a React web app that uses Tailwind or utility-first CSS. Trigger for requests involving React pages, routes, layouts, components, feature UI, styling systems, app shells, frontend folder structure, UI architecture, import boundaries, thin routes, component placement, or avoiding catch-all folders such as `components` and `lib`. Especially relevant when deciding whether code belongs in foundations, primitives, patterns, features, pages, shell, or shared utilities.
-
yysun Bundle Workspace DesignDesign or review business operation pages, workbenches, and review or follow-up pages as task-centric workspaces. Use when working from requirement docs, business workflows, wireframes, screenshots, HTML, or frontend page proposals.
-
7xmohamed Bundle DesignProduces distinctive, production-grade UI for any component, page, or visual interface. Handles screenshot-driven iteration when the user sends an image with a visual complaint. Not for backend logic or data pipelines.
-
al-janef Bundle Auth HardeningReview, harden, and design authentication and session management for web applications — login, logout, session lifecycle, password storage, token handling, and brute-force protection. Use this skill whenever the user is building or reviewing sign-in / sign-out flows, JWT or session cookies, password hashing, "remember me", refresh tokens, account lockout, OTP/MFA, or password reset — even if they only mention "login" or "auth" casually. Applies to Node.js, Next.js, and similar stacks. Defensive only: this skill hardens auth systems, it does not bypass or attack them.
-
al-janef Bundle Engineering StandardEnforce a strict, production-grade engineering standard on any serious coding task — writing, reviewing, refactoring, debugging, or completing a feature. Applies correctness, security, performance, and maintainability discipline; bans placeholder/dead code and silent failures; requires evidence for every claim of success; and gates completion on lint, typecheck, tests, and build. Use this skill whenever the user is building or reviewing real application code, fixing a bug, or asking whether code is production-ready — especially in TypeScript/Node/Next.js and multi-tenant systems. It raises quality and rigor; it does not attack systems or bypass controls.
-
bandersnatch0x Bundle UI PickerUI shell and component semantics. Use when scaffolding a product page (list, dashboard, settings, detail, agent-admin), or when the wrong template/Badge-Tag pairing is about to be coded.
-
danwahlin Skill Container Apps DeploymentContainer Apps deployment gotchas and SPA frontend patterns for Azure. Supplements the official azure-prepare plugin skill with additional patterns for zone redundancy, azure.yaml configuration, and SPA frontend deployment (VITE_API_URL). USE FOR: Container Apps zone redundancy errors, managed-identity ACR pulls, azure.yaml language fields, cross-platform hooks, SPA frontend VITE_API_URL, React deployment to Azure, and ARM64-to-AMD64 builds. DO NOT USE FOR: generating complete Bicep infrastructure from scratch (use azure-prepare plugin) or AKS deployments (use superset-azure).
-
dom1ng0s Bundle AuditRealiza uma auditoria no código (Frontend/Backend) em busca de bugs, vulnerabilidades e más práticas.
-
ed3design Bundle Cad ConstructionUse after the design concept is settled (via design-first-iteration or equivalent) and the user is ready to translate it into parametric CAD geometry — component decomposition, parameter hierarchy, construction sequencing. Primary platform Fusion 360; the workflow also applies to SolidWorks, Onshape, FreeCAD, Inventor. Consumes design rules from `mechanical-design-principles`. Trigger on phrases like "now I'm building this in CAD", "create a construction plan", "parameter table for the model", "how do I decompose the project into components", "plan sketches and features". Do NOT load during open design exploration (use `design-first-iteration`), for CAD-automation scripts or parameter-import code (use `cad-api-scripting`), or alone when the user needs design rules (load `mechanical-design-principles` alongside).
-
ed3design Skill Fusion MCP BridgeUse when driving Fusion 360 from Claude Code through the local MCP-Bridge (HTTP server on 127.0.0.1:7654 with bearer-token auth, single-threaded Custom-Event handler). Covers the API quirks that consistently bite without a documented protocol: component activation before geometry, single-revolve over loft+combine-join, cut-before-shell sequencing, tool-body combine-cut for complex cuts, boolean-union before cuts on multi-body components, bridge timeout/lock recovery, screenshot setup, and the `fusion` CLI that replaces curl boilerplate. Trigger on phrases like "Fusion 360 via MCP", "fusion-mcp-bridge", "Fusion Custom-Event", "run Fusion API script", or any `fusion` CLI command. Do NOT load for general parametric CAD (use `cad-construction`), mechanical-design rules (use `mechanical-design-principles`), or OpenSCAD/FreeCAD (use `cad-api-scripting`).
-
ed3design Skill Image To Mesh Cad WorkflowEnd-to-end workflow for converting a 2D concept image into a parametric 3D CAD model when manual outline tracing is unreliable. Bridges the lossy "image → text-description → manual-spline-points" gap by using AI image-to-3D-mesh services (Tripo3D, Rodin, Meshy) as an intermediate step, then auditing the imported mesh for axis convention + cutout angles + sub-component inclusion before extracting the silhouette and building a parametric Loft/Revolve. Specifically applies to rotationally-symmetric parts (speakers, vases, lampshades, bottles, hubs). Trigger on phrases like "image to 3D mesh", "Tripo3D workflow", "mesh-driven CAD", "extract spline from mesh", "mesh-audit", "Y-up vs Z-up", "cutout position wrong". Do NOT load for normal CAD construction (use `cad-construction`), Fusion-API specifics (use `fusion-mcp-bridge`), or design exploration (use `design-first-iteration`).
-
ed3design Skill Mechanical Design PrinciplesGuides mechanical design decisions toward elegant, manufacturable, serviceable solutions with a strong bias toward tool-less assembly, monolithic parts, and form-follows-function. Provides the design rules (the WHAT and WHY — overhang, wall thickness, snap-fit sizing, tolerances, material matching). Load when the user designs mechanical parts, enclosures, housings, brackets, mounts, assemblies, or any 3D-printed component — particularly important for FDM with engineering filaments (ABS, ASA, PC, PA-CF, PETG-CF). Trigger on phrases like "design a housing", "build an enclosure", "how should I mount", "I'm designing a part", "3D print", snap-fit/press-fit questions. Do NOT load alone for iterative design conversations (load `design-first-iteration` alongside), for CAD workflow / parameter tables (use `cad-construction`), or for CAD-automation code (use `cad-api-scripting`).
-
elemontcapital Bundle X ArchitectureUse this skill when reasoning about the distributed system design, service orchestration, or request lifecycle of the X recommendation engine. It is essential for tasks involving the "For You" timeline construction, HomeMixer logic, or ProductMixer component definitions.
-
defold Bundle Defold Proto File EditingCreates and edits Defold resource and component files that use Protobuf Text Format (.collection, .go, .atlas, .sprite, .gui, .collisionobject, .convexshape, .label, .font, .material, .model, .mesh, .particlefx, .sound, .camera, .factory, .collectionfactory, .collectionproxy, .tilemap, .tilesource, .objectinterpolation). Use when asked to create, modify, or configure any Defold proto text format file.
-
deretame Skill Flutter Add Widget TestImplement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
-
ezos26 Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
faqndo97 Bundle NextjsBuild Next.js 16 applications with App Router, React Server Components, Cache Components, and BFF patterns. Full lifecycle - build, debug, test, optimize, ship. Specializes in Next.js as client + BFF layer calling backend APIs.
-
faqndo97 Bundle Inertia RailsBuild Rails + Inertia.js applications from scratch through production. Full lifecycle - setup, pages, forms, validation, shared data, authentication. Covers React/Vue/Svelte frontends with Vite bundling. Includes cookbook for shadcn/ui, modals, meta tags, and error handling.
-
markhamsquareventures Skill ReactHow to work effectively with React, always use when developing frontend components
-
markhamsquareventures Skill InertiaHow to work effectively with Inertia, always use when developing frontend features
-
markhamsquareventures Skill WayfinderHow to work effectively with Laravel Wayfinder, always use when developing frontend features
-
mnttnm Bundle UI AutoimproveIteratively improve frontend UI quality through automated grade-fix-verify cycles inspired by Karpathy's autoresearch pattern. Grades the interface, identifies the weakest area, applies targeted fixes, re-grades with an isolated subagent, and keeps or reverts based on score delta. Use when user asks to "auto-improve my UI", "run the improvement loop", "autoresearch my site", "iteratively improve this interface", "grade and fix my UI", "optimize my frontend", or "run ui-autoimprove". NOT for one-off CSS tweaks, single-element changes, or non-UI tasks.
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 social-preview, workspace-design, geo-site-diagnose. 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.