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.
-
ndpvt-web Bundle Latex Document SkillUniversal LaTeX document skill: create, compile, and convert any document to professional PDF with PNG previews. Supports resumes, reports, cover letters, invoices, academic papers, theses/dissertations, academic CVs, presentations (Beamer), scientific posters, formal letters, exams/quizzes, books, cheat sheets, reference cards, exam formula sheets, fillable PDF forms (hyperref form fields), conditional content (etoolbox toggles), mail merge from CSV/JSON (Jinja2 templates), version diffing (latexdiff), charts (pgfplots + matplotlib), tables (booktabs + CSV import), images (TikZ), Mermaid diagrams, AI-generated images, watermarks, landscape pages, bibliography/citations (BibTeX/biblatex), multi-language/CJK (auto XeLaTeX), algorithms/pseudocode, colored boxes (tcolorbox), SI units (siunitx), Pandoc format conversion (Markdown/DOCX/HTML ↔ LaTeX), and PDF-to-LaTeX conversion of handwritten or printed documents (math, business, legal, general). Compile script supports pdflatex, xelatex, lualatex with auto-detect
-
netresearch Bundle Context7Use when looking up library documentation, API references, framework patterns, or code examples for ANY library (React, Next.js, Vue, Django, Laravel, etc.) and the Context7 MCP server is unavailable or not configured. Fetches the same current docs directly via the Context7 REST API as a fallback. Triggers on: how to use library, API docs, framework pattern, import usage, library example.
-
netresearch-security-audit-skill Bundle Security AuditUse when conducting security assessments — OWASP Top 10 / API / LLM, CWE Top 25, CVSS scoring — auditing PHP/TYPO3, APIs, frontend, Terraform/K8s/Docker IaC, AWS cloud, AI agent configs, or scanning dependencies.
-
nicobailon Bundle Visual ExplainerGenerate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, and other visual explanations.
-
nuxt Bundle Nuxt UIBuild UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
-
oil-oil Bundle Draw UIGenerate UI design mockups and help reconstruct generated UI screenshots into HTML/CSS or WeChat Mini Program WXML/WXSS. Prefer built-in image generation when available; use ZenMux + GPT Image 2 for scripted local outputs, or the optional Codex/OpenAI-compatible provider in Codex environments. TRIGGER when the user says "生成图片", "画图", "设计 UI", "UI 设计", "出图", "create an image", "design a screen", "landing page", "设计稿还原", "截图还原 HTML", "把图片复刻成网页", "微信小程序复刻", "小程序高保真", or when another skill needs image generation.
57 -
powersync-ja Bundle PowersyncBest practices for building and maintaining applications with PowerSync: Cloud and self-hosted setup, sync configuration, client SDK usage, backend integration (Supabase, custom Postgres, MongoDB, MySQL, MSSQL), schema changes, watch and reactive queries (useQuery), attachments, the upload queue, and debugging. Use this skill whenever the user mentions PowerSync, a @powersync/* package (@powersync/web, @powersync/react-native, @powersync/node), the powersync Flutter/Dart package, wa-sqlite, offline-first sync, local-first architecture, sync rules, sync streams, uploadData, fetchCredentials, disconnectAndClear, logout or user switching in a synced app, real-time data replication, Electric Cloud migration, Electric Shapes, an app stuck on Syncing, data not syncing, or wants to add offline-capable sync to a mobile or web app, even if they do not explicitly name PowerSync.
-
pspdfkit-labs Bundle Nutrient Document ProcessingProcess documents with Nutrient DWS Processor. Use for PDF generation and conversion, packet assembly, OCR, Processor JSON-content extraction, staged redaction, watermarking, signing, password protection, optimization, PDF/A, or PDF/UA output. Route high-fidelity markdown or spatial parsing to Nutrient Data Extraction, and accessibility auto-tagging/validation to Nutrient Accessibility instead of treating all three products as one API.
-
raphaelbarbosaqwerty Bundle Maestro E2eE2E UI testing with Maestro for iOS, Android, Flutter, React Native, and Web
-
ryanbbrown Bundle RevealjsCreate polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
-
safaiyeh Bundle App Store ReviewEvaluates code against Apple's App Store Review Guidelines. Use this skill when reviewing iOS, macOS, tvOS, watchOS, or visionOS app code (Swift, Objective-C, React Native, or Expo) to identify potential App Store rejection issues before submission. Triggers on tasks involving app review preparation, compliance checking, or App Store submission readiness.
-
solana-foundation-solana-dev-skill 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", "fuzz my Solana program", "deploy to devnet", "send a v1 transaction", "support larger transactions", "fix maxSupportedTransactionVersion", or "explain Solana concepts" (rent, accounts, PDAs, CPIs). Also for program architecture — state layout, reducing compute units, throughput bottlenecks, instruction naming — and quick on-chain lookups via public RPC + curl (balance, transaction, token account). End-to-end playbook: wallet connection, Anchor/Pinocchio programs, Codama clients, Surfpool/LiteSVM/Mollusk testing, security review, and the v1 transaction format (SIMD-0385, 4096-byte transactions). Prefers @solana/kit plugin clients (createClient + .use(); kit 8 for v1), @solana/kit-plugin-wallet + @solana/react for wallets, web3.js v3 (RC) as the legacy migration target, and Surfpool for local networks.
-
spartan-ng Bundle SpartanManages spartan/ui, the Angular UI library - adding, composing, fixing, debugging, and styling UI with the Brain (headless primitives) and Helm (styled) layers. Provides project context, component APIs, and usage examples. Applies when working with spartan/ui, @spartan-ng/brain, @spartan-ng/helm, the @spartan-ng/cli generators, or any Angular project with a components.json file. Also triggers for "spartan init", "add a spartan component", or "set up spartan/ui".
-
summerkaze Bundle Arkts Syntax AssistantArkTS syntax, migration, and optimization guide for HarmonyOS/OpenHarmony development. Triggers on: .ets files, ArkTS keywords, HarmonyOS/OpenHarmony context, @ohos packages. Help with syntax reference, TypeScript migration, performance optimization, compile errors, state management, component development, and language-specific questions.
-
szilu Bundle UX DesignerUX/UI design principles for building and critiquing interfaces. Use for accessibility audits (WCAG, EAA), microcopy, forms, navigation, onboarding, internationalization and RTL, voice and AI interfaces, and design systems.
-
tanis90 Bundle PDF ConverterPDF converter powered by MinerU — convert PDF to Word, Markdown, HTML, LaTeX, or plain text. Also handles image-to-text OCR, scanned document recognition, and Office formats (DOCX, PPTX, Excel). Supports 80+ languages. Use this skill when the user wants to convert, extract, read, parse, or summarize any PDF or document. Also applies when the user shares a PDF file or link and asks about its content, needs tables or formulas extracted, wants PDF OCR, or says things like 'turn this into a doc' or 'what does this paper say'.
-
thesysdev Bundle OpenuiBuild, integrate, migrate, debug, or document OpenUI, OpenUI Gateway (formerly OpenUI Cloud), and OpenUI Lang apps, including Agent Interface, CLI scaffolds, APIs, component libraries, tools, persistence, theming, and observability.
-
tovimx Skill Maestro Mobile TestingMaestro mobile E2E testing patterns for React Native/Expo apps: YAML test flows, testID selectors, adaptive auth state, optimistic update verification, GraalJS scripting, cross-platform stability, CI/CD integration, Maestro Cloud, and MCP server integration
-
vercel-labs Skill UcpExpert-level implementation assistant for the Universal Commerce Protocol (UCP). Provides comprehensive tooling for adding UCP support to Next.js ecommerce codebases — from initial consultation through full implementation, testing, and validation.
28.7k -
vercel Bundle Flags SdkSet up and use feature flags and A/B tests with the Flags SDK (`flags` npm package) and Vercel Flags. Use when installing or configuring the SDK, adding a new or existing flag, wiring `vercelAdapter` (OIDC or SDK keys), declaring flags with `flag()`, using the `vercel flags` CLI (create, inspect, list, enable, disable, set, update, split, rollout, rules, segments, use-targeting, evaluations, versions, open, archive, unarchive, rm, sdk-keys, override, prepare), setting up providers/adapters (Vercel, Statsig, LaunchDarkly, PostHog, GrowthBook, Global Config, OpenFeature, Split, Flagsmith, Reflag, Optimizely, or custom), precompute, `identify`/`dedupe`, Flags Explorer/Toolbar, Next.js or SvelteKit, or encrypting flag values. Triggers: feature flags, feature gates, A/B testing, experimentation, gradual rollout, traffic split, targeting rules, flag overrides, precompute, Flags Explorer, Vercel Flags, vercel flags CLI, `flags/next`, `flags/sveltekit`, `flags/react`, `@flags-sdk/*`.
-
vercel-streamdown Bundle StreamdownImplement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues.
-
alexanderop Bundle WalkthroughGenerates a self-contained HTML file with an interactive, clickable Mermaid diagram (flowchart or ER diagram) that explains how a codebase feature, flow, architecture, or database schema works. Designed for fast onboarding — each walkthrough is a visual mental model readable in under 2 minutes. TRIGGER this skill when ANY of these match: - The prompt starts with or contains "$walkthrough" (explicit trigger — always activate, even if no topic follows) - The user asks to "walk me through", "walkthrough", "trace the code path", "explain this flow", "show how X works", "how does X work step by step", "explain the architecture", "visualize the data model", "show the data structures", "show the relationships" - The user wants a visual/interactive explanation of code, flows, pipelines, or schemas When triggered, ALWAYS generate a walkthrough HTML file — never respond with just text. If "$walkthrough" is used with no topic, generate an overview walkthrough of the entire project.
-
cloudflare Skill Kumo DesignCloudflare product design guidance. Use when designing, implementing, or reviewing Cloudflare dashboard interfaces, Kumo UI, responsive styling, dialogs, or frontend tests.
2.1k -
cosscom Bundle CossHelps implement coss UI components correctly. Use when building UIs with coss primitives and patterns (buttons, dialogs, selects, forms, menus, tabs, segmented controls, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.
-
cosscom Skill Coss ParticlesIndex of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.
-
delineas Bundle Learning AstroLoad automatically when user asks to learn Astro framework development (e.g., "teach me how to build with Astro", "guide me through Astro", "I want to learn Astro", "quiero aprender Astro", "how do I get started with Astro"). Interactive guided tutorial where Claude acts as a co-pilot, guiding the user through building a real personal blog with Astro step-by-step. Trigger this skill whenever the user expresses interest in learning Astro from scratch, even if they don't say "tutorial" explicitly.
-
devanshudesai Bundle Expo Liquid GlassDesign and implement beautiful, fluid Liquid Glass interfaces in Expo React Native apps. Covers four paths: (1) expo-glass-effect for UIKit-backed glass surfaces, (2) @expo/ui SwiftUI integration for native SwiftUI glass modifiers and advanced transitions, (3) Expo Router unstable native tabs for system Liquid Glass tab bars, and (4) @callstack/liquid-glass as a third-party alternative. Use when tasks mention "liquid glass", "glass effect", "frosted/translucent UI", "iOS 26 design", "native tabs", "expo-ui", "SwiftUI in Expo", or when shipping Apple-style glass with robust fallbacks, accessibility checks, HIG-aware design decisions (Foundations, Patterns, Components, Inputs), and cross-platform degradation.
-
fredm00n Bundle Framer Code Components OverridesCreate Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, working with Framer Motion animations, handling WebGL/shaders in Framer, or debugging Framer-specific issues like hydration errors and font handling.
-
guillaumemeyer Bundle Remove AI MarksRemove multi-vendor AI provenance marks: invisible Unicode (Layer A), statistical text watermarks via rewrite (Layer B, always offer), and C2PA/EXIF/XMP/container metadata on PNG/JPEG/WebP/SVG/PDF/DOCX/ODT/HTML/MD/TEX. Covers Claude, Gemini/SynthID-class, OpenAI provenance, and open-LLM sampling marks. Use when the user asks to strip watermarks, remove C2PA/Content Credentials, clean AI metadata, remove invisible Unicode, anti-detect clean AI output, or runs /remove-ai-marks (aliases: /remove-claude-marks).
-
guillaumemeyer Bundle Clean User Facing TextClean and finalize authorized natural-language text intended for readers by auditing suspicious invisible Unicode and rewriting prose while preserving facts, meaning, and the writer's voice. Use when the user asks to clean, humanize, polish, or finalize articles, manuscripts, reports, documentation, emails, product copy, UI text, Markdown, or HTML prose, or when a project rule or instruction file explicitly requires this workflow. Don't use for code-only tasks or undisclosed authorship evasion; leave code, commands, identifiers, paths, APIs, formulas, citations, required disclosures, and verbatim quotations unchanged.
-
jerrar670 Skill Implement Lenis ScrollInstructions for implementing Lenis smooth scrolling in a Next.js or React application.
-
jesseovo Bundle Last30days CnChinese-platform last-30-days research skill covering Weibo, Xiaohongshu, Bilibili, Zhihu, Douyin, WeChat, Baidu, and Toutiao. Includes Markdown, JSON, compact context, and Guizang-inspired Swiss/IKB HTML report output.
-
kevintsai1202 Bundle Text Watermark Cleaner Zh Tw清理使用者擁有或獲授權文字中的不可見 Unicode、zero-width、tag characters、異形空白與文字型 AI provenance/watermark,並提供統計式改寫的 best-effort 流程。適用於繁體中文、簡體中文、英文、Markdown、HTML 與純文字;當使用者說「去文字浮水印」、「去 Claude 浮水印」、「清理不可見字元」、「清除 AI provenance」或要求檢查文字標記時使用。文字浮水印與檔案 C2PA/EXIF metadata、可見圖片浮水印是不同問題,後兩者不由本 skill 直接處理。
-
kunchenguid-lavish-axi Skill LavishTurn complex or visual agent responses into rich, reviewable HTML artifacts the user can annotate and send feedback on, using the lavish-axi CLI. Use when about to give a plan, comparison, diagram, table, code diff, report, or anything easier to grasp visually than as prose.
-
liveblocks Bundle Liveblocks Best PracticesUse this skill when building, debugging, or answering questions about Liveblocks. Liveblocks gives you the building blocks and infrastructure to enable people and AI to work together inside your app, powering realtime collaboration. Liveblocks features include collaboration, rooms, organizations, workspaces, comments, composer, threads, notifications, multiplayer, conflict resolution, realtime presence, avatar stacks, AI collaborators, AI agents, text editors, Tiptap, BlockNote, Lexical, React Flow, Chat SDK. Common components include AiChat, Thread, InboxNotification, Composer, Toolbar (for Lexical Tiptap), FloatingToolbar, FloatingComposer, FloatingThreads, AnchoredThreads. Common hooks include useThreads, useStorage, useMutation, useOthers, useInboxNotifications, useAiChats. Common issues are related to authentication (ID tokens vs access tokens), permissions, room limits, connection errors, user info.
-
marcolang Bundle Instagram Tweet CarouselCreates high-quality Instagram carousels in an X (Twitter) post visual format, delivered as swipeable HTML previews with export-ready slides (1080×1350px PNG). Handles the full workflow: brand setup, slide copy, X-style visual design (profile header, clean background, X engagement bar), HTML generation, and Playwright-based export. Use this skill whenever the user asks to create, design, or generate an Instagram carousel in tweet-style or X-style format (e.g., "tweet-style carousel", "X-style carousel", "carrossel estilo tweet", "carrossel estilo X"), including requests for carrossel, Instagram slides, or any multi-image Instagram post — even if they don't explicitly mention "carousel" or "skill". Also trigger for requests like "create a post with multiple slides", "make a tweet-style/X-style carousel", or "export slides for Instagram" in this format.
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 ucp, walkthrough, draw-ui. 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.