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

ui_assistant

Generates tab-based screen layout JSON configurations for the Rierino low-code page builder.

1|Updated Mar 27, 2026
Search Tags:#json#low-code#page builder#widget configuration#screen layout#rierino#ui generator
One-click install
npx skills add https://github.com/rierino-open/rierino-claude-plugin --skill ui-assistant-rierino-open
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui_assistant
Source: https://github.com/rierino-open/rierino-claude-plugin/tree/main/development/skills/ui_assistant
Command: npx skills add https://github.com/rierino-open/rierino-claude-plugin --skill ui-assistant-rierino-open

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing editor screens in the Rierino low-code platform requires hand-writing layout JSON with correct widget IDs, data paths, and 12-column grid rules, which is error-prone and slow when done manually. ## Core Features & Use Cases - Screen Configuration Generation: Produces valid tab-based layout JSON using only widget IDs, sources, and options fetched live from the Rierino MCP server catalog. - Schema-Driven Widget Binding: Binds every widget path to fields from the actual data schema, enforcing grid rules where each row sums to 12 columns. - Use Case: Ask for a person registration screen with "General Info" and "Contact Details" tabs, and receive ready-to-save raw JSON with correctly labeled widgets and valid data paths. ## Quick Start Create a Rierino screen with two tabs for registering persons using the fields name, age, email, phone, and address.

Frequently Asked Questions about ui_assistant

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

FAQPage Schema
How do I create a screen layout for the Rierino page builder?▼

Describe the tabs and fields you need, and the skill fetches the widget catalog from the Rierino MCP server, then outputs raw JSON with widgets bound to your data schema paths. Rows follow a 12-column grid system where gridProps.sm values must sum to 12.

How to bind widgets to data fields in Rierino UI configuration?▼

Each widget's path property is set to a JSON path from the data schema fetched via the State_Get_schema_write tool. Paths are never fabricated; only fields present in the actual schema are used.

Can I use custom widget IDs in a Rierino screen configuration?▼

No, only widget IDs returned by the Saga_component catalog call on the Rierino MCP server may be used. The skill never invents widget, source, or option IDs, and it stops if the catalog fetch fails.

Why must grid columns sum to 12 in Rierino layouts?▼

Rierino uses a 12-column grid system, so widget gridProps.sm values within each row must total 12. A single widget spans sm: 12 only when it requires full-row width, such as rich text editors or large tables.

Does the skill save UI changes to Rierino automatically?▼

No, the skill requires explicit user approval before creating, updating, or deleting any UI via the MCP server. After saving, it provides a browser URL in the form ${RIERINO_UI_BASE_URL}/app/design/common/ui?id={id} to view the result.

Related Skills

Explore More Software Engineering Skills→
hkcm91hkcm91

widget-data-architecture

Explain StickerNest data architecture with schema definition and widget data binding.

Community
Advanced
passionseedpassionseed
2

ui-worker

Implement React Native UI screens and navigation wiring in Expo Router projects.

Official
Intermediate
rmansrmans

scaffold-review-art

Review generated art assets for visual consistency and coverage gaps.

Community
Intermediate
matiaconematiacone

react-flow

Build interactive node-based UIs with React Flow.

Community
Advanced