Claude Code Skills Directory: Every Official Skill Repo I Use, From React to Rust

Claude Code writes decent code out of the box. It also writes code that looks like it was trained on every tutorial from 2021, because it partly was. It reaches for useEffect where it doesn't need one, wires Stripe with the API you shouldn't use for new projects, and ships a Supabase table with row-level security turned off.

Skills fix most of that. A skill is a folder with a SKILL.md file that teaches the agent how a specific tool should be used today, written by people who know. The best ones are written by the companies that make the tools: Vercel for React and Next.js, Stripe for payments, Supabase for Postgres, Expo for mobile.

This post is the list I wish I'd had: every skill repository I use or keep bookmarked, grouped by category, with what each skill actually does and when to reach for it. I checked every repository on GitHub while writing this, so every link points at a real folder with a real SKILL.md in it.

It's long. Here's what's covered:

1. Design, UI and UX
2. React, Next.js, Vite, TanStack and Astro
3. Animation and motion
4. Testing frontend apps
5. Authentication
6. Payments and billing
7. Databases, BaaS and PostgreSQL
8. Mobile: Expo and React Native
9. AI, LLMs and deep learning
10. Servers and cloud functions
11. Rust
12. System design and API design
13. Docker and Kubernetes
14. Email, SMS and WhatsApp
15. Voice AI and audio
16. Web scraping and browser automation
17. Analytics, feature flags and error tracking
18. More databases, caching and queues
19. Vue, Nuxt and Svelte
20. Python, FastAPI and Go
21. Security and code review
22. Git, CI/CD and infrastructure as code
23. Marketing, SEO and growth
24. Documents and office files

Then the 20 skills I'd install first, and how to use skills without making things worse.

How Claude Code skills work (two minutes)

A skill is a directory containing a SKILL.md file. The top of that file has a name and a description in YAML frontmatter, and the body has the instructions. It can also carry extra reference files and scripts.

The clever part is that skills load in stages, which Anthropic's Agent Skills docs call progressive disclosure:

• Level 1, always loaded: just the name and description, roughly 100 tokens per skill. This is how Claude knows the skill exists.
• Level 2, loaded when relevant: the SKILL.md body, under 5k tokens, read only when your request matches the description.
• Level 3, loaded on demand: reference files and scripts. A script's output enters the context, not its source code.

So you can install a lot of skills without filling the context window. The description is what decides whether a skill fires, which is why good skill authors write descriptions like "Use when the user mentions X, Y or Z."

Claude Code looks for skills in two places: ~/.claude/skills/ for personal skills and .claude/skills/ inside a project. Skills can also come bundled inside Claude Code plugins.

Installing skills: the three commands you need

Most repositories in this post support one or more of these:

# 1. The open skills CLI from Vercel Labs. Works for any GitHub repo with SKILL.md files. npx skills add vercel-labs/agent-skills npx skills add supabase/agent-skills --skill supabase # 2. Claude Code plugin marketplaces (run inside Claude Code) /plugin marketplace add anthropics/skills /plugin install example-skills@anthropic-agent-skills # 3. Plugins from the official Claude Code marketplace claude plugin install stripe@claude-plugins-official 

The npx skills CLI is the one I use most because it takes any repo, and you can pick single skills with --skill instead of installing a whole collection. Each repository's README lists its preferred command, and I've noted the official ones below.

If you want the bigger picture of how skills sit inside an agent (the loop, the tools, the permissions), I covered that in agent harnessing. And if you're curious what happens when you hand Claude a pile of growth skills and let it run a real site, that was this experiment.

Official vs community, and why it matters

Every entry below is marked. Official means the repository is owned by the company or project behind the tool (Vercel, Stripe, Supabase, Expo, Docker and so on). Community means a developer or team outside that company wrote it.

Official skills track the product: when Next.js ships a new caching model, the Next.js skills change with it. Community skills can be excellent (Emil Kowalski's animation skills are the best in this whole list), but they move at the speed of one maintainer. Where no official skill exists for a tool, I've said so instead of pretending.

One safety note before the list. Skills can include scripts, and an agent will run them. Read the SKILL.md and any scripts/ folder before installing a community skill, the same way you'd read a shell script before piping it into bash.

1. Design, UI and UX skills

This is the category that changes output the most. Without a design skill, Claude produces the same safe layout every time: centered hero, three feature cards, purple gradient. With one, it makes deliberate choices about type, spacing and hierarchy.

anthropics/skills (official, Anthropic)

• frontend-design: guidance for distinctive, intentional visual design. It pushes Claude toward an actual aesthetic direction and typography choices that don't look templated. Use it whenever you're building a new page or reshaping an existing one.
• web-artifacts-builder: tooling for multi-component HTML artifacts built with React, Tailwind CSS and shadcn/ui, for when a single file isn't enough.
• theme-factory: ten preset color and font themes you can apply to slides, docs or landing pages.
• canvas-design and algorithmic-art: posters and static visuals, and generative art in p5.js with seeded randomness.

vercel-labs/agent-skills (official, Vercel)

• web-design-guidelines: reviews your UI code against Vercel's Web Interface Guidelines. Trigger it with "review my UI", "check accessibility" or "audit design". This is my default pre-ship check.
• writing-guidelines: the same idea for docs and UI copy, checking voice and tone against a writing handbook.

nextlevelbuilder/ui-ux-pro-max-skill (community)

• ui-ux-pro-max: a large UI/UX knowledge skill for web, mobile and desktop, covering pages, components, design systems, accessibility, interaction and responsive layout. It's the heavyweight option when you want Claude to reason about design rather than just apply a style.
• The same repo ships design-system (three-layer tokens: primitive, semantic, component), ui-styling (shadcn/ui plus Tailwind), brand, banner-design and slides.
• Install with /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill, then /plugin install ui-ux-pro-max@ui-ux-pro-max-skill.

shadcn-ui/ui (official, shadcn)

• shadcn: manages shadcn components and projects (adding, searching, fixing, debugging, styling and composing UI, including chat interfaces), with component docs and usage examples. It lives inside the main shadcn repository.
• migrate-radix-to-base: moves a project or single components from Radix UI primitives to Base UI.

If you're collecting shadcn extensions to pair with this, my list of cool shadcn libraries is still the one I point people to.

Tailwind CSS: I couldn't find an official Tailwind Labs skill repository. The two I'd use are ui-styling above and the community tailwind-design-system from wshobson/agents, which targets Tailwind v4 design tokens and component libraries.

Use this category when: you're starting a landing page, building a dashboard, or about to ship a UI you haven't had a designer look at.

2. React, Next.js, Vite, TanStack and Astro

Framework skills are where official repos matter most, because frameworks change faster than model training data.

React

There's no skill from the React team itself. The reference is Vercel's:

• react-best-practices (official, Vercel): React and Next.js performance guidelines from Vercel Engineering. It's meant to load whenever Claude writes, reviews or refactors React code. If you install one skill from this whole post, make it this one.
• composition-patterns (official, Vercel): composition patterns for components drowning in boolean props, for compound components and for reusable component APIs.
• react-view-transitions (official, Vercel): React's View Transition API (<ViewTransition>, addTransitionType and the CSS pseudo-elements). More on this in the animation section.

Prepping for interviews alongside this? The 50 React interview questions post covers the same ground from the other side.

Next.js

The Next.js team keeps skills inside the main repository, under skills/ on the canary branch (official, Vercel):

• next-dev-loop: verifies that a change works in a running app, not just that it compiles. It combines Next.js's built-in /_next/mcp endpoint with a browser.
• next-bundle-optimizer: audits and reduces initial-load work, such as oversized client bundles and duplicate dependencies.
• next-cache-components-adoption and next-cache-components-optimizer: turn on Cache Components, fix the blocking routes it surfaces, then optimize what renders instantly.
• next-partial-prefetching-adoption and next-partial-prefetching-optimizer: the same two-step flow for Partial Prefetching.

These are the skills that know about features newer than any model's training cutoff. The bundle optimizer pairs well with my rant about why websites are slow. For starter projects to try them on, see the free Next.js boilerplates list.

Vercel also ships deployment and cost skills in vercel-labs/agent-skills: deploy-to-vercel, vercel-cli-with-tokens and vercel-optimize, which pulls real usage metrics before suggesting cost and performance fixes.

Vite and Vitest

• antfu/skills (community, by Anthony Fu of the Vite and Vitest core teams): vite covers vite.config.ts, the plugin API, SSR and the Vite 8 Rolldown migration. vitest covers writing tests, mocking, coverage and fixtures. The repo also has skills for Vue, Nuxt, Pinia, UnoCSS, VitePress and pnpm.

TanStack

• DeckardGer/tanstack-agent-skills (community): four skills, tanstack-query, tanstack-router, tanstack-start and tanstack-integration, which covers Query, Router and Start working together across SSR and caching.
• TanStack's own approach is different: its Intent project is tooling for libraries to generate and ship skills alongside their npm packages, with meta-skills for generating skills and checking whether they've gone stale. Worth watching, because "the package ships its own skill" is probably where this all ends up.
• If you use Clerk with TanStack Start, clerk-tanstack-patterns is official.

Astro

• astrolicious/agent-skills (community): a single astro skill for components and pages, SSR adapters, content collections, static deploys and the CLI. I didn't find an official skill from the Astro team.
• Official adjacent options: Clerk's clerk-astro-patterns, and Vercel's vercel-optimize, which lists limited Astro support.

Astro keeps coming up in my own cost work because it ships so little JavaScript. That's part of how we keep ihatereading.in under $100 a month.

3. Animation and motion skills

Agents are bad at animation in a specific way: they add motion everywhere, use the wrong easing, animate layout properties that drop frames, and never think about interruption. The skills here fix the decision-making, not just the syntax.

emilkowalski/skills (community, by Emil Kowalski, who teaches animations.dev and built Sonner and Vaul)

This is the best-written skill repo in this post. Install it with npx skills@latest add emilkowalski/skills.

• animate: builds an animation from scratch by making decisions in order: should it animate at all, what for, which tool, which properties, which curve and duration, and how it handles interruption.
• review-animations: reviews motion code against a high craft bar. In its own words, "approval is earned."
• improve-animations: read-only audit of a codebase's motion code that produces a prioritized plan other agents can execute.
• find-animation-opportunities: finds places that should animate and rejects the ones that shouldn't, with exact values.
• animation-performance: keeps animations inside the frame budget by sticking to composite-only properties and keeping motion off a busy main thread.
• animation-vocabulary: turns "the bouncy thing when a popover opens" into the actual term, so you and the agent are talking about the same effect.
• apple-design: Apple's approach to fluid, physical, gesture-driven motion translated for the web.
• animate-expo: the same decision process for React Native and Expo.
• Also useful outside animation: break-ui (feeds your UI worst-case data like long names, emoji and zero items), pick-ui-library (an opinionated list for charts, OTP inputs, command menus and more), ask-sonner and emil-design-eng.

Framer Motion / Motion: I didn't find an official skill from the Motion team. Emil's animate and review-animations cover the decisions you make with Motion, and they work whichever library you pick.

Other motion skills worth knowing:

• react-view-transitions (official, Vercel): native-feeling page and element transitions with React's View Transition API, without a library.
• expo-animation (official, Expo): animation decisions for React Native, including which thread an animation runs on and spring vs timing.
• remotion-dev/skills (official, Remotion): for video made in React code. remotion-best-practices routes to the rest, including remotion-create, remotion-render, captions and maps. If you've ever tried to turn a blog into an explainer video, this is the stack for it. I wrote about that format in understanding LLM output faster.

4. Testing frontend apps

The most useful thing a skill can do is give the agent a browser and tell it to check its own work. "It compiles" and "it works" are different claims, and these skills close that gap.

• webapp-testing (official, Anthropic): a toolkit for testing local web apps with Playwright. It verifies frontend behavior, debugs UI, captures screenshots and reads browser logs. Use it after any UI change you'd otherwise check by hand.
• playwright-cli (official, Microsoft): browser automation and Playwright test work through Microsoft's Playwright CLI.
• next-dev-loop (official, Next.js): the runtime check for Next.js apps, described above.
• vitest (community, Anthony Fu): unit tests, mocking and coverage.
• clerk-testing (official, Clerk): end-to-end tests for auth flows with Playwright or Cypress, which is the part of an app most people skip testing.
• e2e-testing-patterns (community, wshobson/agents): general Playwright and Cypress patterns for reliable suites.
• break-ui (community): not a test runner, but it finds the layout bugs real users will hit first.

Use this category when: you've let an agent make UI changes across several files and you don't want to click through every screen yourself.

5. Authentication: Clerk, Better Auth, Firebase Auth, Neon Auth

Auth is where outdated training data hurts most, because SDKs change their APIs and the old ones still look plausible.

clerk/skills (official, Clerk)

Clerk has the most complete auth skill set I found, one skill per framework. Install the skills with npx skills add clerk/skills, or the plugin (skills plus the Clerk MCP server) with /plugin marketplace add clerk/skills and /plugin install clerk@clerk-skills.

There are also skills for Nuxt, Vue, React Router, Chrome extensions, Android and Swift in the same folder.

better-auth/skills (official, Better Auth)

• best-practices: server and client config, database adapters, sessions, plugins and environment variables.
• create-auth: scaffolds auth into a TypeScript app, detecting the framework and adding route handlers, OAuth providers and UI pages.
• Plus focused skills for emailAndPassword, organization, twoFactor and a security skill.

Firebase and Neon

• firebase-auth-basics (official, Firebase): sign-in, user management and auth-aware security rules.
• neon-auth (official, Neon): Neon Auth, which its skill describes as managed Better Auth, covering sign-up, magic links, OTP, OAuth, passkeys and organizations.

6. Payments and billing: Stripe, Dodo Payments, Polar

All three payment providers I use have official skills, which says a lot about where integration work is heading. I'd treat these as mandatory before letting an agent touch money.

stripe/ai (official, Stripe)

Install with claude plugin install stripe@claude-plugins-official, or npx skills add https://docs.stripe.com.

• stripe-best-practices: the one to always have. It guides integration decisions: test environments (separate sandboxes or the shared test mode), Checkout Sessions vs PaymentIntents, Connect setup and more.
• stripe-docs: reads and searches Stripe docs and API reference, including gated docs. Its description tells the agent to prefer it over curl or web fetches.
• upgrade-stripe: upgrading API versions, webhook endpoints, server SDKs, Stripe.js and mobile SDKs.
• connect-recommend and connect-required-verification-information: for marketplaces and platforms on Connect.
• metronome: usage-based billing with Metronome (event ingestion, rate cards, invoicing).
• stripe-apps, stripe-projects, stripe-directory and stripe-pay: Dashboard extensions, provisioning services through Stripe Projects, and agent-side payments.

dodopayments/skills (official, Dodo Payments)

Dodo Payments works as a merchant of record, so it acts as the seller and handles the tax side for you. Its agent skills page lists 18 skills, installed with npx skills add dodopayments/skills:

• Start here: dodo-best-practices (SDK setup, keys, the checkout-to-webhook architecture) and framework-adapters (official route handlers for Next.js, Express, Hono and others).
• Core flows: checkout-integration, subscription-integration (trials, plan changes, proration) and webhook-integration (Standard Webhooks verification).
• Billing models: usage-based-billing, credit-based-billing and license-keys. The credits one is the pattern most AI SaaS apps need.
• Going live: testing-and-go-live and refunds-and-disputes.
• Extras: mobile-checkout for React Native and Flutter, localized-pricing for purchasing power parity, billing-sdk for pricing table components and better-auth-integration.

polarsource/skills (official, Polar)

Four focused skills:

• setup-polar: an interactive onboarding wizard for adding Polar from scratch.
• polar-integration: Checkout, Customer Portal and Webhooks endpoints with @polar-sh/sdk, for any framework.
• polar-testing: testing in Polar's sandbox, including checkout flows without real payments and Stripe test cards.
• polar-migration: moving from Stripe Billing, Paddle, Lemon Squeezy or Gumroad.

Use this category when: you're adding checkout, changing plans, or upgrading an SDK. And always run the provider's testing skill before you flip to live keys.

7. Databases, BaaS and PostgreSQL

Supabase

supabase/agent-skills (official, Supabase) has only two skills, and both are broad:

• supabase: for any Supabase task, covering Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron and Queues, plus supabase-js and @supabase/ssr in Next.js and other frameworks.
• supabase-postgres-best-practices: Postgres best practices for Postgres running anywhere, not just on Supabase. It's meant to load before Claude creates or alters tables and columns. This is the best general Postgres skill I've found.

Install both with npx skills add supabase/agent-skills, or as plugins with claude plugin marketplace add supabase/agent-skills.

Firebase

firebase/agent-skills (official, Firebase). ihatereading.in runs on Firebase, so these are the ones I lean on:

• firebase-basics: CLI install, login, project setup and app config.
• firebase-firestore: Firestore data modeling, queries, indexes and SDKs.
• firestore-rules-creation and firebase-security-rules-auditor: writing production security rules, then auditing them for privilege escalation, role bypasses and create-vs-update gaps. Run the auditor on any project an agent has touched.
• firebase-data-connect-basics: Firebase's PostgreSQL-backed Data Connect.
• firebase-ai-logic-basics: calling Gemini models from client code.
• Also firebase-hosting-basics, firebase-app-hosting-basics, firebase-remote-config-basics, firebase-crashlytics and extension-to-functions-codebase.

My own SaaS starter kit is built on Firebase, and these skills cover the setup work it involves: CLI, Firestore, rules and hosting.

Neon and Prisma

• neondatabase/agent-skills (official, Neon): neon-postgres (pooled vs direct connections, migrations, autoscaling, scale-to-zero), neon-postgres-branches (testing migrations on a copy of real data) and neon-postgres-egress-optimizer, which hunts down code that pulls too much data out of the database and inflates your bill.
• prisma/skills (official, Prisma): prisma-orm-setup, prisma-client-api, prisma-cli, prisma-postgres and prisma-upgrade-v7.

PostgreSQL in depth

Beyond the vendor skills, three community skills go deeper into raw Postgres:

• postgresql-table-design (wshobson/agents): schema design, data types, indexing, constraints and Postgres-specific features.
• sql-optimization-patterns (wshobson/agents): query optimization, indexing strategy and reading EXPLAIN output.
• postgres-pro (Jeffallan/claude-skills): EXPLAIN analysis, JSONB, extensions, replication and VACUUM tuning.

My Postgres combination: supabase-postgres-best-practices always on, postgresql-table-design when designing a new schema, and sql-optimization-patterns when something is slow.

8. Mobile: Expo and React Native

Mobile has the richest official skill set of any category, because Expo went all in. If you build with React Native, this section is the reason to read this post.

Expo

expo/skills (official, Expo). Install with npx skills@latest add expo/skills --skill '*', or as a plugin with claude plugin install expo@claude-plugins-official.

Start with expo-overview. It's the entry point and router for every Expo and EAS task, and it's meant to load before Claude picks any other Expo skill.

Building the app

• expo-project-structure: folder layout for a new Expo Router app. It's for new projects only.
• expo-router: file-based routes, groups, dynamic routes, modals, form sheets, link previews and NativeTabs.
• expo-native-ui: native-feeling screens with Apple HIG styling, semantic colors, SF Symbols and native controls.
• expo-ui: the @expo/ui package, which renders real SwiftUI on iOS and Jetpack Compose on Android, for sheets, pickers, sliders, toggles and menus.
• expo-design-system: design tokens and a reusable component structure inside an Expo app.
• expo-data-fetching: any network request, with React Query, SWR, caching, offline support and loading, empty and error states.
• expo-animation: covered in the animation section.
• expo-examples: points the agent at Expo's roughly 70 official with-* example projects (Stripe, Clerk, Supabase, OpenAI, maps, SQLite, Skia, NativeWind and more), so it copies a working integration instead of inventing one.

Going native and migrating

• expo-module: writing native modules and views with the Expo Modules API in Swift and Kotlin.
• expo-dom and expo-web-to-native: running web code inside native screens, and porting a whole Next.js, Vite or CRA app to iOS and Android.
...