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.
89 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…
192k3.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…
301k1.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…
34k3.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…
42k2.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…
34k3.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…
34k3.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…
33k285kScore 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…
29k225kScore 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…
79k160kScore 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…
12k457kScore 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 89 web development skills.
plugin87design-screen
Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a…
juliobszawwwards
Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a quality standard. Covers…
juliobszjury
Score any website the way an Awwwards jury would, from evidence alone. Screenshots every page type on desktop, a throttled phone and reduced motion, measures LCP, CLS, FPS, axe, keyboard…
lawve-ai
Awesome Legal Skills
lawve-aiambiguity-report
Turn an interpretive-ambiguity audit of a legal text — contract, statute, regulation, or judicial opinion — into a polished deliverable. Produces a multi-page website (default), a…
lawve-ai
Awesome Legal Skills
lawve-aiaz-eu-website-privacy-audit
Audits a website for compliance with Azerbaijan's Law on Personal Data No. 998-IIIQ and, where applicable, EU GDPR plus ePrivacy/cookie consent rules. Inventories the privacy documents…
nowork-studio
Notfair Plugin
nowork-studiogoogle-ads-landing
Score and diagnose Google Ads landing pages. Use when asked to audit a landing page, check landing page quality, diagnose high-CTR but low-conversion-rate ad groups, improve Quality Score's…
nexscope-aiecommerce-landing-page
Audit and optimize e-commerce landing pages for conversion. CTA placement, trust signals, page structure, copy optimization, and A/B testing strategy for product pages, collection pages…
Cold-IQ
ColdIQ S GTM Skills
Cold-IQsignal-sourcer
Expert signal-based selling strategist for B2B outbound teams. Use when the user asks about buying signals, intent data, signal scoring, signal-based selling, website visitor tracking, job…
Affitor
Affiliate Skills
Affitorlanding-page-creator
Build high-converting affiliate landing pages as single self-contained HTML files. Triggers on: "create a landing page for", "build a landing page", "product landing page", "affiliate…
Affitor
Affiliate Skills
Affitorsqueeze-page-builder
Build email capture landing pages (squeeze pages) as single self-contained HTML files. Triggers on: "build a squeeze page", "email capture page", "lead magnet page", "create an opt-in…
Affitor
Affiliate Skills
Affitorwebinar-registration-page
Build a webinar or live event registration page as a self-contained HTML file with countdown timer, speaker bio, agenda, and registration form. Triggers on: "build a webinar registration…
irinabuht12-osslanding-page-audit-39
CRO analysis for landing pages evaluating headline clarity, CTA placement, trust signals, mobile friction, and conversion killers. Use when uploading a landing page screenshot, pasting a…
kwakseongjaegoogle-analytics
Analyze Google Analytics data, review website performance metrics, identify traffic patterns, and suggest data-driven improvements. Use when the user asks about analytics, website metrics…
irinabuht12-osslanding-page-audit
Reviews your landing pages against the ads driving traffic to them. Checks for message match between ad copy and page content, CTA clarity, above-the-fold alignment, form friction, and…
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…
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…
Jeffallan
Claude Skills
Jeffallanphp-pro
Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks. Invokes strict typing, PHPStan level 9, async patterns with Swoole, and PSR standards…
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…
Jeffallan
Claude Skills
Jeffallanfullstack-guardian
Builds security-focused full-stack web applications by implementing integrated frontend and backend components with layered security at every level. Covers the complete stack from database…
Jeffallan
Claude Skills
Jeffallannextjs-developer
Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming…
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.
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