#601

Globales Ranking · von 601 Skills

react-native AI Agent Skill

Quellcode ansehen: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill react-native

44

Installationen

React Native with Expo

Overview

Expo is an open-source framework for building universal native apps with React Native from a single TypeScript codebase. It provides file-based routing (Expo Router), cloud build services (EAS Build/Submit/Update), and a rich set of native modules for device APIs.

When to use: Mobile apps targeting iOS and Android, universal apps with web support, projects needing OTA updates, apps requiring native device APIs (camera, notifications, haptics), teams preferring managed infrastructure over bare React Native.

When NOT to use: Apps requiring heavy custom native code incompatible with Expo Modules API, brownfield integration into existing native apps, apps with native-only CI/CD requirements.

Quick Reference

Pattern API Key Points
Stack navigation <Stack> from expo-router File-based, _layout.tsx defines navigator
Tab navigation <Tabs> from expo-router (tabs) directory group with _layout.tsx
Drawer navigation <Drawer> from expo-router/drawer Requires @react-navigation/drawer
Typed routes href with /(group)/route Enable typed-routes in app.json
Dev build expo-dev-client Custom native code + dev tools
EAS Build eas build --profile production Cloud builds for app stores
EAS Submit eas submit -p ios / -p android Automated store submission
OTA Update eas update --branch production JS-only updates, no rebuild needed
Native module Expo Modules API Swift/Kotlin with expo-module.config.json
Platform code Platform.select() / .ios.tsx Per-platform logic or entire files
Styled lists FlatList / FlashList Virtualized, keyExtractor required
Camera expo-camera Permissions via useCameraPermissions()
Notifications expo-notifications Push tokens via getExpoPushTokenAsync()
Haptics expo-haptics impactAsync, notificationAsync
Tailwind (RN) NativeWind v4 className prop, Tailwind CSS in RN

Common Mistakes

Mistake Correct Pattern
Using react-navigation directly instead of Expo Router Expo Router wraps React Navigation with file-based routing
Forgetting _layout.tsx in route directories Every directory with routes needs a layout file
Using expo start for custom native code Use expo start --dev-client with expo-dev-client
Running eas update after native dependency changes Native changes require eas build, OTA is JS-only
Hardcoding platform checks with if Use Platform.select() or platform-specific file extensions
Not requesting permissions before accessing device APIs Always check/request permissions before camera, notifications
Using ScrollView for long lists Use FlatList or FlashList for virtualized rendering
Inline styles in render functions Define styles with StyleSheet.create() outside component
Missing keyExtractor on FlatList Always provide keyExtractor for stable list rendering
Importing from react-native for Expo-provided APIs Prefer expo-* packages over react-native equivalents

Delegation

  • Pattern discovery: Use Explore agent
  • Build/deployment review: Use Task agent
  • Code review: Delegate to code-reviewer agent

If the react-patterns skill is available, delegate React component patterns and hooks to it.
If the tanstack-query skill is available, delegate data fetching and caching to it.
If the zustand skill is available, delegate client-side state management to it.
If the vitest-testing skill is available, delegate unit and component testing patterns to it.
If the tailwind skill is available, delegate Tailwind CSS utility patterns to it (NativeWind uses Tailwind CSS syntax).
If the accessibility skill is available, delegate mobile accessibility patterns to it.

References

Installationen

Installationen 44
Globales Ranking #601 von 601

Sicherheitsprüfung

ath Safe
socket Safe
Warnungen: 0 Bewertung: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

So verwenden Sie diesen Skill

1

Install react-native by running npx skills add oakoss/agent-skills --skill react-native in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.

2

Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.

3

Der Skill verbessert das Verständnis Ihres Agenten für react-native, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.

Was Sie erhalten

Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.

Kompatibilität

Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Kundensupport