メニュー
Generate the onboarding-studio schema-mirror prompt from staged/recent changes to ComposableScreen types. Use after editing UIElement schemas, e.g. "draft studio sync prompt", "what do I tell studio".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Installs and wires the `@rocapine/react-native-onboarding-ui` UI SDK on top of the headless SDK. Use when the user wants prebuilt onboarding screens, asks "add the UI SDK", "render the onboarding step", or "use OnboardingPage".
Builds the inner UIElement tree of a ComposableScreen step. Inspects the target app's design system before composing. Use when authoring a ComposableScreen, asks "compose a screen", "build the UIElement tree", "design the layout", or needs branching/variables in a single screen.
Authors a new Rocapine Onboarding Studio step using exclusively the ComposableScreen step type. Inspects the target app for design system, fonts, tokens, and copy voice before generating. Use when the user wants to add an onboarding screen, draft a step, or asks "give me JSON for an onboarding step".
Customizes how Rocapine ComposableScreen UIElements render in the host app — via element props (primary path) and host-wired `custom` button actions (advanced path). Use when the user wants a different look for buttons / radio cards / inputs, wants the onboarding to share components with the rest of the app, or asks "customize the button", "use my own component for X", "wire a custom action".
Finds an existing onboarding flow already implemented in the target app's source code (screens/modules named onboarding, welcome, intro, getting-started) and converts each screen into a Rocapine ComposableScreen step JSON. Preserves the app's exact design — colors, fonts, radii, copy, navigation order — pulled from the source code. Use when the user says "export my existing onboarding", "convert my onboarding screens to Rocapine", "I already have onboarding in the app — generate the JSON", "migrate the onboarding to the SDK", or "recreate my onboarding as steps".
Validates a Rocapine ComposableScreen step JSON against the headless SDK Zod schemas. Use when the user pastes step JSON and asks "is this valid", "check this onboarding step", "validate this payload", or after creating step JSON.
| name | sync-studio-schema |
| description | Generate the onboarding-studio schema-mirror prompt from staged/recent changes to ComposableScreen types. Use after editing UIElement schemas, e.g. "draft studio sync prompt", "what do I tell studio". |
| user-invocable | true |
| argument-hint |
Reads recent changes to ComposableScreen types.ts files and emits the prompt to paste into the onboarding-studio repo.
git diff HEAD -- \
packages/onboarding/src/steps/ComposableScreen/types.ts \
packages/onboarding-ui/src/UI/Pages/ComposableScreen/types.ts \
'packages/onboarding/src/steps/ComposableScreen/elements/*.ts' \
'packages/onboarding-ui/src/UI/Pages/ComposableScreen/elements/*.tsx'
If empty, also check staged + last commit:
git diff --cached -- packages/onboarding/src/steps/ComposableScreen/
git show HEAD --stat
For each modified element file, determine:
A in diff status)Inspect the diff for:
.default(X) change → behavior changez.literal("X") → breaking renameFormat:
ComposableScreen UIElement schema updated in @rocapine/react-native-onboarding.
Mirror these changes in onboarding-studio.
Summary:
<one line per element changed — what changed>
Breaking: <yes/no — list specific breaks>
Files changed in SDK:
<paste from git diff --name-only>
In onboarding-studio, update:
- UIElement discriminated union / Zod schema
- CMS editor forms (prop inputs, type pickers)
- Stored payload migration (if breaking)
- Preview renderer (if visual behavior changed)
Reference SDK commit / branch: <git rev-parse --short HEAD or branch>
echo "<prompt>" | pbcopy
Ask user before piping — don't auto-copy.