react-native-design작성자 Seth Hobson

React Native Design 스킬.

모바일 앱 디자인을 위한 Claude Code 및 Codex 스킬: React Native 스타일링, 내비게이션 및 Reanimated 애니메이션을 지원합니다.

모바일 앱
UI 코드

wshobson/agents · plugins/ui-design/skills/react-native-design/SKILL.mdSKILL.md

--- name: react-native-design description: Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

2026-09-14 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 3,949자

01 기능

Claude Code와 Codex에서 react-native-design Skill이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 크로스 플랫폼 모바일 애플리케이션 구축을 위한 React Native 스타일링 패턴, React Navigation 6+, Reanimated 3을 다룹니다. 스타일링을 위한 StyleSheet와 styled-components, 다양한 화면 크기를 위한 반응형 레이아웃, 플랫폼별 iOS 및 Android 디자인, Gesture Handler를 활용한 제스처 기반 인터랙션, 성능 최적화 기법을 다룹니다.

이 스킬은 UI 스레드에서 실행되는 60fps 애니메이션, 올바른 내비게이션 타입 정의, 실제 기기 테스트 방식을 통해 네이티브급 사용자 경험을 만드는 데 초점을 맞춥니다.

산출물

TypeScript 인터페이스, StyleSheet 정의, Reanimated 애니메이션을 갖춘 React Native 컴포넌트
60fps 성능을 위해 useSharedValue와 useAnimatedStyle을 사용하는 Reanimated 3 기반 애니메이션 컴포넌트

예시 프롬프트 보기 ↗

작동 방식

01
StyleSheet로 스타일링하기
더 나은 성능을 위해 인라인 스타일 대신 StyleSheet.create를 사용해 컴포넌트 스타일을 정의합니다.
02
타입이 지정된 라우트로 내비게이션 구축하기
화면 간 타입 안전성을 보장하기 위해 모든 내비게이터에 TypeScript ParamList 타입 정의를 사용하는 React Navigation 6+로 내비게이션을 구현합니다.
03
UI 스레드에서 애니메이션 실행하기
useSharedValue와 useAnimatedStyle을 사용하여 UI 스레드에서 실행되는 Reanimated 3 워크릿으로 60fps 성능의 애니메이션을 구현합니다.
04
GestureDetector로 제스처 처리하기
Gesture Handler를 사용하여 제스처 기반 인터랙션을 구현하고, GestureDetector로 제스처를 감싸며, simultaneousHandlers로 충돌을 해결합니다.
05
렌더링 최적화하기
불필요한 리렌더링을 방지하려면 React.memo와 useCallback을 사용합니다. 리스트의 경우 ScrollView와 map 대신 항상 FlatList를 사용하십시오.

02 적합성 확인

react-native-design 스킬 사용 시점

이러한 종류의 모바일 앱 디자인 작업에는 Claude Code 또는 Codex에서 react-native-design skill을 사용합니다. 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

React Native로 크로스 플랫폼 모바일 앱 구축
React Navigation 6+ 로 내비게이션 구현
Reanimated 3으로 고성능 애니메이션 생성
다양한 화면 크기에 맞는 반응형 레이아웃 구축
Gesture Handler로 제스처 기반 인터랙션 만들기

한계 인지하기

React Native 필요SKILL.md에서 이 종속성을 명시합니다. 프로젝트에 없으면 스킬이 작동하지 않습니다.

제공할 사항

커스텀 폰트expo-font나 react-native-asset을 사용해 로드한 폰트 파일로 앱에 커스텀 타이포그래피를 적용합니다.

03 스킬 내부

react-native-design 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에 설정하는 5가지 구체적 지침, 기본값, 한계 — 결과를 바꾸는 파일의 부분입니다.

내비게이션을 위한 TypeScript
모든 내비게이터에 대해 ParamList 타입을 정의하여 내비게이션 경계 간 타입 안전성을 유지합니다.
안전 영역 처리
노치가 있는 iPhone과 컷아웃이 있는 Android 기기를 처리하려면 SafeAreaView 또는 useSafeAreaInsets를 사용합니다.
컴포넌트 메모이제이션
불필요한 컴포넌트 리렌더링을 방지하고 성능을 최적화하려면 React.memo와 useCallback을 사용합니다.
실제 기기 테스트
시뮬레이터와 에뮬레이터의 성능은 실제 기기 성능과 다르므로 실제 기기에서 테스트합니다.
애니메이션 정리하기
메모리 누수를 방지하려면 useEffect에서 애니메이션을 취소하고 정리 작업을 수행합니다.

04 활용하기

Claude Code 또는 Codex에 react-native-design 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code 또는 Codex에 react-native-design 설치

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/wshobson/agents --skill react-native-design

plugins/ui-design/skills/react-native-design/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 모바일 앱 디자인 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Build a product card component for [my e-commerce app] that shows a product image, title, and price. Add a spring animation that scales the card down to 0.97 when pressed, and use React Navigation to navigate to a detail screen when tapped. Make sure it handles safe areas on notched devices and uses TypeScript for all props.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

출력을 수락하기 전에 대화 기록과 파일에서 다음을 확인하십시오:

결과는 이 skill의 카탈로그 목록과 같이 UI 코드로 제공됩니다.
에이전트가 결과를 생성하기 전에 계획 또는 스크립트에서 react-native-design 스킬을 명시합니다.
프로젝트에 React Native가 있어야 합니다. 스킬이 이를 대체하지 않습니다.
사용자의 콘텐츠, 이름 및 숫자는 출력에서 변경되지 않습니다.

OpenDesign에서 SKILL.md 링크를 통해 react-native-design을 가져옵니다: Plugins → Add → Skill → Import from link를 선택한 뒤 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: plugins/ui-design/skills/react-native-design/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 4236bb9
License: MIT LICENSE에서.
리포지토리 스타: 39,635 이 카탈로그에 18개의 스킬을 포함하는 wshobson/agents 저장소 전체에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. react-native-design의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

이 스킬을 사용해야 할 때React Native 앱, 내비게이션, 애니메이션, 스타일링, 플랫폼별 디자인에 관한 8가지 시나리오를 나열합니다
핵심 개념8KB 스킬 본문 제한으로 인해 references/details.md로 이동했으며, 원래는 6471바이트였습니다
빠른 시작 컴포넌트Reanimated 스프링 애니메이션과 StyleSheet 스타일링을 적용한 ItemCard의 TypeScript 예제
모범 사례TypeScript, 메모이제이션, UI 스레드 애니메이션, StyleSheet, 안전 영역, 기기 테스트, FlatList, Platform.select를 다루는 여덟 가지 규칙
일반적인 문제제스처, 내비게이션 타입, 애니메이션 끊김, 메모리 누수, 폰트, 안전 영역에 대한 여섯 가지 문제와 해결책

스킬 자체 설명

React Native 스타일링, 내비게이션, Reanimated 애니메이션을 마스터하여 크로스 플랫폼 모바일 개발을 수행합니다. React Native 앱 구축, 내비게이션 패턴 구현 또는 고성능 애니메이션 생성 시 사용하십시오.

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 3,949자입니다. GitHub에서 전체 파일 읽기.

React Native Design

실제 모바일 앱 디자인 작업에서 react-native-design을 실행하십시오.

OpenDesign를 다운로드하고, SKILL.md 링크에서 react-native-design을 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/wshobson/agents --skill react-native-design

Claude Code와 Codex에서 react-native-design Skill이 하는 일

스킬 자체의 표현으로

작동 방식

react-native-design 스킬 사용 시점

적합한 경우

한계 인지하기

제공할 사항

react-native-design 스킬이 Claude Code와 Codex에 부여하는 규칙

내비게이션을 위한 TypeScript

안전 영역 처리

컴포넌트 메모이제이션

실제 기기 테스트

애니메이션 정리하기

Claude Code 또는 Codex에 react-native-design 설치

Claude Code 또는 Codex에 react-native-design 설치

스킬에 첫 모바일 앱 디자인 작업 부여

첫 번째 결과 확인

출처, 라이선스 및 검증

SKILL.md 내부

Claude Code 및 Codex를 위한 관련 디자인 스킬

실제 모바일 앱 디자인 작업에서 react-native-design을 실행하십시오.