Joe Bell skills

---
name: apple-web-app
description: "Use when implementing, debugging, or auditing how any website or web app looks and behaves on iPhone and iPad — in Safari or added to the Home Screen — or added to the Mac Dock from Safari: safe areas, Safari's status bar and address bar tinting, full-screen overlays, theme colour, keyboard, manifest, icons, splash screens, or installed navigation. Not for service workers, offline caching, or push."
metadata:
  source: hand-maintained by Joe Bell; derived from a production home-screen web app plus credited external sources
  reviewed: "2026-09-04 against iOS 26.x, macOS 26 / Safari 26"
  upstream: "https://github.com/joe-bell/skills/tree/main/skills/apple-web-app"
  version: "2026-10-15.1"
---

# Websites and web apps on Apple devices

## Choose the scope

Use this skill to give any website or web app a good experience on iPhone and
iPad, in Safari itself or installed to the Home Screen, and for macOS Safari Add
to Dock UI. Service workers, offline caching, background sync and push
implementation belong elsewhere.

Infer the platform, requested outcome and existing architecture from the task
and project. Ask only when a missing detail materially changes the solution.
Apply guidance relevant to that platform and symptom. Preserve working layout,
authentication and product choices unless they cause the requested issue. User
instructions take precedence over this skill's defaults.

- **Implement or debug:** read the matching reference, make the focused change,
  and check its affected behavior and likely regressions.
- **Audit:** use the
  [conformance checklist](references/conformance-checklist.md) for all
  applicable recommendations. Report findings before modifying the site unless
  the user has also asked for fixes.
- **Maintain this skill:** follow [maintenance.md](references/maintenance.md).
  Ordinary site work does not require a skill update or upstream handoff.

## Read only relevant references

| Platform or problem                                            | Reference                                                                                                                             |
| :------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
| Mac Dock icons, title bar, display mode, navigation or storage | [macos-add-to-dock.md](references/macos-add-to-dock.md)                                                                               |
| iOS head tags, manifest integration or icons                   | [head-and-icons.md](references/head-and-icons.md)                                                                                     |
| iOS safe areas, scroll roots, cold launch or touch styling     | [layout-and-touch.md](references/layout-and-touch.md)                                                                                 |
| iOS status bar, Safari bar tinting or light/dark appearance    | [theme-color-and-status-bar.md](references/theme-color-and-status-bar.md)                                                             |
| iOS overlays, full-screen dims, keyboard or scroll locking     | [overlays-and-keyboard.md](references/overlays-and-keyboard.md)                                                                       |
| iOS startup images                                             | [splash-screens.md](references/splash-screens.md); read [ios-devices.md](references/ios-devices.md) when generating or checking sizes |
| Install hints, installed navigation or storage continuity      | [install-ux.md](references/install-ux.md)                                                                                             |