performance-security

This skill provides a comprehensive toolkit for building production-ready, performant, and secure React applications. It is designed for software engineers and front-end developers who need to optimize resource-heavy interfaces, mitigate security vulnerabilities, and ensure that their applications are accessible to all users. By integrating this skill into your workflow, you can streamline the implementation of modern React patterns while maintaining strict quality standards across your codebase.

• Advanced performance optimization techniques including route-level code-splitting, manual dynamic imports via lazy loading, and React Compiler integration to minimize re-renders.

• Asset lifecycle management focusing on Vite pipeline optimization, including image compression, WebP format adoption, and responsive source-set implementations.

• Security hardening workflows that prevent sensitive information exposure, such as improper handling of API keys and environment variables.

• Robust accessibility (a11y) support, providing clear guidance on semantic HTML structures, ARIA labels, keyboard navigation traps, and color contrast requirements.

• Integrated testing strategies using React Testing Library to prioritize user-centric queries over fragile implementation details.

• Users should apply these patterns when auditing existing components or initiating new high-traffic React projects.

• The skill includes a dedicated performance checklist for tracking bundle health and lighthouse-like metrics.

• Accessibility verification focuses on practical steps for WCAG AA compliance, including screen reader compatibility and focus management.

• Use the provided React Compiler guidelines to write cleaner, side-effect-free code that maximizes the efficiency of automatic memoization.

• Inputs typically involve existing React components or routing structures, while outputs include optimized code blocks, security patches, and accessibility audit improvements.