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.
-
angelapaia Skill Web Security AuditAuditoria de seguridad web completa tipo pentest black-box. Ejecuta 70+ tests contra cualquier URL (OWASP Top 10, CVEs, CORS, headers, BBDD, auth, rate limiting, inyeccion) y genera informe HTML profesional con vulnerabilidades, pruebas de concepto y plan de accion. Usa esta skill siempre que el usuario mencione auditoria de seguridad, pentest, revisar seguridad, buscar vulnerabilidades, ciberseguridad, test de penetracion, o quiera verificar que una web es segura antes de lanzar.
-
aniket-508 Skill Vercel DoctorFind ways to cut your Vercel bill. Run after making changes to catch cost-heavy patterns early in Next.js projects.
-
ankitdey01 Bundle Free Resume ExportConvert raw HTML pasted from a resume builder's browser inspector (Tailwind arbitrary-value classes, data-editable-text spans, resume-*-action buttons, SVG icon cruft) into clean semantic HTML/CSS and render it to a single-page PDF. Trigger when the user pastes an HTML dump containing patterns like data-editable-text, resume-section-, resume-action-button, or resume-inline-entry-action and asks for a resume/PDF.
-
anl331 Skill Goey ToastInstall and use goey-toast — a gooey, morphing React toast component built on Sonner with Framer Motion. Use when adding toast/notification UI to a React app (success/error/warning/info/promise toasts), or when the user mentions goey-toast / gooey toast.
-
anxforever Bundle StylekitApply a specific, consistent visual style to frontend UI you are generating. Use when building or styling web UI (pages, components, dashboards, landing pages) and you want a named aesthetic — Glassmorphism, Neo-Brutalist, Cyberpunk, Bauhaus, Apple, Stripe, Linear, and many more — instead of generic AI defaults. StyleKit gives you design tokens, component recipes, and AI rules for each style, with themes installable through the shadcn registry.
-
dhruvmehra Bundle MemeGenerate meme images from a template and caption text using the `meme` CLI (a wrapper over the free memegen.link API). Use whenever the user asks to make/create/generate a meme, add a caption to a meme template, react with a meme, or wants a funny image with top/bottom text. This is the correct and only way to make a meme — always drive the `meme` CLI; never hand-build memegen URLs or use ad-hoc scripts. Handles popular templates (drake, distracted boyfriend, two buttons, etc.) and custom background images.
-
dickwu Bundle Tailwind Canonical FixAuto-fix Tailwind CSS non-canonical class names across the project. Use when the user mentions tailwind canonical classes, suggestCanonicalClasses, fix tailwind classes, canonical fix, or wants to batch-fix Tailwind CSS class warnings like "h-[18px] can be written as h-4.5".
-
diegojohnsonl Bundle Trpc Tanstack NextjsSet up tRPC with TanStack Query in Next.js App Router projects. Use when: (1) Setting up tRPC from scratch in a Next.js project, (2) Adding new routers or procedures, (3) Integrating authentication with tRPC context, (4) Using tRPC with React Server Components, (5) Configuring prefetching and hydration patterns.
-
diffusionstudio Bundle ApecsBuild with apecs — a high-performance archetype ECS for TypeScript — and its React (`apecs/react`) and Solid (`apecs/solid`) bindings. Use when writing traits, systems, queries, relations, or observers; when choosing between `get`/`each`/`chunks`/accessors; when wiring world state into a component tree; or when diagnosing "my UI doesn't update", "my system allocates", "Changed() misses writes", or archetype/query behaviour.
-
dimitrigilbert Bundle FormedibleExpert knowledge for Formedible - A React form library built on TanStack Form with 22+ field types, multi-page forms, analytics, and type-safe validation
-
diskd-ai Bundle Human Interface Guidelines 1992Apply and review classic desktop UI designs against the 1992 Human Interface Guidelines. Use when designing or auditing menus, windows, dialog/alert boxes, controls, icons, color, mouse/keyboard behaviors, language/messages/help (including Balloon Help), localization/worldwide compatibility, accessibility (universal access), and collaborative-computing UX for desktop-style interfaces.
-
djc00p Bundle Rails CI FixerFix failing CI on Rails PRs using a tiered escalation loop. Use this skill whenever a Rails pull request has failing CI — RSpec failures, RuboCop offenses, migration errors, factory issues, seed data problems, or build environment failures (yarn, npm, Tailwind, missing system deps). Fix, verify, then pause for human approval before committing. Pull logs, fix with a fast model, escalate to a stronger model if needed, notify human when green or stuck. Never merges — human always merges. Trigger phrases: fix CI, CI is failing, CI is red, watch the PR, fix the tests, the build is broken.
-
dlcastillop Bundle Starlight Page ActionsUse this skill whenever the user is working with Starlight Page Actions, a Starlight plugin that adds AI-ready page action buttons to documentation sites. Trigger this skill when the user mentions installing or configuring starlight-page-actions, adding "Copy Markdown", "Open in ChatGPT/Claude", or "Share" buttons to their Starlight docs, generating an llms.txt file, customizing or disabling page actions per page, customizing AI prompts for doc pages, or making their Starlight documentation AI-friendly. Also trigger when the user asks about integrating Starlight docs with AI chat services, page-level frontmatter control for actions, or sharing documentation via social/messaging platforms. Use this skill even if the user simply asks "how do I add AI buttons to my docs" or references the starlightPageActions() plugin in their Astro configuration.
-
dmenchaca Bundle Webflow To ReactConverts a Webflow HTML export into a maintainable React app with TanStack Start (SSR, TanStack Router conventions) using an idiomatic React-first approach. Sets up Storybook early, builds UI primitive + page-section SOT components with variant stories before composing routes. Use when the user has a Webflow export (index.html + css/ + js/ + images/ + fonts/) and wants to migrate to React, when they mention TanStack Start, TanStack Router, SSR, Storybook, SOT components, "convert Webflow to React", or when a repo already contains a Webflow export at its root. Works in Cursor, Claude Code, GitHub Copilot, Gemini, Codex, or any agent that loads Markdown skills. Covers folder layout, font self-hosting, CSS preservation, Storybook parity, global-effect hooks, first-run GitHub + Netlify ship (MCP + auth fallbacks), optional Core Web Vitals patterns (font preload, deferred analytics, CLS tweaks; adapt per export), GSAP kept intact (not rewritten in Framer Motion), and document-shell cleanup so stack scanners do not
-
dmlin7777777 Bundle Baogong求职教练,不是润色器。针对 JD 交互式定制简历,编造阻断门确保每条经历经得起面试追问。HTML + Markdown 双交付。
-
dncore Bundle Creo Design Agent面向制造业的钣金/注塑件设计智能体服务。当用户需要设计钣金件(折弯、冲孔、展开、材料选型)、注塑件(壁厚、拔模、加强筋、凸台、模流/锁模力工艺参数)或给出分析参数(力学/有限元/热力/模流)时使用。可检索行业/公司知识库、调用 Creo 进行三维建模。内置 ReAct 智能体 + 可配置 OpenAI 规范 LLM provider + 知识库 RAG + 分析引擎,通过 MCP 工具 design_chat 或 HTTP /chat 使用,同时也暴露底层工具面。
-
doeixd Bundle Flue EveMigrate an Eve project to flue-eve — scan existing code, scaffold the Flue runtime, wire the Eve compat server, connect the frontend. Triggers on any mention of "migrate from Eve", "switch to flue-eve", "run Eve on Flue", "flue-eve migration", "project conversion", or when users ask how to port an existing Eve agent, client, or frontend to flue-eve. Also triggers when users ask about setting up flue-eve in a new project from scratch.
-
dogum Bundle HTML ArtifactsProduce a self-contained HTML artifact instead of a markdown document when the request is for content that benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use this skill aggressively whenever the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer," "summary," "comparison," "review," "PR description," "mockup," "diagram," "flowchart," "deck," "slides," "status update," "post-mortem," "incident report," "playground," or a one-off "editor" or "tool" for triaging/reordering/tuning anything — even if they don't explicitly say "HTML" or "artifact." Also trigger when the user asks Claude to "explain," "summarize," "compare," "explore options for," "brainstorm directions for," or "walk through" a non-trivial topic. Stay in markdown only for short conversational replies, code-only outputs, terminal-style command answers, and content that's genuinely just a few sentences.
-
dokhacgiakhoa Skill Frontend Gsap UI PromaxKỹ năng thiết kế giao diện React/HTML cao cấp (UX/UI Promax) và tạo chuyển động đồ họa động mượt mà bằng GSAP (GreenSock) trong Remotion.
505 -
cy-chenyue Bundle Wechat Typesetting Cy微信公众号智能排版技能。没有固定模板——读懂文章后为每一篇现场设计排版:版面结构、阅读节奏、风格气质、配色字体全部从内容推导,每篇都不同,并给出备选风格参考;用微信安全实现手法生成全内联 HTML,以内容完整性、兼容、输出契约和真实渲染四道发布门降低粘贴后崩坏风险;输出带"一键复制"按钮的预览页。当用户提到"微信文章"、"公众号文章"、"发公众号"、"帮我排版"、"公众号排版"、"微信排版"、"排版成微信格式"、"公众号 HTML",或给出一篇文章/Markdown 要发布到公众号时触发;也用于检查已有公众号 HTML 的兼容性与排版质量、给文章换风格重排。
-
cyberspacesec Bundle Snir Web IntelligenceCapture web screenshots and collect page intelligence with the snir CLI, HTTP API, Go SDK, and CDP provider. Use when you need browser-based screenshots, HTML/headers/cookies/network evidence, batch URL or host scanning, device emulation, proxy rotation, or SQLite/JSONL/CSV scan outputs.
-
cyrus-tt Bundle Xhs Card Renderer将 Markdown 正文渲染为小红书风格的高清图片卡片(1080×1440,2x DPI)。当用户需要"出图""渲染卡片""生成小红书图片""把文章变成图片"时触发。覆盖:风格规范、HTML 生成、Playwright 高清导出。
-
cyrusnuevodia Bundle Remotion Best PracticesBest practices for Remotion - Video creation in React
-
czlonkowski Bundle Blender Web 3dWork with Blender from Claude — headless CLI scripting or the Blender MCP — to build, modify, render, and publish any 3D model, including shipping it online as an interactive Three.js/Next.js web app (GLB export with Draco+WebP, orbit viewer, bloom, animated parts, Vercel deploy). Use this whenever the user wants to create, improve, fix, render, or iterate on any Blender model or scene — phrases like "improve the model", "fix this part", "render this", "make a 3D web demo", "export to glTF/GLB", "use blender", "the model looks wrong in the browser", "optimize the 3D scene", or any screenshot-driven feedback loop on a 3D asset. Also use it when debugging a Three.js viewer that renders black, glows wrong, or has detached/floating parts, and when deciding between Blender MCP and headless CLI. Proven on the Aurora colony-ship project.
5.7k -
d-wwei Bundle Product Goal Based AuditSystematic quality audit for any software project based on design goals. Extracts quantifiable expectations from project docs, generates audit scripts, runs audits, deep-dives beyond PASS/FAIL, coordinates expert role passes, cross-validates findings, confirms mined commitments with the user, reviews the audit process itself, validates adversarial benchmark cases, diagnoses root causes, prescribes structured fixes, and verifies closure through iterative re-audit. Supports: backend services, frontend projects, CLI tools, SDK/libraries, data pipelines, specs, test plans, and architecture documents. Trigger phrases: "audit this project", "goal-based audit", "product audit", "check if this system works as designed", "pre-launch review", "项目审计", "目标审计", "上线前检查", "审计健康状况". Subcommands: mine, instrument, audit, deep-dive, diagnose, prescribe, verify, full.
-
d-wwei Bundle Road Trip PlannerEnd-to-end road trip and travel itinerary planner that produces navigation-ready guides. Use this skill whenever the user asks to plan a road trip, self-drive tour, multi-day driving itinerary, or travel route — even if they just mention a destination and dates. Also trigger when the user asks for driving directions between multiple stops, wants to optimize a travel route, or needs a day-by-day travel guide with navigation links. Covers route planning, driving time verification, holiday/closure checks, parking details, weather forecasting, cultural-layer research, pre-trip homework recommendations. Generates markdown documents, interactive HTML guides with embedded Leaflet maps, and shareable PNG portable cards for offline IM sharing.
-
d0ublecl1ck Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build or redesign web components, pages, artifacts, posters, or applications (websites, landing pages, dashboards, React components, HTML/CSS layouts) or to style/beautify any web UI. Prioritize creative, polished code and UI design that avoids generic AI aesthetics.
-
dabit3 Bundle Liquid GlassBuild and migrate websites and web apps with the Liquid Glass design language using HTML, CSS, and JavaScript. Use when creating glass/translucent UI on the web, applying backdrop-filter glass surfaces, glass navbars, glass tab bars, glass dialogs and bottom sheets, morphing transitions with the View Transition API, SVG refraction filters, or any liquid-glass / glassmorphism UI work. Also use when the user asks about frosted glass effects, translucent navigation layers, backdrop-filter best practices, or bringing Apple-style Liquid Glass to the web.
-
daemon-blockint-tech Bundle Solana DevUse when user asks to "build a Solana dapp", "write an Anchor program", "create a token", "debug Solana errors", "set up wallet connection", "test my Solana program", "deploy to devnet", or "explain Solana concepts" (rent, accounts, PDAs, CPIs, etc.). Also use for quick on-chain lookups via public RPC + curl — "what's the balance of <wallet>", "look up transaction <sig>", "token balance for <account>", "check this address on mainnet/devnet". End-to-end Solana development playbook covering wallet connection, Anchor/Pinocchio programs, Codama client generation, Surfpool/LiteSVM/Mollusk testing, security checklists, and JSON-RPC curl lookups against public clusters. Prefers @solana/kit v7 plugin clients (createClient + .use()), wallet connection via @solana/kit-plugin-wallet + @solana/react, web3.js v3 (Kit internals, RC) as the migration target for legacy codebases, and Surfpool for local networks and integration testing.
-
daniel-style Bundle Magic SlideGenerate a self-contained HTML presentation with Magic Move transitions. Use when the user wants to create a slideshow, presentation, or slide deck from a topic or outline, or invokes magic-slide preview to start the preview server.
-
danielgwilson Bundle IosctlUse this skill when building, launching, testing, inspecting, or proving native iOS Simulator apps with the agent-first `iosctl` CLI. Triggers include iOS Simulator proof runs, Xcode build/test loops, screenshot receipts, semantic UI tapping, accessibility-tree inspection, and replacing brittle MCP-only iOS workflows with CLI-first workflows.
-
danke123abc Bundle Migrate To VinextMigrates Next.js projects to vinext (Vite-based Next.js reimplementation). Load when asked to migrate, convert, or switch from Next.js to vinext. Handles compatibility scanning, package replacement, Vite config generation, ESM conversion, and deployment setup (Cloudflare Workers natively, other platforms via Nitro).
-
danny-de-bree Bundle BoundIntegrate and operate BOUND, the deterministic bounded-utility control policy for agent workflows. Use when an agent must install bound-policy, define StepContracts, collect real ExecutionEvidence, evaluate meaningful execution boundaries, react to ACCEPT/RETRY/REPLAN/ROLLBACK, audit an existing BOUND integration, or produce a reproducible numeric integration report.
-
dashenbibi Bundle Tutorial GeneratorAutomatically generate illustrated tutorials for any website. Given a URL, explore pages, take screenshots, record steps, and produce tutorials in Markdown, HTML, PDF, or Video formats.
-
drawcall-ai Skill SpeechUse the Drawcall Speech API from apps, websites, and 3D experiences. Use when explaining or showcasing text-to-speech usage with https://v1.speech.drawcall.ai, including simple HTML audio, JavaScript audio loading, voice selection, style control, browser autoplay constraints, URL encoding, caching behavior, and first-request warmup.
-
drawcall-ai Bundle UikitmlWrite, validate, render, and convert UIKitML for pmndrs/uikit interfaces. Use when working with .uikitml files, authoring spatial 3D UI or UI targeting VR/AR, using Three.js, @react-three/fiber, or IWSDK, choosing default/Lucide/Horizon components, fixing UIKitML validation errors, or using the @drawcall/uikitml CLI.
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 web-security-audit, vercel-doctor, free-resume-export. 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.