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

customize-onboarding-components

Customize Rocapine ComposableScreen UIElements via props and host-wired actions.

2|1|Updated Sep 30, 2025
Search Tags:#onboarding#react-native#design-system#actions#ui-components#host-integration#customize
One-click install
npx skills add https://github.com/Rocapine/react-native-onboarding --skill customize-onboarding-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: customize-onboarding-components
Source: https://github.com/Rocapine/react-native-onboarding/tree/main/claude-plugin/skills/customize-onboarding-components
Command: npx skills add https://github.com/Rocapine/react-native-onboarding --skill customize-onboarding-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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, or inputs, wants the onboarding to share components with the rest of the app, or asks "customize the button", "use my own component for X", or "wire a custom action".

Core Features & Use Cases

Tier 1 — Match via props (default path) lets every styled UIElement (Button, RadioGroup, CheckboxGroup, Input, WheelPicker, DrawingPad, Slider, Text, container stacks) accept the full visual surface as props. Wire them all from the Design Profile and the result is indistinguishable from a native-host component. Tier 1 also exposes per-element customization for color, typography, spacing, shadow, haptic feedback, and per-item variants; Tier 2 demonstrates host-wired custom actions; Tier 3 describes deep renderer replacement.

Quick Start

Define your Design Profile values and load them through OnboardingProvider to start styling the onboarding components.

Frequently Asked Questions about customize-onboarding-components

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

FAQPage Schema
How do I customize onboarding UI components to match my app's design system?▼

Onboarding UI components can be customized to match your app by defining Design Profile values and loading them through OnboardingProvider. This applies your color, typography, and spacing props directly to elements like Button, RadioGroup, and Input.

Can I wire custom actions to onboarding buttons in a React Native app?▼

Yes, you can wire custom actions to onboarding buttons using Tier 2 host-wired actions. This allows the host app to define advanced behaviors that trigger when users interact with buttons during the onboarding flow.

What is the best way to replace default onboarding elements with my own React Native components?▼

The best way to replace default onboarding elements is Tier 3 deep renderer customization. This approach allows you to swap out the standard renderer entirely, enabling end-to-end integration with your own custom React Native components.

Does this onboarding customization approach support styling for sliders and wheel pickers?▼

Yes, the onboarding customization supports styling for sliders and wheel pickers. Tier 1 prop-based customization exposes the full visual surface for these elements, including color, shadow, haptic feedback, and per-item variants.

What are the limitations of prop-based onboarding UI customization?▼

Prop-based customization is limited to the predefined visual surface exposed by each UIElement. If you need behavior changes or entirely new component structures beyond color, typography, and spacing, you must escalate to Tier 2 actions or Tier 3 renderer replacement.

Do I need to configure a Design Profile before customizing onboarding screens?▼

Yes, you need to define your Design Profile values first. Loading these values through OnboardingProvider is the quick start requirement to begin styling the onboarding components across your host application.

Related Skills

Explore More Design & Creative Skills→
treesus6treesus6
1

sq-mobile-dev

Enforce React Native/Expo development standards for SkateQuest-Mobile UI components.

Community
Intermediate
Cap-goCap-go
58

capacitor-deep-linking

Configure custom schemes, universal links, and OAuth callbacks for Capacitor apps.

Official
Advanced
Higashi-KotaHigashi-Kota

theme-to-component-migration

Migrate hardcoded Tailwind styles and native HTML elements to Storybook-defined UI components in TypeScript/React projects.

Community
Intermediate
RocapineRocapine
2

setup-ui-sdk

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

Official
Advanced