skills.rest
wanghaisheng
wanghaishengCOMMUNITY
Explore all skills by this author →
Website𝕏@edwin_uestcGitHub

1k-cross-platform

Manage platform-specific code across web, mobile, desktop, and extension targets.

Updated Apr 15, 2026
Search Tags:#mobile#cross-platform#desktop#web#platform-extensions#platformEnv
One-click install
npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-cross-platform
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 1k-cross-platform
Source: https://github.com/wanghaisheng/web3-scaffold-app-monorepo/tree/main/.claude/skills/1k-cross-platform
Command: npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-cross-platform

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build and maintain a single codebase that targets Web, Mobile, Desktop, and Browser Extensions by organizing platform-specific code alongside shared logic, using a centralized platformEnv for deterministic behavior.

Core Features & Use Cases

  • Platform-specific extensions: .native.ts for React Native, .web.ts for Web, .desktop.ts for Desktop, and .ext.ts for browser extensions.
  • Platform detection with platformEnv to avoid direct runtime checks and to clearly separate platform branches.
  • Unified file structure that promotes reusability and predictable builds across all target platforms.
  • Use Case: Create a cross-platform UI component that renders platform-appropriate behavior with a single source of truth.

Quick Start

Create a cross-platform component by adding shared logic and platform-specific files (e.g., MyComponent.native.ts, MyComponent.web.ts) and use platformEnv to branch behavior.

Frequently Asked Questions about 1k-cross-platform

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share code across web, mobile, desktop, and browser extensions in one project?▼

Cross-platform development organizes shared logic alongside platform-specific overrides using dedicated file extensions like .native.ts, .web.ts, .desktop.ts, and .ext.ts to ensure deterministic behavior across all targets.

What is the best way to separate platform-specific code from shared business logic?▼

Separating platform-specific code involves applying a centralized platformEnv detection strategy and enforcing a unified file structure, avoiding direct runtime checks to clearly distinguish shared logic from platform branches.

How do I avoid direct runtime checks when detecting platforms in a cross-platform app?▼

Avoiding direct runtime checks requires using a centralized platformEnv to detect the target environment, which clearly separates platform branches and enforces deterministic builds without scattered conditional logic.

Does this cross-platform pattern work for building reusable UI components for React Native and Web?▼

This cross-platform pattern supports building reusable UI components by maintaining a single source of truth, allowing React Native and Web targets to render platform-appropriate behavior through specific file extensions.

What file extensions are used to manage platform-specific code for desktop and browser extensions?▼

Platform-specific code uses .desktop.ts for Desktop targets and .ext.ts for browser extensions, promoting reusability and predictable builds by keeping platform overrides in distinct files.

Why do I need a centralized platformEnv for cross-platform builds?▼

A centralized platformEnv is needed to achieve deterministic builds by managing platform-specific behavior predictably, ensuring consistent file structure and clear separation of shared logic across web, mobile, desktop, and extension targets.

Related Skills

Explore More Software Engineering Skills→
EstomEstom

react-native-expert

Build React Native and Expo apps with TypeScript, navigation, and FlatList patterns.

Community
Advanced
json-choijson-choi

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS workflows.

Community
Intermediate
travisjneumantravisjneuman
88

kotlin-multiplatform

Create and manage Kotlin Multiplatform projects with shared business logic and Compose UI.

Community
Advanced
Paxeer-NetworkPaxeer-Network
3

cross-platform

Isolate platform-specific code using file extensions and a centralized platformEnv utility.

Official
Intermediate