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