bidah
- 36 skills
- 0 followers
- 23 hours ago last updated
- ▌ Callstack Best Practices · bidah bundleProvides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.
- ▌ Create Onboarding Video · bidah bundleProduce short, punchy iOS app onboarding videos in Remotion that showcase a feature in action by animating isolated pieces of the UI (cropped components, not full screens) with nice UI-like transitions. Use when the user asks to create, build, or generate an onboarding video, app preview, feature demo clip, App Store preview, or any short video that demonstrates a mobile app feature using supplied screenshots.
- ▌ React Native Keyboard Handling · bidahImplement frame-perfect, native-feeling keyboard handling in React Native and Expo apps. Use when content is covered by the keyboard, when keyboard animations jank or "snap" on Android, when inputs are hidden behind the keyboard, when the keyboard covers fields on Android 15 / edge-to-edge even though older Android worked, or when building forms, sticky footers, or chat input bars that must track the keyboard. Triggers: "keyboard covers input", "KeyboardAvoidingView not working on Android", "keyboard animation janky", "keyboard sticky footer", "Android 15 keyboard", "edge-to-edge keyboard", react-native-keyboard-controller.
- ▌ Expo Router App Store Card Transition · bidah bundleBuild an App Store "Today"-style card that zooms into its own detail/article screen with expo-router's Link.AppleZoom, including the poster card UI (expo-image + blurhash placeholder, caption tinted with the image's own average colour) and the editorial destination screen. Use when adding a card-to-detail zoom transition, an App Store-like poster card, blurhash tinting, Link.AppleZoom / Link.AppleZoomTarget, or a Today-style article screen in an Expo app.
- ▌ Use Dom · bidahUse when embedding web-only libraries or DOM content in React Native apps, including charts with recharts, syntax highlighting, rich text editors, or any component that requires a browser DOM
- ▌ Agent Device · bidah bundleAutomates interactions for iOS simulators/devices and Android emulators/devices. Use when navigating apps, taking snapshots/screenshots, tapping, typing, scrolling, or extracting UI info on mobile targets.
- ▌ Brainstorming · bidah bundleYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
- ▌ Writing Plans · bidah bundleUse when you have a spec or requirements for a multi-step task, before touching code
- ▌ Writing Skills · bidah bundleUse when creating new skills, editing existing skills, or verifying skills work before deployment
- ▌ Executing Plans · bidahUse when you have a written implementation plan to execute in a separate session with review checkpoints
- ▌ Expo API Routes · bidahUse when building server-side API endpoints in Expo apps, handling backend logic, protecting credentials, connecting to databases, or deploying API routes with EAS Hosting
- ▌ Expo Dev Client · bidahUse when building custom development clients for Expo apps, integrating custom native modules, using Apple ecosystem features, third-party native SDKs, or when Expo Go limitations are encountered
- ▌ Expo UI Swift UI · bidahUse when building iOS-specific UI components using SwiftUI views in Expo, embedding React Native views in SwiftUI with RNHostView, or implementing native iOS interfaces beyond cross-platform components
- ▌ Building Native UI · bidahUse when building user interfaces in React Native or Expo, implementing navigation, layouts, animations, native controls, modals, gesture handling, or styling components
- ▌ Expo Tailwind Setup · bidahUse when setting up or using Tailwind CSS v4 with NativeWind v5 in React Native or Expo projects, configuring universal styling across iOS Android and web, or implementing CSS-first theming
- ▌ Using Git Worktrees · bidahUse when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
- ▌ Native Data Fetching · bidahUse when implementing network requests, API calls, data caching, or offline support in React Native or Expo apps, including authentication token management and request lifecycle handling
- ▌
- ▌ Systematic Debugging · bidah bundleUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes
- ▌ Requesting Code Review · bidah bundleUse when completing tasks, implementing major features, or before merging to verify work meets requirements
- ▌ Upgrading React Native · bidah bundleUpgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.
- ▌ Expo UI Jetpack Compose · bidahUse when building Android-specific UI components using Jetpack Compose views in Expo, implementing LazyColumn scrolling lists, or rendering XML vector drawable icons on Android
- ▌ Test Driven Development · bidah bundleUse when implementing any feature or bugfix, before writing implementation code
- ▌ Using React Native Hifi · bidah bundleUse when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
- ▌ Subagent Driven Development · bidah bundleUse when executing implementation plans with independent tasks in the current session
- ▌ Software Mansion Best Practices · bidah bundleSoftware Mansion's best practices for production React Native apps on the New Architecture. Use when writing, reviewing, or debugging React Native code across animations, gestures, SVG, haptics, on-device AI, multimedia, rich text, multithreading, or audio. Trigger on any React Native implementation question or when a more specific sub-skill below matches the task.
- ▌ React Native Brownfield Migration · bidah bundleProvides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, packaging XCFramework/AAR artifacts, and integrating them into host apps.
- ▌ Svg · bidah bundleSoftware Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', or any request to display scalable vector content in a React Native app.
- ▌ Audio · bidahSoftware Mansion's best practices for audio in React Native using react-native-audio-api. Applies correct patterns for AudioContext and AudioRecorder lifecycle, AudioBuffer state management, high-performance audio visualizations, and iOS session configuration. Use when writing or reviewing any audio feature. Trigger on: react-native-audio-api, AudioContext, AudioRecorder, AudioBuffer, AudioNode, audio playback, record audio, microphone, sound effects, music player, waveform, frequency bars, audio visualization, audio analysis, audio session, or any React Native feature that captures or emits sound.
- ▌ Haptics · bidahSoftware Mansion's best practices for haptic feedback in React Native apps. Use when adding tactile responses to interactions — button presses, success/error feedback, selections, and custom vibration patterns. Trigger on: 'haptics', 'haptic feedback', 'vibration', 'tactile', 'impactOccurred', 'notificationOccurred', or any request to add physical feedback to touch interactions in a React Native app.
- ▌ Gestures · bidah bundleSoftware Mansion's best practices for gestures in React Native apps using React Native Gesture Handler. Use when implementing tap, pan, pinch, rotation, swipe, long press, or any touch interaction. Trigger on: 'gesture handler', 'GestureDetector', 'tap gesture', 'pan gesture', 'swipe', 'pinch to zoom', 'drag', 'touch handling', or any request to handle user touch input in a React Native app.
- ▌ Rich Text · bidahSoftware Mansion's best practices for rich text editing in React Native apps using react-native-enriched. Use when building rich text editors, formatted text inputs, or any feature requiring inline styling, mentions, links, or structured text editing. Trigger on: 'rich text editor', 'rich text input', 'text editor', 'react-native-enriched', 'EnrichedTextInput', 'formatted text input', 'WYSIWYG', 'mentions input', 'text formatting toolbar', or any request to build a rich text editing experience in React Native.
- ▌ Animations · bidah bundleSoftware Mansion's best practices for animations in React Native apps built on Reanimated 4 and the New Architecture. Use when writing, reviewing, or debugging animations — including decisions between CSS transitions, CSS animations, and shared value animations; animating text; layout animations; infinite animation cleanup; and performance tuning. Trigger on: 'animation in React Native', 'animate in React Native', 'Reanimated', 'useSharedValue', 'useAnimatedStyle', 'layout animation', 'CSS transition', 'CSS animation', 'withSpring', 'withTiming', 'smooth animation', 'animation performance', or any request to make something move on screen.
- ▌ Multimedia · bidahSoftware Mansion's best practices for multimedia in React Native apps. Use when working with video playback or video streaming. Trigger on: 'video', 'video streaming', 'stream video', 'HLS', 'play video', or any request to play or stream video in a React Native app.
- ▌ On Device AI · bidah bundleIntegrate on-device AI into React Native apps using React Native ExecuTorch, which provides APIs for LLMs, computer vision, OCR, audio processing, and embeddings without cloud dependencies, as well as a variety of pre-exported models for common use cases. Use when user asks to build AI features into mobile apps - AI chatbots, image classification, object detection, style transfer, OCR, document parsing, speech processing, or semantic search - all running locally without cloud dependencies. Use when user mentions offline support, privacy, latency or cost concerns in AI-based applications.
- ▌ Multithreading · bidahSoftware Mansion's best practices for multithreading and background processing in React Native apps. Use when offloading heavy computation, running background tasks, using Web Workers, or working with the React Native New Architecture's concurrent features. Trigger on: 'background thread', 'Worklet', 'runOnJS', 'runOnUI', 'heavy computation', 'background processing', 'concurrent', or any request to move work off the JS thread in a React Native app.