Device UI Skill

Implement a complete device management web UI served by the Ioto embedded web server with Tailwind CSS, theme support, responsive design, and REST API integration.

Invoke with: /device-ui

Architecture

Browser                    Ioto Agent
+------------------+       +---------------------------+
| Tailwind CSS UI  | <---> | Web Server (web.json5)    |
| fetch('/api/..') |       |   /api/user/*  -> action  |
|                  |       |   /api/public/* -> action  |
+------------------+       |   /*           -> file     |
                           +---------------------------+
                           | REST Actions (C handlers)  |
                           | dbGet / dbCreate / dbFind   |
                           +---------------------------+
                           | Embedded DB (schema.json5) |
                           +---------------------------+

Application Pages

Page	Route	Auth	When to Include
Login	/login	public	Always (if authentication is enabled)
Dashboard	/dashboard	user	Always — customize for the device's primary use case
Devices	/devices	user	Multi-device management systems only
Device Detail	/devices/:id	user	When Devices page is included
Settings	/settings	admin	When device has user-configurable parameters
Feedback	/feedback	user	Only if user feedback collection is needed

Implementation Steps

The skill guides you through a structured implementation process:

1. Device Context Discovery — Gather information about the device, its users, and operating environment.
2. Design Brief — Create a description of the application's purpose, target user, and interaction flows.
3. Database Schema — Add or verify models in schema.json5.
4. Agent REST Endpoints — Create C action handlers for each page's data needs.
5. Frontend Project Setup — Set up the site directory with Tailwind CSS configuration.
6. UI Implementation — Build responsive pages with dark mode support.
7. API Integration — Wire up the frontend to REST endpoints with error handling.
8. Verification — Test all pages, auth flows, responsiveness, and error handling.

Key Features

• Responsive design — Mobile-first layout from 320px through desktop
• Dark mode — Full dark mode support with system preference detection
• Connection-aware — Health checks, offline state handling, data freshness tracking
• Role-based access — Login with user and admin roles
• Dangerous operation guards — Confirmation dialogs with consequence descriptions

Trust and Resilience Patterns

The skill emphasizes embedded-device-specific UI patterns:

• Connection state tracking (connected, degraded, offline) displayed in the header
• Data freshness indicators with relative timestamps on all live data
• Explicit failure handling — every action reaches a clear outcome (success, failure, timeout)
• Offline-capable — disable write actions when unreachable, show last-known data

Anti-Patterns to Avoid

• Dashboard as data dump — show status, not every metric
• Stale data presented as current — always show data age
• Silent failures — always show error state and recovery path
• Desktop-first forms on mobile — group settings, put most-changed at top
• Building features the device doesn't need