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.
-
inbharatai Skill Accessibility CheckerAudit and fix accessibility issues — WCAG 2.2 compliance, ARIA labels, color contrast, keyboard navigation, and screen-reader compatibility.
-
inbharatai Skill Web Artifacts BuilderBuild interactive HTML/CSS/JS artifacts — widgets, calculators, games, and mini-apps that run directly in Claude.
-
m2ai-portfolio Skill Gh ReviewReview 1-3 GitHub repos against the current project and generate an HTML report with plain-speak summaries, relevance analysis, and integration examples. Use this skill whenever the user shares a GitHub repo link and wants to understand how it fits their project, asks 'what is this repo?', 'how would I use this?', 'is this relevant to my project?', or says 'review this repo'. Also trigger when the user pastes GitHub URLs and asks for a comparison or breakdown.
-
m2ai-portfolio Skill Prompt RewriterRewrite system prompts to strip compensating complexity and produce clean outcome-based prompts. Takes audit output (from compensating-complexity-auditor or manual analysis) and produces a four-component prompt — outcome spec, constraints, tools, coordination pattern. Use when modernizing prompts after a model upgrade, simplifying over-engineered system prompts, or converting procedural instructions to outcome-based ones. Trigger on "rewrite prompt", "simplify prompt", "strip scaffolding", "outcome-based prompt", "modernize prompt".
-
m2ai-portfolio Bundle Silver PlatterInterview a business owner about their day-to-day tools, build a tailored data map, render a Pantry → Prep → Plate HTML visualization with recipes, a 30-day build plan, and an interaction-layer Sankey, plus generate plain-English Claude Code recommendations (skills, subagents, hooks, rules, CLIs to install). Audits existing Claude Code setups in the cwd before asking questions, so users who've started building don't get re-asked. Output: a self-contained data_map.html, an OPPORTUNITIES.md, and a copy-paste prompt for the @claude-code-guide agent. Free, open-source, ships in the Business OS Demos Kit.
-
evolution-foundation Skill Pulse DailyDaily community pulse report — reads Discord AND WhatsApp messages from the last 24h, analyzes activity, sentiment, support questions, and top topics. Generates an HTML report using the Evolution brand. Use when user says 'community pulse', 'daily community report', or any reference to daily community health check.
-
evolution-foundation Skill Int TelegramSend, reply, react, and edit Telegram messages via MCP. Use whenever the user wants to send a message on Telegram, reply to someone on Telegram, react to a Telegram message, edit a sent message, or download an attachment from Telegram. Also trigger when messages arrive from Telegram (channel tags with chat_id), when the user says 'manda no telegram', 'responde no telegram', 'envia mensagem', 'reage com', or references any Telegram chat or group.
-
evolution-foundation Skill Pulse WeeklyWeekly community analysis report — aggregates Discord AND WhatsApp activity, engagement metrics, sentiment trends, top contributors, product insights, and docs gaps. Generates an HTML report using the Evolution brand. Use when user says 'weekly community', 'community analysis', 'weekly community report', or any reference to weekly community analysis.
-
evolution-foundation Skill Prod DashboardDaily consolidation dashboard — reads outputs from all routines (morning, linear, github, community, strategy, meetings, metrics) and generates a unified HTML dashboard. Trigger when user says 'dashboard', 'generate dashboard', 'overview', 'consolidation', or 'general panel'.
-
evolution-foundation Skill Fin Daily PulseDaily financial pulse — queries Stripe (MRR, charges, churn, failures), Omie (accounts payable/receivable, invoices) and Evo Academy (courses, subscriptions, Summit tickets) to generate an HTML snapshot of the company's financial health. Trigger when user says 'financial pulse', 'financial snapshot', or 'financial metrics'.
-
evolution-foundation Bundle Int Evolution GoManage Evolution Go instances and send WhatsApp messages via the Evolution Go REST API. Use when you need to list/create/connect instances, send messages (text, media, location, contact, link, sticker, poll), react/edit/delete messages, check connection status, or get QR codes. Calls the Evolution Go server directly with no third-party proxy.
-
evolution-foundation Skill Knowledge IngestUpload a file (PDF, DOCX, PPTX, XLSX, HTML, EPUB, image) or URL to the Knowledge base. Triggers Marker parsing, chunking, embedding, and async classification. Use when the user says 'index this PDF', 'add this URL to the knowledge base', 'upload these files to Academy', or pastes a file path/URL with ingestion intent.
-
evolution-foundation Skill Data Build DashboardConstrói um dashboard HTML interativo com gráficos, filtros e tabelas no tema Evolution (fundo escuro, acento
-
euwebertdefreitas Bundle Especialista Em Emails HTMLExpert in HTML Emails
-
euwebertdefreitas Bundle Especialista Em Tailwind CSSExpert in Tailwind CSS
-
euwebertdefreitas Bundle Especialista Em Desenvolvimento FrontendExpert in Frontend Development
-
tractorjuice Bundle Plantuml SyntaxPlantUML syntax reference, C4-PlantUML first, for writing or fixing a diagram in an artefact: sequence, class, activity, state, ER, component, deployment and use-case diagrams, skinparams and themes, C4 layout conflicts and rendering errors. Not needed for Mermaid (mermaid-syntax), or when the request is for a governed diagram artefact with document control, which $arckit-diagram produces.
-
evolution-foundation Skill Social Youtube ReportYouTube analytics report — queries channel stats, recent videos, engagement rates, top content. Generates HTML report. Use when user says 'youtube report', 'youtube metrics', 'youtube analytics', or any reference to YouTube performance analysis. Supports daily, weekly, and monthly periods.
-
evolution-foundation Skill Social Analytics ReportUnified social media analytics report — consolidates YouTube, Instagram, and LinkedIn data into one cross-platform HTML dashboard. Compares engagement, followers, top content across all platforms. Use when user says 'social analytics', 'social media report', 'social report', 'social metrics', 'cross-platform', or any reference to unified social media performance.
-
evolution-foundation Skill Social Instagram ReportInstagram analytics report — queries profile stats, recent posts, engagement rates, insights for all connected accounts. Generates HTML report. Use when user says 'instagram report', 'instagram metrics', or any reference to Instagram performance analysis.
-
steph-dove Skill Httpx QAUse when the user wants the current change QA'd and PR-ready evidence captured. Classifies the diff and runs the verification that actually fits it — screenshots for UI/frontend changes, endpoint or e2e runs for backend, command output for a CLI, tests for a library — then saves artifacts and writes a QA summary. Right-sizes QA to the change; it does not write features or fix bugs.
-
steph-dove Skill Fastapi QAUse when the user wants the current change QA'd and PR-ready evidence captured. Classifies the diff and runs the verification that actually fits it — screenshots for UI/frontend changes, endpoint or e2e runs for backend, command output for a CLI, tests for a library — then saves artifacts and writes a QA summary. Right-sizes QA to the change; it does not write features or fix bugs.
-
cleanexpo Skill DeploymentDeployment constraints and runtime behaviour for Railway (backend) and Vercel (frontend) — proxy config, redirects, Telegram, SSE limits, and model routing.
-
cleanexpo Skill Design SystemDesign stack orchestrator for Pi-CEO. Routes UI work to the correct specialist skill (design-intelligence, ui-component-builder, impeccable, visual-qa). Start here for any design task.
-
cleanexpo Skill Chrome BrowserUse when the user asks to browse, click, navigate, fill a form, screenshot, or read content from a live website via the claude-in-chrome MCP tools — or whenever a task needs to drive an actual Chrome tab rather than fetch static HTML.
Audited -
cleanexpo Skill Design ApproveLabelling + cache step. Once the user approves a variant in design-iterate, this skill writes the canonical brand spec files (`{slug}.design.md`, `{slug}.motion.md`, optional `{slug}.scene.md`), generates the standalone `{slug}.html` preview file, snapshots the iteration to the approved-variant cache, and triggers `remotion-brand-codify` to write the BrandConfig.ts runtime fields. Treats approval as a commit point.
-
cleanexpo Skill Analyzing Customer PatternsOutcome feedback loop analyser. Reads shipped feature records + post-ship signals, detects patterns in what worked vs what didn't, and writes outcome lessons back into the build pipeline. Feeds the BVI "features delivered" component.
-
lovstudio Bundle Lov Wxmp CLI微探命令行:检索微信公众号文章缓存,读取正文并导出 Markdown、HTML、JSON、CSV;按授权搜索和采集公众号。
-
lovstudio Bundle Lov Init Auth为 React 应用接入 Supabase 登录、账户恢复及桌面浏览器 OAuth。支持明确输入与结果回读。Use to add Supabase authentication to a React application.
-
lovstudio Bundle Lov Repo2docsTurn any folder of source material — a code repository, a pile of articles, a mixed knowledge dump with images — into a professional, polished Fumadocs (Next.js) documentation website, then deploy it to https://{product-id}.example.com/docs. Works by reading the folder one unit at a time and incrementally growing and refining the docs structure and detail, so it scales to large folders and handles images as first-class content (copied into the site, embedded inline, auto-galleried). Trigger when the user wants to "generate docs", "build a docs site", "make a documentation website", "fumadocs", points at a code repo OR a content/article folder, or says "为项目生成文档", "把这个文件夹做成文档站", "做文档站", "生成文档网站", "整理成知识库网站".
-
lovstudio Bundle Lov Better CSS清理冗余 CSS 并在现有 Tailwind 项目中重构样式。支持明确输入与结果回读。Use to refactor CSS and Tailwind styles.
-
morning-start Skill SvelteUse when the user asks about Svelte 5, Runes, component development, template syntax, control flow, state management, styling, lifecycle, testing, migration, or SvelteKit app setup.
-
morning-start Skill Svelte CoreSvelte 核心基础技能,掌握组件编写、文件结构、项目启动和 Rune 概念,为深入学习 Svelte 打下坚实基础
-
morning-start Skill Svelte RunesSvelte 5 Runes 系统技能,掌握 $state、$derived、$effect、$props 等响应式原语,实现组件状态管理和副作用处理
-
morning-start Skill Svelte LegacySvelte Legacy (Svelte 4 语法)
-
morning-start Skill Svelte StylingSvelte 样式技能,掌握作用域样式、全局样式、CSS 自定义属性和嵌套样式,实现组件样式隔离与复用
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 lov-better-css, svelte-runes, social-youtube-report. 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.