skills.rest
rierino-open
rierino-openOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-builder

Generates React editor components for the Rierino low-code page builder.

1|Updated Mar 27, 2026
Search Tags:#react#javascript#low-code#component generator#page builder#property editor#rierino
One-click install
npx skills add https://github.com/rierino-open/rierino-claude-plugin --skill component-builder-rierino-open
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-builder
Source: https://github.com/rierino-open/rierino-claude-plugin/tree/main/development/skills/component_builder
Command: npx skills add https://github.com/rierino-open/rierino-claude-plugin --skill component-builder-rierino-open

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building property editors and configuration UI for the Rierino page builder requires strict adherence to platform conventions like LabeledEditor wrappers, data/onChange patterns, and Rie- prefixed CSS classes, which is error-prone when done by hand. ## Core Features & Use Cases - Editor Component Generation: Produces ready-to-paste React components that embed directly into Rierino pages as widget editors, property panels, or settings forms. - Convention Enforcement: Applies Rierino naming standards, esm.sh import rules, JavaScript-only output, and component-scoped Rie- CSS classes automatically. - MCP Integration: Reads existing component definitions via the Rierino MCP server and saves approved components, returning a browser URL for review. - Use Case: Ask for a text editor that accepts string, number, or integer data based on a valueType prop, and receive raw paste-ready component code with correct type coercion. ## Quick Start Ask the assistant to create a Rierino editor component, for example a color picker property editor that uses data and onChange props.

Frequently Asked Questions about component-builder

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

FAQPage Schema
How do I create a property editor component for the Rierino page builder?▼

Describe the editor you need, including its data type and props, and the skill generates a functional React component wrapped in LabeledEditor. The output is raw JavaScript code you paste directly into the Rierino IDE.

How do Rierino editor components handle data and onChange props?▼

Editor components read the current value from props.data and call props.onChange with the new value when it changes. Local useState for the main data prop is avoided unless throttled for high-frequency updates like color pickers.

Can I use TypeScript or npm packages in Rierino editor components?▼

No, components must be written in plain JavaScript with functional components only. External packages are imported from esm.sh without the https:// prefix, while React and hooks are imported directly.

Why must CSS class names use the Rie- prefix in Rierino components?▼

The Rie- prefix with component-specific names prevents style conflicts with other editors rendered on the same page. Custom styles are placed inside a style tag rendered within the component itself.

Does the component builder save changes to Rierino automatically?▼

No, it requires explicit user approval before creating, updating, or deleting any component via the Rierino MCP server. After saving, it provides a browser URL to view the component in the Rierino design interface.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
26

umbraco-property-editor-schema

Define server-side metadata and configuration structures for Umbraco property editors.

Official
Intermediate
H2OSLabsH2OSLabs

neuron-validate-schema

Validate neuron-ui Page Schema JSON for structure, binding, and token compliance.

Official
Advanced
speakeasy-apispeakeasy-api
19

writing-openapi-specs

Apply standardized best practices to draft and validate OpenAPI specifications.

Official
Basic
anicca-labsanicca-labs

form

Generate and validate React Native/Expo form components from Zod schemas.

Official
Intermediate