UI Components
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 controlsCard — player cards, results containersInput — game code, name, objective textBadge — player names, score tagsGameIframe — 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
1---2name: ui-components3description: shadcn/ui patterns, game UI components, responsive layouts for classroom use4---56# UI Components78UI 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).910## Overview1112- **Framework**: shadcn/ui components with Tailwind utility classes13- **Design**: Bold colors, large text for projection, big touch targets for mobile14- **Game rendering**: AI-generated HTML runs in sandboxed iframe; parent app wraps with timer, score, leaderboard15- **Responsive**: Desktop (projection), tablet, mobile (student devices)1617## When to Use This Skill1819- Building page layouts (homepage, host view, student view)20- Creating parent wrapper UI (timer display, score, leaderboard, feedback overlay)21- Building the GameIframe component and its container22- Implementing feedback overlays and animations (shown by parent, not iframe)23- Making components responsive for classroom use24- Adding loading, error, and empty states2526## Key Concepts2728### Design Principles29301. **Projection-first for host**: Large text, high contrast, readable from back of room312. **Touch-first for students**: Big tap targets (min 48px), no hover-dependent interactions323. **Iframe-first for game**: The actual game UI is AI-generated, rendered in a sandboxed iframe334. **Parent wrapper**: Timer, score, leaderboard, and feedback are rendered by the parent app outside the iframe345. **Minimal chrome**: Focus on content, not navigation — games are single-flow3536### Component Library3738Using shadcn/ui for base components. Key components:39- `Button` — primary actions, host controls40- `Card` — player cards, results containers41- `Input` — game code, name, objective text42- `Badge` — player names, score tags43- `GameIframe` — sandboxed iframe wrapper for AI-generated game (see game-engine skill)4445### Color System4647```48Primary: #6C5CE7 (purple)49Success: #00B894 (green — correct)50Warning: #FDCB6E (yellow — timer)51Error: #E17055 (red — wrong)5253Option A: #E74C3C (red)54Option B: #3498DB (blue)55Option C: #F39C12 (orange)56Option D: #27AE60 (green)57```5859### Responsive Breakpoints6061- Mobile (<768px): Stacked layout, full-width buttons62- Tablet (768-1024px): Similar to desktop, slightly condensed63- Desktop (>1024px): Full layout, 2x2 answer grid6465## Related Files6667- `docs/design.md` — Full wireframes and design specs68- Page components in `app/` directory6970## Reference Files7172- [reference.md](reference.md) — Component code examples
seanchiuai