S claudeskill.wiki

web-development

29 skills

web-development

react-best-practices

7,809

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.

npx claude-code-templates@latest --skill web-development/react-best-practices
Read more →
web-development

web-performance-optimization

1,190

"Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance"

npx claude-code-templates@latest --skill web-development/web-performance-optimization
Read more →
267

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.

npx claude-code-templates@latest --skill web-development/roier-seo
Read more →
web-development

fastapi-endpoint

248

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.

npx claude-code-templates@latest --skill web-development/fastapi-endpoint
Read more →
web-development

firecrawl-scraper

222

Deep web scraping, screenshots, PDF parsing, and website crawling using Firecrawl API

npx claude-code-templates@latest --skill web-development/firecrawl-scraper
Read more →
web-development

shopify-development

150

|

npx claude-code-templates@latest --skill web-development/shopify-development
Read more →
web-development

shopify-apps

111

"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."

npx claude-code-templates@latest --skill web-development/shopify-apps
Read more →
53

Web search, content extraction, crawling, and research capabilities using Tavily API

npx claude-code-templates@latest --skill web-development/tavily-web
Read more →
46

Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.

npx claude-code-templates@latest --skill web-development/shadcn
Read more →
web-development

tailwind-design-system

33

"Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility."

npx claude-code-templates@latest --skill web-development/tailwind-design-system
Read more →
web-development

nextjs-app-router-patterns

32

"Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development."

npx claude-code-templates@latest --skill web-development/nextjs-app-router-patterns
Read more →
web-development

progressive-web-app

28

"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."

npx claude-code-templates@latest --skill web-development/progressive-web-app
Read more →
26

Semantic search, similar content discovery, and structured research using Exa API

npx claude-code-templates@latest --skill web-development/exa-search
Read more →
25

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")

npx claude-code-templates@latest --skill web-development/blockrun
Read more →
web-development

react-component-performance

24

Diagnose slow React components and suggest targeted performance fixes.

npx claude-code-templates@latest --skill web-development/react-component-performance
Read more →
web-development

react-native-architecture

22

"Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture."

npx claude-code-templates@latest --skill web-development/react-native-architecture
Read more →
web-development

react-state-management

21

"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."

npx claude-code-templates@latest --skill web-development/react-state-management
Read more →
web-development

segment-cdp

20

"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."

npx claude-code-templates@latest --skill web-development/segment-cdp
Read more →
web-development

upstash-qstash

19

"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."

npx claude-code-templates@latest --skill web-development/upstash-qstash
Read more →
14

"Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support."

npx claude-code-templates@latest --skill web-development/astro
Read more →
web-development

zod-validation-expert

14

"Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC."

npx claude-code-templates@latest --skill web-development/zod-validation-expert
Read more →
web-development

chrome-extension-developer

11

"Expert in building Chrome Extensions using Manifest V3. Covers background scripts, service workers, content scripts, and cross-context communication."

npx claude-code-templates@latest --skill web-development/chrome-extension-developer
Read more →
web-development

tanstack-query-expert

9

"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."

npx claude-code-templates@latest --skill web-development/tanstack-query-expert
Read more →
web-development

electron-development

8

"Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update."

npx claude-code-templates@latest --skill web-development/electron-development
Read more →
web-development

expo-deployment

8

"Deploy Expo apps to production"

npx claude-code-templates@latest --skill web-development/expo-deployment
Read more →
8

"Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework."

npx claude-code-templates@latest --skill web-development/sveltekit
Read more →
web-development

zustand-store-ts

8

"Create Zustand stores following established patterns with proper TypeScript types and middleware."

npx claude-code-templates@latest --skill web-development/zustand-store-ts
Read more →
6

"Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime."

npx claude-code-templates@latest --skill web-development/hono
Read more →
web-development

drizzle-orm-expert

4

"Expert in Drizzle ORM for TypeScript — schema design, relational queries, migrations, and serverless database integration. Use when building type-safe database layers with Drizzle."

npx claude-code-templates@latest --skill web-development/drizzle-orm-expert
Read more →