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.

fusengine Bundle

Shadcn Components 3

Component patterns for shadcn/ui with both Radix UI and Base UI primitives. Covers API differences, mapping between primitives, and correct usage patterns.

Sep 22
fusengine Bundle

Tailwindcss Borders 3

Border utilities Tailwind CSS v4.1. Border (border-width, border-color, border-style, border-radius, rounded-*), Outline (outline-*, outline-offset), Ring (ring-*, ring-offset), Divide (divide-*).

Sep 22
fusengine Bundle

Tailwindcss Effects 3

Effects utilities Tailwind CSS v4.1. Shadows (shadow-*, shadow-color, inset-shadow-* NEW), Opacity (opacity-*), Filters (blur, brightness, contrast, grayscale, sepia), Backdrop filters (backdrop-blur-*, backdrop-brightness-*), Masks (mask-* NEW).

Sep 22
fusengine Bundle

Tailwindcss Spacing 3

Spacing utilities Tailwind CSS v4.1. Margin (m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*, -m-* negative, m-auto), Padding (p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*), Space between (space-x-*, space-y-*).

Sep 22
fusengine Skill

Tailwindcss Utilities 3

Complete reference for Tailwind CSS utility classes

Sep 22
fusengine Bundle

Nextjs Tanstack Form 3

TanStack Form v1 for Next.js 16 with Server Actions, Zod validation, and shadcn/ui integration. Use when building forms, validation, multi-step wizards, or dynamic field arrays.

Sep 22
fusengine Skill

Tailwindcss V4 3

Tailwind CSS v4.1 core features, @theme, directives, migration guide

Sep 22
fusengine Bundle

Astro Security 3

Use when configuring Content Security Policy (CSP) in Astro 6, setting security headers, managing script/style hashes, using nonces, or implementing experimentalStaticHeaders for adapter deployments.

Sep 22
fusengine Bundle

Laravel Vite 3

Complete Vite bundling for Laravel - assets, HMR, SSR, frameworks, optimization. Use when configuring frontend build pipeline.

Sep 22
fusengine Bundle

React Tanstack Router 3

TanStack Router - 100% type-safe routing, file-based routes, loaders, search params. Use when implementing routing in React apps (NOT Next.js).

Sep 22
fusengine Bundle

Tailwindcss Transforms 3

Transform & Animation utilities Tailwind CSS v4.1. Transform (scale-*, rotate-*, translate-*, skew-*, transform-origin), Transition (transition-*, duration-*, ease-*, delay-*), Animation (animate-*, @keyframes).

Sep 22
fusengine Bundle

Nextjs Tanstack Query 3

TanStack Query v5 integration with Next.js 16. Server-side prefetching, hydration, useQuery, useMutation, cache management.

Sep 22
fusengine Bundle

Nextjs Shadcn 3

shadcn/ui for Next.js App Router with TanStack Form. Use when building UI components, forms, dialogs, tables, toasts, or accessible components.

Sep 22
fusengine Bundle

React Effects Audit 3

Audit React components for unnecessary useEffect patterns. Detects 9 anti-patterns from "You Might Not Need an Effect" and proposes fixes with severity levels.

Sep 22
fusengine Bundle

Astro Starlight 3

Astro Starlight documentation theme — setup, sidebar config, Pagefind search, dark/light mode, plugins (DocSearch, blog, openapi, typedoc, versions), multi-language, Content Layer API, llms.txt, customization. Use for building documentation sites.

Sep 22
fusengine Bundle

Astro I18N 3

Use when implementing internationalization in Astro, configuring i18n routing, setting up locale strategies, using getRelativeLocaleUrl/getAbsoluteLocaleUrl, handling Astro.currentLocale, or adding hreflang tags with sitemap.

Sep 22
fusengine Bundle

Nextjs 16 3

Expert Next.js 16 with Turbopack, App Router, Cache Components, proxy.ts, React 19. Use when building Next.js apps, routing, caching, server components, or migrating from v15.

Sep 22
fusengine Bundle

Nextjs Zustand 3

Zustand v5 state management for Next.js 16 App Router. Use when implementing global state, stores, persist, hydration, or client-side state in Client Components.

Sep 22
fusengine Bundle

Shadcn Theming 3

Design tokens and theming for shadcn/ui. Covers CSS variables, OKLCH colors, dark/light mode, and theme configuration for both Radix and Base UI primitives.

Sep 22
fusengine Bundle

Tailwindcss Core 3

Configuration and directives Tailwind CSS v4.1. @theme, @import, @source, @utility, @variant, @apply, @config. CSS-first mode without tailwind.config.js.

Sep 22
fusengine Bundle

Astro Deployment 3

Deploying Astro 6 apps — @astrojs/cloudflare (Workers, D1, KV, R2), @astrojs/vercel (Serverless/Edge, Image CDN), @astrojs/netlify (Edge Functions), @astrojs/node (standalone), ISR patterns, edge middleware, skew protection. Use for any deployment configuration.

Sep 22
fusengine Bundle

Tailwindcss Backgrounds 3

Background utilities Tailwind CSS v4.1. Colors (bg-{color}, palette OKLCH P3), Gradients (bg-linear-*, bg-radial-*, bg-conic-* NEW), Images (bg-cover, bg-contain, bg-repeat), Blend modes.

Sep 22
fusengine Bundle

Tailwindcss Accessibility 3

Tailwind CSS v4.1 accessibility utilities. focus-visible, sr-only, reduced-motion, WCAG enforcement, touch targets, contrast ratios.

Sep 22
fusengine Skill

Tailwindcss Custom Styles 3

@utility, @variant, @apply, custom CSS

Sep 22
fusengine Bundle

Tailwindcss Interactivity 3

Interactivity utilities Tailwind CSS v4.1. Cursor (cursor-*), Scroll (scroll-smooth, scroll-snap-*, overscroll-*), User select (select-*), Pointer events (pointer-events-*), Touch action, Resize, Caret color, Accent color.

Sep 22
fusengine Bundle

Nextjs Server Components 3

React Server Components patterns for Next.js 16. Server vs Client boundaries, async components, data fetching, serialization rules, streaming with Suspense.

Sep 22
involvex Skill

React Flow Architect 4

Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or...

Sep 22
involvex Skill

React State Management 4

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

Sep 22
involvex Skill

Frontend Mobile Development Component Scaffold 4

You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, s

Sep 22
jetbrains Bundle

Vercel React Native Skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

Sep 22
jetbrains Bundle

Vercel Composition Patterns

React 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.

Sep 22
involvex Skill

React Patterns 4

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

Sep 22
involvex Skill

React UI Patterns 4

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

Sep 22
involvex Skill

React Flow Node TS 4

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing no...

Sep 22
involvex Bundle

Frontend UI Dark TS 4

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.

Sep 22
involvex Bundle

React Best Practices 4

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance pat...

Sep 22

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include shadcn-components, tailwindcss-borders, tailwindcss-effects. 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.