Developing a Web App with Claude from an iPad (2): The Five-Tab Setup

To run on an iPad, the MacBook workflow has to be arranged for one screen. The first article named the parts of that workflow. This article describes the setup that keeps the same loop running: the tools, a fixed set of Chrome tabs, and a few gestures that replace the mouse.

iPad: a recent model, with iPadOS up to date.

Keyboard case with a trackpad: the Logitech Combo Touch. Any keyboard case with a trackpad should work, but only this one was tested.

Browser: Chrome for iPad. All the web tools below run in it.

Claude, with Claude Code on the web (claude.ai/code).

GitHub: an account and a repository for the app.

Vercel: hosting and preview deployments, connected to the GitHub repository.

Supabase: the database, for apps that need one.

Bitwarden: the password manager. It must unlock on the iPad. Keys and passwords are kept only there.

iCloud Drive and the Files app: only when files move between the iPad and a Mac.

An iPad normally shows one app at a time. On a MacBook, the chat, Claude Code and GitHub sit in separate windows. On the iPad, a day of work becomes a day of scrolling the chat to find instructions, unless the work is planned around one screen.

The remedy is a fixed set of Chrome tabs, opened at the start of each session, in this order, and left open:

The app: the live site, to look at what has been built

The chat with Claude (claude.ai): planning, review and approval

Claude Code (claude.ai/code): the building

Summary of the suggested steps: one browser page that always holds only what must be done now. Claude publishes it as a separate page, with its own address, and updates that page in place, so nothing has to be found by scrolling. It is opened in its own tab, from the link in the chat

GitHub: the repository, with its pull requests and branches pages

Switching is done with the tab bar. Instructions are read in tab 4 rather than found by scrolling through tab 2.

An iPad is also a media device, so Chrome may hold other tabs, or none of the five. The five tabs are therefore opened again each time development starts, from a launcher.

The launcher is a page that Claude publishes, in the same way as the summary of the suggested steps. It has five large buttons, one for each tab, in the order above. Each button is a plain link that opens in its own tab. Chrome switches to the new tab after each tap, so the launcher tab must be selected again before the next tap. The launcher stays open as a sixth tab. The page is bookmarked in Chrome, so it is one tap away. The five addresses are given to Claude once, and Claude builds the page.

Close the tabs left from the earlier session, so that no tab is opened twice.

Tap the five buttons in order, once each, returning to the launcher tab after each tap.

Open each service once, each in its own tab: claude.ai, GitHub, Supabase and Vercel. Check that each opens without asking for anything. Then unlock Bitwarden. Any sign-in request is dealt with now, not in the middle of a task.

These gestures were confirmed on an iPad with the keyboard case attached. Other iPads may differ.

Copy a block of text or a prompt: tap the copy icon on the block. This is better than selecting text, which is hard to do precisely with a finger.

Select part of a text and copy it: the trackpad and the screen are used together. Move to the starting point of the selection with the arrow keys, click the trackpad, and touch the screen once to bring up the selection controls. Drag the selection rectangle over the wanted text, then touch the screen again to bring up the copy prompt. This works in typing boxes and in page text that can be selected.

Paste: touch the typing box once with a finger, then tap Paste. Cmd+V on the keyboard also works.

Send: the return key sends. A prompt with several lines is cut at the first line break, so prompts for Claude Code are written as one paragraph.

Screenshot: press the volume-up button and the power button together. The keyboard case has a screenshot key (in the row above the numbers, above the 5) that does the same.

Attach a screenshot or photo to the chat: the plus or paperclip next to the typing box.

When files move between the iPad and a Mac, one folder in iCloud Drive serves as the drop point, with a subfolder for incoming files.

Exporting a file from the app opens the iPad's share sheet. Tapping Save to Files opens the Files chooser. There, iCloud Drive is selected, then the drop folder, then its subfolder for incoming files. Finally, Save is tapped. The folder must open in the Files app without asking for anything.

Selecting text still needs the screen. The trackpad and the arrow keys place the starting point, but the selection controls appear only after a touch.

The shortcuts bar can cover the typing box. With a keyboard case attached, iPadOS shows a bar with formatting buttons and a microphone at the bottom of the screen. In the chat, it can sit over the typing box. It is hidden in Settings, under General, then Keyboard, with the Shortcuts switch.

The setup is complete when all of these are true:

The launcher page opens the five tabs, and each opens signed in

The five tabs are open and switching between them works

Every service opens without asking for a sign-in

A block can be copied with its copy icon and pasted into another tab

A part of a text can be selected with the trackpad and a touch, and copied

A screenshot can be taken and attached in the chat

The typing box in the chat is not covered by the shortcuts bar

The iCloud Drive drop folder opens in the Files app