skills.rest
zot
zotCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/zot/frictionless --skill ui-basics
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
leonardoteodorooleonardoteodoroo

design-system-patterns

Define design system tokens, theming, and component architecture patterns.

Community
Intermediate
www-zaq-aiwww-zaq-ai
66

iterate

Apply human feedback to a feature's PRD, UX, and prototype.

Official
Intermediate
JuelHossainJuelHossain

ui-design

Standardize React and Vite UI components with Shadcn UI and Zustand.

Community
Intermediate
the-perfect-developerthe-perfect-developer
11

alpinejs

Add declarative interactivity to HTML using Alpine.js core directives.

Community
Intermediate