capacitor-ios-resizability
Makes a Capacitor iOS app work in windows that resize while running (iPad Split View, Slide Over, Stage Manager, windowed apps, the foldable iPhone). Audits the web layer (viewport, 100vh, device sniffing, screen.width, window.orientation, cached safe-area insets) and native code in the app and nodemodules plugins (UIScreen.main, interfaceOrientation, userInterfaceIdiom, keyWindow, AppDelegate lifecycle, hard-coded bar heights), then applies trait-, window- and scene-based replacements. Checks Info.plist UIRequiresFullScreen (ignored on iOS 27, TN3192), iPad orientations, launch screen (ITMS-90870) and the UIScene lifecycle (Capacitor 8.5+). Use for "support iPad multitasking", "Stage Manager layout broken", "app does not resize", "foldable iPhone", or a plugin overlay mis-sized in split view. Do not use for notch padding only (safe-area-handling) or the SceneDelegate migration (capacitor-uiscene-migration).
- Installs
- 54
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/cap-go/capgo-skills --skill capacitor-ios-resizability- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads capacitor-ios-resizability automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Resizable Windows for Capacitor iOS Apps
A Capacitor app is a full-window WKWebView in CAPBridgeViewController. The web view follows its window. The work is to make the web layout respond to width changes, and to remove native code (app, custom code, plugins) that assumes one full-screen window.
When to Use
TRIGGER when:
- Preparing an app for iPad multitasking, Stage Manager, windowed iPad apps, the foldable iPhone, or external displays
- The layout breaks or does not update when the window is resized
- A native overlay from a plugin (scanner, camera preview, custom sheet) is the wrong size or position in split view
- Xcode or App Store Connect warns about
UIRequiresFullScreen, missing iPad orientations, or launch screen requirements - The user asks to remove
UIScreen.main,userInterfaceIdiom,interfaceOrientationor AppDelegate lifecycle use
Do not use:
- CSS
env(safe-area-inset-*)setup and notch padding only:safe-area-handling - Moving AppDelegate to SceneDelegate:
capacitor-uiscene-migration(prerequisite for Xcode 27) - Keyboard overlap:
capacitor-keyboard - Tailwind breakpoints only:
tailwind-capacitor
Facts that drive the plan
- iOS 27 ignores
UIRequiresFullScreenand resizes the scene anyway (TN3192). Never delete the key silently: deleting it makes the app resizable at once on current iOS. Never addUIRequiresFullScreenIgnoredStartingWithVersionon your own: its value decides which releases keep the old behavior. Both are the user's call, after testing. - The iOS 27 SDK requires a launch screen declaration. Without one the upload is rejected with
ITMS-90870. Capacitor templates setUILaunchStoryboardName; keep it. - Xcode 27 requires the scene lifecycle. Capacitor 8.5 templates ship
SceneDelegate.swift. Without it, AppDelegate lifecycle methods are the only signal, which is wrong in multi-window. Runcapacitor-uiscene-migrationfirst ifUIApplicationSceneManifestis missing. - Keep
UIApplicationSupportsMultipleScenes = false. Each scene would create its ownCAPBridgeViewController, with a second WebView and plugin set. Capacitor added scene-scoped notifications in 8.5 so plugins can prepare, but multi-window is not supported in the templates. Resizing works with a single scene. CAPBridgeViewControllerbuildssupportedInterfaceOrientationsfrom the iPhone keyUISupportedInterfaceOrientationsonly, not fromUISupportedInterfaceOrientations~ipad(Capacitor 8.5 source). An iPad that declares all four orientations can still be locked by the bridge mask. Report it; overridesupportedInterfaceOrientationsin a bridge subclass only if the user wants different iPad behavior.- The web layer gets resize events for free.
WKWebViewresizes with the window and firesresize. Breakage comes from layout code that reads the device instead of the viewport. - Plugins are third-party code. Edits to
node_modulesare lost on install. Report plugin findings, upgrade the plugin, open an issue upstream, or usepatch-packageonly as a stopgap, with user approval.
References
Only load a reference when its topic is in play.
| File | Load when |
|---|---|
| references/info-plist-and-scenes.md | Checking Info.plist keys, orientation masks, scene lifecycle and the AppDelegate methods that stop firing |
| references/web-layer.md | Auditing and fixing CSS/JS layout: viewport, units, device sniffing, safe areas that change at runtime |
| references/native-replacements.md | Replacing UIScreen.main, orientation, idiom, key window, lifecycle and hard-coded insets in Swift/ObjC |
| references/plugin-audit.md | Scanning plugins in node_modules, triage, and what plugin authors should change |
| references/swiftui-in-plugins.md | A plugin or app presents native SwiftUI screens that must resize; iOS 27 SDK SwiftUI changes |
Script: scripts/scan-legacy-apis.sh scans ios/App/App and every node_modules/**/ios folder and prints the resize-related Info.plist keys. Read-only.
Workflow
1. Prerequisites (read-only)
Read ios/App/App/Info.plist, AppDelegate.swift, SceneDelegate.swift, the @capacitor/ios version, and the TARGETED_DEVICE_FAMILY build setting (1,2 = iPhone and iPad). Report:
| Check | OK when | Otherwise |
|---|---|---|
| Launch screen | UILaunchStoryboardName or UILaunchScreen present | Report ITMS-90870 risk |
| Scene lifecycle | UIApplicationSceneManifest present, SceneDelegate.swift in the target | Send to capacitor-uiscene-migration first |
| iPad orientations | UISupportedInterfaceOrientations~ipad lists all four, or no iPad key | Name the missing ones. Mention the bridge mask fact above |
| Full-screen opt-out | UIRequiresFullScreen absent | Report that iOS 27 ignores it. Ask the user before changing it |
2. Scan
bash <skill>/scripts/scan-legacy-apis.sh .
Also scan the web code (references/web-layer.md):
grep -rnE 'screen\.(width|height|availWidth)|window\.orientation|orientationchange|\b100vh\b|navigator\.userAgent.*(iPad|iPhone)|isPlatform\(.(ipad|tablet|iphone)|innerWidth' src --include='*.{ts,tsx,js,jsx,vue,svelte,css,scss}'
Make a TODO list with one entry per file. Large projects: process files in batches of 3 to 5. Every file in the list gets a change or a written reason for no change.
3. Report, then ask
Group the findings into: app web code, app native code, plugins (by package), Info.plist. For each, state the fix. Ask the user before:
- changing
UIRequiresFullScreen, orientation keys or the orientation mask, - changing a public method signature in shared native code,
- patching a plugin in
node_modules.
4. Fix
- Web layer first. It is usually the whole fix: references/web-layer.md.
- App native code: references/native-replacements.md. Only edit lines that contain the target API. Keep every
if/elsebranch and#availableguard. Never replace a dynamic value with a literal, and never replace one global (UIScreen.main) with another (UIApplication.shared,UITraitCollection.current,UIDevice.current). - Empty template stubs (
applicationDidBecomeActiveand friends with only comments) are harmless. Move them only if they contain code. - Plugins: references/plugin-audit.md.
5. Verify
npx cap sync ios
xcrun simctl list devices available | grep -i ipad
npx cap run ios --target <iPad-simulator-UDID>
- On the iPad simulator (iPadOS 26+), switch the app to a window and drag its corner. Check narrow, medium and wide sizes. Also try Split View with another app.
- Rotate during each size. Open and close the keyboard in a narrow window.
- Check native overlays from plugins (scanner, camera preview, pickers) at a narrow width.
- Background and foreground the app. JS
pause/resumemust fire. - If Xcode offers a foldable iPhone simulator, test fold and unfold the same way.
- Re-run the scan. Remaining hits must each have a written reason (non-layout use such as camera capture orientation or analytics).
Error Handling
| Symptom | Cause | Fix |
|---|---|---|
| Layout stuck at the old size after resize | JS cached window.innerWidth / screen.width at startup, or CSS uses 100vh | Read sizes on resize or use CSS; replace 100vh with 100dvh |
| Content under the status bar or home indicator only in some window sizes | Safe-area insets were read once, or a side inset was mirrored to both sides | Use env(safe-area-inset-*) per edge in CSS; never cache them in JS |
| Plugin overlay covers the wrong area in split view | Plugin sizes its view from UIScreen.main.bounds | Update the plugin, or report upstream with the scan line |
| App launches but is not resizable on iOS 26 | UIRequiresFullScreen = true | Expected until the user removes it after testing |
Upload rejected with ITMS-90870 | No launch screen key | Restore UILaunchStoryboardName with LaunchScreen.storyboard |
pause / resume stop firing after adding SceneDelegate | Custom code in AppDelegate lifecycle methods | Move it to scene methods or observe notifications (references/info-plist-and-scenes.md) |
Related Skills
safe-area-handling: CSS env() variables and the status bar overlaycapacitor-uiscene-migration: SceneDelegate adoption, the prerequisite for scene-aware fixestailwind-capacitor: responsive breakpoints in Tailwindcapacitor-testing: simulator and device verification loopcapacitor-plugin-upgrade-v8-to-v9: when a plugin fix needs a new major version
FAQ
What does the capacitor-ios-resizability skill do?
Makes a Capacitor iOS app work in windows that resize while running (iPad Split View, Slide Over, Stage Manager, windowed apps, the foldable iPhone). Audits the web layer (viewport, 100vh, device sniffing, screen.width, window.orientation, cached safe-area insets) and native code in the app and nodemodules plugins (UIScreen.main, interfaceOrientation, userInterfaceIdiom, keyWindow, AppDelegate lifecycle, hard-coded bar heights), then applies trait-, window- and scene-based replacements. Checks Info.plist UIRequiresFullScreen (ignored on iOS 27, TN3192), iPad orientations, launch screen (ITMS-90870) and the UIScene lifecycle (Capacitor 8.5+). Use for "support iPad multitasking", "Stage Manager layout broken", "app does not resize", "foldable iPhone", or a plugin overlay mis-sized in split view. Do not use for notch padding only (safe-area-handling) or the SceneDelegate migration (capacitor-uiscene-migration).
How do I install capacitor-ios-resizability?
Run npx skills add https://github.com/cap-go/capgo-skills --skill capacitor-ios-resizability in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/capacitor-ios-resizability/ (personal) or .claude/skills/capacitor-ios-resizability/ (project).
Which AI agents can use capacitor-ios-resizability?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is capacitor-ios-resizability safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains capacitor-ios-resizability?
It is published by cap-go in cap-go/capgo-skills. It has 54 recorded installs.
More from cap-go/capgo-skills
capacitor-best-practices
cap-go/capgo-skills
Review and set up Capacitor apps against current best practices (Capacitor 8.5 stable, 9 alpha via @next). Use for a Capacitor codebase review, capacitor.config.ts audit, new project setup, aligning @capacitor/core/cli/ios/android and plugin majors, plugin patterns (availability checks, checkPermissions/requestPermissions, error code handling, web fallbacks), or release prep; or on " " plugin is not implemented on ios, Could not find the web assets directory, platform has not been added yet, a dev server.url shipped to production, lost edits in android/app/src/main/assets/public, SPM vs CocoaPods, or AppDelegate/UIScene drift. Do not use for security audits (capacitor-security), performance (capacitor-performance), tests (capacitor-testing), crashes (debugging-capacitor), major upgrades (capacitor-app-upgrades), SPM migration (cocoapods-to-spm), UIScene adoption (capacitor-uiscene-migration), or live updates (capgo-live-updates).
ionic-design
cap-go/capgo-skills
Builds and reviews Ionic Framework UI in Capacitor apps (Ionic 9 current, Ionic 8 still common) - page structure (ion-header/ion-content/ion-footer), lists, modern form syntax (label/labelPlacement on ion-input/ion-select), sheet modals, tabs + ion-router-outlet, CSS variable theming, dark palettes (palettes/dark.system.css, .ion-palette-dark), iOS vs MD mode, and Ionic 8 - 9 breaking changes (React Router 6, Vue Router 5, Angular 18-22 zoneless, removed ion-picker-legacy, boolean autocorrect, npx @ionic/migrate). Use when writing Ionic components, theming an Ionic app, fixing platform-mode styling, or upgrading @ionic/react, @ionic/vue, @ionic/angular. Do not use for Konsta UI (konsta-ui), Tailwind setup (tailwind-capacitor), raw safe-area CSS (safe-area-handling), keyboard resize (capacitor-keyboard), or Ionic Appflow/Enterprise migrations (ionic-appflow-migration, ionic-enterprise-sdk-migration).
capacitor-plugins
cap-go/capgo-skills
Pick, install, and wire up Capacitor plugins for native features (camera, filesystem, geolocation, biometrics, in-app purchases, social login, SQLite, calendar, contacts, health, BLE, NFC, etc.). Covers official @capacitor/ packages (Capacitor 8.5 stable, 9 alpha on next) plus the 145-package @capgo/ index, native permission keys (Info.plist, AndroidManifest, variables.gradle minSdk), npx cap sync / cap ls verification, and errors like '"Camera" plugin is not implemented on ios', 'unable to find plugin', UNIMPLEMENTED, and OS-PLUG- codes. Use for "which plugin should I use for X", adding a plugin, or a plugin call failing after install. Do not use for push setup (capacitor-push-notifications), splash assets (capacitor-splash-screen), keyboard layout (capacitor-keyboard), deep links (capacitor-deep-linking), OTA updates (capgo-live-updates), upgrading plugin source code (capacitor-plugin-upgrades), or adding SPM to a plugin (capacitor-plugin-spm-support).
debugging-capacitor
cap-go/capgo-skills
Diagnoses and fixes runtime bugs in Capacitor iOS/Android apps - white/blank screen on launch, startup crashes, "X" plugin is not implemented on ios/android, net::ERRCLEARTEXTNOTPERMITTED, App Transport Security blocks, CORS on capacitor://localhost, permission denials, live reload not connecting, and Capacitor 8.5+ UIScene regressions (appUrlOpen, universal links, pause/resume silent because AppDelegate callbacks stopped). Covers Safari Web Inspector, chrome://inspect, Xcode/LLDB, Android Studio, npx cap run --url (Capacitor 9) vs -l --host (8), xcrun simctl openurlprivacypush, xcrun devicectl device process launchopenURL, xctrace. Do not use for only reading device logs (ios-android-logs), the UIScene migration itself (capacitor-uiscene-migration), deep-link setup (capacitor-deep-linking), speed (capacitor-performance), crash SDKs (capacitor-native-observability), tests (capacitor-testing), or upgrades/build errors (capacitor-app-upgrades, cocoapods-to-spm).
capacitor-testing
cap-go/capgo-skills
Testing guide for Capacitor apps and plugins. Covers web-layer unit and component tests with Vitest and mocked Capacitor plugins (vi.mock('@capacitor/core'), registerPlugin), Playwright for the web build, Appium E2E with NATIVEAPP / WEBVIEW context switching, native plugin unit tests with Swift Testing vs XCTest (what can migrate, CAPPluginCall patterns, xcodebuild test on a simulator) and Android JUnit, plus an agent-driven verification loop on simulators and devices (build, install, launch, screenshot, UI hierarchy, tap, logs) with xcrun simctl, xcrun devicectl, adb, Xcode MCP device tools, and live reload via npx cap run --url (Capacitor 9) or -l --host --port (Capacitor 8). Use when adding tests, mocking plugins, "does it work on device", verifying a UI change on a simulator, migrating XCTest to Swift Testing, or setting up test CI. Do not use for crash log capture (ios-android-logs), WebView debugging sessions (debugging-capacitor), or build pipelines (capacitor
safe-area-handling
cap-go/capgo-skills
Fixes notch, Dynamic Island, home indicator, display cutout, and system bar overlap in Capacitor apps. Covers viewport-fit=cover + env(safe-area-inset-), the Capacitor 8 SystemBars core plugin (insetsHandling, injected --safe-area-inset- CSS variables for Android WebView < 140, removal of android.adjustMarginsForEdgeToEdge), Android 15/16 enforced edge-to-edge (overlaysWebView and backgroundColor of @capacitor/status-bar no longer work at targetSdk 36), iOS contentInset, and insets that change at runtime on rotation, iPad/foldable resizable windows. Use when headers sit under the status bar, tab bars hide behind the gesture bar, env() returns 0 on Android, or layout broke after upgrading to Capacitor 8 / targetSdk 35+. Do not use for keyboard overlap (capacitor-keyboard), Ionic/Konsta component theming (ionic-design, konsta-ui), Tailwind utility setup (tailwind-capacitor), or iOS multi-window/resizability adoption (capacitor-ios-resizability).
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.