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.
-
bouclem Skill Dotnet WebapiGuides creation and modification of ASP.NET Core Web API endpoints with correct HTTP semantics, OpenAPI metadata, and error handling. USE FOR: adding new API endpoints (controllers or minimal APIs), wiring up OpenAPI/Swagger, creating .http test files, setting up global error handling middleware. DO NOT USE FOR: general C# coding style, EF Core data access or query optimization (use optimizing-ef-core-queries), frontend/Blazor work, gRPC services, or SignalR hubs.
7 - bouclem Bundle Maui Safe Area
.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy iOS-only APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar", "UseSafeArea migration", "soft input keyboard", "IgnoreSafeArea replacement". DO NOT USE FOR: general layout or grid design (use Grid and StackLayout), app lifecycle handling (use maui-app-lifecycle), theming or styling (use maui-theming), or Shell navigation structure.
7 - bouclem Skill Technology Selection
Guides technology selection and implementation of AI and ML features in .NET 8+ applications using ML.NET, Microsoft.Extensions.AI (MEAI), Microsoft Agent Framework (MAF), GitHub Copilot SDK, ONNX Runtime, and OllamaSharp. Covers the full spectrum from classic ML through modern LLM orchestration to local inference. Use when adding classification, regression, clustering, anomaly detection, recommendation, LLM integration (text generation, summarization, reasoning), RAG pipelines with vector search, agentic workflows with tool calling, Copilot extensions, or custom model inference via ONNX Runtime to a .NET project. DO NOT USE FOR projects targeting .NET Framework (requires .NET 8+), the task is pure data engineering or ETL with no ML/AI component, or the project needs a custom deep learning training loop (use Python with PyTorch/TensorFlow, then export to ONNX for .NET inference).
7 -
aibot88 Bundle Ada WcagAssess ADA Title III / WCAG 2.2 AA compliance — web accessibility legal requirements
3 -
everyone-needs-a-copilot Skill Competitive IntelligenceResearch your competitors and build an interactive battlecard. Outputs an HTML artifact with clickable competitor cards and a comparison matrix. Trigger with "competitive intel", "research competitors", "how do we compare to [competitor]", "battlecard for [competitor]", or "what's new with [competitor]".
-
andyhsutw Skill Frontend PatternsFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
-
amo-tech-ai-rocket-path-ai Bundle MotionBuild React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".
-
demerzels-lab Bundle LoopwindGenerate images and videos from React + Tailwind CSS templates using the loopwind CLI.
10 -
jclfocused 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.
-
hnabyz-bot Bundle Moai Domain FrontendFrontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
- hnabyz-bot Bundle Moai Lang Typescript
TypeScript 5.9+ development specialist covering React 19, Next.js 16 App Router, type-safe APIs with tRPC, Zod validation, and modern TypeScript patterns. Use when developing TypeScript applications, React components, Next.js pages, or type-safe APIs.
-
nilecui Bundle Shadcnshadcn/ui component library patterns with Radix UI primitives and Tailwind CSS. Use when creating tables, forms, dialogs, cards, buttons, or any UI component using shadcn/ui, installing shadcn components, or styling with shadcn patterns.
- demerzels-lab Bundle Radon AI
Use Radon IDE's AI tools for React Native development - query library docs, view logs and network traffic, take.
10 - aibot88 Bundle Media Accessibility
Media Accessibility Skill
3 - aibot88 Bundle React Audit Grep Patterns
Provides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags.
3 - demerzels-lab Bundle React Perf
React and Next.js performance optimization patterns.
10 - demerzels-lab Bundle Next Upgrade
Upgrade Next.js to the latest version following official migration guides and codemods.
10 - demerzels-lab Bundle Baidu Baike Data
The Baidu Baike Component is a knowledge service tool designed to query authoritative encyclopedia explanations.
10 - demerzels-lab Bundle Anti Slop Design
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics.
10 - demerzels-lab Bundle Myvibe Skills
Publish static HTML, ZIP archive, or directory to MyVibe.
10 - demerzels-lab Bundle Cancorteaw App
Local **Expo / React Native** app builder runner for my OpenClaw server.
10 - demerzels-lab Bundle Firebase Auth Setup
Configures Firebase Authentication — providers, security rules, custom claims, and React auth hooks.
10 - demerzels-lab Bundle Baidu Baike Search
The Baidu Baike Component is a knowledge service tool designed to query authoritative encyclopedia explanations.
10 - demerzels-lab Bundle UI UX Dev
Generate and serve live HTML/CSS/JS UI designs from natural language prompts.
10 - demerzels-lab Bundle Mistral Ocr
Convert PDF/images to Markdown/JSON/HTML using Mistral OCR API.
10 - demerzels-lab Bundle Menuvision
Build beautiful HTML photo menus from restaurant URLs, PDFs, or photos using Gemini Vision and AI image generation.
10 - demerzels-lab Bundle Axe Devtools
Accessibility testing and remediation using the axe MCP Server.
10 - demerzels-lab Bundle Devbridge Frontend
Frontend Bridge Agent
10 - demerzels-lab Bundle Copilotkit React
CopilotKit React best practices for agentic applications.
10 - demerzels-lab Bundle Gedcom Explorer
Generate an interactive family tree dashboard from any GEDCOM (.ged) file. Creates a single-file HTML app with 5 tabs (Dashboard, Family Tree, People, Timeline, Daily Alerts), search, person modals, charts, and "On This Day" events. Use when asked to visualize genealogy data, explore family history, build a family tree viewer, or work with GEDCOM files. Triggers on "family tree", "genealogy", "GEDCOM", "ancestors", "family explorer", "family history dashboard".
10 - demerzels-lab Bundle Unipile Linkedin
Interact with LinkedIn via Unipile API - send messages, view profiles, manage connections, create posts, react.
10 - demerzels-lab Bundle Screenshot Skill
Capture screenshots on Windows using mss and Pillow.
10 - demerzels-lab Bundle Next Best Practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling.
10 - demerzels-lab Bundle Markdown To HTML
Convert Markdown text to beautifully styled, self-contained HTML with embedded CSS.
10 - demerzels-lab Bundle Web I18N Nextjs
Internationalization (i18n) guide for Next.js / Node.js web applications using the App Router.
10 - demerzels-lab Bundle Shadcn Theme Default
Enforces the default shadcn/ui Neutral theme (black/white/gray) with OKLCH CSS variables, Tailwind v4 integration.
10
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 dotnet-webapi, maui-safe-area, technology-selection. 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.