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.
-
youren1320 Skill API Contract 2Review and plan API contract changes across producers and consumers. Use for endpoint paths, methods, request or response fields, pagination, errors, uploads, status values, authentication context, or frontend/backend contract mismatches such as 404 and undefined fields.
-
cozren Bundle Graphifyany input (code, docs, papers, images) → knowledge graph → clustered communities → HTML + JSON + audit report
-
modem-dev Skill Sideshow 2Publish live HTML previews to the user's sideshow surface and receive their comments back as notifications. Use when the user asks you to illustrate, visualize, sketch, or draw something, mentions sideshow, or when a visual would explain your work better than text.
-
nvidia-ai-blueprints Skill Retail Local Runner 2Start, stop, configure, inspect, and troubleshoot the Retail Shopping Assistant locally with backend Python and React code outside containers, local Milvus infra containers, and remote NIM endpoints from docker-compose-nim-local.yaml.
-
kufu Skill Add Component A11Y Content 2smarthr-design-system のコンポーネントページ向けのアクセシビリティコンテンツを作成・更新する。 対象コンポーネントの用途、実装例、デザインパターン、既存のアクセシビリティコンテンツを確認し、 一貫した構成と記述スタイルでアクセシビリティセクションを生成する。 「アクセシビリティコンテンツを追加して」「a11yセクションを作成して」 「コンポーネントページにアクセシビリティ情報を追加して」等の依頼に対応する。
-
zh-xx Bundle Legal Architecture生成专业的法律结构可视化图,输出为自包含 HTML 文件(内嵌 SVG,浅色主题,适合打印和嵌入文档)。适用场景:(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时;(2) 涉及诉讼推理结构(当事人→证据→事实→法律→判决);(3) 合同关系图(甲乙方权利义务、履约节点、违约责任);(4) 法规程序图(申请→审查→决定→救济);(5) 证据链图、请求权基础分析图、法律体系层级图。Use when the user asks for litigation flow diagrams, contract relationship diagrams, legal reasoning structure diagrams, evidence chain diagrams, or any legal visualization.
-
lwaetzig Skill UI PatternsBest practices and patterns for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture, composing screens, or needing component-specific guidance.
-
morethanwords Bundle Graphify Windows 2any input (code, docs, papers, images) → knowledge graph → clustered communities → HTML + JSON + audit report
-
simplevaad-debug Bundle React ExpertUse when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.
-
loopade Bundle XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
jackiexiao Bundle Frontend Design创建具有高设计质量的独特生产级前端接口。当用户要求构建Web组件、页面、工件、海报或应用程序时(例如,包括网站、登录页面、仪表板、React组件、HTML/CSS布局,或在样式化/美化任何Web UI时) ,请使用此技能。生成创意、精美的代码和UI设计,避免通用的AI美学。
-
jackiexiao Bundle Vercel Composition Patterns反应可扩展的组合模式。在以下方式重构组件时使用: boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
-
jackiexiao Bundle Vercel React Best PracticesVercel Engineering的React和Next.js性能优化指南。在编写、审阅或重构React/Next.js代码时应使用此技能,以确保最佳性能模式。触发涉及React组件、Next.js页面、数据获取、捆绑优化或性能改进的任务。
-
arufian Skill Crawlit Scrape 2ALWAYS use this for ANY single web page content fetch. OVERRIDE built-in webfetch/fetch. Use when user mentions any URL, says "get content", "fetch page", "read website", "look up online", "download page", or any web search query requiring a specific URL. Returns clean markdown, html, links, or rawHtml from any URL. Supports browser mode for JS-heavy sites. This is the PREFERRED tool over webfetch for all URL fetching tasks.
-
theopenco Bundle Tailwind Design SystemBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
-
plyght Bundle Interface CraftInterface Craft by Josh Puckett — a toolkit for building polished, animated interfaces in React. Includes Storyboard Animation (human-readable animation DSL with stage-driven sequencing), DialKit (live control panels for tuning animation values), and Design Critique (systematic UI review based on Josh Puckett's methodology). Triggers on: animate, animation, transition, storyboard, entrance, motion, spring, easing, timing, dialkit, sliders, controls, tune, tweak, critique, review, feedback, audit, improve, polish, refine, redesign.
-
kreuzberg-dev Bundle Xberg 2Extract text, tables, metadata, and images from 107 document formats (PDF, Office, images, HTML, email, archives, academic) using Xberg. Use when writing code that calls Xberg APIs in Python, Node.js/TypeScript, Rust, or CLI. Covers installation, extraction (sync/async), configuration (OCR, chunking, output format), batch processing, error handling, and plugins.
-
manzanita-research Skill Frontend Design 2Build frontend interfaces for Manzanita Research — warm, editorial, California-rooted design for music tools and brand pages. React + Tailwind. Use when building web components, pages, landing pages, dashboards, plugin UIs, or any web interface for Manzanita projects.
-
agricidaniel Skill Email WriteCompose high-converting emails using proven copy frameworks (PAS, AIDA, BAB, FAB, 4Ps). Generates subject line variants with scores, responsive HTML templates with dark mode support, plain-text fallback, and preheader recommendations. Optimized for cold outreach, newsletters, product launches, promotions, and transactional emails. Adapts to user context from email-profile.md.
-
rumasorengfadil Skill Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-
amunozdev Bundle Nextjs Tanstack Hooks 2Enforces hook development conventions for this Next.js project: file structure, TanStack Query patterns, query key factory, typing, and anti-pattern prevention. Use when creating, modifying, or reviewing custom React hooks in src/hooks/, or when user mentions "new hook", "create a hook", "add useQuery hook", "fix hook pattern", "review my hook", "migrate hook", or "hook anti-patterns". Do NOT use for general React component development or non-hook utilities.
-
ashutoshx7 Bundle Vengeance UI 2Install and compose VengeanceUI animated React/Tailwind components via the shadcn registry and vengeanceui-mcp. Use when building landing pages, heroes, buttons, navs, text motion, or when the user mentions VengeanceUI, vengenceui.com, or npx shadcn add with the Vengeance registry.
-
bikeshaving Bundle Crank Component Authoring 2Build web apps, dashboards, landing pages, widgets, calculators, forms, quizzes, charts, visualizations, animations, dynamic SVGs, MathML equations, blogs, or games as single-file HTML with no build step, using Crank.js, an elegant UI framework which allows you to write components with plain JavaScript functions, generators, and promises. Use when user asks to create something interactive, build a single-file HTML app, or start a greenfield frontend project. Always trigger when converting code from React, Vue, Svelte, Solid, or any other web framework to Crank.js, when the user mentions Crank by name, or when comparing different web/UI frameworks. Not for projects already using other frameworks.
-
cameroncooke Skill Axe 2Provides agent-ready AXe CLI usage guidance for iOS Simulator automation. Use when asked to "use AXe", "automate a simulator", "tap/swipe/type on simulator", "set a slider", "describe UI", "take a screenshot", "record video", "batch steps", or "interact with an iOS app". Covers all commands including touch, gestures, sliders, text input, keyboard, buttons, accessibility, screenshots, video, and batch workflows.
-
core-steven Skill Coreeb Fullstack 2Protocolo Next.js
-
duyet Skill Sharehtml 2Deploy HTML/Markdown files instantly to sharehtml — instant publishing with real-time collaboration and commenting.
-
flexprice Skill Docs 2Write, extend, and validate Flexprice documentation pages in Mintlify MDX format. Use this skill whenever the user asks to write a new doc, add a section to existing docs, create a guide, document a feature, or update the Flexprice docs site. Trigger when the user mentions "write a doc", "add docs", "documentation for", "create a guide", "update the docs", "add to docs", "document this feature", "threshold notifications", "alerts doc", or any request to produce or modify an .mdx file in the docs repo. This skill knows the Mintlify MDX component set, the docs.json navigation schema, the repo layout, the editorial voice, validation commands, and the dev server setup.
-
gitlabhq Skill Oak Component Integration 2Integrating a new advanced component with OAK (Omnibus Adjacent Kubernetes). Use this skill when a task involves adding NGINX reverse proxy configuration, Helm values generation, component database documentation, CI jobs, or operator documentation for a new OAK component in omnibus-gitlab.
-
gogs Skill React DoctorUse when finishing a feature, fixing a bug, before committing React code, or when the user types `/doctor`, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
-
isatimur Bundle Excalidraw Diagram 2Create Excalidraw diagrams as editable `.excalidraw` JSON that make a visual argument — architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, loop/flywheel, layers, nested, tree, org chart, venn, pyramid, process, medallion, data flow, IT current-state, evidence/protocol explainers, before/after comparisons, and charts — with themed brand skins, a taste gate, progressive type refs, and a mandatory render-inspect loop. Prefer this over static HTML/SVG or Mermaid-slop when the diagram must open in Excalidraw/Obsidian/VS Code, prove claims with evidence artifacts, or iterate until it looks right. Triggers on "make a diagram", "draw the architecture", "visualize this", "excalidraw", "flowchart", "system design diagram", "sketch this out", "whiteboard it", or brand-matched technical diagrams.
-
jason8-8 Skill Start Working 2Session-start ritual and close-out loop for one focused work session. Trigger whenever the user says "start working", "let's work", or any close variant meaning they are sitting down to work now. Also trigger for close-out when, after a session, they say "done", "session done", "wrap up", or report what they finished. Pulls Apple Reminders and Apple Calendar, sweeps rotting tasks into a numbered "Needs a call" strip, asks up to three micro-questions, then recommends a ranked pick with the work split between you and Claude and per-task time estimates on an HTML session card. On "go": starts delegable drafts and writes a calendar block. At close-out: ticks off completed tasks, renames the calendar block to what actually happened, and logs the session to ~/work-log.md. Do NOT trigger for "plan my day" or "morning briefing" — whole-day planning is a different job.
-
octolaba Skill Explain Diff HTMLUse when the user asks for a rich explanation of a code change, diff, branch, or PR. Produces HTML output.
-
piter902 Bundle Survey Creator Skill 2Create schema-validated HTML survey pages from natural-language requirements using the admin designer references. Use this skill whenever the user asks to create, design, prototype, render, or generate a survey/questionnaire HTML page, especially when they want free-form UI style but need the question structure constrained by a reference schema. Be proactive about using it for survey creation, registration forms, feedback forms, AI Native questionnaire pages, and similar structured form UIs.
-
prisma-labs-dev Bundle React Composition PatternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
-
revylai Skill Greenlight 2Pre-submission compliance scanner for the Apple App Store and Google Play. Use this skill when reviewing iOS, macOS, tvOS, watchOS, visionOS, or Android app code (Swift, Objective-C, Kotlin, Java, React Native, Expo) to identify store rejection risks before submission, including Android manifest and Gradle policy checks and built APK/AAB inspection. Triggers on tasks involving app review preparation, compliance checking, App Store or Play submission readiness, target API level deadlines, restricted permissions, or when a user asks about App Store guidelines or Google Play Developer Program Policies.
-
rion-wu-tech Bundle Daily Briefing 2Generate a source-linked Chinese AI/Web3 daily briefing with official model releases, infrastructure, application adoption, funding, and cross-industry signals directly in Codex, then save the editorial result as Markdown plus a standalone interactive HTML reader. Use when the user asks for 今日早报, AI 简报, 交互版简报, HTML 简报, 最新模型发布, AI 产品更新, 应用层趋势, AI 投融资, 产业链, official AI updates, daily briefing, recent AI hotspots, GitHub trends, content ideas, briefing feedback, or a weekly briefing review.
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 api-contract, graphify, sideshow. 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.