claude-workspace

API client architecture for React and Next.js — typed fetch wrappers, interceptors, retry with backoff, request cancellation, pagination patterns, file uploads, and Next.js API route handlers. Use when building API clients, data fetching layers, or integrating with backends.

Authentication and authorization patterns for React and Next.js — NextAuth/Auth.js setup, middleware route protection, token refresh, session management, protected components, OAuth providers, role-based UI. Use when implementing login, protecting routes, or managing user sessions.

Production error handling architecture for React and Next.js — Error boundary hierarchies, custom error classes, global error normalization, Sentry integration, fallback UI strategies, toast vs inline vs full-page error patterns, and error recovery. Use when building error UIs, setting up monitoring, or handling failures gracefully.

Frontend SEO for React and Next.js — Metadata API, meta tags, canonical URLs, Open Graph, Twitter cards, robots.txt, sitemap, SSR/SSG/ISR rendering strategy, heading hierarchy, and crawlability. Use when building pages, setting up metadata, or optimizing for search visibility.

Deep-dive into Core Web Vitals — LCP, INP, CLS diagnosis and fix recipes for React/Next.js. Specific patterns for each metric with measurement tools, thresholds, and real-world fixes. Use when pages are slow, Lighthouse scores are low, or search ranking is affected by performance.

JSON-LD structured data and schema markup for React/Next.js — Organization, Article, Product, FAQ, BreadcrumbList, HowTo, WebSite with search. Also covers GEO/AEO optimization for AI search engines (Google AI Overviews, Perplexity, ChatGPT). Use when adding rich snippets, building product pages, or optimizing for AI search.

Frontend security audit covering XSS, injection, CSRF, secrets scanning, CSP headers, dependency vulnerabilities, and authentication patterns. Use when reviewing security, before launch, or when handling user input.

Design intelligence database using Claude Design and Google Stitch for generating production-grade UI. Use when creating mockups, prototypes, design systems, or converting descriptions to high-fidelity screens. Covers style selection, palette generation, typography pairing, and design-to-code export.

Create distinctive, production-grade frontend interfaces. Use when building landing pages, dashboards, marketing sites, or any UI that needs to look polished and intentional — not generic AI-generated.

WCAG 2.1 AA accessibility patterns for React — semantic HTML, ARIA, keyboard navigation, screen readers, focus management. Use when building interactive components, forms, modals, or auditing accessibility.

Frontend performance patterns — Core Web Vitals, bundle optimization, React rendering, lazy loading, memoization. Use when optimizing load times, investigating performance issues, or auditing before launch.

Four-phase debugging methodology with root cause analysis. Use when investigating bugs, fixing test failures, diagnosing unexpected behavior, or troubleshooting production issues. Emphasizes NO FIXES WITHOUT ROOT CAUSE FIRST.

CSS architecture, Tailwind patterns, responsive design, design tokens, and styling best practices. Use when implementing designs, setting up styling infrastructure, or debugging layout issues.

Modern React component architecture, composition patterns, hooks, and rendering strategies. Use when building UI components, refactoring component structure, or choosing between patterns.

State management strategies for React — local state, server state, global state, URL state. Use when deciding state architecture, implementing data fetching, or managing complex state.

Testing methodology, factory patterns, mocking strategies, and TDD workflow for React + TypeScript. Use when writing tests, setting up test infrastructure, or planning test coverage.