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

ui

Run and inspect Frictionless UIs with design-first event handling.

7|3|Updated Dec 23, 2025
Search Tags:#automation#design#ui#MCP#lua#event-loop#frictionless
One-click install
npx skills add https://github.com/zot/frictionless --skill ui-zot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/zot/frictionless/tree/main/install/skills/ui
Command: npx skills add https://github.com/zot/frictionless --skill ui-zot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides developers in running and understanding Frictionless UIs, enabling safe event handling, design-driven decisions, and quick UI iteration during development and maintenance.

Core Features & Use Cases

  • UI runtime orchestration: manage event loops, design resolution, and live updates without editing core UI code.
  • Design-guided handling: read design.md files based on the app field to determine how to respond to events.
  • Helper tooling: leverage MCP commands and utilities to inspect apps, test changes, and perform quick iterations.

Quick Start

Use the ui skill to start managing Frictionless UIs by connecting to your MCP session and examining the app designs. Read {base_dir}/apps/<app>/design.md to learn how to respond to events and begin safe UI modifications.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I handle UI events in a Frictionless UI without bypassing safety safeguards?▼

Frictionless UI event handling uses a design-first workflow that reads design.md files to guide responses and dispatches events to dedicated handlers, ensuring safe UI updates without bypassing safeguards.

What is the best way to inspect and modify a running Frictionless UI app during development?▼

Inspecting and modifying Frictionless UI apps uses the .ui/mcp toolset to examine app states, test changes, and perform quick iterations while maintaining a safe event processing loop.

Do I need a specific directory structure to run Frictionless UIs with MCP commands?▼

Running Frictionless UIs requires a structured directory layout containing apps/, lua/, viewdefs/, event, and log folders to properly manage event loops, design resolution, and live updates.

How does design-guided handling work for Frictionless UI event processing?▼

Design-guided handling reads the design.md file based on the app field to determine how to respond to events, dispatching them to either ui-fast or ui-thorough handlers for safe UI modifications.

Can I use Lua scripts to build and test Frictionless UI components without editing core code?▼

Building and testing Frictionless UI components uses helper scripts within the lua/ directory to iterate on UI updates and deploy changes through the event loop without directly editing core UI code.

Why should I follow a design-first workflow when updating Frictionless UIs?▼

A design-first workflow ensures that every UI event is processed according to the app's design.md specification, preventing unguided modifications and maintaining structured, safe UI updates across the runtime.

Related Skills

Explore More Software Engineering Skills→
AradotsoAradotso
3

figma-mcp-integration

Read and modify Figma designs via Model Context Protocol.

Official
Advanced
LiorCohenLiorCohen
39

cicd-scaffolding

Scaffold GitHub Actions CI/CD pipelines with workflows, scripts, and documentation.

Community
Intermediate
JamkrisJamkris
86

autonomous-agent-harness

Automate autonomous agent orchestration with Gemini CLI memory, crons, and dispatch.

Community
Advanced
ericwang915ericwang915
38

change_soul

Modify agent identity by editing the SOUL.md file with read_file and write_file.

Community
Intermediate