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.

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.

Key Features

01Provides high-performance configurations for virtualized lists and large datasets

02Optimizes rendering via advanced React.memo, useMemo, and useCallback patterns

03Applies web-specific performance enhancements like native image lazy loading and debouncing

0439 GitHub stars

05Implements dynamic code splitting and lazy loading patterns for smaller initial bundles

06Identifies and corrects performance anti-patterns in StyleSheet and component structure

Use Cases

01Auditing existing React Native components for web-specific performance regressions

02Fixing frame drops and laggy scroll performance in data-heavy web interfaces

03Reducing the initial load time and bundle size of complex React Native Web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han react-native-web-performance

For use in Claude.ai and ChatGPT

Download Skill