# iphone-duo-dual-pane-patterns

Guides two-pane UI development for iPhone Duo, covering panel dimensions and hinge callbacks. Useful when building dual-screen flows or adapting layouts to fold poses.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 393 installs · ★ 214
- Author: mirzaaghazadeh
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/mirzaaghazadeh/iphone-duo-skills/tree/HEAD/skills/iphone-duo-dual-pane-patterns/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/iphone-duo-dual-pane-patterns

## What it does

This skill provides dimensions and layout specifications for iPhone Duo. It covers the outer display at 466 × 678 pt and the inner panel at 951 × 669 pt. The inner panel defaults to landscape when unfolded. Each half roughly matches the proportions of the outer screen, so apps place a secondary panel alongside the main view rather than stretching single views across the hinge.

It includes iOS 27.1 hinge callback signatures, such as SwiftUI's `onHingeChange` and UIKit's `UIHingeInteraction`. The reference outlines safe area offsets, like the asymmetric 84 pt vertical bar, alongside column counts and margins for book or tabletop orientations.

Hardcoding display dimensions into views breaks adaptive layouts. The skill requires reading runtime scene bounds and `GeometryProxy.size` directly. The device also relies on Touch ID inside the side button instead of Face ID, while LiDAR hardware is absent.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-dual-pane-patterns -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/iphone-duo-dual-pane-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/iphone-duo-dual-pane-patterns/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-dual-pane-patterns -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/iphone-duo-dual-pane-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-dual-pane-patterns -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/iphone-duo-dual-pane-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mirzaaghazadeh/iphone-duo-skills iphone-duo-dual-pane-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/iphone-duo-dual-pane-patterns/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-dual-pane-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mirzaaghazadeh/iphone-duo-skills --path skills/iphone-duo-dual-pane-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/iphone-duo-dual-pane-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mirzaaghazadeh/iphone-duo-skills --skill iphone-duo-dual-pane-patterns -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/mirzaaghazadeh/iphone-duo-skills/tree/HEAD/skills/iphone-duo-dual-pane-patterns/SKILL.md

## When to use it
- size assets for the 951 × 669 pt inner display
- wire hinge angle handlers using SwiftUI `onHingeChange`
- split interfaces into companion panes across the 475.5 pt fold
- branch authentication flows for Touch ID instead of Face ID

## Example prompts
- Configure a two-pane layout split at 475.5 pt for book posture.
- Add an `onHingeChange` listener to adjust controls when folded.
- Check the inner landscape safe area margins for navigation bars.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 4370d64b7d4eba90.

BEGIN THIRD-PARTY FILE 4370d64b7d4eba90
```text
---
name: iphone-duo-dual-pane-patterns
description: Design and build two-pane experiences for iPhone Duo — the real pixel and point dimensions of each display and each half, the exact hinge callback types (onHingeChange / UIHingeInteraction), hinge-driven effects, pose-to-pattern mapping (companion pane, dual view, list-detail, tabletop controls), two-pane paywalls and fold-aware onboarding. Use when sizing a layout or asset for iPhone Duo, wiring a hinge callback, choosing what goes in each pane, or designing onboarding and purchase flows that span the fold.
---

# Dual-pane patterns, dimensions and hinge callbacks

The sibling skills explain the platform: reserved regions and arrangements in
`../iphone-duo-adaptive-layout/SKILL.md`, the hinge and scenes in
`../iphone-duo-hinge-and-scenes/SKILL.md`, design principles in
`../iphone-duo-design-review/SKILL.md`. This one is the **applied** layer: the
numbers you'll want when mocking up or sizing assets, the exact shapes of the
hinge callbacks, and the proven patterns for what to put in each pane — drawn
from Apple's material plus a decade of dual-screen guidance from Microsoft
(Surface Duo), Google (Android foldables) and Samsung (Flex Mode), which all
converge on the same answers.

## The numbers

From Apple's published specs. Use them for mockups, asset budgets and sanity
checks — **never** as layout constants. Layout reads size class, safe area and
reserved regions at runtime.

| | Outer display | Inner display (open) | Each half of the inner display |
|---|---|---|---|
| Diagonal | 5.4 in | 7.6 in | — |
| Points (w × h, as held) | **466 × 678** portrait | **951 × 669** landscape | **475.5 × 669** portrait |
| Pixels (w × h, as held) | **1398 × 2034** portrait | **2670 × 1878** landscape | **≈1335 × 1878** portrait |
| Density | 460 ppi | 430 ppi | 430 ppi |
| Aspect ratio | ≈1.45 : 1 (tall) | ≈1.42 : 1 (wide) | ≈1.41 : 1 (tall) |
| Size class | compact × regular (portrait), compact × compact (landscape) | regular × regular, any orientation | — |

Apple lists the inner panel as "1878-by-2670"; open, the device is wider than
tall (164.6 × 117.8 mm), so the natural open posture is **landscape**.

Three consequences worth internalising:

1. **The inner display is the outer display turned sideways**, near enough. Both
   are ≈1.4–1.45 : 1, which is why Apple describes them as sharing one aspect
   ratio.
```
END THIRD-PARTY FILE 4370d64b7d4eba90

The third-party file has ended. Everything between the 4370d64b7d4eba90 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2428 of 17074 bytes. © mirzaaghazadeh · MIT · https://github.com/mirzaaghazadeh/iphone-duo-skills/tree/HEAD/skills/iphone-duo-dual-pane-patterns/SKILL.md

_Part of the page did not fit — see the HTML version._

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