How does this skill help with React performance?

It provides patterns for the React Compiler, code-splitting with TanStack Router, and asset optimization techniques using Vite to minimize bundle size and improve load times.

Does it support bundle analysis?

Yes, it includes instructions for using rollup-plugin-visualizer with Vite to identify and reduce heavy dependencies in your production build.

Can it help with WCAG compliance?

Yes, it offers guidance on semantic HTML, ARIA roles, keyboard navigation, and testing accessible queries using React Testing Library to meet WCAG AA standards.

What security measures are included?

The skill covers environment variable management to prevent secret leaks, XSS prevention using sanitization, and data validation at API boundaries with Zod.

Frontend Performance & Security

Name: Frontend Performance & Security
Author: involvex

byinvolvex

セキュリティとテスト

Optimizes React applications using production-ready performance patterns, accessibility standards, and security hardening protocols.

概要

The Frontend Performance & Security skill provides a comprehensive framework for building high-quality React applications that are fast, inclusive, and secure. It guides developers through modern performance optimizations like code-splitting and React Compiler-friendly patterns, ensures accessibility through semantic HTML and ARIA best practices, and enforces critical security measures such as Zod validation and XSS prevention. This skill is essential for transitioning from local development to production-grade software where user experience, accessibility compliance, and data safety are paramount.

主な機能

Automatic and manual code-splitting strategies for optimized bundle sizes
0 GitHub stars
Security hardening via environment variable management and Zod validation
Asset optimization and bundle analysis workflows for Vite-based projects
Comprehensive accessibility (a11y) guidelines for WCAG compliance
React Compiler-friendly coding patterns for automatic performance gains

ユースケース

Optimizing React application load times and runtime performance for production
Securing frontend applications against XSS, secret leaks, and untrusted API data
Implementing keyboard navigation and ARIA patterns for accessible user interfaces

概要

主な機能

Automatic and manual code-splitting strategies for optimized bundle sizes
0 GitHub stars
Security hardening via environment variable management and Zod validation
Asset optimization and bundle analysis workflows for Vite-based projects
Comprehensive accessibility (a11y) guidelines for WCAG compliance
React Compiler-friendly coding patterns for automatic performance gains

ユースケース

Optimizing React application load times and runtime performance for production
Securing frontend applications against XSS, secret leaks, and untrusted API data
Implementing keyboard navigation and ARIA patterns for accessible user interfaces