How does this skill handle Expo Router platform-specific files?

It enforces a rule where platform-specific extensions in the app/ directory require a base version (e.g., index.tsx) to ensure route universality across all platforms.

Can this skill help with APIs that don't work on the web?

Yes, it identifies web-incompatible APIs like MediaLibrary or Haptics and provides patterns for implementing web-friendly alternatives using conditional checks.

When should I use Platform.OS instead of platform-specific file extensions?

Use Platform.OS for small, inline differences (1-5 lines) or styles. Use file extensions like .web.tsx or .native.tsx for significant logic differences or when different libraries are required per platform.

What is the resolution priority for Metro bundler files?

Metro resolves files in this order: .ios.tsx/.android.tsx (most specific), then .native.tsx, then .web.tsx, and finally .tsx as the universal fallback.

Expo Cross-Platform Compatibility

Name: Expo Cross-Platform Compatibility
Author: CodySwannGT

byCodySwannGT

•

Mobile Development

Enforces architectural best practices for Expo applications to ensure seamless performance across iOS, Android, and web platforms.

This skill serves as a governance framework for developers building universal Expo applications, ensuring that every feature and component functions correctly across mobile and web environments. It provides automated guidance on choosing between runtime checks and platform-specific file extensions, handles the nuances of Expo Router route universality, and identifies common pitfalls like web-incompatible APIs. By enforcing standardized styling patterns for shadows and gestures, it helps maintain a high-quality, consistent user experience regardless of the target platform.

主な機能

01Automated enforcement of platform-specific file extension resolution priority

02Validation of cross-platform styling for shadows, layouts, and gesture handling

03Enforcement of base-version rules for Expo Router navigation files

041 GitHub stars

05Guidance for implementing runtime checks using Platform.OS and Platform.select

06Detection and mitigation of web-incompatible native APIs

ユースケース

01Developing universal UI components that require different underlying libraries for web and native platforms.

02Refactoring existing React Native components to support Expo Web without breaking mobile functionality.

03Auditing large Expo codebases for platform-specific regressions and inconsistent styling.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add codyswanngt/lisa cross-platform-compatibility

For use in Claude.ai and ChatGPT

主な機能

01Automated enforcement of platform-specific file extension resolution priority

02Validation of cross-platform styling for shadows, layouts, and gesture handling

03Enforcement of base-version rules for Expo Router navigation files

041 GitHub stars

05Guidance for implementing runtime checks using Platform.OS and Platform.select

06Detection and mitigation of web-incompatible native APIs

ユースケース

01Developing universal UI components that require different underlying libraries for web and native platforms.

02Refactoring existing React Native components to support Expo Web without breaking mobile functionality.

03Auditing large Expo codebases for platform-specific regressions and inconsistent styling.