# jkvideo-bilibili-react-native

Assists in building and modifying a React Native 0.83 client for Bilibili on Expo SDK 55. Helps configure DASH video, danmaku comments, and API signing.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 879 installs · ★ 88
- Author: reason-machines
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/jkvideo-bilibili-react-native/SKILL.md
- Updated: 2026-10-09
- HTML: https://affpapa.org/en/nevibecode/skills/jkvideo-bilibili-react-native

## What it does

This skill guides coding agents through the architecture of JKVideo, a mobile client for Bilibili. It explains the project layout built on Expo SDK 55, `expo-router` v4 file-based routing, and Zustand stores with Axios cookie management.

It provides instructions for custom WBI request signing in pure TypeScript with a 12-hour key cache. The guide also details how to assemble local MPD manifests for DASH playback and connect live danmaku via WebSockets.

Standard Expo Go cannot play DASH streams at 1080p or higher resolutions, making a native Dev Build mandatory. Web debugging relies on a separate proxy script on port 3001 to bypass referer restrictions on media assets.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill jkvideo-bilibili-react-native -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/jkvideo-bilibili-react-native/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/jkvideo-bilibili-react-native/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill jkvideo-bilibili-react-native -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/jkvideo-bilibili-react-native/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill jkvideo-bilibili-react-native -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/jkvideo-bilibili-react-native/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install reason-machines/trending-skills jkvideo-bilibili-react-native
```

2. **Manually: put the files in place**
- File: `.github/skills/jkvideo-bilibili-react-native/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill jkvideo-bilibili-react-native -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/reason-machines/trending-skills --path skills/jkvideo-bilibili-react-native
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/jkvideo-bilibili-react-native/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add reason-machines/trending-skills --skill jkvideo-bilibili-react-native -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/reason-machines/trending-skills/tree/HEAD/skills/jkvideo-bilibili-react-native/SKILL.md

## When to use it
- build a React Native video player with DASH adaptive streaming
- implement Bilibili WBI request signing without external cryptography libraries
- connect live stream danmaku comments using WebSockets
- configure an image proxy on port 3001 for web development

## Example prompts
- How do I generate an MPD manifest for DASH playback in react-native-video?
- Write a TypeScript function to sign Bilibili API requests using WBI
- Set up the HLS video player and WebSocket danmaku for a live room

## Similar
- [vercel-react-native-skills](https://affpapa.org/en/nevibecode/skills/vercel-react-native-skills.md) — skill · 255200 installs
- [react-native-architecture](https://affpapa.org/en/nevibecode/skills/react-native-architecture.md) — skill · 15087 installs
- [upgrading-react-native](https://affpapa.org/en/nevibecode/skills/upgrading-react-native.md) — skill · 12600 installs
- [react-native-best-practices](https://affpapa.org/en/nevibecode/skills/software-mansion-labs-react-native-best-practices.md) — skill · 5600 installs
- [react-native-brownfield-migration](https://affpapa.org/en/nevibecode/skills/react-native-brownfield-migration.md) — skill · 5200 installs
- [react-native-expert](https://affpapa.org/en/nevibecode/skills/react-native-expert.md) — skill · 4900 installs

From the same set: [reason-machines/trending-skills](https://affpapa.org/en/nevibecode/by/reason-machines/trending-skills.md) — 199 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md