28 skills · category

Frontend skills for Claude Code

Skills that encode current frontend practice: React 19 and Server Components, the Next.js App Router, Vue 3, Svelte 5, Astro, Tailwind CSS v4, modern CSS architecture, forms, state management, animation, internationalization, and WCAG 2.2 accessibility audits.

Download all 28 (.zip) Browse the list

Every frontend skill

Each card opens the full playbook, example prompts and install commands.

★ No. 047

Accessibility Audit

WCAG 2.2 AA findings you can hand to engineers

Claude runs the audit a specialist would: axe-core and Lighthouse first, then the manual passes automation cannot judge — keyboard order and traps, focus visibility and obscuring, contrast in both themes via a bundled script, ARIA widget behavior, reflow, target size and a screen reader walk through critical flows. Every finding cites its success criterion, location, impact and fix.

accessibility-audit 208 lines · 3 files

No. 048

Modern Angular

Signals, control flow and zoneless, version-aware

Claude checks the installed Angular major first, then writes code that fits it: signal inputs and computed state instead of decorators and manual syncing, built-in control flow with real track keys, deferred heavy components, inject() and functional guards. It migrates NgModule and zone.js apps one schematic at a time and proves zoneless and hydration work by exercising the app, not just compiling it.

angular-modern 256 lines

No. 049

Astro Sites

Static HTML first, hydrate only what users touch

Claude builds Astro sites that stay static by default and ship framework JavaScript only for real widgets, choosing client:visible or client:idle before client:load. Content lives in typed Content Layer collections validated at build time, images go through astro:assets, and SSR is enabled per route with an adapter rather than flipping the whole site to server output.

astro-sites 216 lines

No. 050

CSS Architecture

Cascade layers instead of specificity wars

Claude measures a stylesheet before touching it with a bundled specificity report, then declares a layer order, moves vendor and reset CSS into low layers, flattens selectors to single classes, and replaces !important with layering. Components get container queries and logical properties, tokens become two-tier custom properties, and the report can gate CI on specificity limits.

css-architecture 220 lines · 2 files

No. 051

Data Tables

Fast, accessible tables at 100k rows

Claude sizes the data before choosing an architecture, then keeps sorting, filtering and paging on the same side so users never sort one page and think it is the whole set. It stores table state in the URL, uses cursor pagination with a unique tiebreaker, virtualizes long lists, and keeps a real table with aria-sort and labeled selection that screen readers can follow.

data-tables 223 lines

No. 052

Drag and Drop

Drag as a shortcut, with a click path behind it

Claude builds sortable lists and boards where dragging is optional: every move also works from a Move menu and the keyboard, and each one is announced to screen readers. It picks dnd-kit, Pragmatic drag and drop or native events with reasons, persists order as fractional keys in a byte-collated column, and rolls back optimistic moves when the save fails.

drag-and-drop 254 lines · 2 files

No. 053

Forms and Validation

One schema, server-checked, errors a screen reader hears

Claude starts each form from a field spec with input types, autocomplete tokens and actionable error copy, then writes one Zod schema used by both browser and server. Forms submit without JavaScript, keep values on error, map API failures such as a taken email onto the right field, and follow WCAG 2.2 rules on labels, focus after submit, paste and password managers.

forms-validation 198 lines

No. 054

htmx Hypermedia

Server-rendered fragments instead of a SPA

Claude builds htmx features the hypermedia way: a working full-page version first, then fragments rendered from the same template blocks, real URLs with pushed history, and server-driven events through HX-Trigger. It knows the htmx 2 changes that bite — unswapped 4xx responses, 204 meaning no swap, redirects that land inside the target — and checks every endpoint with and without HX-Request.

htmx-hypermedia 209 lines

No. 055

i18n and Localization

ICU messages, Intl formatting, RTL that holds up

Claude internationalizes an app the way localization teams need: complete ICU sentences with named arguments instead of concatenated fragments, Intl formatters with explicit locale and time zone, logical CSS and bidi isolation for Arabic and Hebrew, and path-based locale routing with reciprocal hreflang. A bundled checker fails CI on missing keys, broken ICU syntax and placeholder mismatches.

i18n-localization 173 lines · 2 files

No. 056

Micro-frontends

Split the frontend only when the org chart demands it

Makes Claude argue the split before building it. It runs a team-topology test, falls back to a boundary-enforced modular monolith when the test fails, and otherwise defaults to route-level apps behind a proxy, escalating to Module Federation only for a real same-page need. It then pins shared singletons, the route table, typed events, per-app budgets and manifest-based rollback.

micro-frontends 225 lines · 2 files

★ No. 057

Next.js App Router

Layouts, caching and invalidation that behave in prod

Before writing data code, Claude checks the installed Next.js version and whether Cache Components is enabled, because caching defaults differ across 14, 15 and 16. It then keeps pages server-first, tags every cached source, invalidates after each Server Action, and verifies the result in the next build route table and a production server, not in dev mode where caching is hidden.

nextjs-app-router 225 lines · 2 files

No. 058

Nuxt Apps

Fetch once on the server, render per route

Claude picks the right fetch for each context in a Nuxt app: useFetch or useAsyncData with explicit keys for render data, $fetch for events, direct calls on the server. It validates every Nitro route input, keeps secrets in server runtime config overridable by NUXT_ env vars, sets rendering per route with routeRules, and checks the production build for double fetches.

nuxt-apps 195 lines

No. 059

PWAs and Service Workers

Installable, offline-ready, never stuck on old builds

Claude builds PWAs that install cleanly and update safely. It writes a complete manifest with separate maskable icons, picks a Workbox strategy per resource type, adds an offline fallback page, and ships a reload prompt instead of surprise skipWaiting swaps. A bundled stdlib script audits the manifest, icon files and service worker for the mistakes that strand users on stale builds.

pwa-service-workers 202 lines · 2 files

No. 060

React Patterns

Fewer effects, derived state, components that compose

Makes Claude write React the way the current docs intend: state kept minimal, values derived during render, user-driven logic in event handlers, and effects reserved for syncing with outside systems with proper cleanup. It prefers composition through children over boolean-prop sprawl, uses React 19 Actions, ref-as-prop and useEffectEvent, and reviews diffs with a numbered findings list.

react-patterns 234 lines

No. 061

React Router Framework Mode

Loaders, actions and typed routes, the Remix way

Claude builds React Router framework-mode apps the way the router expects: data in loaders, mutations in actions submitted by Form or fetchers, automatic revalidation instead of manual refetching, generated Route types, middleware for shared auth, and an ErrorBoundary per failing route. It checks whether the project is on v7 or v8 first and walks Remix and v7 apps through the future flags safely.

react-router-framework 229 lines

No. 062

React Server Components

Keep data on the server and props serializable

Gives Claude a precise RSC mental model so it stops sprinkling use client on whole pages or putting use server on components. It pushes interactivity to small leaves, maps database rows to minimal DTOs before they cross the boundary, treats every Server Function as a public endpoint with validation and authorization, and decodes the common serialization and hydration errors by cause.

react-server-components 205 lines

No. 063

Rich Text Editors

Tight schemas, JSON storage, sanitized output

Claude picks the editor library for the product's real needs, keeps the schema limited to supported formatting, stores JSON as the source of truth, and renders HTML on the server through an allowlist sanitizer. It cleans pasted Word and Docs content, uploads pasted images, sets SSR flags that prevent hydration errors, and wires Yjs collaboration with per-document authorization.

rich-text-editors 200 lines · 2 files

No. 064

SolidJS Apps

Fine-grained reactivity without React reflexes

Claude writes Solid as Solid, not as React with different imports. It keeps every signal read in a tracking scope, never destructures props, swaps early returns for Show and Switch, uses stores with reconcile for server data, and wires SolidStart query, action and server functions with authorization inside each one. It also greps for the patterns that silently freeze values.

solidjs-apps 188 lines

No. 065

State Management

One owner per value: URL, cache, store or component

Instead of reaching for a global store by default, Claude classifies every value by lifetime and audience and assigns one owner: TanStack Query for server data, the URL for shareable filters and tabs, component state for local UI, and a small Zustand or Redux store for what remains. It hunts down effects that copy fetched data into state and produces an audit table of moves.

state-management 195 lines

No. 066

Storybook Components

Stories as tested fixtures, not a demo gallery

Claude writes one story per meaningful component state, types meta with satisfies so bad args fail to compile, mocks every network and module dependency so stories render offline, and turns play functions into CI tests through the Vitest addon with accessibility checks. It checks the Storybook major first, because imports and test tooling changed between 8, 9 and 10.

storybook-components 188 lines

No. 067

SvelteKit Apps

Runes, load functions and forms that work without JS

Claude writes Svelte 5 with runes, snippets and callback props instead of extending legacy export let, $: and on:click code. It picks server or universal load files deliberately, streams slow data, builds form actions that degrade without JavaScript, gates auth in hooks plus each action, and chooses the adapter that matches where the app will actually run.

sveltekit-apps 207 lines

No. 068

Tailwind CSS v4

Tokens in @theme, complete class names, no @apply sprawl

Claude sets up Tailwind v4 the CSS-first way, puts brand colors, radii and breakpoints in @theme so utilities and CSS variables share one source, and themes through semantic variables instead of dark: on every element. It never builds class names from string fragments, extracts repetition into components with cva, and follows a checklist of renamed utilities and default changes when upgrading from v3.

tailwind-css 206 lines · 2 files

★ No. 069

TanStack Query

Server state with keys, staleTime and rollback

Claude treats server data as a cache with rules. It builds one query key factory with queryOptions, picks staleTime by how fast each kind of data changes, makes mutations invalidate exactly the keys they touch, rolls back optimistic updates on error, and hydrates SSR caches so pages do not refetch on load. Verification uses Devtools and the network tab, not hope.

tanstack-query 228 lines · 2 files

No. 070

Virtualized Lists

Thousands of rows, a few dozen DOM nodes

Claude measures before it virtualizes. It tries cheaper rows, pagination and CSS content-visibility first, then builds TanStack Virtual, react-window 2 or react-virtuoso lists with stable keys, measured heights, infinite loading and sticky headers. It keeps focus and screen reader positions intact, adds search where find-in-page breaks, and restores scroll position on back navigation.

virtualized-lists 284 lines

No. 071

Vue Composition API

Refs that stay reactive and composables that compose

Claude writes Vue 3 single-file components with typed macros, ref as the default state primitive and computed for everything derived. It catches the traps that silently stop updates — destructured reactive objects and stores, watched values instead of getters, hooks after await — and keeps server data out of Pinia, with Nuxt 4 specifics for useFetch keys and SSR-safe state.

vue-composition 201 lines

No. 072

Web Animations

Transform and opacity, interruptible, reduced-motion safe

Claude picks the lightest tool that does the job — a CSS transition, @starting-style for dialogs, the View Transitions API for route changes — before adding Motion or GSAP. It animates only transform and opacity, keeps UI durations short, makes every effect respect prefers-reduced-motion, and proves smoothness with a throttled DevTools Performance recording.

web-animations 238 lines

No. 073

Web Components

Custom elements that behave like native ones

Claude designs a custom element's public API first — attributes, properties, events, slots, parts and CSS variables — then implements it with idempotent lifecycle hooks, composed events and ElementInternals for roles, states and form participation. It handles the traps that waste days: properties set before upgrade, ARIA references that cannot cross shadow roots, and Lit fields that shadow reactive accessors.

web-components 237 lines

No. 074

Web Maps

GPU layers, honest tile costs, points in the right place

Claude picks the map library and tile provider with licensing and per-load pricing in mind, renders data as clustered GPU layers instead of thousands of DOM markers, moves big datasets to vector tiles or PMTiles, and handles SSR and WebGL cleanup in React. A stdlib script audits GeoJSON for swapped coordinates, projected meters, open rings and wasted precision before anything ships.

web-maps 174 lines · 2 files

Choosing Frontend skills

Install the skills that match requests you make every week; each costs about 100 tokens of standing context until it loads. If you are not sure where to begin, start with Accessibility Audit, Next.js App Router and TanStack Query. For background, read The Best Claude Code Skills in 2026, by Use Case, How to Install Claude Code Skills (5 Ways) and Personal vs Project Skills.

By technology: React skills TypeScript skills Accessibility skills Vue and Nuxt skills Next.js skills Svelte and SvelteKit skills

Install several

Install several at once

The installer accepts any number of skill names. Add --project to install into the current repository.

curl -fsSL https://claudeskills.page/install.sh | sh -s -- accessibility-audit angular-modern astro-sites css-architecture data-tables drag-and-drop forms-validation htmx-hypermedia i18n-localization micro-frontends nextjs-app-router nuxt-apps pwa-service-workers react-patterns react-router-framework react-server-components rich-text-editors solidjs-apps state-management storybook-components sveltekit-apps tailwind-css tanstack-query virtualized-lists vue-composition web-animations web-components web-maps

Frontend skills FAQ

How do I install every Frontend skill at once?

Download the bundle at https://claudeskills.page/downloads/category/frontend.zip and unzip it into ~/.claude/skills/ (or .claude/skills/ inside a repository). To pick a few, pass several names to the installer: curl -fsSL https://claudeskills.page/install.sh | sh -s -- accessibility-audit angular-modern astro-sites.

Will installing 28 skills slow Claude Code down?

No. Claude Code keeps only each skill's short description in context — roughly 100 tokens per skill — and loads the full instructions only when a request matches. Install the whole category if it fits your work; unused skills cost almost nothing.

Which Frontend skill should I start with?

Start with Accessibility Audit, Next.js App Router, TanStack Query. They cover the most common requests in this category; add the rest as your work calls for them.