From rierino
React component generator for the Rierino Low-Code page builder. Produces ready-to-paste UI editor components that embed into Rierino pages. Use this skill whenever the user asks to create, modify, or fix an editor component, a widget editor, a property panel control, or any React-based input component intended for the Rierino page builder — even if they don't say "editor" explicitly but the context involves configuration UI.
How this skill is triggered — by the user, by Claude, or both
Slash command
/rierino:component_builderThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
React component generator for the Rierino Low-Code page builder. Produces ready-to-paste UI editor components that embed into Rierino pages. Use this skill whenever the user asks to create, modify, or fix an editor component, a widget editor, a property panel control, or any React-based input component intended for the Rierino page builder — even if they don't say "editor" explicitly but the co...
React component generator for the Rierino Low-Code page builder. Produces ready-to-paste UI editor components that embed into Rierino pages. Use this skill whenever the user asks to create, modify, or fix an editor component, a widget editor, a property panel control, or any React-based input component intended for the Rierino page builder — even if they don't say "editor" explicitly but the context involves configuration UI.
data / onChange patterns.LabeledEditor, EditorProducer, or Rie- CSS class names.State_Get_component_write tool on rierino MCP server to read existing definition for a mentioned component.${RIERINO_UI_BASE_URL}/app/design/common/component?id={id} unless you deleted it.[!IMPORTANT] Naming Standards: All data paths and property keys must follow
CONVENTIONS.MD.
<LabeledEditor> imported from:
import LabeledEditor from "components/editors/LabeledEditor";<LabeledEditor {...props}>collapse="collapsed" to <LabeledEditor>data and onChange)props.data for displaying the current value.props.onChange(newValue) when the value changes.useState for the main data prop unless handling high-frequency updates (e.g., live color pickers) — in that case, implement throttle/debounce before calling props.onChange.esm.sh without https://:
import _ from "esm.sh/lodash";import React from "react";
import { useState, useEffect } from "react";Rie- prefixed CSS class names (e.g., Rie-input, Rie-button).<style> tag rendered within the component.export default YourComponentName;To ensure the output can be pasted directly into the Rierino IDE:
```jsx or ```.Prompt: "I need a text editor that accepts string, number, or integer data. The data type will be provided by a valueType prop."
Expected Output:
import React from "react";
import LabeledEditor from "components/editors/LabeledEditor";
function TextEditor(props) {
const { data, onChange, valueType } = props;
const isNumericType = valueType === "integer" || valueType === "number";
const handleChange = (e) => {
let value = e.target.value;
if (value === "") {
value = undefined;
} else if (valueType === "integer") {
const parsedInt = parseInt(value, 10);
value = isNaN(parsedInt) ? undefined : parsedInt;
} else if (valueType === "number") {
const parsedNum = Number(value);
value = isNaN(parsedNum) ? undefined : parsedNum;
}
onChange(value);
};
return (
<LabeledEditor {...props}>
<input
className="Rie-input Rie-input-text"
type={isNumericType ? "number" : "text"}
value={data === undefined ? "" : data}
onChange={handleChange}
{...(valueType === "number" && { step: "any" })}
{...(valueType === "integer" && { step: "1" })}
/>
</LabeledEditor>
);
}
export default TextEditor;
https:// in esm.sh import paths.data prop with useState without a throttle/debounce justification.label prop — it is injected by EditorProducer via props.Rie- and make them component-specific.npx claudepluginhub rierino-open/rierino-claude-plugin --plugin rierino-developmentProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.