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 CSS To Tailwind 2Convert CSS files to Tailwind utility classes
32 - dvcrn Bundle Frontend Design 4
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Focuses on creative direction and memorable design choices.
32 - dvcrn Skill Frontend Design 5
Build polished, conversion-aware frontends with strong visual taste, clear hierarchy, and production-grade HTML/CSS/JS. Landing pages, dashboards, components, emails, redesigns — all as working files. Avoids generic AI aesthetics. Every design has a point of view.
32 - dvcrn Skill Frontend Design 6
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
32 - dvcrn Skill Browser Automation 3
Vision-driven browser automation using Midscene. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack. Opens a new browser tab for each target URL via Puppeteer (headless Chrome). Use this skill when the user wants to: - Browse, navigate, or open web pages - Scrape, extract, or collect data from websites - Fill out forms, click buttons, or interact with web elements - Verify, validate, or test frontend UI behavior - Take screenshots of web pages - Automate multi-step web workflows - Run browser automation or check website content Powered by Midscene.js (https://midscenejs.com)
32 - dvcrn Bundle Duckduckgo Search 2
Search the web using DuckDuckGo. No API key required. Supports instant answers and HTML scraping modes. Privacy-focused search alternative.
32 - dvcrn Bundle Report Generator 2
Generate professional data reports (HTML/PDF-ready) with KPI summaries, charts, tables, executive insights, and recommendations from CSV, Excel, or JSON data. Use when asked to create dashboards, monthly/weekly KPI reports, sales/performance summaries, executive briefs, or analytical reports with visualizations.
32 - dvcrn Bundle Artifacts Builder Pro
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
32 - dvcrn Bundle Report Generator 3
Generates a structured report HTML based on a specific template. Invoke when user wants to create a report, slide, or summary card from raw content.
32 - dvcrn Bundle Visual Explainer 2
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
32 - dvcrn Bundle Wechat Publisher 5
Publish articles to WeChat Official Account (微信公众号) draft box via API. Use when the user wants to upload a Markdown article (with optional local images) to their WeChat 公众号 草稿箱. Handles token management, image uploading to WeChat CDN, Markdown-to-HTML conversion, and draft creation. Does NOT generate images — images must be provided as local files.
32 - dvcrn Bundle Invoice Generator 5
Generate a professional invoice from natural language or structured input. USE WHEN: - User asks to create an invoice, bill, or payment request - User provides line items, client details, or says "invoice [client] for [work]" - User wants a receipt or proof of payment document DON'T USE WHEN: - User wants a quote, estimate, or proposal (different document structure and intent) - User wants to track invoices, manage accounts receivable, or build an invoicing system - User wants a contract or agreement (use a contract/legal template instead) - User wants to send an invoice via email (this generates the document; sending is a separate step) - User wants a recurring billing setup or subscription management OUTPUTS: Single self-contained .html file, print-ready. User opens in browser → Print → Save as PDF. Clean, professional layout. INPUTS: Sender info, client info, line items (description + qty + price). Optional: invoice number, dates, tax rate, notes, payment terms.
32 -
nimoqup046-collab Bundle Remotion Best PracticesBest practices for Remotion - Video creation in React
2 -
lord1egypt Skill Skill 18用本地微信公众号抓取器批量识别并拉取某个公众号作者的历史文章，输出 Markdown、HTML 和 articles.json，供后续做作者语料库、风格拆解、仿写模板、事实核验和内容归档。只要用户提到“抓某个公众号的文章”“下载最近 20/50/100 篇公众号文章”“我给你一篇链接，你继续把这个号的文章都扒下来”“先建作者语料库再分析、仿写或写稿”“按时间范围先抓一批再筛”，都要优先触发这个 skill，即使用户只是口语化地说“帮我把这个号最近的文章弄下来”，也不要等用户明确提到 skill、脚本或 CLI。
2 -
mhassan0000 Bundle Frontend Design 2You are a frontend designer-engineer, not a layout generator.
1 -
diegosouzapw Bundle Testing 2Design and implement tests (unit, integration, e2e, accessibility, i18n), improve coverage, and run test suites. Use when the user asks to add tests, write tests, improve coverage, run tests, test accessibility, test translations, or implement test strategy.
54 - diegosouzapw Bundle Canvas 2
Instructions for rendering rich A2UI canvas elements to the chat interface. Auto-injected for web UI sessions.
54 - diegosouzapw Bundle Nuxt UI 2
A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.
54 - diegosouzapw Bundle React 2
Full React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.
54 - diegosouzapw Bundle Tailwind 2
How to work effectively with Tailwind CSS, always use when styling frontend features
54 - diegosouzapw Bundle Add Feature 2
Scaffold complete feature with types, repository, API routes, components, store actions, and tests. Use when adding major new functionality like water tracking, sleep tracking, etc.
54 - diegosouzapw Bundle Create Rule 3
Create rules files for file-scoped AI instructions. Interactive wizard for .claude/rules/ or .cursor/rules/ files with proper frontmatter.
54 - diegosouzapw Bundle UI Design 2
React UI design principles and conventions. Load this skill when building or modifying any user interface. Covers component design, application type detection, Mantine (business apps) and Tailwind (consumer apps), accessibility, responsiveness, and state management patterns.
54 - diegosouzapw Bundle Devops 2
DevOps standards, CI/CD pipelines, and containerization practices. Use this when users need guidance on setting up GitHub Actions workflows, Docker containerization, monitoring with Prometheus and Grafana, or implementing CI/CD pipelines for React and React Native projects.
54 - diegosouzapw Bundle Testing 4
Comprehensive testing across platforms — Web (Playwright, Vitest), Backend (Rust/Go/Python/Node API testing), Desktop (Tauri, Electron), Mobile (React Native, Flutter - coming soon). Unit, integration, E2E, load, security, accessibility testing. Use for test automation, quality assurance, CI/CD integration.
54 - diegosouzapw Bundle Accessibility 2
Ensure accessibility in UI components including semantic HTML, ARIA attributes, keyboard navigation, and WCAG 2.2 AA compliance.
54 - diegosouzapw Bundle Agent Browser 2
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
54 - diegosouzapw Bundle React 3
React development patterns and best practices including hooks, state management, and performance optimization.
54 - diegosouzapw Bundle UI Design 3
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.
54 - diegosouzapw Bundle Frontend UI 2
Build beautiful, responsive UIs with React, Tailwind CSS, and Framer Motion animations.
54 - diegosouzapw Bundle React 4
A framework for building native apps for Android, iOS, and more using React
54 - diegosouzapw Bundle Tool Better Auth
Use when implementing authentication with Better Auth in a TypeScript/Next.js app (session strategy, providers, cookies, CSRF, redirects, middleware, and security best practices).
54 - diegosouzapw Bundle UI Design 4
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.
54 - diegosouzapw Bundle Architecting 2
Designs system architecture, data models, API contracts, and technical specifications. Activates when designing architecture, creating data models, defining API contracts, writing ADRs, planning technical approaches, or answering 'how should we build this'. Does not handle product requirements or user stories (product-manager), implementation code (backend-developer or frontend-developer), or security testing (security).
54 - diegosouzapw Bundle Code Quality 2
A protocol for performing a deep code quality analysis using static analysis tools and formatting. It covers C++ (cppcheck) and React/JavaScript (ESLint).
54 - diegosouzapw Bundle React Expert 2
React ecosystem expert including hooks, state management, component patterns, React 19 features, Shadcn UI, and Radix primitives
54
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 report-generator, artifacts-builder-pro, visual-explainer. 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.