diff --git a/docs/plans/improve-ui-ux.md b/docs/plans/improve-ui-ux.md new file mode 100644 index 0000000..0bdb3f5 --- /dev/null +++ b/docs/plans/improve-ui-ux.md @@ -0,0 +1,279 @@ +# Plan: Improve UI/UX of All Examples (Issue #51) + +## Problem + +The examples lack visual polish and consistency. Content stretches too wide, buttons are oversized for their context, controls are spread across multiple rows wasting vertical space, and each example feels like it was built by a different person. Additionally, there are inline styles/JS violating CLAUDE.md and missing accessibility attributes. The goal is to produce cohesive, production-quality examples with tight visual design and establish guidelines for future apps. + +## Approach + +1. Create a shared `livetemplate.css` with visual utilities (narrow container, compact buttons, visually-hidden) +2. Apply visual improvements to every template: narrow focused layout, compact action buttons, single-row toolbars, breathing space +3. Clean up code hygiene: remove inline styles/JS, fix accessibility +4. Update CLAUDE.md with established visual and coding standards +5. Verify all tests still pass + +--- + +## Visual Design Principles + +These apply to ALL examples: + +1. **Narrow, focused layout** — All examples are single-purpose apps. Constrain content to ~640px max-width for a focused feel with breathing space on wider screens. +2. **Single-row toolbars** — Group related controls (search + sort, action buttons) into one horizontal row using `
` or `