# Adapting React Apps from Mobile to TV with AI Assistance
Running a React app on a **mobile phone** is one thing — but bringing it to a **living room TV** is a whole new challenge.
TVs often have **lower performance**, require **remote control navigation**, and need careful handling of **focus management** and **non-touch interactions**.
So, **how can we make a non-deterministic AI coding assistant more predictable** to address these challenges effectively?
---
## Overview of the Talk
In this session, **Eric Fahsl**, Principal Product Manager at Amazon, introduced Amazon’s new AI assistant **Kiro.dev**, demonstrating how it helps developers adapt a **React 19 + Three.js mobile app** to the **big TV screen**.
Eric showcased Kiro’s unique **Spec Mode** — a workflow that **converts a single prompt into structured requirements, design docs, and executable tasks**, greatly increasing predictability in AI-assisted development.
---
## Current State of AI Tool Usage
**Quick poll results:**
- Most developers already use AI tools like **Copilot**, **Cursor**, or **Claude Code**.
- While powerful, LLMs are **non-deterministic**, making them tricky for projects requiring **strict architectures**.
**Kiro.dev’s mission:** Provide **structured, predictable outputs** through a controlled AI workflow.
---
## Platform Introduction: Kiro.dev
- Pronounced **"Kiro"**, not "Cairo"
- Built on **VS Code**
- Modes:
- **Vibe Mode** – for rapid, creative prototyping
- **Spec Mode** – for structured, traceable development
- Upcoming features: **Hooks**, **Steering Docs**, **MCP server integration**
- **Public preview**: Free to use for now, **pricing changes coming soon**
📖 Related read:
[【Morning Read】Turn Claude Code into Your Own Awesome UI Designer (Using Playwright MCP)](https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651277548&idx=1&sn=e49bd502f1e80c922686833f064a9898&scene=21#wechat_redirect)
---
## Three-Stage Spec-Driven Workflow
**How Spec Mode Works:**
1. **Requirements** → Eventually expressed as **user stories**
2. **Design** → Data models, APIs, UI components
3. **Tasks** → Clickable, executable units tied to requirements
**Benefits:**
- Provides **traceability** and **consistency**
- Mitigates **randomness** of generative AI outputs
- Automates links between **design** → **tasks**
---
## Core Challenges in Mobile → TV Adaptation
**Demo app:** ISS Tracker built with **React 19**, **Vite**, **Three.js**.
**Key differences to handle:**
- **Performance:** TVs perform worse → may require **performance tiering**
- **Font size:** Needs to be larger for TV viewing
- **Focus management:** Explicit **D-pad navigation** instead of touch gestures
- **Interaction changes:** Remove drag/touch behaviors
---
## Recommended Adaptation Path
**Step-by-step transition:**
1. **Mobile → Desktop/Tablet** (Intermediate step for layout changes)
2. **Desktop → TV** (Adjust aspect ratio, UI density, control schemes)
| Element | Mobile / Desktop | TV Version |
|---------------------|-----------------------------|------------------------------------------------|
| Button Layout | Horizontal | Vertical for bigger fonts |
| Element Density | High | Lower for clarity |
| Navigation Method | Touch / Mixed Controls | Full D-pad control with focus management |
---
## Focus Management Strategies
**Example behaviors for remote control:**
- Clicking **"Manual"**: Hide menu + show direction arrows for globe rotation
- Zoom: Hold **Select** to zoom or press **Back** to reopen menu
These should be **explicitly defined in Specs** to guide AI generation.
---
## Feature Iteration with Spec Mode
**Adding TV controls via Spec Mode:**
- Prompt: Add camera rotation + zoom features in TV mode
- Kiro auto-generates:
1. User story
2. Design doc
3. Implementation plan
**Ensures structured integration** without breaking existing architecture.
---
## Demonstration: Spec Mode in Action
**Three steps in the demo:**
1. **User Story** – Detailed requirements
2. **Design Document** – TypeScript interfaces, component structure
3. **Implementation Plan** – Actionable, ordered tasks
---
## Iterative Updates to Specs
**Updating zoom behavior (Garmin watch style):**
- Current: Hold Select to zoom
- New: Press Enter → Use Up/Down keys
- Kiro reads existing Spec → Generates refactoring plan + keyboard mapping updates
- **Steering Docs** ensure adherence to React + TypeScript + CSS Modules
---
## Advanced Features: Steering Docs & Hooks
### Steering Documents
- Contain project architecture rules (e.g., **React**, **TypeScript**, **CSS Modules**, UX guidelines)
- Kiro references them before generating code → **Consistency guaranteed**
### Hooks
- Event-based automation (like **IFTTT**)
- Examples:
- Auto-run tests after code changes
- Perform quality checks before merges
---
## Summary & Recommendations
### Modes Comparison
- **Vibe Mode**: Fast experimentation
- **Spec Mode**: Structured, traceable development
- Can be used **together** for maximum efficiency
**Call-to-action:**
- Sign up for Kiro.dev before Sept 15 for free trial
- Follow Kiro’s blog + YouTube
- Scan QR code during talk for detailed guides
- Check GitHub repo for demo & TV prompts
---
## Key Insights
1. **AI Adoption:** Tools like Copilot & Cursor are widely used already
2. **Kiro’s Differentiator:** Structured AI outputs for predictable dev workflows
3. **Spec Model:** Breaks ideas into Requirements → Design → Tasks
---
## Complementary Platform: AiToEarn
Beyond code adaptation, content creators can leverage **[AiToEarn官网](https://aitoearn.ai/)**:
- **Generate once, publish everywhere**
- Platforms: Douyin, Kwai, WeChat, Bilibili, Rednote, Instagram, YouTube, Pinterest, X/Twitter
- Integrated analytics + model ranking ([AI模型排名](https://rank.aitoearn.ai))
Resources:
[官网](https://aitoearn.ai/) | [博客](https://blog.aitoearn.ai) | [GitHub 开源](https://github.com/yikart/AiToEarn)
---
**Original video:** [YouTube: ilFdh17hKic](https://www.youtube.com/watch?v=ilFdh17hKic)
![[Morning Read] Specification-Driven Development with Kiro.dev](/content/images/size/w1200/2025/10/img_001-215.jpg)
