update-uielement

Update UIElement types across the Rocapine Onboarding monorepo.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This capability streamlines maintaining consistency when editing UIElement types across the Rocapine Onboarding monorepo by ensuring prop definitions, schemas, and renderers stay synchronized.

Core Features & Use Cases

  • Propagation of changes across both SDK and UI packages to keep types, schemas, and renderers aligned.
  • Quick updates to existing ComposableScreen elements, including adding or renaming props, tweaking defaults, or adjusting renderer behavior.
  • Real-world scenario: modify TextElement to support a new fontSize prop and ensure downstream payloads and prompts reflect the change.

Quick Start

Provide the ElementName and a concise description of the change you want to apply.

Frequently Asked Questions about update-uielement

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

FAQPage Schema
How do I update UIElement types across a monorepo when modifying ComposableScreen props?

To update UIElement types across a monorepo, you apply changes to prop definitions, Zod schemas, and renderer logic simultaneously. This ensures TypeScript types, schemas, and UI packages stay synchronized without manual cross-package edits.

How does schema validation work when adding a new prop to a TypeScript UIElement?

Schema validation updates work by modifying the Zod schema alongside the TypeScript type definition. When you add a new prop to a UIElement, the schema validation rules automatically adjust to validate the new property payload.

Can I update default values and renderer behavior for an existing ComposableScreen element?

Yes, you can update default values and renderer behavior for existing ComposableScreen elements. The update propagates these adjustments directly to both headless and UI packages to maintain rendering consistency.

What is the best way to keep SDK and UI packages aligned when renaming UIElement props?

The best way to keep SDK and UI packages aligned when renaming props is to apply a synchronized update across the monorepo. This automatically updates TypeScript types, Zod schemas, and example payloads to prevent runtime mismatches.

Does updating an onboarding UIElement automatically update example payloads and studio prompts?

Yes, updating an onboarding UIElement automatically updates example payloads and studio prompts. When you modify prop definitions or schemas, downstream payloads and prompts reflect the changes to ensure onboarding studio remains accurate.