Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
CSS architecture, Tailwind patterns, responsive design, design tokens, and styling best practices. Use when implementing designs, setting up styling infrastructure, or debugging layout issues.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Patterns for building multilingual React and Next.js applications with next-intl, react-intl, locale routing, RTL support, and pluralization.
Skill Claude CodeCodex
Workspace architecture patterns for Turborepo, Nx, and pnpm workspaces. Scalable multi-package project structures with shared configs, optimized builds, and dependency management.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Modern React component architecture, composition patterns, hooks, and rendering strategies. Use when building UI components, refactoring component structure, or choosing between patterns.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
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…
Skill Claude CodeCodex
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.
Skill Claude CodeCodex
Testing methodology, factory patterns, mocking strategies, and TDD workflow for React + TypeScript. Use when writing tests, setting up test infrastructure, or planning test coverage.
MCP server Claude CodeCodexCursor +2
Lets the agent work with GitHub: search code, read and create issues and pull requests, and manage repositories through the GitHub API. Runs locally from the @modelcontextprotocol/server-github npm package. Needs 1 environment variable to run.
MCP server Claude CodeCodexCursor +2
Gives the agent read and write access to a set of allowed directories on the local filesystem. Runs locally from the @modelcontextprotocol/server-filesystem npm package.
Instructions file
Instructions for Piyush8296/claude-workspace, covering claude workspace — frontend engineering, quick facts, commands, code style and git.