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.
-
dvcrn Skill Nextjs 2Next.js 15/16 App Router patterns — async APIs, caching semantics, Turbopack, Server Components, Route Handlers, and migration from v14
32 -
dvcrn Bundle Nextjs 3Next.js App Router best practices — Server Components, data fetching, caching, routing, middleware, metadata, error handling, streaming, Server Actions, and performance optimization for Next.js 14-16+.
32 -
dvcrn Skill Desktop Pet 2Give OpenClaw a body — a tiny fluid glass ball desktop pet with voice cloning, 15+ eye expressions, desktop lyrics overlay, and 7 mood colors. Electron-based, pure CSS/JS animation.
32 -
dvcrn Skill Shadcn UI 2Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
32 -
dvcrn Bundle Send Email 2Send emails via SMTP with support for HTML formatting, file attachments, and email templates. Use when users ask to: (1) Send an email, (2) Email someone, (3) Send a notification, (4) Use email templates, or (5) Send files via email.
32 -
dvcrn Bundle Motion 3Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
32 -
dvcrn Skill Scrapling 3Use Scrapling to scrape websites with adaptive parsing, Cloudflare bypass, and MCP support. Handles dynamic content, anti-bot detection, and provides clean HTML/JSON output.
32 -
dvcrn Bundle Color Palette 2Generate color palettes and check WCAG accessibility compliance for UI design.
32 -
dvcrn Bundle Airbnb Search 2Search Airbnb listings with prices, ratings, and direct links. No user API key required (uses Airbnb's public frontend API key). Use when searching for Airbnb stays, vacation rentals, or accommodation pricing.
32 -
dvcrn Bundle Openai Tts 2Text-to-speech conversion using OpenAI's TTS API for generating high-quality, natural-sounding audio. Supports 6 voices (alloy, echo, fable, onyx, nova, shimmer), speed control (0.25x-4.0x), HD quality model, multiple output formats (mp3, opus, aac, flac), and automatic text chunking for long content (4096 char limit per request). Use when: (1) User requests audio/voice output with triggers like "read this to me", "convert to audio", "generate speech", "text to speech", "tts", "narrate", "speak", or when keywords "openai tts", "voice", "podcast" appear. (2) Content needs to be spoken rather than read (multitasking, accessibility). (3) User wants specific voice preferences like "alloy", "echo", "fable", "onyx", "nova", "shimmer" or speed adjustments.
32 -
dvcrn Skill Linkedin 3LinkedIn automation skill — search people and companies, fetch profiles, send messages and InMails, manage connections, create posts, react, comment. Supports Sales Navigator.
32 -
dvcrn Bundle UI UX Pro Max 2UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
32 -
dvcrn Bundle Frontend Design 2Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
32 -
dvcrn Bundle Web Monitor 2Monitor web pages for content changes and get alerts. Track URLs, detect updates, view diffs. Use when asked to watch a website, track changes on a page, monitor for new posts/content, set up page change alerts, or check if a site has been updated. Supports CSS selectors for targeted monitoring.
32 -
dvcrn Bundle Audit Code 2Run a two-pass, multidisciplinary code audit led by a tie-breaker lead, combining security, performance, UX, DX, and edge-case analysis into one prioritized report with concrete fixes. Use when the user asks to audit code, perform a deep review, stress-test a codebase, or produce a risk-ranked remediation plan across backend, frontend, APIs, infra scripts, and product flows.
32 -
dvcrn Bundle Scrapling 4Web scraping using Scrapling — a Python framework with anti-bot bypass (Cloudflare Turnstile, fingerprint spoofing), adaptive element tracking, stealth headless browser, and full CSS/XPath extraction. Use when web_fetch fails (Cloudflare, JS-rendered pages), or when extracting structured data from websites (prices, articles, lists). Supports HTTP, stealth, and full browser modes. Source: github.com/D4Vinci/Scrapling (PyPI: scrapling). Only use on sites you have permission to scrape.
32 -
dvcrn Skill Ddg Search 2DuckDuckGo HTML search scraper CLI with JSON, CSV, OpenSearch, markdown, and compact outputs.
32 -
dvcrn Bundle Send Email 3邮件发送工具。配置 SMTP 发件人后,通过脚本发送纯文本或 HTML 邮件,支持附件、抄送、密送。在需要发送邮件通知、报告、自动化邮件时触发。
32 -
dvcrn Bundle Scrapling 6Web scraping and data extraction using the Python Scrapling library. Use to scrape static HTML pages, JavaScript-rendered pages (Playwright), and anti-bot or Cloudflare-protected sites (stealth browser). Supports CSS selectors, XPath, adaptive DOM relocation so selectors survive site redesigns, session-based scraping with cookie persistence, and outputs to JSON or Markdown. Use when asked to scrape a URL, extract text/links/tables/prices from a webpage, crawl a site, or automate web data collection.
32 -
dvcrn Bundle UI Designer 2Design beautiful interfaces using 16+ design systems including Material You, Fluent Design, Apple HIG, Ant Design, Carbon Design, Shopify Polaris, Minimalism, Glassmorphism, Neo-Brutalism, Neumorphism, Skeuomorphism, Claymorphism, Swiss Design, and Atlassian Design. Expert in Tailwind CSS, color harmonics, component theming, and accessibility (WCAG).
32 -
dvcrn Bundle Browser Use 4AI-powered browser automation using the browser-use library (v0.11+). Drives a real Chromium browser with an LLM agent to navigate, fill forms, click, scrape, and extract structured data from any website. Use when: (1) automating web tasks end-to-end (login, form submission, multi-step flows), (2) scraping dynamic JS-rendered pages, (3) registering for internet services as Alex Chen, (4) solving CAPTCHAs and bypassing browser-checks, (5) extracting structured data from web UIs, (6) any task that requires interacting with a real browser. NOT for: static HTML fetching (use web_fetch), simple API calls, or Cloudflare-protected APIs with a valid token.
32 -
dvcrn Bundle Jina Reader 2Extract clean, readable markdown content from any URL using Jina Reader API. Use when you need to fetch and parse web pages without dealing with HTML, JavaScript rendering, or paywalls. Ideal for research, article summarization, content analysis, and working with search results from tavily-search, web_search, or searxng skills.
32 -
dvcrn Bundle Info Visualize信息可视化技能,将结构化数据渲染为深色主题的高质量图表和长图报告。 支持两类输出:第一类是零依赖 SVG/HTML 交互式横向条形图,直接在浏览器打开; 第二类是基于 Pillow 的 PNG 长图报告,含标题区、KPI 卡片、文字段落、表格、 条形图、卡片组、时间线、页脚等模块,适合监控报告、日报、排行榜等场景。 触发词:生成图表、做可视化、画条形图、生成长图、渲染报告、 排行榜图、PNG报告、信息图、数据卡片、深色主题图表、 make chart、visualize data、render report、bar chart、longform image
32 -
dvcrn Bundle Shadcn UI 3Complete shadcn/ui documentation. Beautifully designed components built with Radix UI and Tailwind CSS. Copy-paste into your apps. Covers installation, components, theming, forms, charts, and framework integrations.
32 -
dvcrn Bundle Component Gen 2Generate React components from plain English descriptions. Use when you need UI components fast.
32 -
dvcrn Bundle Frontend Design 3Create 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.
32 -
dvcrn Bundle Cv Builder 2Create a free digital identity, professional resume and CV — from classic PDF and HTML layouts to 3D worlds and playable games. Permanent public URL with own slug. Free API for AI agents — basic use without API key, full features with Access-ID. Use when the user wants to build, create, or generate a resume, CV, or set up an online professional profile. ATS-ready.
32 -
dvcrn Bundle Resend Email 2Send emails using Resend API. Use when the user needs to send emails without configuring SMTP servers. Supports text and HTML emails, multiple recipients, CC/BCC, and bulk sending. Ideal for notifications, alerts, newsletters, and automated email workflows.
32 -
dvcrn Skill Web Search 9Web search and URL fetching via Perplexity (default: sonar, optional: sonar-pro). Use when searching the web, looking up information, fetching URL content, or configuring web search settings. Covers web_search tool (Perplexity direct API) and web_fetch tool (HTML to markdown extraction).
32 -
dvcrn Bundle Frontend Slides 2Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
32 -
dvcrn Skill Audit Website 2Perform full health check on websites, identifying technical friction points and user experience issues. Use when: (1) Auditing website performance, (2) Checking for broken links, (3) Analyzing page structure, (4) Testing accessibility, (5) Reviewing security headers.
32 -
dvcrn Bundle Better Auth 2Complete Better Auth documentation in markdown format. Use when implementing authentication in TypeScript projects - covers OAuth providers (Google, GitHub, etc.), email/password, passkeys, 2FA, session management, database adapters (Prisma, Drizzle), and framework integrations (Next.js, SvelteKit, etc.).
32 -
dvcrn Skill Agent Browser 5Headless browser automation CLI optimized for AI agents with accessibility tree snapshots and ref-based element selection
32 -
dvcrn Skill Website Monitor 3构建一个自定义网站监控系统,能够每5分钟检测目标网站的HTTP状态码和响应时延, 并在每天早上9点自动生成一份基于监控数据的HTML网页报告。 当用户提到以下场景时,请务必使用此 skill: - 想要监控某个或多个网站是否正常运行 - 想要记录网站的响应时间、延迟、可用性 - 想要定时检查 HTTP 状态码(200、404、500 等) - 想要生成网站健康状况报告或可视化图表 - 提到"网站监控"、"可用性检测"、"uptime"、"健康检查"、"HTTP 探测"等关键词 - 想要每日汇总、每天早上自动发报告等定时报告需求
32 -
dvcrn Bundle Find Skills 4Discovers, searches, and installs skills from multiple AI agent skill marketplaces (400K+ skills) using SkillKit CLI. Supports browsing official partner collections (Anthropic, Vercel, Supabase, Stripe, and more) and community repositories, searching by domain or technology, and installing specific skills from GitHub. Use when user wants to find, browse, or install new agent skills, plugins, extensions, or add-ons; asks 'is there a skill for X' or 'find a skill for X'; wants to explore a skill store or marketplace; needs to extend agent capabilities in areas like React, testing, DevOps, security, or APIs; or says 'browse skills', 'search skill marketplace', 'install a skill', or 'what skills are available'.
32 -
dvcrn Bundle Frontend Slides 3Create stunning, animation-rich HTML presentations from scratch or convert PowerPoint files (.ppt/.pptx) to beautiful web slides. Use when the user wants to build a pitch deck, presentation, slideshow, or slide deck — or convert an existing PPT to a web presentation. Generates zero-dependency single HTML files with keyboard/touch navigation and scroll-triggered animations. Style options include Neon Cyber, Bold Signal, Swiss Modern, Paper & Ink, and 8 more curated presets.
32
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 nextjs, nextjs, desktop-pet. 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.