Toolverse
All skills

react-native-best-practices

by callstackincubator

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Mobile
Views
27

About this skill

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

How to use

  1. Zainstaluj umiejętność w swoim agencie Claude/Copilot, dodając repozytorium https://github.com/callstackincubator/agent-skills do konfiguracji skills. Umiejętność będzie dostępna pod nazwą react-native-best-practices.

  2. Kiedy debugujesz problemy z wydajnością aplikacji React Native (zacinające animacje, wolne UI, wysokie zużycie pamięci), wyzwij umiejętność z opisem problemu — na przykład "Moja lista przewija się ze spadkami FPS" lub "Aplikacja zużywa zbyt dużo pamięci".

  3. Umiejętność zwróci ci priorytetowe wytyczne podzielone na kategorie: FPS i re-rendy (priorytet 1), rozmiar bundla (priorytet 2), czas ładowania TTI, wydajność natywna i zarządzanie pamięcią. Każda wytyczna zawiera wzorce kodu (niepoprawny vs. poprawny), komendy shell do pomiaru oraz ocenę wpływu (CRITICAL, HIGH, MEDIUM).

  4. Zastosuj sugerowane optymalizacje do swojego kodu — na przykład użyj FlashList zamiast FlatList, zoptymalizuj Hermes, zmniejsz blokowanie wątku JS lub napraw memory leaki. Każda wytyczna zawiera szczegółowy opis "Deep Dive" z warunkami wstępnymi i krokami.

  5. Jeśli pracujesz nad natywnym modułem (Turbo Modules), profilujesz aplikację lub przeglądasz kod pod kątem wydajności, odwołaj się do odpowiednich sekcji umiejętności — tabele referencyjne i komendy diagnostyczne przyspieszą analizę.

  6. Powtarzaj pomiary wydajności (FPS, TTI, rozmiar bundla) po każdej optymalizacji, aby potwierdzić poprawę — umiejętność zawiera komendy do profilowania, które pomogą ci śledzić postęp.

Related skills

slidev

by XIYO

Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev.

Mobile
223353

senior-architect

by alirezarezvani

Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin, Flutter, Postgres, GraphQL, Go, Python. Includes architecture diagram generation, system design patterns, tech stack

Mobile
184296

automating-mobile-app-testing

by jeremylongshore

This skill enables automated testing of mobile applications on iOS and Android platforms using frameworks like Appium, Detox, XCUITest, and Espresso. It generates end-to-end tests, sets up page object models, and handles platform-specific elements. Use this skill when the user

Mobile
17142

create-plan

by antinomyhq

Generate detailed implementation plans for complex tasks. Creates comprehensive strategic plans in Markdown format with objectives, step-by-step implementation tasks using checkbox format, verification criteria, risk assessments, and alternative approaches. Use when users need

Mobile
13108

csharp-developer

by zenobi-us

Expert C# developer specializing in modern .NET development, ASP.NET Core, and cloud-native applications. Masters C# 12 features, Blazor, and cross-platform development with emphasis on performance and clean architecture.

Mobile
37126

app-store-optimization

by davila7

Complete App Store Optimization (ASO) toolkit for researching, optimizing, and tracking mobile app performance on Apple App Store and Google Play Store

Mobile
1153