How does this skill improve React performance?

The skill provides patterns for automatic code-splitting, React Compiler compliance, and asset optimization using Vite to ensure minimal bundle sizes and fast load times.

What tools are supported for performance analysis?

The skill integrates best practices for Vite bundle analysis, Rollup visualizers, and React DevTools to monitor performance optimizations like memoization.

Does it help with web accessibility (a11y) compliance?

Yes, it includes comprehensive guides for semantic HTML, ARIA attributes, keyboard focus management, and accessible testing patterns using React Testing Library.

Can this skill help prevent security leaks?

It implements strict protocols for environment variable usage to prevent secret exposure and utilizes Zod for validating all external data sources.

Frontend Performance & Security

Name: Frontend Performance & Security
Author: MadAppGang

byMadAppGang

•

177

•

Security & Testing

Optimizes React applications through production-ready performance patterns, accessibility standards, and comprehensive security hardening.

This skill provides a specialized framework for building high-performance, inclusive, and secure React applications. It guides developers through critical optimization techniques such as automatic code-splitting, React Compiler-friendly coding patterns, and efficient asset management. Beyond speed, it enforces web accessibility (a11y) standards using semantic HTML and keyboard navigation patterns, while simultaneously hardening application security through secret management, Zod-based data validation, and XSS prevention. It is an essential companion for developers performing production readiness reviews or auditing existing codebases for technical debt.

Key Features

01Asset pipeline optimization and bundle analysis integration

02Accessibility auditing for semantic HTML, ARIA roles, and keyboard navigation

03177 GitHub stars

04Performance optimization via code-splitting and React Compiler patterns

05Security hardening including secret prevention and XSS protection

06Runtime data validation using Zod for untrusted API responses

Use Cases

01Implementing WCAG-compliant accessibility features in complex UI components

02Auditing React applications for performance bottlenecks and bundle size issues

03Securing frontend workflows against common vulnerabilities like XSS and data leakage

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code performance-security

For use in Claude.ai and ChatGPT

Download Skill