Best Claude skills for web development
Web development skills cover the full path from an empty folder to a deployed site: scaffolding, routing, data fetching, deployment to Vercel or Cloudflare, and even cloning an existing site as a starting point. They are ideal when you want the agent to own a whole feature end to end.
114 web development skills · ranked live · November 2026
The top 10. Ranked by the Alyn Score.
- 1#1
Anthropic
Skills
Anthropic
Webapp Testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and…
Pack192k3.8MScore 90 - 2#2
affaan-m
Backend Patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js…
Pack301k1.7MScore 89 - 3#3
Vercel
Agent Skills
Vercel
Vercel Optimize
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code…
Pack34k3.2MScore 86 - 4#4
wshobson
Agents
wshobson
Brand Landingpage
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with…
Pack42k2.6MScore 85 - 5#5
Vercel
Agent Skills
Vercel React View Transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill…
Pack34k3.2MScore 84 - 6#6
Vercel
Agent Skills
Deploy To Vercel
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview…
Pack34k3.2MScore 82 - 7#7
davila7
AI Release Hunter
Daily digest of AI releases from Anthropic, Meta, Vercel Labs, OpenAI and Google GitHub repos, the Claude Cowork changelog, the claude.dev blog and Hacker News, deduplicated against a local…
Pack33k285kScore 78 - 8#8
OpenAI
Skills
OpenAI
Netlify Deploy
Deploy web projects to Netlify using the Netlify CLI (`npx netlify`). Use when the user asks to deploy, host, publish, or link a site/repo on Netlify, including preview and production…
Pack29k225kScore 78 - 9#9
Composio
Webapp Testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and…
Pack79k160kScore 78 - 10#10
Jeffallan
Claude Skills
Jeffallan
Django Storages S3
Use when configuring Django to store static and media files on AWS S3 with django-storages. Invoke when working with the STORAGES setting, S3 buckets, presigned URLs, CloudFront, or…
Pack12k457kScore 77
What makes a great web development skill.
Deployment steps for the host you actually use.
A checklist for SEO basics, metadata and performance budgets.
Scripts that verify the build instead of trusting the agent's word.
All 114 web development skills.
boyang-hucase-studies
何时加载本文件：不在必经集合里。只在想知道 SKILL.md 某条规则为什么存在、或要核对它的实证强度时读；小节名与 SKILL.md 一一对应。
BrianRWagner
AI Marketing Claude Code Skills
BrianRWagnerhomepage-audit
Full conversion audit for any homepage or landing page. Use when someone asks to "review my homepage," "audit my landing page," "why isn't my page converting," "check my website," or wants…
shawnpang
Startup Founder Skills
shawnpanglanding-page
When the user needs to create, critique, or optimize a landing page for conversion -- including headline rewrites, CTA placement, layout restructuring, or full page copy drafts.
zubair-trabzadalegal-privacy
You are the privacy policy generator for /legal privacy <url. You scan a website to detect what data it collects, then generate a comprehensive GDPR and CCPA compliant privacy policy…
ombulabs
Claude Code Rails Upgrade Skill
ombulabsupgrade-cleanup
Clean up after (or abandon) a Rails upgrade. Drop NextRails.next? and NextRails.current? branches and retire dual-boot scaffolding (Gemfile.next, Gemfile.next.lock, conditional Gemfile…
Gentleman-Programming
Gentleman Skills
Gentleman-Programmingdjango-drf
Django REST Framework patterns. Trigger: When building REST APIs with Django - ViewSets, Serializers, Filters.
Gentleman-Programming
Gentleman Skills
Gentleman-Programmingnextjs-15
Next.js 15 App Router patterns. Trigger: When working with Next.js - routing, Server Actions, data fetching.
zubair-trabzada
AI Marketing Claude
zubair-trabzadamarket-copy
You are the copywriting engine for /market copy <url. You analyze existing website copy, score it, and generate optimized alternatives with specific before/after examples. Every…
zubair-trabzada
AI Marketing Claude
zubair-trabzadamarket-landing
Checklist: - [ ] Headline is visible within 2 seconds of page load - [ ] Headline communicates the primary benefit (not a feature) - [ ] Headline is under 10 words - [ ] Subheadline expands…
Vercel
Agent Skills
Vercelvercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up…
Vercel
Agent Skills
Vercelvercel-react-best-practices
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…
Vercel
Agent Skills
Vercelvercel-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…
Vercel
Agent Skills
Vercelvercel-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…
Vercel
Agent Skills
Vercelweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Vercel
Agent Skills
Vercelwriting-guidelines
Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the…
Cloudflare
Skills
Cloudflarecloudflare
Discover and choose Cloudflare products for apps, APIs, AI agents, storage, networking, and security. Use for architecture and product selection, including when the user describes a need…
Cloudflare
Skills
Cloudflarecloudflare-app-bootstrap
Get a Cloudflare Workers app to a working local request by connecting its bindings, secrets, and initial data, then verifying real application behavior. Use for app setup or onboarding…
Cloudflare
Skills
Cloudflarecloudflare-email-service
Implement or troubleshoot Cloudflare Email Sending and Email Routing integrations and their delivery configuration.
Cloudflare
Skills
Cloudflarecloudflare-one
Design, configure, troubleshoot, or review Cloudflare One Zero Trust and SASE deployments. Use cloudflare-one-migrations for migration planning from other vendors. Also use when an agent…
Cloudflare
Skills
Cloudflarecloudflare-one-migrations
Assess and plan migrations from existing VPN, SWG, or SASE platforms to Cloudflare One, including policy mapping, parity gaps, and rollout.
Cloudflare
Skills
Cloudflaredurable-objects
Build, debug, or review Cloudflare Durable Objects code for persistent state and coordination.
Cloudflare
Skills
Cloudflareframeworks-on-cloudflare
Build, migrate, and deploy web-framework applications on Cloudflare Workers. Use when a framework project such as Astro, SvelteKit, React Router, TanStack Start, Nuxt, Hono, or a React or…
Cloudflare
Skills
Cloudflaresandbox-migrate-to-next
Migrate Cloudflare Sandbox apps from stable @cloudflare/sandbox to @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-next for apps already on the preview.
Cloudflare
Skills
Cloudflaresandbox-next
Build or maintain Cloudflare Sandbox apps on @cloudflare/sandbox@next (SDK 1.0 preview). Use sandbox-migrate-to-next when porting a stable app.
Cloudflare
Skills
Cloudflaresandbox-stable
Build or maintain Cloudflare Sandbox apps on the stable @cloudflare/sandbox package. Use sandbox-next for preview apps and sandbox-migrate-to-next for stable-to-preview migrations.
Cloudflare
Skills
Cloudflareweb-perf
Audit, diagnose, or optimize website loading and interaction performance, Core Web Vitals, and Lighthouse performance scores.
Cloudflare
Skills
Cloudflareworkers-best-practices
Cloudflare Workers best practices for production applications. Use when writing, reviewing, or configuring Workers.
Cloudflare
Skills
Cloudflarewrangler
Run or troubleshoot Wrangler CLI commands in projects that have a wrangler.jsonc, wrangler.json, or wrangler.toml file, including local development, Previews, deployment, and resource…
Cloudflare
Skills
Cloudflaregateway-workers
Build, debug, or review Cloudflare Workers invoked by the Forward action in Gateway HTTP policies, including the GatewayMiddleware entrypoint, Gateway types, context, and continuation.
Cloudflare
Skills
Cloudflarebasin
Build and troubleshoot Cloudflare Basin analytics workflows with Basin Pipelines, Basin Catalog, and Basin SQL. Use for streaming data into R2 Iceberg tables, managing catalogs, or querying…
Cloudflare
Skills
Cloudflarenextjs-on-cloudflare
Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and…
Cloudflare
Skills
Cloudflareworkers-development
Run, inspect, and debug Cloudflare Workers during local development with cf dev, wrangler dev, or the Cloudflare Vite plugin, using Local Explorer to read and seed binding data and query…
Cloudflare
Skills
Cloudflarek2
Build and troubleshoot Cloudflare K2 or K2 Streams durable logs. Use for stream setup, producing from Workers or HTTP, configuring retention and inputs, and consuming through subscriptions.
Cloudflare
Skills
Cloudflareworkers-profiling
Profile or debug CPU usage and memory allocation in deployed Cloudflare Workers and Durable Objects. Then use this information to optimize your code.
tech-leads-clubvercel-deploy
Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview…
Jakeschincariol
Replica Skill
Jakeschincariolreplica-launch
Writes the launch for an app clone: the landing page built on the positioning angle, pricing set against the original's public pricing and its users' complaints, and the App Store and…
Web development skills, explained.
Also searched as: web development skills, full stack claude skills, website builder skill, deploy skill.
What are the best Claude skills for web development?
Right now the top-ranked web development skills on Alyn are Webapp Testing (Anthropic), Backend Patterns (affaan-m), Vercel Optimize (Vercel). Rankings combine GitHub stars, installs, freshness and depth, and update live.
What are the best Claude skills for building websites?
Vercel's agent skills, Cloudflare's skills and website cloners like ai-website-cloner-template rank highest. Pair them with a design skill for the look.
Are web development skills free?
Every skill listed on Alyn is open source on GitHub. Check each repository's license before using it commercially.
How do I install a web development skill?
Run npx skills add owner/repo in your project, or copy the folder with SKILL.md into ~/.claude/skills. Every skill on this page has a ready-to-copy command.
More in Build
Web development skills for your agent