performance-security

This skill provides a comprehensive suite of production-ready patterns for modern React development, focusing on high-performance execution, accessibility (a11y), and rigorous security hardening. It is designed for senior frontend engineers and full-stack developers tasked with shipping high-scale, robust web applications. The skill assists in optimizing React component lifecycles using the latest React Compiler patterns, implementing effective code-splitting via TanStack Router and Vite, and ensuring that asset loading is performant through modern formats like WebP and SVG.

Beyond performance, it emphasizes critical accessibility standards by enforcing semantic HTML, proper ARIA usage, keyboard navigation support, and WCAG-compliant color contrast ratios. Security modules help developers avoid common pitfalls such as hardcoded secrets, insecure environment variable handling, and state mutation anti-patterns. By leveraging React Testing Library with accessible role-based queries, this skill ensures that security and performance gains are verified through automated testing rather than manual guesswork.

• Advanced code-splitting techniques using dynamic imports and route-level lazy loading to minimize bundle size.

• React Compiler optimization guidance, identifying memoization opportunities and pure component structure.

• Comprehensive accessibility auditing including semantic markup, focus traps, and screen reader compatibility validation.

• Image and asset pipeline optimization using modern formats and responsive srcset patterns.

• Security best practices for client-side applications, including secret management via import.meta.env.

• Performance diagnostics using Vite build analysis and visualizer tools to track chunk sizes.

• Ensure components remain pure to allow the React Compiler to perform automatic memoization effectively.

• Use screen reader testing (NVDA/JAWS/VoiceOver) and browser accessibility panels to verify contrast and semantic structure.

• Always replace div-based interactive elements with native semantic HTML buttons or anchors to maintain keyboard accessibility.

• Use only environment variables prefixed with VITE_ to prevent accidental exposure of sensitive API keys in the production bundle.

• Integrate rollup-plugin-visualizer into the build process to regularly inspect and prune unnecessary dependencies.