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

Ready to run

npx skills add https://github.com/wanghaisheng/web3-scaffold-app-monorepo --skill 1k-cross-platform

💬 Prompt for ChatGPT / Claude Chat▼

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.