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.
zubair-trabzadageo-audit
Full website GEO+SEO audit with parallel subagent delegation. Orchestrates a comprehensive Generative Engine Optimization audit across AI citability, platform analysis, technical…
zubair-trabzadageo-llmstxt
Analyzes and generates llms.txt files -- the emerging standard for helping AI systems understand website structure and content. Can validate existing llms.txt files or generate new ones…
Jakeschincariol
Replica Skill
Jakeschincariolreplica-design
Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original…
Jakeschincariol
Replica Skill
Jakeschincariolreplica-diff
Compares an app clone against the original: a feature parity score from the feature matrix (weighted by must, should, could) with the missing list in build order, plus a screenshot layout…
Jakeschincariol
Replica Skill
Jakeschincariolreplica-entrepreneur
Researches the app being cloned and reads what its real users say in public reviews (App Store, Google Play, G2, Capterra, Trustpilot, Reddit, Hacker News, its own feature-request board)…
rampstackcochatbot-flow-design
Designing conversational flows for website chatbots and AI agents. Intent recognition architecture, branching logic, fallback handling, escalation to human, conversation analytics. Honest…
rampstackcocontent-and-copy
Write or edit website copy, blog content, and editorial pieces with attention to voice, structure, and goal. Use this skill whenever the user wants to write an article, draft website copy…
kostja94
Marketing Skills
kostja94copywriting
When the user wants to write or optimize short-form marketing copy—headlines, CTAs, ad copy, landing page copy, email copy. Also use when the user mentions "copywriting," "headline," "CTA…
composio-communitydeploy-pipeline
Run end-to-end deploy pipelines across Stripe, Supabase, and Vercel using the Composio CLI. Promote Stripe products, push Supabase migrations, ship Vercel deployments, and verify with…
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…
jezweb
Claude Skills
jezwebproduct-showcase
Generate a comprehensive marketing website for a web app — multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations. Browses the running…
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…
briiirussell
Cybersecurity Skills
briiirussellcloud-audit
Audit cloud infrastructure (AWS, GCP, Azure) and PaaS deployment platforms (Vercel, Netlify, Heroku, Render, Railway, Fly) for misconfigurations, excessive permissions, stale or manual…
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…
jezweb
Claude Skills
jezweblanding-page
Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta…
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…
glebiscms-migration-checklist
Gated checklist and working method for migrating a WordPress site to Next.js with a Payload CMS admin — audit, owner decisions, HTML→Lexical conversion, idempotent import and…
onvoyage-ai
GTM Engineer Skills
onvoyage-aiaudit-website-aeo
Audits a live website for AI-engine discoverability (AEO/GEO). Crawls the site, runs 16 deterministic checks plus a 6-dimension content evaluation, and produces a scored report (A-F) with…
managedcodecreate-blazor-project
Create a new ASP.NET Core web application or web site using Blazor. USE FOR: creating a new Blazor web app, scaffolding a new web project, starting a new web site, choosing render modes…
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…
freshtechbro
Claudedesignskills
freshtechbrobarba-js
Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated…
managedcodeconvert-blazor-server-to-webapp
Guides conversion of a pre-.NET 8 Blazor Server app into a .NET 8+ Blazor Web App. USE FOR: migrating apps that use AddServerSideBlazor and MapBlazorHub to the AddRazorCo…
onvoyage-ai
GTM Engineer Skills
onvoyage-aiimprove-aeo-geo
Audits a website codebase and makes code changes so AI engines (ChatGPT, Claude, Perplexity, Google AI Overviews) can better discover, parse, quote, and cite the site. Covers structured…
freshtechbro
Claudedesignskills
freshtechbrothreejs-webgl
Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive…
mxyhifind-docs
Retrieves up-to-date documentation, API references, and code examples for any developer technology. Use this skill whenever the user asks about a specific library, framework, SDK, CLI tool…
mxyhiimagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A…
runkidsskillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/…
boyang-huwebsite-rebuild
1:1 rebuild of award-winning creative websites (WebGL / scroll-animation / portfolio sites). Evidence-driven pipeline - mirror-first forensics, line-number-traceable reverse engineering of…
mxyhiagent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data…
runkidsskillshare-update-docs
Update website docs to match recent code changes, cross-validating every flag against source. Use this skill whenever the user asks to: update documentation, sync docs with code, document a…
emotixco
Claude Skills Founder
emotixcolanding-page
Write landing page copy section by section, from hero to final call to action, including FAQ and SEO metadata. Use when a founder needs copy for a new or existing landing page.
ombulabs
Claude Code Rails Upgrade Skill
ombulabsrails-upgrade
Analyzes Rails applications and generates comprehensive upgrade reports with breaking changes, deprecations, and step-by-step migration guides for Rails 2.3 through 8.1. Use when upgrading…
Prat011webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and…
Microsoftadd-knowledge
Add a knowledge source (public website or SharePoint) to a Copilot Studio agent. Use when the user asks to add a knowledge source, documentation URL, website, or SharePoint site for the…
lingxling
Awesome Skills Cn
lingxlingwebapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, 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