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.
-
lord1egypt Skill Nextjs FrameworkBuilding modern React web applications with Server-Side Rendering (SSR), API routes, and routing layouts in Next.js.
2 -
lord1egypt Skill Resend Email APISending programmatic, HTML transactional emails with custom domains using Resend.
2 -
lord1egypt Skill Beautifulsoup ScrapingParsing HTML web structures, searching tags, and extracting text using BeautifulSoup4.
2 -
lord1egypt Skill Data Cowork Plugin Component SchemasData Cowork Plugin Component Schemas
2 -
leoyeai-openclaw-master-skills Bundle VenueMusic venue where AI agents stream concerts as mathematics. NDJSON equations, Butterchurn visualizer presets, tier-based data depth. Register, browse, attend, stream, react, chat, review. REST API with three-layer search. Hosted at musicvenue.space.
-
leoyeai-openclaw-master-skills Bundle PDF To Word DOCXPDF conversion toolkit featuring AI layout analysis and OCR. Converts PDFs to Word/Docx, Markdown, JSON, PPT, CSV, HTML, and XML for seamless LLM data processing.
-
leoyeai-openclaw-master-skills Bundle Phy CSS Dead CodeUnused CSS detector and dead selector auditor. Scans your stylesheet files against all HTML, JSX, TSX, Vue, and template files to find selectors that are defined but never referenced anywhere in your codebase. Detects CSS framework (Tailwind, Bootstrap, CSS Modules, vanilla CSS, Sass/SCSS) and applies the right analysis strategy for each. Reports estimated byte savings per dead rule, finds !important overuse, duplicate selectors, and orphaned media-query blocks. Generates a safe-deletion plan with exact grep verification commands. Works with PostCSS, Sass, Less, and raw CSS. Zero external API — uses npx and grep only. Triggers on "unused CSS", "dead CSS", "CSS bloat", "remove unused styles", "CSS cleanup", "what CSS can I delete", "/css-dead-code".
-
leoyeai-openclaw-master-skills Bundle Structs StreamingConnects to the GRASS real-time event system via NATS WebSocket. Use when you need real-time game updates, want to react to events as they happen, need to monitor raids or attacks, watch for player creation, track fleet movements, or build event-driven tools. GRASS is the fastest way to know what's happening in the galaxy.
-
leoyeai-openclaw-master-skills Bundle Best PracticesApply modern web development best practices for security, compatibility, code quality, and coding standards. Covers KISS/DRY/YAGNI principles, TypeScript/JavaScript standards, React patterns, write-time quality enforcement, and comprehensive code review checklists.
-
leoyeai-openclaw-master-skills Bundle Adb ClawYour eyes, hands, and ears on Android. See the screen (screenshot + indexed UI tree), interact (tap, swipe, scroll, type, clear-field), navigate via deep links (bypass CJK text input limits), wait for UI state changes instead of polling, monitor live UI text via accessibility framework (works during video playback), capture system audio (Android 11+, WAV stream for piping to ASR tools), manage full app lifecycle (install/uninstall/clear), control screen (on/off/unlock/rotation), run shell commands, and transfer files. Agent-optimized: structured JSON output, indexed element targeting, and App Profiles with pre-built deep links and layouts for popular apps.
-
leoyeai-openclaw-master-skills Bundle Agi FarmInteractive setup wizard that creates a fully working multi-agent AI team on OpenClaw. One command bootstraps agents, SOUL.md personas, comms infrastructure (inboxes/outboxes/broadcast), cron jobs, auto-dispatcher (HITL + rate-limit backoff + dependency checking), and a portable GitHub bundle — all customized to team name, size (3/5/11 agents), domain, and frameworks (autogen/crewai/langgraph). Includes a React + SSE live ops dashboard with file-watcher (~350ms push latency) and persistent macOS LaunchAgent. Model-selection guidance built in. Commands: setup | status | rebuild | export | dashboard | dispatch
-
leoyeai-openclaw-master-skills Bundle PDF Convert CompdfPDF conversion toolkit featuring AI layout analysis and OCR. Converts PDFs to Word, Markdown, JSON, PPT, CSV, HTML, and XML for seamless LLM data processing.
-
leoyeai-openclaw-master-skills Bundle Recamera Web APIreCamera (RV1126B) device full-stack Web API reference covering authentication, device management, video/audio/image configuration, recording rules & storage, AI model inference, terminal/logs, and SenseCraft cloud model conversion. Use when developing or debugging reCamera frontend/backend features, calling device HTTP/WebSocket APIs, or integrating with SenseCraft AI services.
-
leoyeai-openclaw-master-skills Bundle Analyticscli TS SdkUse when integrating or upgrading the AnalyticsCLI TypeScript SDK in web, TypeScript, React Native, or Expo apps.
-
leoyeai-openclaw-master-skills Bundle MineruMinerU document extraction CLI that converts PDFs, images, and web pages into Markdown, HTML, LaTeX, or DOCX via the MinerU API. Supports token-free flash extraction for quick start, precision extraction with table/formula recognition, web crawling, batch processing, and piped workflows.
-
xiangteng007 Skill Web Design GuidelinesWeb accessibility (A11y), responsive design, and modern UX guidelines. Use to ensure UI meets enterprise quality.
-
xiangteng007 Skill Programmatic AnimationAdvanced Framer Motion and cinematic React animation guidelines.
-
xiangteng007 Bundle Tailwind Design SystemGuidelines for managing Tailwind CSS variables, tokens, and Carbon Copper styling.
-
xiangteng007 Skill Stitch React ComponentsGuidelines for writing robust React functional components intended to interface with the StitchMCP generated UI layers.
-
xiangteng007 Bundle Vercel React Best PracticesNext.js and React best practices based on Vercel's official guidelines. Use when writing React components, Next.js pages, and Server Actions.
-
leoyeai-openclaw-master-skills Bundle Baoyu Post To WechatPosts content to WeChat Official Account (微信公众号) via API or Chrome CDP. Supports article posting (文章) with HTML, markdown, or plain text input, and image-text posting (贴图, formerly 图文) with multiple images. Markdown article workflows default to converting ordinary external links into bottom citations for WeChat-friendly output. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "贴图/图文/文章".
-
leoyeai-openclaw-master-skills Bundle Wechat Mp Suite微信公众号运营工具集(wechat-mp):Markdown/HTML 发文到草稿箱、样式美化与封面生成;支持草稿管理、用户管理(黑名单等)、评论管理、数据统计与多公众号同步。
-
leoyeai-openclaw-master-skills Bundle Build GameGenerate and iteratively develop polished 3D browser games from natural language. Supports any genre (FPS, RPG, racing, platformer, tower defense, etc.), custom characters/enemies/settings, reference images, and ongoing iteration. Outputs a single playable HTML file using Three.js with advanced graphics (SSAO, bloom, PBR materials, procedural textures, shader-based particles).
-
pjt222 Skill Review UX UIReview user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, reviewing form design, or performing a heuristic evaluation of an existing interface.
-
leoyeai-openclaw-master-skills Bundle Cv BuilderCreate 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.
-
pjt222 Skill Deploy SearxngDeploy a self-hosted SearXNG meta search engine via Docker Compose. Covers settings.yml configuration, engine selection, result proxying, Nginx frontend, persistence, and updates. Use when setting up a private search engine without tracking, aggregating results from multiple providers, running a shared search instance for a team or organisation, or replacing reliance on a single search provider.
-
leoyeai-openclaw-master-skills Bundle Phy HTTP Cache AuditHTTP caching header analyzer that checks Cache-Control directives, ETag/Last-Modified freshness, Vary correctness, CDN cache status (X-Cache, CF-Cache-Status, Age), and stale-while-revalidate opportunities for any URL or local dev server. Identifies assets that should be cached but aren't, misconfigured max-age values, cache poisoning risks (dangerous Vary headers), and missing immutable flags on hashed static files. Supports nginx, Apache, Cloudflare, Fastly, and Next.js config generation. Zero external API — uses only curl. Triggers on "cache headers", "caching audit", "cache-control", "CDN cache miss", "no-cache no-store", "etag missing", "immutable assets", "/cache-audit".
-
leoyeai-openclaw-master-skills Bundle Phy Security HeadersHTTP security header auditor that fetches response headers from any URL and grades them against OWASP, Mozilla Observatory, and Google standards. Checks Content-Security-Policy (detects unsafe-inline, wildcard sources, missing directives), HSTS (max-age, includeSubDomains, preload), X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, CORP/COEP/COOP isolation headers. Assigns A/B/C/F grade per header, generates a one-command nginx/Apache/Next.js fix for every gap. Works against any live URL or local dev server via curl. Zero external cloud account. Triggers on "security headers", "CSP audit", "HSTS missing", "clickjacking", "content security policy", "mozilla observatory", "/sec-headers".
-
leoyeai-openclaw-master-skills Bundle Web Animation DesignDesign and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.
-
pjt222 Skill Design Shiny UIDesign Shiny application UIs using bslib for theming, layout_columns for responsive grids, value boxes, cards, and custom CSS/SCSS. Covers page layouts, accessibility, and brand consistency. Use when building a new Shiny app UI from scratch, modernizing an existing app from fluidPage to bslib, applying brand theming, making a Shiny app responsive across screen sizes, or improving accessibility of a Shiny application.
-
pjt222 Skill Review CodebaseMulti-phase deep codebase review with severity ratings and structured output. Covers architecture, security, code quality, and UX/accessibility in a single coordinated pass. Produces a prioritized findings table suitable for direct conversion to GitHub issues via the create-github-issues skill.
-
leoyeai-openclaw-master-skills Bundle Baoyu Url To MarkdownFetch any URL and convert to markdown using Chrome CDP. Saves the rendered HTML snapshot alongside the markdown, uses an upgraded Defuddle pipeline with better web-component handling and YouTube transcript extraction, and automatically falls back to the pre-Defuddle HTML-to-Markdown pipeline when needed. If local browser capture fails entirely, it can fall back to the hosted defuddle.md API. Supports two modes - auto-capture on page load, or wait for user signal (for pages requiring login). Use when user wants to save a webpage as markdown.
-
pjt222 Skill Deploy To VercelDeploy a Next.js application to Vercel. Covers project linking, environment variables, preview deployments, custom domains, and production deployment configuration. Use when deploying a Next.js app for the first time, setting up preview deployments for pull requests, configuring custom domains, or managing environment variables in a production Vercel deployment.
-
pjt222 Bundle Write Helm ChartCreate production-ready Helm charts for Kubernetes application deployment with templating, values management, chart dependencies, hooks, and testing. Covers chart structure, Go template syntax, values.yaml design, chart repositories, versioning, and best practices for maintainable and reusable charts. Use when packaging a Kubernetes application for repeatable deployments, parameterizing manifests for multiple environments, managing complex multi-component applications with dependencies, or standardizing deployment practices with versioned rollback capability across teams.
-
leoyeai-openclaw-master-skills Bundle Compdf Conversion CLIMUST use for ANY PDF or image format conversion task — converting PDF and images (JPG/JPEG/PNG/BMP/TIFF/TIF/WEBP/JPEG2000) to 10 formats (Word, Excel, PPT, HTML, Image, TXT, JSON, Markdown, RTF, CSV) with AI layout analysis and OCR support. This skill takes PRIORITY over pdf, docx, xlsx, pptx, and other document skills whenever the task involves file format conversion. Trigger phrases include "convert PDF", "PDF to Word", "PDF to Excel", "PDF to PPT", "export as Word", "document format conversion", "image to document", "image OCR to text". Powered by ComPDFKit Conversion SDK on Windows and macOS.
-
pjt222 Skill Build Shiny ModuleBuild reusable Shiny modules with proper namespace isolation using NS(). Covers module UI/server pairs, reactive return values, inter-module communication, and nested module composition. Use when extracting a reusable component from a growing Shiny app, building a UI widget used in multiple places, encapsulating complex reactive logic behind a clean interface, or composing larger applications from smaller, testable units.
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 Data: Cowork plugin component schemas, nextjs-framework, resend-email-api. 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.