react-native-hifi

React Native HiFi

React Native HiFi is a complete React Native & Expo development workflow for your coding agents, built on top of a set of composable "skills" and initial instructions that make sure your agent uses them.

Built on Superpowers by Jesse Vincent, with production skills from Software Mansion and Callstack.

How it works

It starts from the moment you fire up your coding agent. As soon as it sees that you're building something, it doesn't just jump into trying to write code. Instead, it steps back and asks you what you're really trying to do.

Once it's teased a spec out of the conversation, it shows it to you in chunks short enough to actually read and digest.

After you've signed off on the design, your agent puts together an implementation plan that's clear enough for an enthusiastic junior engineer with poor taste, no judgement, no project context, and an aversion to testing to follow. It emphasizes true red/green TDD with React Native Testing Library, YAGNI (You Aren't Gonna Need It), and DRY.

Next up, once you say "go", it launches a subagent-driven-development process, having agents work through each engineering task, inspecting and reviewing their work, and continuing forward. It's not uncommon for Claude to be able to work autonomously for a couple hours at a time without deviating from the plan you put together.

On top of the core workflow, React Native HiFi includes specialized skills for Expo development: building native UI with SwiftUI and Jetpack Compose, setting up Tailwind CSS, configuring dev clients, creating API routes, fetching data natively, and testing on real devices through the agent-device skill.

Installation

Note: Installation differs by platform. Pick your platform below.

Claude Code

Register the marketplace, then install:

/plugin marketplace add bidah/react-native-hifi-marketplace
/plugin install react-native-hifi@react-native-hifi-marketplace

Codex

Tell Codex:

Fetch and follow instructions from https://raw.githubusercontent.com/bidah/react-native-hifi/refs/heads/main/.codex/INSTALL.md

Detailed docs: docs/README.codex.md

OpenCode

Tell OpenCode:

Fetch and follow instructions from https://raw.githubusercontent.com/bidah/react-native-hifi/refs/heads/main/.opencode/INSTALL.md

Detailed docs: docs/README.opencode.md

Gemini CLI

gemini extensions install https://github.com/bidah/react-native-hifi

To update:

gemini extensions update react-native-hifi

Verify Installation

Start a new session in your chosen platform and ask for something that should trigger a skill (for example, "help me plan this feature" or "let's build a new screen"). The agent should automatically invoke the relevant react-native-hifi skill.

Skills Overview

Core Workflow

• brainstorming - Socratic design refinement before writing any code
• writing-plans - Detailed implementation plans broken into bite-sized tasks
• executing-plans - Batch execution with human checkpoints
• subagent-driven-development - Fast iteration with two-stage review (spec compliance, then code quality)
• dispatching-parallel-agents - Concurrent subagent workflows
• using-git-worktrees - Parallel development branches
• finishing-a-development-branch - Merge/PR decision workflow

Testing & Debugging

• test-driven-development - RED-GREEN-REFACTOR cycle with React Native Testing Library (includes testing anti-patterns reference)
• systematic-debugging - 4-phase root cause process (includes root-cause-tracing, defense-in-depth, condition-based-waiting techniques)
• verification-before-completion - Ensure it's actually fixed

Code Review

• requesting-code-review - Pre-review checklist
• receiving-code-review - Responding to feedback

React Native & Expo

• building-native-ui - Build native UI components using platform APIs
• expo-api-routes - Create and manage Expo API routes
• expo-dev-client - Configure and use Expo dev clients for native module development
• expo-tailwind-setup - Set up Tailwind CSS (NativeWind) in Expo projects
• expo-ui-jetpack-compose - Build native Android UI with Jetpack Compose via Expo Modules
• expo-ui-swift-ui - Build native iOS UI with SwiftUI via Expo Modules
• native-data-fetching - Efficient data fetching patterns for React Native
• react-native-testing - React Native Testing Library patterns (RNTL v13/v14), query strategies, async patterns, anti-patterns
• use-dom - Use the use dom directive for web components in React Native
• agent-device - Connect your coding agent to a physical or virtual device for testing

Software Mansion Best Practices