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.
-
tomevault-io Bundle Performance 7Write performance-friendly HTML pages. Use when optimizing page load, adding resources, configuring caching, or improving Core Web Vitals scores. Use when this capability is needed.
- tomevault-io Bundle Use Quail UI In Frontend Project 2
Use this skill when integrating Quail UI into a Vue 3 frontend, migrating an existing screen to Quail UI components, or needing the library's themes, tokens, icons, demo-backed usage patterns, and agent-facing onboarding docs.
- tomevault-io Bundle Nextjs Expert 3
Next.js framework expert specializing in App Router, Server Components, performance optimization, data fetching patterns, and full-stack development. Use this skill for Next.js routing issues, hydration errors, build problems, or deployment challenges. Use when this capability is needed.
- tomevault-io Bundle Code Quality Review 2
Unified code review skill for correctness, design, readability, security, performance, testability, accessibility, and error-handling conventions. Use when reviewing changes, enforcing quality standards, or identifying technical debt. Use when this capability is needed.
- tomevault-io Bundle Backend Patterns 2
Node.js、Express、Next.js API ルートのためのバックエンドアーキテクチャパターン、API 設計、データベース最適化、サーバーサイドのベストプラクティス Use when this capability is needed.
- tomevault-io Bundle Coding Standards 9
TypeScript、JavaScript、React、Node.js 開発のための普遍的なコーディング標準、ベストプラクティス、パターン Use when this capability is needed.
- tomevault-io Bundle Design Review 2
7-phase frontend design review with accessibility (WCAG 2.1 AA), responsive testing, visual polish. Use for PR reviews, UI audits, or encountering contrast issues, broken layouts, accessibility violations, inconsistent spacing, missing focus states. Use when this capability is needed.
- tomevault-io Bundle Performance 8
Optimize application performance - bundle size, API response times, database queries, React rendering, and serverless function performance. Use when investigating slow pages, profiling, load testing, or before production deployments. Use when this capability is needed.
- tomevault-io Bundle Add Model 5
Add a new model to the SGLang Cookbook, including documentation, sidebar, config generator component, and model YAML configuration. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 67
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 8
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. Use when this capability is needed.
- tomevault-io Bundle Frontend Development 2
Guide for developing features in the Next.js 16 frontend functionality. Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 12
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 21
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API. Use when this capability is needed.
- tomevault-io Bundle Panel Dashboards 2
Master interactive dashboard and application development with Panel and Param. Use this skill when building custom web applications with Python, creating reactive component-based UIs, handling file uploads and real-time data streaming, implementing multi-page applications, or developing enterprise dashboards with templates and theming. Use when this capability is needed.
- tomevault-io Bundle Markitdown 4
Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more. Use when this capability is needed.
- tomevault-io Bundle Scaffolding 2
Scaffold Claude Code project infrastructure — hooks, agents, settings.json, and CLAUDE.md — for any Design Machines project type. Use when setting up a new project, configuring Claude Code hooks, creating a CLAUDE.md routing document, adding commit-push reminders, setting up Docker safety gates, configuring session-start workflows, or standardizing .claude/ directory structure. Covers go-templ-datastar, go-library, css-framework, and craft-cms project types. Use when this capability is needed.
- tomevault-io Bundle Frontend Slides 2
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. Use when this capability is needed.
- tomevault-io Bundle React Expert 8
Expert React 18+ development standards, performance optimization, and scalable state management. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 80
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 81
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle React Router V7 2
React Router v7 best practices for data-driven routing. Use when implementing routes, loaders, actions, Form components, fetchers, navigation guards, protected routes, or URL search params. Triggers on createBrowserRouter, RouterProvider, useLoaderData, useActionData, useFetcher, NavLink, Outlet. Use when this capability is needed.
- tomevault-io Bundle Next Cache Components 8
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Next Best Practices 18
Expert guidance for Next.js 16 development with App Router, TypeScript, and modern best practices. Use for Next.js-specific architecture decisions, performance optimization, and framework patterns. Use when this capability is needed.
- tomevault-io Bundle Responsive Design 4
Mobile-first responsive web design with CSS Grid/Flexbox, breakpoints (320px-1440px+), and cross-device optimization Use when this capability is needed.
- tomevault-io Bundle React Expert 9
Use when building React 18+ applications requiring component architecture, hooks patterns, or state management. Invoke for Server Components, performance optimization, Suspense boundaries, React 19 features.
- tomevault-io Bundle Next Cache Components 9
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag Use when this capability is needed.
- tomevault-io Bundle Webapp Testing 24
Toolkit for testing web applications using Playwright. Use when verifying frontend functionality, debugging UI behavior, capturing screenshots, or viewing browser logs. Use when this capability is needed.
- tomevault-io Bundle Angular Testing 3
Write unit and integration tests for Angular v21+ applications using Vitest or Jasmine with TestBed, component harnesses, and modern testing patterns. Use for testing components with signals, OnPush change detection, services with inject(), and HTTP interactions. Triggers on test creation, testing signal-based components, mocking dependencies, or setting up test infrastructure. Use when this capability is needed.
- tomevault-io Bundle Tailwind Patterns 2
Tailwind 4.0 patterns for styling React components. Applies to class usage, color selection, inheritance optimization, responsive design, or reducing redundant utilities and wrapper divs. Use when this capability is needed.
- tomevault-io Bundle App Router 2
Work with Next.js App Router in src/app/. Use when creating or modifying pages, layouts, loading states, error boundaries, or any route components in the App Router structure. Use when this capability is needed.
- tomevault-io Bundle Providers 3
Create, configure, and centralize React providers in src/providers/. Use when creating new providers, setting up context providers, or organizing provider structure. Use when this capability is needed.
- tomevault-io Bundle Vue Best Practices 22
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API. Use when this capability is needed.
- tomevault-io Bundle Frontend Design 70
Skill and guidelines to create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Use when this capability is needed.
- tomevault-io Bundle UX Designer 4
Design user experiences and interfaces. Use when creating user journeys, wireframes, prototypes, or improving usability. Covers user flows, information architecture, interaction design, and accessibility. Use when this capability is needed.
- tomevault-io Bundle Web Artifacts Builder 10
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. Use when this capability is needed.
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 performance, use-quail-ui-in-frontend-project, nextjs-expert. 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.