스킬 building-native-ui
📱
building-native-ui
안전 ⚙️
외부 명령어🌐
네트워크 접근📁
파일 시스템 액세스
إنشاء واجهة مستخدم iOS أصلية باستخدام Expo Router
يتطلب بناء تطبيقات iOS فهم المكونات الأصلية وتConvventions النظام الأساسي وأنماط Expo Router. توفر هذه المهارة إرشادات شاملة لإنشاء واجهات متقنة ومتوافقة مع Apple باستخدام أنماط Expo الحديثة.
지원: Claude Codex Code(CC)
1
스킬 ZIP 다운로드
2
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
3
토글을 켜고 사용 시작
테스트해 보기
"building-native-ui" 사용 중입니다. إنشاء تخطيط علامات تبويب مع NativeTabs والرموز
예상 결과:
- ملف: app/_layout.tsx
- إنشاء NativeTabs مع رموز SF Symbols لكل علامة تبويب
- تنفيذ مشغلات علامات تبويب مناسبة مع تسميات
- إضافة غلاف موضوع للتنسيق المتسق
"building-native-ui" 사용 중입니다. إضافة رسوم متحركة للدخول إلى انتقال الشاشة
예상 결과:
- ملف: app/(home)/index.tsx
- تنفيذ انتقال SharedElement للتنقل السلس
- إضافة رسوم متحركة للدخول باستخدام Reanimated
- تكوين contentInsetAdjustmentBehavior للمناطق الآمنة
"building-native-ui" 사용 중입니다. بناء شاشة بحث مع التصفية
예상 결과:
- ملف: app/(search)/search.tsx
- تنفيذ headerSearchBarOptions في Stack.Screen
- استخدام hook useSearch لإدارة حالة الاستعلام
- إضافة التصفية في الوقت الفعلي مع debounce
보안 감사
안전v2 • 1/23/2026
All 614 static findings are false positives. This is legitimate Expo documentation containing code examples for building native iOS apps. The scanner incorrectly flagged documentation patterns including CLI command examples (npx expo), CSS color values (rgba), and regex patterns as security issues. No malicious code present.
13
스캔된 파일
3,329
분석된 줄 수
10
발견 사항
2
총 감사 수
중간 위험 문제 (5)
Documentation Code Examples Misidentified as Shell Commands
The static scanner flagged 547 instances of 'Ruby/shell backtick execution' in markdown files. These are legitimate code examples showing CLI commands like `npx expo start` and `npx expo run:ios` in documentation. The backticks are markdown code formatting, not shell execution.
CSS Color Values Misidentified as Cryptographic Patterns
The scanner flagged 'weak cryptographic algorithm' on CSS color values like `rgba(0, 0, 0, 0.05)` and regex patterns like `match(/\((.*)\)/)`. These are standard CSS and JavaScript patterns for styling and string parsing, not cryptographic operations.
Storage API Documentation Misidentified as Security Risk
The scanner flagged references to AsyncStorage, SecureStore, and SQLite as 'sensitive data access'. These are legitimate Expo storage APIs being documented for app data persistence patterns.
Template Injection Heuristic False Positive
The scanner flagged line 32 as 'template injection targeting system prompt'. This line reads: 'Start with Expo Go: Run `npx expo start` and scan the QR code with Expo Go' - pure documentation text.
Heuristic Alert Triggered by Documentation Patterns
Critical heuristic alerts flagged 'dangerous combination: code execution + network + credential access'. These patterns co-occur because the documentation covers complete app development including networking (expo-camera, expo-media-library) and storage (SecureStore) - standard mobile app patterns.
낮은 위험 문제 (2)
Environment Variable Reference Documentation
Line 81 documents `process.env.EXPO_OS` for platform detection. This is the recommended Expo pattern for environment-aware rendering.
Hardcoded URL References in Documentation
URLs like documentation links and API endpoints appear in the documentation. These are reference examples, not external network calls.
위험 요인
🌐 네트워크 접근 (2)
📁 파일 시스템 액세스 (1)
감사자: claude 감사 이력 보기 →
품질 점수
45
아키텍처
100
유지보수성
87
콘텐츠
20
커뮤니티
76
보안
83
사양 준수
만들 수 있는 것
إنشاء تنقل علامات تبويب أصلي لـ iOS
بناء تطبيقات iOS متقنة مع NativeTabs ورموز SF Symbols وميزات شريط علامات التبويب المناسبة لـ iOS 26 مثل خلفيات الزجاج السائل.
إضافة رسوم متحركة وإيماءات سلسة
تنفيذ دخول وخروج وتخطيط وتأثيرات driven بالتمرير مع Reanimated لتجارب مستخدم متقنة.
دمج عناصر التحكم الأصلية لـ iOS
إضافة Switch و Slider و SegmentedControl و DateTimePicker وعناصر تحكم نموذج أصلية أخرى لـ iOS مع تنسيق مناسب للنظام الأساسي.
이 프롬프트를 사용해 보세요
إنشاء تنقل علامات تبويب أصلي
إنشاء تطبيق Expo Router جديد مع تنقل علامات تبويب iOS أصلي باستخدام NativeTabs ورموز SF Symbols. تضمين بنية علامات تبويب (home, search, profile) مع مكدسات تنقل مناسبة داخل كل علامة تبويب. استخدام تأثيرات خلفية الزجاج السائل لشريط التبويب.
إضافة شريط بحث إلى رأس المكدس
إضافة شريط بحث إلى رأس المكدس في تطبيق Expo Router الخاص بي. استخدام headerSearchBarOptions مع التكوين المناسب. تضمين أنماط التصفية مع hook useSearch لتصفية قائمة من العناصر بناءً على إدخال المستخدم.
إنشاء قائمة متحركة مع إيماءات
إنشاء FlatList مع رسوم متحركة للدخول والخروج باستخدام Reanimated. إضافة إيماءات السحب للحذف مع التغذية الراجعة اللمسية. استخدام contentInsetAdjustmentBehavior="automatic" للتعامل الآمن المناسب مع المنطقة.
إنشاء ورقة نموذج مع عناصر تحكم أصلية
إنشاء عرض تقديمي نموذجي باستخدام نمط عرض formSheet. تضمين مكون Switch أصلي و Slider و SegmentedControl. إضافة تأثير ضبابي للخلفية باستخدام expo-blur. جعل الخلفية زجاجًا سائلًا على iOS 26+.
모범 사례
- استخدم دائمًا expo-symbols للرموز وNativeTabs لتنقل علامات تبويب iOS لمطابقة اصطلاحات النظام الأساسي
- تكوين contentInsetAdjustmentBehavior="automatic" على ScrollView وFlatList وSectionList للتعامل المناسب مع المنطقة الآمنة
- أضف رسومًا متحركة للدخول والخروج لجميع تغييرات الحالة لإنشاء تجارب مستخدم متقنة
피하기
- لا تستخدم أبدًا عناصر HTML الجوهرية مثل div أو img في Expo Router - هذه تعمل فقط في عروض الويب
- لا تستخدم أبدًا مكونات React Native القديمة مثل Picker أو WebView أو SafeAreaView - استخدم بدائل expo
- لا تتخطى اختبار Expo Go قبل إنشاء تصميمات native مخصصة - تضيف التصميمات المخصصة تعقيدًا وتكرارًا أبطأ
자주 묻는 질문
ما الفرق بين Expo Go والتصميمات المخصصة؟
Expo Go هو صندوق رمال يشغل تطبيقات Expo المبنية مسبقًا فورًا. التصميمات المخصصة (npx expo run:ios/android) هي مشاريع native كاملة مطلوبة فقط للوحدات native المحلية أو أهداف Apple أو مكتبات native التابعة لجهات خارجية غير موجودة في Expo Go.
كيف أضيف رموزًا إلى NativeTabs؟
استخدم حزمة expo-symbols مع SF Symbols. استورد Icon من expo-router/unstable-native-tabs واستخدم NativeTabs.Trigger مع sf prop لأسماء رموز SF مثل 'list.dash' أو 'magnifyingglass'.
ما مكتبة الرسوم المتحركة التي يجب أن أستخدمها؟
استخدم Reanimated لجميع الرسوم المتحركة بما في ذلك الدخول والخروج وانتقالات التخطيط والرسوم المتحركة driven بالتمرير. يقوم بتشغيل الرسوم المتحركة على مؤشر الترابط UI للحصول على أداء سلس 60 إطارًا في الثانية.
كيف أنفذ البحث في Expo Router؟
استخدم headerSearchBarOptions في خيارات Stack.Screen لشريط البحث المدمج. استخدم hook useSearch لإدارة حالة الاستعلام. صفي بياناتك بناءً على استعلام البحث للتصفية في الوقت الفعلي.
ما عناصر التحكم المتاحة لـ iOS؟
استخدم عناصر التحكم الأصلية لـ iOS من React Native وحزم المجتمع: Switch وSlider وSegmentedControl وDateTimePicker من @react-native-community/datetimepicker. تجنب مكون Picker القديم.
كيف أحقق تأثيرات الزجاج السائل لـ iOS 26؟
استخدم expo-glass-effect لخلفيات الزجاج السائل. اضبط contentStyle مع backgroundColor: 'transparent' على Stack.Screen أو خيارات Sheet. استخدم expo-blur لتأثيرات الضبابية.