add-app-clip

Name: add-app-clip
Author: sickn33

44kstars6.5kforks

How to install add-app-clip?

sickn33/agentic-awesome-skills/add-app-clip

$npx -y skills add sickn33/agentic-awesome-skills --skill add-app-clip

Installs into the current project.

Summary

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

Files · 1

View on GitHub

SKILL.md

1	# Add an App Clip to an Expo App
2	## When to Use
3
4	Use this skill when you need add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.
5
6
7	Adds an iOS App Clip target to an Expo project. The Clip lives in `targets/clip/`, ships alongside the parent app, and is invoked from a URL on the app's domain via an Apple App Site Association (AASA) file.
8
9	The parent app's bundle ID becomes `com.<username>.<app-name>` and the Clip's is automatically derived as `<parent>.clip` (e.g. `com.bacon.may20.clip`).
10
11	## 1. Set `bundleIdentifier` and `appleTeamId`
12
13	`bun create target` warns if these are missing. Add to `app.json`:
14
15	```json
16	{
17	"expo": {
18	"ios": {
19	"bundleIdentifier": "com.<username>.<app-name>",
20	"appleTeamId": "XX57RJ5UTD"
21	}
22	}
23	}
24	```
25
26	## 2. Add the App Clip target
27
28	```sh
29	bun create target clip
30	```
31
32	This installs [`@bacons/apple-targets`](https://github.com/EvanBacon/expo-apple-targets), adds it to the `plugins` array in `app.json`, and writes:
33
34	- `targets/clip/expo-target.config.js` — the target's config plugin
35	- `targets/clip/Info.plist` — Clip Info.plist
36	- `targets/clip/AppDelegate.swift`, `Assets.xcassets`, etc.
37
38	Pick a good icon or reuse the existing one defined in the app — check it with `bunx expo config` under the `icon` or `ios.icon` key.
39
40	## 3. Wire up associated domains
41
42	The parent app and the Clip each need the Associated Domains entitlement pointing at the domain that hosts the AASA file.
43
44	In `app.json`, add both `applinks:` (parent) and `appclips:` (Clip invocation) entries:
45
46	```json
47	{
48	"expo": {
49	"ios": {
50	"associatedDomains": [
51	"applinks:may20.expo.app",
52	"appclips:may20.expo.app"
53	]
54	}
55	}
56	}
57	```
58
59	In `targets/clip/expo-target.config.js`, declare the Clip's entitlement:
60
61	```js
62	/** @type {import('@bacons/apple-targets/app.plugin').ConfigFunction} */
63	module.exports = (config) => ({
64	type: "clip",
65	icon: "https://github.com/expo.png",
66	entitlements: {
67	"com.apple.developer.associated-domains": ["appclips:may20.expo.app"],
68	},
69	});
70	```
71
72	> If you skip this, `expo prebuild` will print: `Apple App Clip may require the associated domains entitlement but none were found`.
73
74	## 4. Register bundle IDs and create the App Store entry
75
76	```sh
77	bunx setup-safari
78	```
79
80	This logs in to the Apple Developer account, registers `com.bacon.may20`, creates the App Store Connect entry, and prints:
81
82	- A starter `apple-app-site-association` JSON
83	- A `<meta name="apple-itunes-app">` tag with the iTunes app id
84	- Team ID, iTunes ID, and Bundle ID
85
86	## 5. Host the AASA file
87
88	App Clips are invoked when iOS fetches `https://<your-domain>/.well-known/apple-app-site-association` and finds a matching `appclips` entry.
89
90	```sh
91	mkdir -p public/.well-known
92	touch public/.well-known/apple-app-site-association
93	```
94
95	Paste the JSON `setup-safari` printed, but add an `appclips` block for the Clip's full app ID (`<TeamID>.<ClipBundleID>`). The output of `setup-safari` only covers the parent app:
96
97	```json
98	{
99	"applinks": {
100	"details": [
101	{
102	"appIDs": ["XX57RJ5UTD.com.bacon.may20"],
103	"components": [{ "/": "*", "comment": "Matches all routes" }]
104	}
105	]
106	},
107	"appclips": {
108	"apps": ["XX57RJ5UTD.com.bacon.may20.clip"]
109	},
110	"activitycontinuation": {
111	"apps": ["XX57RJ5UTD.com.bacon.may20"]
112	},
113	"webcredentials": {
114	"apps": ["XX57RJ5UTD.com.bacon.may20"]
115	}
116	}
117	```
118
119	Notes:
120
121	- The file has no extension and no `Content-Type` requirements beyond being served as-is. Expo Router static export serves files in `public/` verbatim.
122	- The `appclips` block is what lets a URL on the domain launch the Clip.
123	- `webcredentials` is used for sharing credentials between the website, parent app, and the App Clip.
124	- `activitycontinuation` is optional and used for sharing the link between mobile and desktop. Must be used with `Head` from expo-router — see https://docs.expo.dev/router/advanced/apple-handoff/
125	- Notation and route-disabling details: https://sosumi.ai/documentation/xcode/supporting-associated-domains
126
127	## 6. Add the Smart App Banner meta tag
128
129	Create `src/app/+html.tsx` (Expo Router's HTML shell) and add the tag from `setup-safari`. Create the versioned template if it doesn't exist:
130
131	```sh
132	bunx expo customize src/app/+html.tsx
133	```
134
135	Add the meta tag to the `<head>`:
136
137	```tsx
138	import { Scro

People who liked this also viewed

6 picks

Type

add-app-clip

44kstars6.5kforks

View on GitHub

How to install add-app-clip?

sickn33/agentic-awesome-skills/add-app-clip

$npx -y skills add sickn33/agentic-awesome-skills --skill add-app-clip

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Add an App Clip to an Expo App
2	## When to Use
3
4	Use this skill when you need add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.
5
6
7	Adds an iOS App Clip target to an Expo project. The Clip lives in `targets/clip/`, ships alongside the parent app, and is invoked from a URL on the app's domain via an Apple App Site Association (AASA) file.
8
9	The parent app's bundle ID becomes `com.<username>.<app-name>` and the Clip's is automatically derived as `<parent>.clip` (e.g. `com.bacon.may20.clip`).
10
11	## 1. Set `bundleIdentifier` and `appleTeamId`
12
13	`bun create target` warns if these are missing. Add to `app.json`:
14
15	```json
16	{
17	"expo": {
18	"ios": {
19	"bundleIdentifier": "com.<username>.<app-name>",
20	"appleTeamId": "XX57RJ5UTD"
21	}
22	}
23	}
24	```
25
26	## 2. Add the App Clip target
27
28	```sh
29	bun create target clip
30	```
31
32	This installs [`@bacons/apple-targets`](https://github.com/EvanBacon/expo-apple-targets), adds it to the `plugins` array in `app.json`, and writes:
33
34	- `targets/clip/expo-target.config.js` — the target's config plugin
35	- `targets/clip/Info.plist` — Clip Info.plist
36	- `targets/clip/AppDelegate.swift`, `Assets.xcassets`, etc.
37
38	Pick a good icon or reuse the existing one defined in the app — check it with `bunx expo config` under the `icon` or `ios.icon` key.
39
40	## 3. Wire up associated domains
41
42	The parent app and the Clip each need the Associated Domains entitlement pointing at the domain that hosts the AASA file.
43
44	In `app.json`, add both `applinks:` (parent) and `appclips:` (Clip invocation) entries:
45
46	```json
47	{
48	"expo": {
49	"ios": {
50	"associatedDomains": [
51	"applinks:may20.expo.app",
52	"appclips:may20.expo.app"
53	]
54	}
55	}
56	}
57	```
58
59	In `targets/clip/expo-target.config.js`, declare the Clip's entitlement:
60
61	```js
62	/** @type {import('@bacons/apple-targets/app.plugin').ConfigFunction} */
63	module.exports = (config) => ({
64	type: "clip",
65	icon: "https://github.com/expo.png",
66	entitlements: {
67	"com.apple.developer.associated-domains": ["appclips:may20.expo.app"],
68	},
69	});
70	```
71
72	> If you skip this, `expo prebuild` will print: `Apple App Clip may require the associated domains entitlement but none were found`.
73
74	## 4. Register bundle IDs and create the App Store entry
75
76	```sh
77	bunx setup-safari
78	```
79
80	This logs in to the Apple Developer account, registers `com.bacon.may20`, creates the App Store Connect entry, and prints:
81
82	- A starter `apple-app-site-association` JSON
83	- A `<meta name="apple-itunes-app">` tag with the iTunes app id
84	- Team ID, iTunes ID, and Bundle ID
85
86	## 5. Host the AASA file
87
88	App Clips are invoked when iOS fetches `https://<your-domain>/.well-known/apple-app-site-association` and finds a matching `appclips` entry.
89
90	```sh
91	mkdir -p public/.well-known
92	touch public/.well-known/apple-app-site-association
93	```
94
95	Paste the JSON `setup-safari` printed, but add an `appclips` block for the Clip's full app ID (`<TeamID>.<ClipBundleID>`). The output of `setup-safari` only covers the parent app:
96
97	```json
98	{
99	"applinks": {
100	"details": [
101	{
102	"appIDs": ["XX57RJ5UTD.com.bacon.may20"],
103	"components": [{ "/": "*", "comment": "Matches all routes" }]
104	}
105	]
106	},
107	"appclips": {
108	"apps": ["XX57RJ5UTD.com.bacon.may20.clip"]
109	},
110	"activitycontinuation": {
111	"apps": ["XX57RJ5UTD.com.bacon.may20"]
112	},
113	"webcredentials": {
114	"apps": ["XX57RJ5UTD.com.bacon.may20"]
115	}
116	}
117	```
118
119	Notes:
120
121	- The file has no extension and no `Content-Type` requirements beyond being served as-is. Expo Router static export serves files in `public/` verbatim.
122	- The `appclips` block is what lets a URL on the domain launch the Clip.
123	- `webcredentials` is used for sharing credentials between the website, parent app, and the App Clip.
124	- `activitycontinuation` is optional and used for sharing the link between mobile and desktop. Must be used with `Head` from expo-router — see https://docs.expo.dev/router/advanced/apple-handoff/
125	- Notation and route-disabling details: https://sosumi.ai/documentation/xcode/supporting-associated-domains
126
127	## 6. Add the Smart App Banner meta tag
128
129	Create `src/app/+html.tsx` (Expo Router's HTML shell) and add the tag from `setup-safari`. Create the versioned template if it doesn't exist:
130
131	```sh
132	bunx expo customize src/app/+html.tsx
133	```
134
135	Add the meta tag to the `<head>`:
136
137	```tsx
138	import { Scro

People who liked this also viewed

6 picks

Type