UI patterns for LessonPlay — classroom-optimized, mobile-friendly interfaces using shadcn/ui + Tailwind. Game UI is AI-generated inside a sandboxed iframe; parent app handles wrapper UI (timer, score, leaderboard, feedback).

Overview

Framework: shadcn/ui components with Tailwind utility classes
Design: Bold colors, large text for projection, big touch targets for mobile
Game rendering: AI-generated HTML runs in sandboxed iframe; parent app wraps with timer, score, leaderboard
Responsive: Desktop (projection), tablet, mobile (student devices)

When to Use This Skill

Building page layouts (homepage, host view, student view)
Creating parent wrapper UI (timer display, score, leaderboard, feedback overlay)
Building the GameIframe component and its container
Implementing feedback overlays and animations (shown by parent, not iframe)
Making components responsive for classroom use
Adding loading, error, and empty states

Key Concepts

Design Principles

Projection-first for host: Large text, high contrast, readable from back of room
Touch-first for students: Big tap targets (min 48px), no hover-dependent interactions
Iframe-first for game: The actual game UI is AI-generated, rendered in a sandboxed iframe
Parent wrapper: Timer, score, leaderboard, and feedback are rendered by the parent app outside the iframe
Minimal chrome: Focus on content, not navigation — games are single-flow

Component Library

Using shadcn/ui for base components. Key components:

Button — primary actions, host controls
Card — player cards, results containers
Input — game code, name, objective text
Badge — player names, score tags
GameIframe — sandboxed iframe wrapper for AI-generated game (see game-engine skill)

Color System

Primary: #6C5CE7 (purple)
Success: #00B894 (green — correct)
Warning: #FDCB6E (yellow — timer)
Error: #E17055 (red — wrong)

Option A: #E74C3C (red)
Option B: #3498DB (blue)
Option C: #F39C12 (orange)
Option D: #27AE60 (green)

Responsive Breakpoints

Mobile (<768px): Stacked layout, full-width buttons
Tablet (768-1024px): Similar to desktop, slightly condensed
Desktop (>1024px): Full layout, 2x2 answer grid

Related Files

docs/design.md — Full wireframes and design specs
Page components in app/ directory

Reference Files

reference.md — Component code examples