onekeyhq/app-monorepo/1k-cross-platform

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

OneKey cross-platform patterns, platform files, platformEnv, and supported OS/SDK requirements.

Install

npx vskill@latest install onekeyhq/app-monorepo/1k-cross-platform

SKILL.md

Cross-Platform Development

Patterns for writing platform-specific code in OneKey.

Platform Extensions

Use platform extensions for platform-specific implementations:

ExtensionPlatform
.native.tsReact Native (iOS/Android)
.web.tsWeb platform
.desktop.tsDesktop (Electron)
.ext.tsBrowser extension

Platform Detection

ALWAYS use `platformEnv` for platform detection:

typescript
// ✅ CORRECT
import platformEnv from '@onekeyhq/shared/src/platformEnv';
if (platformEnv.isNative) {
// React Native specific code
}
if (platformEnv.isWeb) {
// Web specific code
}
if (platformEnv.isDesktop) {
// Desktop (Electron) specific code
}
if (platformEnv.isExtension) {
// Browser extension specific code
}
// ❌ FORBIDDEN - Direct platform checks
if (typeof window !== 'undefined') { }
if (process.env.REACT_APP_PLATFORM === 'web') { }

Available Platform Flags

typescript
platformEnv.isNative // React Native (iOS or Android)
platformEnv.isWeb // Web browser
platformEnv.isDesktop // Electron desktop app
platformEnv.isExtension // Browser extension
platformEnv.isIOS // iOS specifically
platformEnv.isAndroid // Android specifically
platformEnv.isWebEmbed // Embedded web components

Platform-Specific File Structure

MyComponent/
├── index.ts # Main entry, common logic
├── MyComponent.tsx # Shared component
├── MyComponent.native.tsx # React Native specific
├── MyComponent.web.tsx # Web specific
├── MyComponent.desktop.tsx # Desktop specific
└── MyComponent.ext.tsx # Extension specific

The bundler automatically resolves the correct file based on platform.

Example: Platform-Specific Storage

typescript
// storage.ts - shared interface
export interface IStorage {
get(key: string): Promise<string | null>;
set(key: string, value: string): Promise<void>;
}
// storage.native.ts
import AsyncStorage from '@react-native-async-storage/async-storage';
export const storage: IStorage = {
get: (key) => AsyncStorage.getItem(key),
set: (key, value) => AsyncStorage.setItem(key, value),
};
// storage.web.ts
export const storage: IStorage = {
get: async (key) => localStorage.getItem(key),
set: async (key, value) => localStorage.setItem(key, value),
};
// storage.desktop.ts
import { ipcRenderer } from 'electron';
export const storage: IStorage = {
get: (key) => ipcRenderer.invoke('storage:get', key),
set: (key, value) => ipcRenderer.invoke('storage:set', key, value),
};

Detailed Guide

For comprehensive cross-platform patterns and platform considerations, see cross-platform.md.

For current development tool and minimum platform versions, see platform-requirements.md. Verify version values against the referenced repository files before relying on them.

Topics covered:

  • Platform extensions and file structure
  • Platform detection with platformEnv
  • Platform-specific imports
  • Platform considerations (Extension, Mobile, Desktop, Web)
  • Real-world examples
  • Cross-platform checklist

Platform Considerations

Extension (Chrome, Firefox, Edge, Brave)
  • MV3/service worker lifetimes, permissions, CSP, background script limitations
Mobile (iOS/Android)
  • WebView limitations, native modules, background/foreground states, deep linking
Desktop (Electron)
  • Security boundaries, IPC communication, file system access
Web
  • CORS restrictions, storage limitations, XSS prevention, bundle size

Checklist

  • [ ] Platform-specific code uses correct file extension
  • [ ] Uses platformEnv instead of direct checks
  • [ ] Common logic extracted to shared files
  • [ ] Tested on all target platforms

Related Skills

  • /1k-coding-patterns - General coding patterns
  • /1k-architecture - Project structure and imports

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/onekeyhq/app-monorepo/1k-cross-platform/badge)](https://verified-skill.com/skills/onekeyhq/app-monorepo/1k-cross-platform)

Something wrong with this skill or its page? Tell us.