Skill UI

This expert specializes in scaffolding complete, production-ready, accessible, and performant React and React Native components. It generates full boilerplate code including TypeScript definitions, unit tests, styles (CSS Modules, Styled-Components, Tailwind), and accessibility hooks, ensuring adherence to modern best practices for scalable frontend architecture.

This skill provides production-ready architectural patterns for building robust mobile applications using React Native and Expo. It covers complex topics like state management, sophisticated navigation flow, integrating native modules, and implementing offline-first capabilities. It is ideal for starting new projects or optimizing existing large-scale React Native applications.

Use this guide to build and manage Expo development clients using EAS Build. This is the recommended setup for production-grade testing, allowing developers to test custom native code, local modules, and advanced features that exceed Expo Go's capabilities. It covers local builds, TestFlight submission, and connecting to the Metro bundler.

Installs npm packages inside virtiofs-mounted Docker workspaces by copying package files to a container-local ext4 directory, running npm ci there, and symlinking node_modules back so native binaries avoid virtiofs crashes.

Provides comprehensive guidelines and utilities for modern unit testing using Jest and React Native. Covers Test-Driven Development (TDD) workflows, Behavior-Driven Development (BDD) principles, advanced mocking strategies for modules and GraphQL hooks, and implementing reusable factory functions for props and data. Use this skill to write robust, maintainable, and highly structured unit tests.

A comprehensive guide for developers on creating and writing native modules and views using the Expo Modules API. It covers platform-specific implementation details for Swift (iOS), Kotlin (Android), and TypeScript. Use this when integrating system APIs, wrapping platform SDKs, or building complex native functionality that goes beyond standard React Native components.

This skill defines a framework-agnostic, scalable architecture pattern for React and React Native applications. It mandates feature modules, strict state separation (server vs. UI), and disciplined import rules to create predictable, maintainable, and highly scalable codebases, regardless of the chosen framework (Next.js, Remix, etc.).

This internal skill assists in implementing native PDF viewing capabilities within Power Apps mobile applications. It verifies app configuration, checks package versions for @microsoft/power-apps-native-pdf-viewer, and generates or updates the native PDF viewer wrapper code. It supports HTTPS URLs and local file URIs, ensuring compatibility with React Native native modules.

Diagnose and fix failures in built .ppmplugin controls: crashes, silent no-ops, PCF errors, or incorrect behavior. Investigates symptoms through error codes, manifests, native modules, and dispatch to locate root causes, then applies approved surgical fixes. Use when a control breaks on device.

Internal implementation skill for camera, image picker, barcode scanner, and QR scanner workflows in Power Apps mobile applications. Generates typed camera wrappers and custom upload guidance for Dataverse image/file workflows. Only writes JS files under src/native/ without modifying package.json or installing modules.

This skill generates the complete native source code for a third-party Platform Abstraction Module (PAM) control, including iOS Obj-C, Android Kotlin, required podspecs, and a manifest contract. It bypasses TypeScript layers, focusing purely on the native build surface and the dispatch contract (`manifest.json`). This is used by developers to scaffold the foundational, OS-specific code necessary for integrating custom, native modules into a React Native environment.

Automates the generation of the Power Apps Component Framework (PCF) companion dispatcher. This tool bridges third-party native modules (like .ppmplugin) to the Power Apps host environment by utilizing the window.PowerApps.NativeExtension.sendAsync global. It handles manifest updates, message contract generation, and structured logging, enabling seamless native-to-UI communication within the Power Apps ecosystem.