@telemetryos/cli 1.11.0 → 1.13.0

package/templates/vite-react-typescript/_claude/skills/tos-render-design/SKILL.md

@@ -1,624 +0,0 @@
----
-name: tos-render-design
-description: Design patterns for TelemetryOS Render views. Use when building display-only digital signage OR interactive kiosks. Covers responsive scaling, UI patterns, and interaction handling for both models.
----
-
-# Render View Design
-
-TelemetryOS Render views support both **digital signage** (display-only) and **interactive kiosks** (touch-enabled). Understanding which pattern you're building determines how you handle user interaction and state management.
-
-> **Note:** The init project already provides base styles in `index.css` (viewport scaling, box-sizing) and `Render.css` (`.render` class with padding, overflow, flexbox). Build on these—don't override them.
-
----
-
-## Interaction Models
-
-TelemetryOS render views support two interaction models. Both use `@telemetryos/sdk` with the same architecture—the difference is whether the render view includes onClick handlers.
-
-### Digital Signage (Display-Only)
-
-**Use for:** Information displays, dashboards, menu boards, announcements
-
-- Content updates automatically via store subscriptions
-- No user interaction (no mouse, keyboard, touch input)
-- No onClick handlers in render view
-- Viewed from a distance
-- Updates driven by timers, external data, or Settings changes
-
-### Interactive Kiosk (Touch-Enabled)
-
-**Use for:** Wayfinding, directories, check-in systems, search interfaces
-
-- Users can touch/click elements on screen
-- onClick handlers for buttons, navigation, forms
-- Idle timeout returns to home screen after inactivity
-- Touch feedback with :active states (not :hover)
-- Manages interaction state (current screen, navigation history)
-
----
-
-## Digital Signage Pattern (Display-Only)
-
-For apps where users only **view** content from a distance.
-
-### No User Interaction
-
-Assume **no mouse, keyboard, or touch input**:
-
-```css
-/* WRONG - No one will hover on digital signage */
-.button:hover {
-  background: blue;
-}
-
-/* WRONG - No one will focus elements */
-.input:focus {
-  outline: 2px solid blue;
-}
-```
-
-Avoid `:hover`, `:focus`, `:active`, and similar interaction pseudo-classes for display-only apps.
-
-### No Scrolling
-
-Content **must fit the viewport**. There's no user to scroll:
-
-```css
-/* WRONG - Creates scrollbar no one can use */
-.container {
-  overflow-y: scroll;
-}
-
-/* WRONG - Content disappears off-screen */
-.content {
-  height: 150vh;
-}
-```
-
-```css
-/* CORRECT - Content contained */
-.container {
-  height: 100vh;
-  overflow: hidden;
-}
-```
-
-If content might overflow, truncate it or conditionally hide elements—never show a scrollbar.
-
----
-
-## Interactive Kiosk Pattern (Touch-Enabled)
-
-For apps where users **interact** with the screen via touch or click.
-
-### onClick Handlers
-
-Add click handlers to interactive elements:
-
-```typescript
-function Render() {
-  const [screen, setScreen] = useState('home')
-
-  return (
-    <div className="render">
-      {screen === 'home' && (
-        <button
-          className="kiosk-button"
-          onClick={() => setScreen('search')}
-        >
-          Search Directory
-        </button>
-      )}
-      {screen === 'search' && (
-        <SearchScreen onBack={() => setScreen('home')} />
-      )}
-    </div>
-  )
-}
-```
-
-### Touch Feedback (:active states)
-
-Use `:active` pseudo-class for touch feedback (NOT `:hover`):
-
-```css
-.kiosk-button {
-  padding: 2rem 4rem;
-  font-size: 3rem;
-  background: blue;
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  transition: transform 0.1s, background 0.1s;
-}
-
-/* Touch feedback - user sees visual response when tapping */
-.kiosk-button:active {
-  transform: scale(0.95);
-  background: darkblue;
-}
-```
-
-**Why :active instead of :hover?**
-- Touch devices don't have hover
-- :active triggers on touch/click
-- Provides immediate visual feedback
-
-### Idle Timeout Pattern
-
-Return to home screen after inactivity:
-
-```typescript
-function Render() {
-  const [screen, setScreen] = useState('home')
-  const [lastInteraction, setLastInteraction] = useState(Date.now())
-
-  // Return to home after 30 seconds of inactivity
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      const elapsed = Date.now() - lastInteraction
-      if (elapsed > 30000 && screen !== 'home') {
-        setScreen('home')
-      }
-    }, 30000)
-
-    return () => clearTimeout(timeout)
-  }, [lastInteraction, screen])
-
-  const handleInteraction = (newScreen: string) => {
-    setScreen(newScreen)
-    setLastInteraction(Date.now())
-  }
-
-  return (
-    <div className="render">
-      {screen === 'home' && (
-        <button onClick={() => handleInteraction('search')}>
-          Search
-        </button>
-      )}
-    </div>
-  )
-}
-```
-
-### Touch Target Sizing
-
-Make touch targets large enough to tap accurately:
-
-```css
-/* Minimum sizes for touch targets */
-.kiosk-button {
-  min-width: 15rem;  /* Large enough to tap */
-  min-height: 8rem;
-  padding: 2rem 4rem;
-  font-size: 3rem;   /* Large, readable text */
-}
-```
-
-**Guidelines:**
-- Minimum 8rem height for buttons
-- 2rem padding minimum
-- 3rem font size minimum for buttons
-- Gap of at least 1rem between interactive elements
-
-### Store State for Navigation
-
-Use device store to persist state across composition changes:
-
-```typescript
-// hooks/store.ts
-import { createUseDeviceStoreState } from '@telemetryos/sdk/react'
-
-export const useKioskScreenState = createUseDeviceStoreState<string>(
-  'kiosk-screen',
-  'home'
-)
-
-// Render.tsx
-const [_isLoading, screen, setScreen] = useKioskScreenState()
-```
-
-**Why device store?**
-- Persists state on the device (survives composition changes)
-- Doesn't sync to other devices (screen state is device-local)
-
----
-
-## UI Scale Hooks
-
-**Applies to both digital signage and interactive kiosks.**
-
-Displays range from tablets to 8K video walls. Standard CSS pixels create inconsistent sizing. The SDK provides hooks that redefine `rem` as viewport-relative:
-
-### useUiScaleToSetRem(uiScale)
-
-Sets the document's root font-size based on viewport. **Call once in your Render view:**
-
-```typescript
-import { useUiScaleToSetRem } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-
-export function Render() {
-  const [_isLoading, uiScale] = useUiScaleStoreState()
-  useUiScaleToSetRem(uiScale)
-
-  return <div className="content">...</div>
-}
-```
-
-**How it works:**
-- At scale 1: `1rem` = 1% of viewport's longest dimension
-- At scale 2: `1rem` = 2% of viewport's longest dimension
-- A 2rem font occupies identical screen percentage on Full HD and 4K
-
-### useUiAspectRatio()
-
-Returns current aspect ratio, updating on resize:
-
-```typescript
-import { useUiAspectRatio } from '@telemetryos/sdk/react'
-
-export function Render() {
-  const aspectRatio = useUiAspectRatio()
-
-  // > 1 = landscape, < 1 = portrait, = 1 = square
-  const isPortrait = aspectRatio < 1
-
-  return (
-    <div className={isPortrait ? 'portrait-layout' : 'landscape-layout'}>
-      ...
-    </div>
-  )
-}
-```
-
----
-
-## Best Practices
-
-**Applies to both digital signage and interactive kiosks.**
-
-### Use rem for Everything
-
-All sizing should use `rem` to scale with the UI scale setting:
-
-```css
-/* CORRECT - Scales with viewport */
-.title {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-}
-
-.card {
-  padding: 2rem;
-  border-radius: 0.5rem;
-}
-```
-
-```css
-/* WRONG - Fixed pixels don't scale */
-.title {
-  font-size: 48px;
-  margin-bottom: 12px;
-}
-```
-
-### Title Safe Zone
-
-The init project's `.render` class already applies ~3rem padding from screen edges (SMPTE ST 2046-1 standard for avoiding bezel cutoff). Keep this padding when building your layout.
-
-### Minimum Text Size
-
-Text should be no smaller than ~2rem for comfortable viewing at typical distances (approximately 4% of screen height):
-
-```css
-.body-text {
-  font-size: 2rem; /* Minimum readable size */
-}
-
-.headline {
-  font-size: 4rem;
-}
-
-.small-label {
-  font-size: 1.5rem; /* Use sparingly */
-}
-```
-
-### Constrain Layouts
-
-The init project's `index.css` and `.render` class already set up the base layout with `overflow: hidden` and flexbox. When adding child elements, use `min-height: 0` or `min-width: 0` on flex children to allow them to shrink:
-
-```css
-.my-content {
-  flex: 1;
-  min-height: 0; /* Allows flex children to shrink below content size */
-}
-```
-
-### Text Truncation
-
-When text might overflow, truncate gracefully:
-
-```css
-.title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Multi-line truncation */
-.description {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-```
-
-### Adaptive Content
-
-Use `useUiAspectRatio()` to adapt layouts for portrait vs landscape:
-
-```typescript
-function Dashboard() {
-  const aspectRatio = useUiAspectRatio()
-  const isPortrait = aspectRatio < 1
-
-  return (
-    <div className={`dashboard ${isPortrait ? 'dashboard--portrait' : ''}`}>
-      <PrimaryContent />
-      {/* Hide sidebar in portrait mode */}
-      {!isPortrait && <Sidebar />}
-    </div>
-  )
-}
-```
-
----
-
-## Complete Examples
-
-### Digital Signage Example (Display-Only)
-
-```typescript
-// Render.tsx - Display-only dashboard
-import { useUiScaleToSetRem, useUiAspectRatio } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-import './Render.css'
-
-export function Render() {
-  const [isLoading, uiScale] = useUiScaleStoreState()
-  const aspectRatio = useUiAspectRatio()
-
-  useUiScaleToSetRem(uiScale)
-
-  if (isLoading) return null
-
-  const isPortrait = aspectRatio < 1
-
-  return (
-    <div className="render">
-      <header className="render__header">
-        <h1 className="render__title">Dashboard</h1>
-      </header>
-
-      <main className={`render__content ${isPortrait ? 'render__content--portrait' : ''}`}>
-        <div className="render__primary">
-          <MainDisplay />
-        </div>
-
-        {!isPortrait && (
-          <aside className="render__sidebar">
-            <SecondaryInfo />
-          </aside>
-        )}
-      </main>
-    </div>
-  )
-}
-```
-
-```css
-/* Render.css - Display-only styles */
-.render__header {
-  flex-shrink: 0;
-  margin-bottom: 2rem;
-}
-
-.render__title {
-  font-size: 4rem;
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.render__content {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  gap: 2rem;
-}
-
-.render__content--portrait {
-  flex-direction: column;
-}
-
-.render__primary {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
-
-.render__sidebar {
-  width: 25rem;
-  flex-shrink: 0;
-}
-```
-
-### Interactive Kiosk Example (Touch-Enabled)
-
-```typescript
-// Render.tsx - Interactive kiosk with navigation
-import { useState, useEffect } from 'react'
-import { useUiScaleToSetRem } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-import './Render.css'
-
-export function Render() {
-  const [isLoading, uiScale] = useUiScaleStoreState()
-  const [screen, setScreen] = useState('home')
-  const [lastInteraction, setLastInteraction] = useState(Date.now())
-
-  useUiScaleToSetRem(uiScale)
-
-  // Idle timeout - return to home after 30 seconds
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      const elapsed = Date.now() - lastInteraction
-      if (elapsed > 30000 && screen !== 'home') {
-        setScreen('home')
-      }
-    }, 30000)
-
-    return () => clearTimeout(timeout)
-  }, [lastInteraction, screen])
-
-  const handleInteraction = (newScreen: string) => {
-    setScreen(newScreen)
-    setLastInteraction(Date.now())
-  }
-
-  if (isLoading) return null
-
-  return (
-    <div className="render">
-      {screen === 'home' && (
-        <div className="kiosk-home">
-          <h1 className="kiosk-home__title">Welcome</h1>
-          <button
-            className="kiosk-button"
-            onClick={() => handleInteraction('search')}
-          >
-            Search Directory
-          </button>
-          <button
-            className="kiosk-button"
-            onClick={() => handleInteraction('map')}
-          >
-            View Map
-          </button>
-        </div>
-      )}
-
-      {screen === 'search' && (
-        <SearchScreen onBack={() => handleInteraction('home')} />
-      )}
-
-      {screen === 'map' && (
-        <MapScreen onBack={() => handleInteraction('home')} />
-      )}
-    </div>
-  )
-}
-```
-
-```css
-/* Render.css - Interactive kiosk styles */
-.kiosk-home {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 3rem;
-  height: 100%;
-}
-
-.kiosk-home__title {
-  font-size: 6rem;
-  margin: 0;
-}
-
-/* Touch-friendly button with :active feedback */
-.kiosk-button {
-  min-width: 20rem;
-  min-height: 8rem;
-  padding: 2rem 4rem;
-  font-size: 3rem;
-  background: #0066cc;
-  color: white;
-  border: none;
-  border-radius: 1rem;
-  cursor: pointer;
-  transition: transform 0.1s, background 0.1s;
-}
-
-/* Touch feedback - scales down when tapped */
-.kiosk-button:active {
-  transform: scale(0.95);
-  background: #0052a3;
-}
-```
-
----
-
-## Store Hook for UI Scale
-
-Create a store hook to let admins adjust the UI scale:
-
-```typescript
-// hooks/store.ts
-import { createUseInstanceStoreState } from '@telemetryos/sdk/react'
-
-export const useUiScaleStoreState = createUseInstanceStoreState<number>('ui-scale', 1)
-```
-
-```typescript
-// Settings.tsx - Add slider control
-import { SettingsSliderFrame, SettingsField, SettingsLabel } from '@telemetryos/sdk/react'
-import { useUiScaleStoreState } from '../hooks/store'
-
-export function Settings() {
-  // Pass 0 debounce for instant slider updates
-  const [isLoading, uiScale, setUiScale] = useUiScaleStoreState(0)
-
-  return (
-    <SettingsField>
-      <SettingsLabel>UI Scale</SettingsLabel>
-      <SettingsSliderFrame>
-        <input
-          type="range"
-          min={1}
-          max={3}
-          step={0.01}
-          disabled={isLoading}
-          value={uiScale}
-          onChange={(e) => setUiScale(parseFloat(e.target.value))}
-        />
-        <span>{uiScale}x</span>
-      </SettingsSliderFrame>
-    </SettingsField>
-  )
-}
-```
-
----
-
-## Common Mistakes
-
-| Mistake | Problem | Fix |
-|---------|---------|-----|
-| Using `px` units | Won't scale across resolutions | Use `rem` everywhere |
-| Adding `:hover` styles on digital signage | No mouse on display-only apps | Remove interaction states for display-only |
-| Using `:hover` on interactive kiosks | No hover on touch devices | Use `:active` instead for touch feedback |
-| Using `overflow: scroll` | No user to scroll | Use `overflow: hidden`, truncate content |
-| Fixed heights in `px` | Breaks on different aspect ratios | Use `vh`, `%`, or flex |
-| Forgetting `useUiScaleToSetRem()` | `rem` units won't scale properly | Call it once in Render view with uiScale |
-| Text below 2rem | Unreadable from viewing distance | Minimum 2rem for body text |
-| Small touch targets on kiosks | Hard to tap accurately | Minimum 8rem height, 2rem padding, 3rem font |
-| No idle timeout on kiosks | Kiosk stays on user's screen | Add useEffect timeout logic |
-| No touch feedback on kiosks | User unsure if tap registered | Add :active state animations |
-| Removing `.render` padding | Content cut off by bezels | Keep the ~3rem padding from init project |
-| Overriding `index.css` base styles | Breaks viewport scaling | Add new styles, don't modify base setup |