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

add-uielement

Define a new UIElement variant across the SDK and onboarding-ui.

2|1|Updated Sep 30, 2025
Search Tags:#onboarding#schema#sdk#react-native#types#renderer#uielement
One-click install
npx skills add https://github.com/Rocapine/react-native-onboarding --skill add-uielement
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-uielement
Source: https://github.com/Rocapine/react-native-onboarding/tree/main/.claude/skills/add-uielement
Command: npx skills add https://github.com/Rocapine/react-native-onboarding --skill add-uielement

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adds a new UIElement variant to the ComposableScreen system across both the headless SDK and onboarding-ui, enabling teams to introduce new element types (e.g., Slider, Checkbox) into the onboarding flow with consistent types, rendering, and example usage.

Core Features & Use Cases

  • Define a new UIElement type across SDK and onboarding-ui, including type definitions and props.
  • Update the discriminated union and runtime schemas to support the new element.
  • Implement a renderer component and integrate it into the rendering pipeline.
  • Mirror changes in the onboarding example to demonstrate usage and validation.

Quick Start

Define a new UIElement by following the steps described, then update example payloads to include the new element.

Frequently Asked Questions about add-uielement

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

FAQPage Schema
How do I add a new UIElement to the onboarding flow?▼

To add a new UIElement to the onboarding flow, define the new variant across the SDK and onboarding-ui by specifying its props, updating type unions and runtime schemas, implementing a renderer, and updating example payloads.

What is a discriminated union for a UIElement in a React Native SDK?▼

A discriminated union for a React Native SDK UIElement is a TypeScript type structure updated to support new element types, ensuring consistent type definitions and runtime schema validation across the onboarding flow.

What's the best way to extend ComposableScreen with custom onboarding components?▼

The best way to extend ComposableScreen with custom onboarding components is to specify the ElementName and props, integrate them into the rendering pipeline via a new renderer component, and mirror the changes in the example usage.

Do I need to update runtime schemas when introducing a new onboarding element type?▼

Yes, you must update runtime schemas when introducing a new onboarding element type to ensure the new variant is properly validated and recognized by the headless SDK and onboarding-ui rendering pipeline.

Can I add a Slider or Checkbox to the onboarding-ui without changing the SDK types?▼

No, adding a Slider or Checkbox to onboarding-ui requires updating the SDK types. You must update the discriminated union and type definitions across both the headless SDK and onboarding-ui to maintain consistency.

Why are my new UIElement props not rendering in the React Native onboarding example?▼

Your new UIElement props may not be rendering because the element variant is missing from the rendering pipeline, or the example payloads in the onboarding-ui example have not been updated to include the new element.

Related Skills

Explore More Software Engineering Skills→
duyetduyet
5

typescript-patterns

Apply branded types, discriminated unions, and type guards to TypeScript projects.

Community
Advanced
RocapineRocapine
2

update-uielement

Update UIElement types across the Rocapine Onboarding monorepo.

Official
Advanced
tututwotututwo

svelte

Convert JSON-Render specs into executable Svelte component trees.

Community
Intermediate
RocapineRocapine
2

setup-ui-sdk

Install and wire the @rocapine/react-native-onboarding-ui SDK with Expo-router adapters.

Official
Advanced