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

0•

보안 및 테스팅

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.

주요 기능

01Automatic and manual code-splitting strategies for optimized bundle sizes

020 GitHub stars

03Security hardening via environment variable management and Zod validation

04Asset optimization and bundle analysis workflows for Vite-based projects

05Comprehensive accessibility (a11y) guidelines for WCAG compliance

06React Compiler-friendly coding patterns for automatic performance gains

사용 사례

01Optimizing React application load times and runtime performance for production

02Securing frontend applications against XSS, secret leaks, and untrusted API data

03Implementing keyboard navigation and ARIA patterns for accessible user interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add involvex/involvex-claude-marketplace performance-security

For use in Claude.ai and ChatGPT

Download Skill