원클릭으로 Manus에서 모든 스킬 실행

시작하기

$pwd:

react-native-best-practices

Name: React Native Best Practices
Author: 2SSK

// React Native development. Cross-platform code, native modules, performance. Use when building mobile apps.

Manus에서 실행

$ git log --oneline --stat

stars:244

forks:9

updated:2026년 4월 29일 03:35

SKILL.md

readonly

name	react-native-best-practices
description	React Native development. Cross-platform code, native modules, performance. Use when building mobile apps.
compatibility	opencode

React Native Best Practices

Cross-platform mobile development with React Native.

Core Principles

Cross-platform first: 80%+ shared code
Native when needed: Platform-specific modules
Performance: Cold start < 1.5s, memory < 120MB
Offline-first: Local data, sync later

Cross-Platform Code

// Platform.select for different implementations
import { Platform } from 'react-native';

const styles = Platform.select({
  ios: { paddingTop: 48 },
  android: { paddingTop: 24 },
});

Navigation

// React Navigation
import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
  </Stack.Navigator>
</NavigationContainer>

State Management

// Zustand for simple state
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

Offline Storage

// WatermelonDB for offline-first
import { Database } from '@nozbe/watermelondb';

const database = new Database({
  schema: appSchema,
  modelClasses: [User, Post],
});

Native Modules

// TurboModule for New Architecture
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  startActivity(options: string): Promise<void>;
}
export default TurboModuleRegistry.getEnforcing<Spec>('CameraModule');

Push Notifications

// @notifee/react-native
import messaging from '@react-native-firebase/messaging';

await messaging().requestPermission();
const token = await messaging().getToken();

Build Commands

# iOS
cd ios && pod install && cd ..
npm run build:ios

# Android
cd android && ./gradlew assembleRelease

Quality Gates

related-skills.json

같은 저장소

cpp-best-practices.md

from "2SSK/dot-files"

C++ development best practices. Modern C++20/23, RAII, zero-overhead abstractions, safety. Use when writing C++ code.

2026-04-29244

dockerfile-best-practices.md

from "2SSK/dot-files"

Docker and container best practices. Multi-stage builds, security, optimization. Use when creating Dockerfiles.

2026-04-29244

go-best-practices.md

from "2SSK/dot-files"

Go development best practices. Idiomatic Go, error handling, concurrency patterns, testing. Use when writing Go code.

2026-04-29244

observability.md

from "2SSK/dot-files"

Observability best practices. Logging, metrics, tracing, alerting. Essential for production services. Use for any backend service.

2026-04-29244

tdd.md

from "2SSK/dot-files"

Test-Driven Development workflow. Write failing test first, implement code to pass, then refactor. Essential for all languages: Go, TypeScript, C++, Python. Use before any implementation task.

2026-04-29244

ship.md

from "2SSK/dot-files"

Use when the user wants to commit, push, and open a pull request for the current changes. Stages relevant files, writes a descriptive commit message, pushes the branch, opens a PR against main, and posts an /oc review comment so opencode automatically reviews and approves if ready.

2026-04-07244

package.json

"author": "2SSK"

"repository": "2SSK/dot-files"

GitHub 저장소 열기 Creator 저장소 보기

$ install --global

$ download --local

Manus에서 실행

$ useful --forSOC

소프트웨어 개발자컴퓨터 및 수학직15-1252L4

React Native Best Practices

Cross-platform mobile development with React Native.

Core Principles

Cross-platform first: 80%+ shared code

Native when needed: Platform-specific modules

Performance: Cold start < 1.5s, memory < 120MB

Offline-first: Local data, sync later

Cross-Platform Code

// Platform.select for different implementations import { Platform } from 'react-native'; const styles = Platform.select({ ios: { paddingTop: 48 }, android: { paddingTop: 24 }, });

Navigation

// React Navigation import { NavigationContainer } from '@react-navigation/native'; <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer>

State Management

// Zustand for simple state import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })), }));

Offline Storage

// WatermelonDB for offline-first import { Database } from '@nozbe/watermelondb'; const database = new Database({ schema: appSchema, modelClasses: [User, Post], });

Native Modules

// TurboModule for New Architecture import type { TurboModule } from 'react-native'; import { TurboModuleRegistry } from 'react-native'; export interface Spec extends TurboModule { startActivity(options: string): Promise<void>; } export default TurboModuleRegistry.getEnforcing<Spec>('CameraModule');

Push Notifications

// @notifee/react-native import messaging from '@react-native-firebase/messaging'; await messaging().requestPermission(); const token = await messaging().getToken();

Build Commands

# iOS cd ios && pod install && cd .. npm run build:ios # Android cd android && ./gradlew assembleRelease

Quality Gates

react-native-best-practices

React Native Best Practices

Core Principles

Cross-Platform Code

Navigation

State Management

Offline Storage

Native Modules

Push Notifications

Build Commands

Quality Gates

이 저장소의 다른 Skills

이 저장소의 다른 Skills

React Native Best Practices

Core Principles

Cross-Platform Code

Navigation

State Management

Offline Storage

Native Modules

Push Notifications

Build Commands

Quality Gates