webkit-integration

Q: How do I install webkit-integration?

Run npx skills add https://github.com/rshankras/claude-code-apple-skills --skill webkit-integration 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/webkit-integration/ (personal) or .claude/skills/webkit-integration/ (project).

by rshankrasAI & Agents

WebKit integration in SwiftUI using WebView and WebPage for embedding web content, navigation, JavaScript interop, and customization. Use when embedding web content in SwiftUI apps.

Installs: 76
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/rshankras/claude-code-apple-skills --skill webkit-integration

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 webkit-integration 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.

WebKit Integration for SwiftUI

Embed and control web content in SwiftUI apps using the native WebView struct and WebPage observable class. Covers loading, navigation, JavaScript execution, and view customization.

When This Skill Activates

User wants to display web content inside a SwiftUI app
User needs to load URLs, HTML strings, or data blobs in a web view
User asks about JavaScript interop from SwiftUI
User needs navigation control (back, forward, reload) for embedded web content
User wants to customize web view behavior (gestures, text selection, link previews)
User needs to capture snapshots or export PDFs from web content
User asks about intercepting navigation requests or custom URL schemes
User wants to configure private browsing or custom user agents

Decision Tree

What do you need?
|
+-- Display a URL or HTML content
|   +-- Simple, no interaction needed
|   |   +-- WebView(url:) --> see webview-basics.md
|   +-- Need loading state, reload, custom config
|       +-- WebPage + WebView(page) --> see webview-basics.md
|
+-- Navigate programmatically (back, forward, intercept)
|   +-- Back/forward list, navigation events
|   |   +-- see navigation.md
|   +-- Intercept or cancel navigation requests
|       +-- NavigationDeciding protocol --> see navigation.md
|
+-- Execute JavaScript or communicate with web content
|   +-- callJavaScript, arguments, content worlds
|       +-- see javascript-advanced.md
|
+-- Capture snapshots, export PDF, web archive
|   +-- page.snapshot(), page.pdf(), page.webArchiveData()
|       +-- see javascript-advanced.md
|
+-- Handle custom URL schemes
    +-- URLSchemeHandler protocol --> see javascript-advanced.md

API Availability

API	Minimum OS	Import
`WebView`	iOS 26 / macOS 26	`SwiftUI` + `WebKit`
`WebPage`	iOS 26 / macOS 26	`WebKit`
`WebPage.Configuration`	iOS 26 / macOS 26	`WebKit`
`NavigationDeciding`	iOS 26 / macOS 26	`WebKit`
`WKContentWorld`	iOS 14 / macOS 11	`WebKit`
`WKSnapshotConfiguration`	iOS 11 / macOS 10.13	`WebKit`
`WKPDFConfiguration`	iOS 14 / macOS 11	`WebKit`

Quick Start

Simplest Usage

import SwiftUI
import WebKit

struct BrowserView: View {
    var body: some View {
        WebView(url: URL(string: "https://developer.apple.com")!)
    }
}

With WebPage for Full Control

import SwiftUI
import WebKit

struct ControlledBrowserView: View {
    @State private var page = WebPage()

    var body: some View {
        WebView(page)
            .onAppear {
                page.load(URLRequest(url: URL(string: "https://developer.apple.com")!))
            }
    }
}

Top Mistakes

Mistake	Problem	Fix
Using `WebView(url:)` when you need navigation control	No access to back/forward, reload, or events	Use `WebPage` + `WebView(page)`
Forgetting `import WebKit` alongside `import SwiftUI`	`WebView` is in SwiftUI but `WebPage` requires WebKit	Always import both
Not observing `currentNavigationEvent`	Missing loading states, errors go unnoticed	Use `onChange(of: page.currentNavigationEvent)`
Calling `callJavaScript` before page finishes loading	Script fails because DOM is not ready	Wait for `.finished` navigation event
Using persistent data store for private browsing	User data is saved to disk	Use `.nonPersistent()` on `WebsiteDataStore`
Not handling `nil` return from `decidePolicyFor(navigationAction:)`	Navigation proceeds when it should be cancelled	Return `nil` to cancel, return `NavigationPreferences` to allow
Passing JavaScript without argument binding	Vulnerable to injection, hard to debug	Use `arguments:` parameter for named values

Review Checklist

Reference Files

File	Contents
`webview-basics.md`	WebView creation, WebPage setup, configuration, find-in-page, customization modifiers
`navigation.md`	Loading content, back/forward list, navigation events, NavigationDeciding protocol
`javascript-advanced.md`	JavaScript execution, content worlds, snapshots, PDF export, custom URL schemes

Cross-References

For macOS window management around web views, see macos/architecture-patterns/
For navigation architecture that hosts a web view, see ios/navigation-patterns/
For Liquid Glass design around web content, see design/liquid-glass/

References

FAQ

What does the webkit-integration skill do?

WebKit integration in SwiftUI using WebView and WebPage for embedding web content, navigation, JavaScript interop, and customization. Use when embedding web content in SwiftUI apps.

How do I install webkit-integration?

Run npx skills add https://github.com/rshankras/claude-code-apple-skills --skill webkit-integration 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/webkit-integration/ (personal) or .claude/skills/webkit-integration/ (project).

Which AI agents can use webkit-integration?

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 webkit-integration 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 webkit-integration?

It is published by rshankras in rshankras/claude-code-apple-skills. It has 76 recorded installs.