working-with-playground-app

# Working With the Playground App ## Overview The playground app (`apps/playground/`) is a standalone Vite + React environment for iterating on UI/UX of Packmind features — both new and existing. Prototypes built here are meant to be easily convertible into production-ready code. ## UX Design Thinking Before writing any code, think like a UX designer. The playground exists to explore how a feature *feels* to use — not just how it looks. Apply these principles to every prototype: ### Design All States First Never prototype only the happy path. Before building, identify and plan for every state the user might encounter: - **Empty state** — What does the user see before any data exists? Guide them toward the first action. - **Loading state** — What appears while data is being fetched? Use skeletons or spinners to set expectations. - **Populated state** — The standard view with data. Test with both minimal and full datasets. - **Error state** — What happens when something fails? Show a clear message and a recovery path. - **Edge cases** — What about a single item? Hundreds? An extremely long name that might overflow? Prototype each state explicitly — use local state toggles or tabs to let reviewers switch between them. ### Use Realistic, Varied Data Mock data should stress-test the design, not just fill space: - Include **long names** that could wrap or overflow, **short names** that could look sparse, and **special characters**. - Vary counts: 0 items, 1 item, a handf...