Documentation/Buki/React Native Web
⚔

React Native Web

Validation and quality enforcement for React Native Web projects.

bukiskillhookreact-native-webreact-nativereactwebvalidationtypescriptqualityenforcement

Installation

First, install the Han CLI tool:

npm install -g @thebushidocollective/han

Then install the plugin:

han plugin install buki-react-native-web

Overview

Validation and quality enforcement for React Native Web projects, ensuring code quality through TypeScript type checking and React Native Web best practices.

What This Buki Provides

Validation Hooks

  • TypeScript Validation: Runs tsc --noEmit to ensure type safety
  • Type Checking: Validates React Native Web component types and prop types
  • Cross-Platform Validation: Ensures code follows React Native Web cross-platform patterns

Skills

This buki provides the following skills:

  • react-native-web-core: Core React Native Web concepts, components, and cross-platform patterns
  • react-native-web-styling: Styling patterns using StyleSheet API, platform-specific styles, and responsive design
  • react-native-web-navigation: Navigation patterns with React Navigation for web and native platforms
  • react-native-web-performance: Performance optimization, code splitting, and bundle optimization for web
  • react-native-web-testing: Testing patterns with Jest, React Native Testing Library, and web-specific testing

Installation

Install via the Han marketplace:

npx @thebushidocollective/han install

Or install manually:

claude plugin marketplace add thebushidocollective/han
claude plugin install buki-react-native-web@han

Usage

Once installed, this buki automatically validates your React Native Web code:

  • When you finish a conversation with Claude Code
  • When Claude Code agents complete their work
  • Before commits (when combined with git hooks)

Requirements

  • React Native Web 0.18+
  • React 18+
  • TypeScript 5.0+
  • Node.js 18+

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT License - See LICENSE for details.

Skills

📖

react-native-web-core

Use when working with React Native Web projects. Provides core concepts, components, and cross-platform patterns for building web applications with React Native.

📖

react-native-web-navigation

Use when implementing navigation in React Native Web projects. Provides patterns for React Navigation, deep linking, and web-specific routing.

📖

react-native-web-performance

Use when optimizing React Native Web performance. Provides patterns for code splitting, bundle optimization, memoization, and web-specific performance improvements.

📖

react-native-web-styling

Use when styling React Native Web components. Provides patterns for StyleSheet API, platform-specific styles, responsive design, and theming.

📖

react-native-web-testing

Use when testing React Native Web applications. Provides patterns for Jest, React Native Testing Library, component testing, and web-specific testing strategies.

Hooks

🪝

Stop

Runs when the main Claude Code agent has finished responding.

npx -y @thebushidocollective/han hook run --fail-fast --dirs-with package.json -- npx tsc --noEmit
🪝

SubagentStop

Runs when a Claude Code subagent (Task tool call) has finished responding.

npx -y @thebushidocollective/han hook run --fail-fast --dirs-with package.json -- npx tsc --noEmit