ui-basics

Guide developers in UI bindings, state management, and patterns.

7|3|Updated Dec 23, 2025

Search Tags:#documentation #patterns #state-management #bindings #prototypes #ui-engine #hot-loading

Ready to run

npx skills add https://github.com/zot/frictionless --skill ui-basics

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-basics
Source: https://github.com/zot/frictionless/tree/main/install/skills/ui-basics
Command: npx skills add https://github.com/zot/frictionless --skill ui-basics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides centralized UI-engine reference material guiding bindings, state management, and reusable patterns.

Core Features & Use Cases

Binding and state management references: ui-value, ui-action, ui-event-*, etc.
Pattern and prototype guidance: patterns, prototypes, and hot-loading workflows.
Quick-start and learning flow: load this skill once, then use /ui-fast or /ui-thorough to begin work.

Quick Start

Load this skill once, then use /ui-fast or /ui-thorough for actual work. Ensure /frontend-design is loaded if available. Run .ui/mcp patterns to see available patterns in .ui/patterns/.

Frequently Asked Questions about ui-basics

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

FAQPage Schema

What are UI bindings and state management patterns for rapid app development?▼

UI bindings like ui-value, ui-action, and ui-event connect application state to interface elements, while state management patterns maintain data consistency across UI components, enabling rapid prototyping and hot-loading workflows.

How do I start using UI-engine patterns for building prototypes?▼

Load the UI-engine reference skill once, then use /ui-fast or /ui-thorough to begin work. Run .ui/mcp patterns to explore available patterns in the .ui/patterns/ directory for building and maintaining UI-driven apps.

Can I use hot-loading workflows with existing UI state management setups?▼

Yes, hot-loading workflows integrate with existing UI state management by leveraging ui-value, ui-action, and ui-event references, allowing you to rapidly prototype and maintain UI-driven apps without losing application state during updates.

What's the best way to explore available UI patterns and prototypes?▼

The best way to explore available UI patterns and prototypes is by running the .ui/mcp patterns command, which lists all reference materials and reusable patterns stored in the .ui/patterns/ directory for immediate integration.

Do I need frontend design loaded before using UI bindings and patterns?▼

Ensure /frontend-design is loaded if available before starting UI bindings and patterns work. After loading the UI-engine reference once, use /ui-fast or /ui-thorough commands to proceed with actual development tasks.

Why use centralized UI-engine reference material for state management?▼

Centralized UI-engine reference material provides consistent guidance on bindings, state management, and reusable patterns, preventing fragmented documentation and ensuring standardized prototype and hot-loading workflows across rapid app development.