skills.rest
Rocapine
RocapineOFFICIAL
Explore all skills by this author →
WebsiteGitHub

create-step-json

Generate ComposableScreen step JSON with UIElement trees and explicit step IDs.

2|1|Updated Sep 30, 2025
Search Tags:#onboarding#generate#payload#step-json#composable-screen#design-profile
One-click install
npx skills add https://github.com/Rocapine/react-native-onboarding --skill create-step-json
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-step-json
Source: https://github.com/Rocapine/react-native-onboarding/tree/main/claude-plugin/skills/create-step-json
Command: npx skills add https://github.com/Rocapine/react-native-onboarding --skill create-step-json

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Drafting precise ComposableScreen step JSON for onboarding flows is time-consuming and error-prone; this skill automates the process by producing a design-profile-aligned step ready for Studio.

Core Features & Use Cases

  • Inspects the target app's design system, fonts, tokens, and copy voice to tailor a ComposableScreen step
  • Generates a complete step JSON with type, id, nextStep, payload, and UIElement structure based on the ComposableScreen schema
  • Outputs deterministic, Studio-ready JSON that can be dropped into Rocapine Onboarding Studio for rapid iteration
  • Use cases include drafting a new onboarding screen, prototyping a step, or exporting a ready-to-run step for a project

Quick Start

Provide the target app's design profile and request a step JSON for a new onboarding screen.

Frequently Asked Questions about create-step-json

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate onboarding step JSON for a ComposableScreen?▼

To generate onboarding step JSON, provide a target app's design profile and onboarding goals. The skill analyzes typography, tokens, and copy voice to output a faithful UIElement tree with explicit step IDs and a payload containing only a UIElement array.

What is ComposableScreen step JSON used for in onboarding flows?▼

ComposableScreen step JSON defines the structure for onboarding screens in a format ready for Rocapine Onboarding Studio. It maps UI elements, step IDs, and nextStep links so you can prototype or export deterministic onboarding flows without manual JSON drafting.

Can I use my app's existing design tokens and typography to generate onboarding steps?▼

Yes, the skill inspects an app's design system, fonts, tokens, and copy voice to tailor the ComposableScreen step. This ensures the generated UIElement tree faithfully matches the target app's visual profile and typography.

Does the generated step JSON include explicit linking for onboarding navigation?▼

Yes, the generated step JSON ensures compliance with the ComposableScreen schema by including explicit nextStep linking. It also generates deterministic UUIDs for all elements within the payload to ensure proper navigation tracking.

Why does my onboarding screen JSON fail schema validation in Studio?▼

Onboarding screen JSON fails schema validation when the payload structure is incorrect. This skill prevents errors by outputting a payload containing only a UIElement array, complete with required type, id, and deterministic UUIDs.

What's the best way to prototype a new onboarding screen for Rocapine Onboarding Studio?▼

The best way to prototype an onboarding screen is to provide the target app's design profile to this skill. It generates a complete, Studio-ready step JSON that can be dropped directly into Rocapine Onboarding Studio for rapid iteration.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
234

voice-and-tone

Define and enforce consistent brand voice across product copy.

Community
Intermediate
RocapineRocapine
2

update-uielement

Update UIElement types across the Rocapine Onboarding monorepo.

Official
Advanced
RocapineRocapine
2

sync-studio-schema

Generate a studio schema-mirror prompt from git diffs of ComposableScreen types.

Official
Advanced
RocapineRocapine
2

validate-step-json

Validate ComposableScreen step JSON against headless SDK Zod schemas.

Official
Advanced