How does this skill improve web bundle sizes?

It provides patterns for dynamic imports and suggests lightweight alternatives to heavy libraries, such as using lodash-es instead of full lodash imports.

Does it support web-only features like Lazy Loading?

Yes, it provides patterns for platform-specific optimizations, such as using native web 'loading=lazy' attributes for images when running on the web platform.

Can this skill help with scroll performance?

Yes, it includes optimized FlatList configurations specifically tuned for web browsers, including properties like windowSize and removeClippedSubviews.

Will these optimizations break my mobile app?

No, the patterns are designed to be cross-platform compatible, often using Platform.OS checks to ensure web-specific optimizations only run in the browser.

React Native Web Performance

Name: React Native Web Performance
Author: TheBushidoCollective

byTheBushidoCollective

•

Mobile Development

Optimizes React Native Web applications using advanced patterns for code splitting, bundle reduction, and efficient rendering.

Acerca de

The React Native Web Performance skill equips Claude with specialized knowledge to audit and enhance the efficiency of cross-platform applications running in the browser. It provides implementation patterns for dynamic code splitting via Suspense, list virtualization with FlatList, and memoization techniques to minimize re-renders. By integrating web-specific optimizations like native image lazy loading and Intersection Observer support, this skill ensures that React Native applications remain lightweight and responsive, helping developers avoid common anti-patterns that lead to bloated bundles and sluggish UI performance.

Características Principales

Provides high-performance configurations for virtualized lists and large datasets
Optimizes rendering via advanced React.memo, useMemo, and useCallback patterns
Applies web-specific performance enhancements like native image lazy loading and debouncing
39 GitHub stars
Implements dynamic code splitting and lazy loading patterns for smaller initial bundles
Identifies and corrects performance anti-patterns in StyleSheet and component structure

Casos de Uso

Auditing existing React Native components for web-specific performance regressions
Fixing frame drops and laggy scroll performance in data-heavy web interfaces
Reducing the initial load time and bundle size of complex React Native Web applications

Acerca de

Características Principales

Provides high-performance configurations for virtualized lists and large datasets
Optimizes rendering via advanced React.memo, useMemo, and useCallback patterns
Applies web-specific performance enhancements like native image lazy loading and debouncing
39 GitHub stars
Implements dynamic code splitting and lazy loading patterns for smaller initial bundles
Identifies and corrects performance anti-patterns in StyleSheet and component structure

Casos de Uso

Auditing existing React Native components for web-specific performance regressions
Fixing frame drops and laggy scroll performance in data-heavy web interfaces
Reducing the initial load time and bundle size of complex React Native Web applications