00 // PLAYBOOK_HUB

Available for Engineering Roles

John Felix LimReact Native Developer

View full profile Download Resume Contact

Frontend Engineering Playbook

Standards I hold teams to — and the agent skills that enforce them.

12 topicsMIT licensed

How to drop these into your agent

The same file works for Claude Code and Cursor. Copilot gets a frontmatter-free variant of the identical content.

Claude Code

.claude/skills/<name>/SKILL.md

Frontmatter drives when the skill loads. Claude reads the description to decide whether the skill applies to the task at hand.

Cursor

.cursor/skills/<name>/SKILL.md

Identical file, different directory. Pair it with a short always-on rule in .cursor/rules/ that names your stack.

GitHub Copilot

.github/copilot-instructions.md

Copilot reads plain markdown with no frontmatter — use the Copilot tab on any topic page for that variant.

quick start

# Pick a topic, copy its skill file, drop it in place
mkdir -p .claude/skills/react-native-performance
pbpaste > .claude/skills/react-native-performance/SKILL.md

# Then ask your agent something it should trigger on:
#   "this product list stutters when I scroll"

01 // REACT_NATIVE

React Native Core

Architecture, navigation, and performance for production iOS and Android apps.

6 min

Project Architecture

Structure a React Native app in layers so business logic survives UI rewrites, and group files by feature so a screen's code lives in one place.

Read

5 min

Navigation

Type-safe navigation, deep links that survive a cold start, and screen params that never carry objects they shouldn't.

Read

7 min

Performance

Lists that stay smooth at ten thousand rows, re-renders you can actually account for, and animations that never touch the JS thread.

Read

5 min

Platform & Native

Handling iOS and Android differences without forking your codebase, and knowing when a native module is genuinely the answer.

Read

02 // ENGINEERING

Cross-Cutting Engineering

TypeScript, state, testing, and error handling that hold up as a codebase grows.

6 min

TypeScript Conventions

Types that catch real bugs instead of decorating the code — discriminated unions, parsed boundaries, and no `any` escape hatches.

Read

7 min

State & Data

Server state belongs in a cache, not in Redux — plus where Zustand fits, and how to make optimistic updates that roll back correctly.

Read

6 min

Testing

Tests that survive refactors: query by what users see, mock at the network boundary, and stop asserting on implementation details.

Read

5 min

Error Handling

Error boundaries that contain damage, offline states designed rather than discovered, and logs that are actually debuggable.

Read

03 // WEB

React & Next.js Web

Component design and server/client boundaries on the web.

6 min

Component Patterns

Composition over configuration, hooks that obey the rules that matter, and effects you mostly shouldn't have written.

Read

6 min

Server & Client Components

Where the `use client` boundary belongs in Next.js App Router, how to keep server-only code off the wire, and fetching without waterfalls.

Read

04 // AGENTS

AI Agent Enablement

Rules and skills that keep Claude, Cursor, and Copilot on your standards.

6 min

Agent Rules

Writing AGENTS.md, Cursor rules, and Copilot instructions that actually change agent output instead of being politely ignored.

Read

5 min

Skill Authoring

Writing a SKILL.md that triggers on the right tasks — because a skill that never loads is worth exactly nothing.

Read

ECOSYSTEM // OPEN_CATALOG

Install from the open catalog

Third-party SKILL.md files from public GitHub repos — the same Agent Skills ecosystem other catalogs index. Attribution stays with the original authors. These are not my playbook topics.