Skills
.Work. You
Rest

rialto

Community

Build consistent UIs with Rialto design-system rules.

Design & Creative#accessibility#design system#react components#css tokens#ui composition#rialto
Authormattbutlerengineering
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents UI inconsistency and design regressions by standardizing how you build with the Rialto React component library and its token-based styling.

Core Features & Use Cases

  • Rialto-first UI building: Choose the right component (inputs, overlays, feedback, navigation, data display, layout) and compose it into common screens like login forms, settings panels, and table pages.
  • Token-enforced styling: Apply the Rialto CSS token architecture so colors, spacing, radii, shadows, and easing stay consistent across the app.
  • Authoring new components correctly: Follow the required file structure, forwardRef conventions, state handling, and accessibility/motion rules when creating new Rialto components.

Quick Start

Use the rialto skill by asking the AI to help you implement a Settings panel UI that uses Rialto components, follows the token rules, and respects required providers for Toast notifications.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: rialto
Download link: https://github.com/mattbutlerengineering/mattbutlerengineering/archive/main.zip#rialto

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.