00 // PLAYBOOK_HUB

Available for Engineering Roles

John Felix LimSenior Lead React Native

View full profile Download Resume Contact

Frontend Engineering Playbook

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

32 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"

React, React Native, Next.js, and Vite — component design through the build.

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

5 min

Error Handling

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

Read

React JS

Component design, state, and testing patterns that hold up as a codebase grows.

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

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

Next.js

App Router rendering, data fetching, and server/client boundaries.

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

6 min

Routing & Layouts

Route groups that don't leak into the URL, parallel routes for independent panels, and loading/error boundaries scoped to the segment that actually needs them.

Read

7 min

Data Fetching & Caching

Fetch caching is on by default and often wrong for the data — deliberate revalidation windows, tag-based invalidation, and segment config that can silently override both.

Read

6 min

Rendering Strategies

What actually forces a route into dynamic rendering, choosing which params to pre-render, and streaming the slow parts instead of gating the whole page on them.

Read

Vite

Config, dev server, and build tooling for fast, framework-agnostic apps.

6 min

Config & Plugin Architecture

Plugin order is execution order, aliases are a contract with tsconfig, and one config file beats three that drift.

Read

6 min

Dev Server & HMR

Why hot updates fall back to a full reload, where state needs to live to survive an edit, and cleaning up before a module gets swapped.

Read

5 min

Env Vars & Build Modes

Only `VITE_`-prefixed variables reach the client, values are baked in at build time, and mode is not the same axis as environment.

Read

7 min

Library Mode & Code-Splitting

Externalizing peer dependencies in library mode, dynamic `import()` as the real unit of code-splitting, and manualChunks grouped by actual sharing.

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.

Frontend Engineering Playbook

How to drop these into your agent

Claude Code

Cursor

GitHub Copilot

React Native Core

Project Architecture

Navigation

Performance

Platform & Native

Error Handling

React JS

Component Patterns

TypeScript Conventions

State & Data

Testing

Next.js

Server & Client Components

Routing & Layouts

Data Fetching & Caching

Rendering Strategies

Vite

Config & Plugin Architecture

Dev Server & HMR

Env Vars & Build Modes

Library Mode & Code-Splitting

Laravel

Eloquent & Query Patterns

API Resource Design

Queues & Jobs

Auth & Policies

Supabase

Row-Level Security & Policies

Auth Patterns

Realtime & Edge Functions

Schema & Migrations

AWS + Terraform

Terraform Module Structure

IAM Least-Privilege Patterns

Core Compute & Storage

CI/CD & Environments

AWS System Design

AI Agent Enablement

Agent Rules

Skill Authoring

Install from the open catalog