feat(skills): design picker UI (Phase 1 templates index + Phase 2 fine-tune)

design-picker.html is the picker shell — a single HTML file with two
phases.

Phase 1 (templates index): editorial-catalog layout (Source Serif 4
italic + Hanken Grotesk on warm-tinted OKLCH neutrals). Sticky compact
palette bar at the top. 3-up specimen grid where each card renders the
template's design.html cover via client-side token substitution + blob
URL. Roman-numeral folio markers, hairline rules.

Phase 2 (fine-tune): sidebar with palette / typography / corners /
density / depth / motion / background shader sections. Right pane shows
the chosen template's design.html in an iframe with --primary /
--secondary / --tertiary / --accent / --tp-* tokens injected on every
control change. Shader background uses three.js (postprocessing
EffectComposer with optional HalftonePass). Surface example card reacts
only to corners/density/depth picks — does not leak to other surfaces.

Per-swatch text color computed from luminance so palette previews stay
legible. Motion change re-runs hero entrance animation and scrolls the
iframe preview to the top. Phase 1 palette pick carried forward into
Phase 2.

Author: vanceingalls