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 Nextjs ZustandUse when implementing global state, stores, persist, or hydration in Next.js 16 App Router Client Components with Zustand v5.
- fusengine Bundle Shadcn Theming
Use when defining or auditing shadcn/ui design tokens, OKLCH colors, or dark/light mode CSS variables.
-
amo-tech-ai-rocket-path-ai Skill API WiringUse when connecting Supabase edge function backends to React frontend hooks and UI components. Triggers on "wire", "connect backend", "hook up", "frontend wiring", "create hook for", "call edge function".
- amo-tech-ai-rocket-path-ai Skill Accessibility
Use when building UI components, creating pages, or before launch for WCAG 2.1 AA compliance. Triggers on "accessibility", "a11y", "screen reader", "keyboard nav", "WCAG", "ARIA", "contrast".
- fusengine Bundle Tailwindcss Core
Use when configuring Tailwind CSS-first (no config.js), defining @theme tokens, or creating custom utilities/variants. Do NOT use for v3-to-v4 migration or category utility lookup.
- fusengine Bundle TS Testing
Use when writing or configuring TypeScript tests and choosing between bun test and Vitest. Not for framework-specific testing (React → react-testing).
- fusengine Bundle Astro Deployment
Use when deploying an Astro 7 app to Cloudflare, Vercel, Netlify, or Node.js — adapter setup, ISR patterns, edge middleware.
- amo-tech-ai-rocket-path-ai Bundle Frontend Design
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.
- amo-tech-ai-rocket-path-ai Bundle Motion Interaction Designer
Design smooth UI animations and interactions using Framer Motion for React/Next.js. Use when users request animations, transitions, hover effects, scroll animations, gesture interactions, or need help implementing Framer Motion. Follow modern motion UX principles with purposeful, performant animations that enhance usability.
- fusengine Bundle Shadcn Detection
Use when determining which primitive (Radix UI or Base UI) a shadcn/ui project uses, before any component work or migration.
- fusengine Bundle Tailwindcss Layout
Use when building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or @container queries.
- fusengine Bundle Tailwindcss Sizing
Use when setting element width/height, constraining min/max dimensions, using dynamic viewport height (h-dvh), or fixing an aspect ratio.
- fusengine Bundle Astro Integrations
Use when adding React, Vue, Svelte, Solid, Preact, or another UI framework to an Astro project via @astrojs/* integrations.
- fusengine Bundle Shadcn Components
Use when building or editing shadcn/ui components, mapping Radix vs Base UI APIs, or choosing a composition pattern (asChild vs render).
-
delorenj Bundle Clerk AndroidImplement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView/UserButton or custom API-driven auth flows. Do not use for Expo or React Native projects.
1 - delorenj Bundle Merge Forward
Incremental delivery workflow for a monorepo and its component repositories. Use when implementing, integrating, pinning, containerizing, publishing, or composing changes across a root repo and its components; especially when work risks long-lived branches, broad component freezes, excessive review or security ceremony, submodule or image drift, or delayed merges to main. Produces the smallest observable slice, bounded verification, immediate component and root main merges, and concise status reporting. Repo-specific extensions (e.g. 33god-merge-forward) layer product authority boundaries and repo-specific gates onto this base.
1 - fusengine Bundle Tailwindcss Borders
Use when styling element borders, rounded corners, focus outlines/rings, or divide-* separators between children.
- fusengine Bundle Tailwindcss Effects
Use when adding box/inset shadows, controlling opacity, applying CSS filters or backdrop filters (glassmorphism), or mask-* utilities.
- fusengine Bundle Tailwindcss Spacing
Use when setting margin or padding on any side, centering with m-auto, applying negative margins, or spacing children with space-x-*/space-y-*.
- fusengine Bundle Security Headers
Use when verifying or configuring HTTP security headers (CSP, HSTS, CORS, X-Frame-Options) for a web application (Next.js, Laravel, Express, Django).
-
thewatcher01 Bundle UI Neuro ErgoAutonomous neuro-ergonomic + a11y UI audit and iteration skill. Combines WCAG 2.2 AA standards, cognitive science principles (Fitts Law, CLT, Gestalt), and a Chrome DevTools MCP screenshot loop for production-ready delivery. Triggers on neuro ergo, a11y, accessibility audit, cognitive load, UX review, WCAG, ergonomie, accessibilite.
- fusengine Skill Tailwindcss Utilities
Use when needing a single entry point to find which categorical tailwindcss-* skill covers a given utility class. Router/index only - do NOT use for actual class content.
- fusengine Bundle Nextjs Tanstack Form
Use when building forms in Next.js 16 with TanStack Form v1 — Server Actions, Zod validation, multi-step wizards, field arrays.
- fusengine Bundle React Tanstack Router
Use when implementing routing in a React app (NOT Next.js) with TanStack Router — file-based routes, loaders, search params.
- delorenj Bundle Antislop Human
Human and accessibility skill for antislop. Contrast, keyboard, focus, and states for real people. Includes the contrast checker.
1 - thewatcher01 Bundle Pwa User Simulation
Simulate real user journeys through a PWA using browser automation MCPs (Playwright MCP + Chrome DevTools MCP). Combines SXO (Search eXperience Optimization), neuro-ergonomic heuristics, WCAG 2.2 AA checks, and Core Web Vitals analysis via structured accessibility snapshots and visual screenshots. Triggers on: simulate user, user journey, PWA test, SXO audit, UX walkthrough, browser automation, e2e exploration, user simulation, test the app, parcourir comme un utilisateur, tester le flow, vérifier le parcours.
- thewatcher01 Skill Prompt Engineering Sota
Apply SOTA prompt engineering techniques to any task. USE when: improving AI responses, structuring complex instructions, debugging poor outputs, choosing between CoT/ToT/ReAct, writing system prompts, or any task needing optimal LLM interaction. Covers 40+ techniques from Zero-shot to Tree-of-Thought, ReAct, Reflexion, Self-Consistency. Optimized for fast models (Haiku 4.5, Llama 3.1 8B). Trigger: "improve this prompt", "the AI gives bad answers", "write a system prompt", "use chain of thought".
- fusengine Bundle Tailwindcss Transforms
Use when scaling/rotating/translating/skewing an element, configuring transition duration/easing/delay, or applying @keyframes animations.
- fusengine Bundle Nextjs Tanstack Query
Use when implementing client-side data fetching, server prefetching with hydration, or optimistic mutations in Next.js 16 with TanStack Query.
- fusengine Bundle Tailwindcss Backgrounds
Use when styling background colors, building linear/radial/conic gradients, setting background images/position/size, or blend modes.
-
kevinnft Skill SketchThrowaway HTML mockups: 2-3 design variants to compare.
- fusengine Bundle Tailwindcss Accessibility
Use when implementing keyboard-accessible components, screen-reader-only content, prefers-reduced-motion support, or WCAG 2.2 AA/AAA compliance.
- fusengine Skill Tailwindcss Custom Styles
Use when creating a new named utility class, writing conditional/dark-mode variants, defining a custom variant selector, or using @apply.
- fusengine Bundle Tailwindcss Interactivity
Use when controlling cursor appearance, scroll snap/smooth behavior, text selection, pointer-events, touch actions, or caret/accent colors.
- fusengine Bundle Nextjs Server Components
Use when deciding Server vs Client Component boundaries in Next.js 16, fetching data directly in components, or streaming with Suspense.
- fusengine Bundle Solid Tanstack Start
Use when organizing TanStack Start code, splitting oversized routes/server functions, or reviewing architecture. Do NOT use for setup or plain React SPA.
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 nextjs-zustand, shadcn-theming, api-wiring. 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.