docs: UI/UX improvement plan for all examples

[adnaan]

UI/UX Improvement Plan

Adds docs/plans/improve-ui-ux.md — a comprehensive plan to improve the visual design and code quality of all examples.

Key Proposals

Visual improvements:

• Narrow focused layout (640px max-width via shared CSS)
• Compact action buttons for inline use in tables/toolbars
• Single-row toolbars using <fieldset role="group">
• Consistent card structure with <article> + <hgroup>

Code hygiene:

• Remove all inline styles (ws-disabled has 5 violations)
• Remove all custom CSS blocks (progressive-enhancement, chat, todos)
• Remove inline JavaScript (shared-notepad, progressive-enhancement, avatar-upload)
• Add missing lang="en", color-scheme meta to all templates

Shared CSS (livetemplate.css):

• --pico-container-max-width: 640px — narrow layout
• .compact — smaller buttons for inline actions
• .visually-hidden — accessible hidden labels
• .inline — margin-free forms for tables/toolbars

CLAUDE.md additions:

• HTML boilerplate standard
• Visual layout standard
• Button sizing guidelines
• Form pattern standard
• List/item display standard

14 implementation todos with dependency graph

See docs/plans/improve-ui-ux.md for full details.

Ref: #51

[Copilot]

Pull request overview

Adds a new documentation plan describing a repository-wide UI/UX and code-hygiene standardization effort across all LiveTemplate examples (Issue #51), including shared CSS utilities and template/controller refactors to align with CLAUDE.md guidelines.

Changes:

• Added a comprehensive multi-phase implementation plan for UI/UX consistency across all examples.
• Proposed shared CSS utilities (livetemplate.css) and a consistent HTML boilerplate/layout standard.
• Outlined per-example refactor tasks plus expected test update impacts and a dependency graph.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The plan says to create the shared CSS at ../client/livetemplate.css “relative to examples root”, but this repo’s examples root is the repository root and there is no client/ directory here. This path would also point outside the repo from root. Please clarify the intended location within this repository (e.g., a client/ or clients/ directory at repo root) and update the plan to use a consistent path that all examples can serve reliably.

Suggested change

	## Phase 1: Create Shared CSS (`livetemplate.css`)
	Create `../client/livetemplate.css` (relative to examples root) with reusable utilities:
	## Phase 1: Create Shared CSS (`client/livetemplate.css`)
	Create `client/livetemplate.css` at the repository root so all examples can reference and serve the same shared stylesheet reliably:

[Copilot]

Issue #51 / PR description calls out putting reusable CSS in ../clients/livetemplate.css, but this plan refers to ../client/livetemplate.css (singular) and later suggests serving it via http.ServeFile from that location. Align the plan with the agreed directory name/location and update the serving approach accordingly so contributors don’t implement the wrong path.

[Copilot]

The plan suggests adding http.Handle("/livetemplate.css", ...) in each example’s main.go, but several examples use a dedicated http.NewServeMux() (e.g., counter, ws-disabled) and pass that mux to ListenAndServe. In those cases http.Handle would register on the default mux and the CSS route won’t be served. Recommend updating the plan to register the handler on whatever mux each example is using (or standardize on one pattern).

Suggested change

	5. **Serve shared CSS**: Add `http.Handle("/livetemplate.css", ...)` in each example's main.go (or via the testing framework)
	5. **Serve shared CSS**: Register `/livetemplate.css` on the same mux each example passes to `ListenAndServe` (for examples using the default mux, `http.Handle(...)` is fine; for examples using `http.NewServeMux()`, use `mux.Handle(...)` or standardize on one serving pattern). This can also be done via the testing framework.