appshot-core

Name: appshot-core
Author: trunghaiy

35stars0forks

How to install appshot-core?

trunghaiy/appshot/appshot-core

$npx -y skills add trunghaiy/appshot --skill appshot-core

Installs into the current project.

Summary

Foundation skill for Appshot. Defines the Remotion project architecture, primitives library, config schema, device presets, and store requirements. Owns the shared extraction phase used by appshot-videos and appshot-images.

Files · 1

View on GitHub

SKILL.md

1	# Appshot Core — Foundation
2
3	Reference skill for all Appshot skills. Read this before executing `appshot-videos` or `appshot-images`.
4
5	## Architecture
6
7	- Remotion 4.0 + React 18 + Tailwind CSS 3.4
8	- Config defines app metadata and brand only — scenes are custom `.tsx` files, not config entries
9	- Each project has an orchestrator component (e.g., `FooPreview.tsx`) that sequences custom scenes via Remotion `<Sequence>` + `<SceneWrap>`
10	- All primitives are brand-aware via a `brand` prop derived from the config's `BrandColors`
11
12	## Project Context (auto-injected)
13
14	- Package manifest: !`cat package.json 2>/dev/null \|\| cat pubspec.yaml 2>/dev/null \|\| cat app.json 2>/dev/null`
15	- App colors: !`find . -maxdepth 4 \( -name 'colors.xml' -o -name 'Colors.swift' -o -name 'colors.ts' -o -name 'theme.ts' -o -name 'Color.kt' -o -name 'tailwind.config.js' -o -name 'tailwind.config.ts' \) 2>/dev/null \| head -5 \| xargs head -50 2>/dev/null`
16	- App icon: !`find . -maxdepth 5 \( -name 'ic_launcher.png' -o -name 'icon.png' \) -type f 2>/dev/null \| head -3`
17	- Store metadata: !`cat fastlane/metadata/en-US/full_description.txt 2>/dev/null \|\| cat fastlane/metadata/en-US/description.txt 2>/dev/null \|\| cat fastlane/metadata/android/en-US/full_description.txt 2>/dev/null`
18	- README excerpt: !`head -80 README.md 2>/dev/null`
19
20	## Extraction & Context Caching
21
22	Both `appshot-videos` and `appshot-images` use this extraction process. Results are cached to `.appshot-context.json` so extraction only runs once per project.
23
24	### Check for cached context
25
26	Before scanning, check if `.appshot-context.json` exists in the project root. If it does:
27	1. Load and present a summary to the user
28	2. Ask: "I found a previous extraction. Confirm this is still correct, or re-scan?"
29	3. If confirmed, skip extraction and proceed to the calling skill's next phase
30	4. If re-scan requested, run extraction below and overwrite the file
31
32	### Extraction steps
33
34	#### Step 1: Detect framework
35
36	Check for marker files in this order. Stop at the first match.
37
38	\| Framework \| Marker files \|
39	\|---\|---\|
40	\| Expo / React Native \| `app.json`, `app.config.ts`, `app.config.js` \|
41	\| Flutter \| `pubspec.yaml` \|
42	\| iOS (Swift) \| `.xcodeproj/`, `.xcworkspace/`, `Package.swift` \|
43	\| Android (Kotlin/Java) \| `app/src/main/AndroidManifest.xml`, `build.gradle.kts`, `build.gradle` \|
44	\| Next.js \| `next.config.js`, `next.config.ts`, `next.config.mjs` \|
45	\| SvelteKit \| `svelte.config.js` \|
46	\| Nuxt \| `nuxt.config.ts`, `nuxt.config.js` \|
47	\| Astro \| `astro.config.mjs`, `astro.config.ts` \|
48	\| Remix \| `remix.config.js`, `app/root.tsx` (with @remix-run import) \|
49	\| Vite (React/Vue/Solid) \| `vite.config.ts`, `vite.config.js` (check `package.json` for react/vue/solid) \|
50
51	Use `ls` or `find . -maxdepth 3` to check. If none match, note that no framework was detected and move on — the user may describe their app verbally.
52
53	#### Step 2: Extract app identity
54
55	Expo / React Native:
56	- Name: `app.json` -> `expo.name` or `name`
57	- Description/tagline: `app.json` -> `expo.description` or `description`
58	- Bundle ID: `app.json` -> `expo.ios.bundleIdentifier` or `expo.android.package`
59	- Also check: `package.json` -> `name`, `description`
60
61	Flutter:
62	- Name: `pubspec.yaml` -> `name:`
63	- Description: `pubspec.yaml` -> `description:`
64	- Also check: `android/app/src/main/AndroidManifest.xml` -> `android:label`, `ios/Runner/Info.plist` -> `CFBundleDisplayName`
65
66	iOS (Swift):
67	- Name: `Info.plist` -> `CFBundleDisplayName` or `CFBundleName`
68	- Bundle ID: `Info.plist` -> `CFBundleIdentifier`
69	- Also check: `project.pbxproj` for product name
70
71	Android (Kotlin/Java):
72	- Name: `app/src/main/res/values/strings.xml` -> `<string name="app_name">`
73	- Package: `AndroidManifest.xml` -> `package` attribute
74	- Also check: `build.gradle.kts` or `build.gradle` -> `applicationId`
75
76	Next.js:
77	- Name: `package.json` → `name`; also check `next.config.*` → `env.APP_NAME`
78	- Description/tagline: `package.json` → `description`; also check `app/layout.tsx` → `metadata.description`
79	- URL: check `.env` or `.env.local` → `NEXT_PUBLIC_APP_URL`, `NEXT_PUBLIC_SITE_URL`
80
81	SvelteKit:
82	- Name: `package.json` → `name`
83	- Description: `package.json` → `description`; check `src/app.html` → `<title>`, `<meta name="description">`
84
85	Vite (React/Vue):
86	- Name: `package.json` → `name`
87	- Description: `package.json` → `description`; check `index.html` → `<title>`, `<meta name="description">`
88
89	#### Step 3: Extract brand colors
90
91	Search for color definitions. Read the first match in each framework.
92
93	Expo / React Native — search paths (in order):
94	1. `src/theme.ts` or `src/them

People who liked this also viewed

6 picks

Type

appshot-core

35stars0forks

View on GitHub

How to install appshot-core?

trunghaiy/appshot/appshot-core

$npx -y skills add trunghaiy/appshot --skill appshot-core

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Appshot Core — Foundation
2
3	Reference skill for all Appshot skills. Read this before executing `appshot-videos` or `appshot-images`.
4
5	## Architecture
6
7	- Remotion 4.0 + React 18 + Tailwind CSS 3.4
8	- Config defines app metadata and brand only — scenes are custom `.tsx` files, not config entries
9	- Each project has an orchestrator component (e.g., `FooPreview.tsx`) that sequences custom scenes via Remotion `<Sequence>` + `<SceneWrap>`
10	- All primitives are brand-aware via a `brand` prop derived from the config's `BrandColors`
11
12	## Project Context (auto-injected)
13
14	- Package manifest: !`cat package.json 2>/dev/null \|\| cat pubspec.yaml 2>/dev/null \|\| cat app.json 2>/dev/null`
15	- App colors: !`find . -maxdepth 4 \( -name 'colors.xml' -o -name 'Colors.swift' -o -name 'colors.ts' -o -name 'theme.ts' -o -name 'Color.kt' -o -name 'tailwind.config.js' -o -name 'tailwind.config.ts' \) 2>/dev/null \| head -5 \| xargs head -50 2>/dev/null`
16	- App icon: !`find . -maxdepth 5 \( -name 'ic_launcher.png' -o -name 'icon.png' \) -type f 2>/dev/null \| head -3`
17	- Store metadata: !`cat fastlane/metadata/en-US/full_description.txt 2>/dev/null \|\| cat fastlane/metadata/en-US/description.txt 2>/dev/null \|\| cat fastlane/metadata/android/en-US/full_description.txt 2>/dev/null`
18	- README excerpt: !`head -80 README.md 2>/dev/null`
19
20	## Extraction & Context Caching
21
22	Both `appshot-videos` and `appshot-images` use this extraction process. Results are cached to `.appshot-context.json` so extraction only runs once per project.
23
24	### Check for cached context
25
26	Before scanning, check if `.appshot-context.json` exists in the project root. If it does:
27	1. Load and present a summary to the user
28	2. Ask: "I found a previous extraction. Confirm this is still correct, or re-scan?"
29	3. If confirmed, skip extraction and proceed to the calling skill's next phase
30	4. If re-scan requested, run extraction below and overwrite the file
31
32	### Extraction steps
33
34	#### Step 1: Detect framework
35
36	Check for marker files in this order. Stop at the first match.
37
38	\| Framework \| Marker files \|
39	\|---\|---\|
40	\| Expo / React Native \| `app.json`, `app.config.ts`, `app.config.js` \|
41	\| Flutter \| `pubspec.yaml` \|
42	\| iOS (Swift) \| `.xcodeproj/`, `.xcworkspace/`, `Package.swift` \|
43	\| Android (Kotlin/Java) \| `app/src/main/AndroidManifest.xml`, `build.gradle.kts`, `build.gradle` \|
44	\| Next.js \| `next.config.js`, `next.config.ts`, `next.config.mjs` \|
45	\| SvelteKit \| `svelte.config.js` \|
46	\| Nuxt \| `nuxt.config.ts`, `nuxt.config.js` \|
47	\| Astro \| `astro.config.mjs`, `astro.config.ts` \|
48	\| Remix \| `remix.config.js`, `app/root.tsx` (with @remix-run import) \|
49	\| Vite (React/Vue/Solid) \| `vite.config.ts`, `vite.config.js` (check `package.json` for react/vue/solid) \|
50
51	Use `ls` or `find . -maxdepth 3` to check. If none match, note that no framework was detected and move on — the user may describe their app verbally.
52
53	#### Step 2: Extract app identity
54
55	Expo / React Native:
56	- Name: `app.json` -> `expo.name` or `name`
57	- Description/tagline: `app.json` -> `expo.description` or `description`
58	- Bundle ID: `app.json` -> `expo.ios.bundleIdentifier` or `expo.android.package`
59	- Also check: `package.json` -> `name`, `description`
60
61	Flutter:
62	- Name: `pubspec.yaml` -> `name:`
63	- Description: `pubspec.yaml` -> `description:`
64	- Also check: `android/app/src/main/AndroidManifest.xml` -> `android:label`, `ios/Runner/Info.plist` -> `CFBundleDisplayName`
65
66	iOS (Swift):
67	- Name: `Info.plist` -> `CFBundleDisplayName` or `CFBundleName`
68	- Bundle ID: `Info.plist` -> `CFBundleIdentifier`
69	- Also check: `project.pbxproj` for product name
70
71	Android (Kotlin/Java):
72	- Name: `app/src/main/res/values/strings.xml` -> `<string name="app_name">`
73	- Package: `AndroidManifest.xml` -> `package` attribute
74	- Also check: `build.gradle.kts` or `build.gradle` -> `applicationId`
75
76	Next.js:
77	- Name: `package.json` → `name`; also check `next.config.*` → `env.APP_NAME`
78	- Description/tagline: `package.json` → `description`; also check `app/layout.tsx` → `metadata.description`
79	- URL: check `.env` or `.env.local` → `NEXT_PUBLIC_APP_URL`, `NEXT_PUBLIC_SITE_URL`
80
81	SvelteKit:
82	- Name: `package.json` → `name`
83	- Description: `package.json` → `description`; check `src/app.html` → `<title>`, `<meta name="description">`
84
85	Vite (React/Vue):
86	- Name: `package.json` → `name`
87	- Description: `package.json` → `description`; check `index.html` → `<title>`, `<meta name="description">`
88
89	#### Step 3: Extract brand colors
90
91	Search for color definitions. Read the first match in each framework.
92
93	Expo / React Native — search paths (in order):
94	1. `src/theme.ts` or `src/them

People who liked this also viewed

6 picks

Type