Web Development Claude Code Skills
30 skills in the Web Development category. Each installs in one command and drops straight into your .claude directory.
React Best Practices
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Use when optimizing React apps, reviewing performance, or refactoring components.
Web Performance Optimization
"Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance"
Shadcn
Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.
Firecrawl Scraper
Deep web scraping, screenshots, PDF parsing, and website crawling using Firecrawl API
Tailwind Design System
"Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility."
Fastapi Endpoint
Plan and build production-ready FastAPI endpoints with async SQLAlchemy, Pydantic v2 models, dependency injection for auth, and pytest tests. Uses interview-driven planning to clarify data models, authentication method, pagination strategy, and caching before writing any code.
Roier Seo
Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
Shopify Development
|
Zod Validation Expert
"Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC."
Nextjs App Router Patterns
"Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development."
Shopify Apps
"Expert patterns for Shopify app development including Remix/React Router apps, embedded apps with App Bridge, webhook handling, GraphQL Admin API, Polaris components, billing, and app extensions. Use when: shopify app, shopify, embedded app, polaris, app bridge."
Progressive Web App
"Build Progressive Web Apps (PWAs) with offline support, installability, and caching strategies. Trigger whenever the user mentions PWA, service workers, web app manifests, Workbox, 'add to home screen', or wants their web app to work offline, feel native, or be installable."
Tanstack Query Expert
"Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration."
React Native Architecture
"Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture."
React Component Performance
Diagnose slow React components and suggest targeted performance fixes.
React State Management
"Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions."
Blockrun
Use when user needs capabilities Claude lacks (image generation, real-time X/Twitter data) or explicitly requests external models ("blockrun", "use grok", "use gpt", "dall-e", "deepseek")
Tavily Web
Web search, content extraction, crawling, and research capabilities using Tavily API
Astro
"Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support."
Electron Development
"Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update."
Hono
"Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime."
Exa Search
Semantic search, similar content discovery, and structured research using Exa API
Drizzle Orm Expert
"Expert in Drizzle ORM for TypeScript — schema design, relational queries, migrations, and serverless database integration. Use when building type-safe database layers with Drizzle."
Expo Deployment
"Deploy Expo apps to production"
Zustand Store Ts
"Create Zustand stores following established patterns with proper TypeScript types and middleware."
Segment Cdp
"Expert patterns for Segment Customer Data Platform including Analytics.js, server-side tracking, tracking plans with Protocols, identity resolution, destinations configuration, and data governance best practices. Use when: segment, analytics.js, customer data platform, cdp, tracking plan."
Chrome Extension Developer
"Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication."
Upstash Qstash
"Upstash QStash expert for serverless message queues, scheduled jobs, and reliable HTTP-based task delivery without managing infrastructure. Use when: qstash, upstash queue, serverless cron, scheduled http, message queue serverless."
Building Blog
"Use when adding a blog to a Next.js + Sanity site, building a blog section from scratch, integrating Sanity CMS for editorial content, or setting up an SEO-optimized article surface. Triggers on phrases like 'add a blog', 'build the blog', 'create blog section', 'set up blog with Sanity', 'integrate Sanity CMS', 'blog architecture', or any new-blog scoping conversation on a Next.js project."
Sveltekit
"Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework."
Other Skills Categories
Catalog data and component content are sourced from the open-source davila7/claude-code-templates project (MIT license). ToolZip curates the listing and writes original descriptions; every component links back to its original source. Claude Code is a product of Anthropic. ToolZip is an independent catalog and is not affiliated with or endorsed by Anthropic.