Klarhimmel UI

Snapshot prompt

The live snapshot of a site: progress narration, a profile, one card per research module and the sources behind them.

Prompt

Prompt

Use the klarhimmel-design skill. Build the live snapshot page for {site}, filled in as the research finishes. Install: npx shadcn add @klarhimmel/snapshot-progress @klarhimmel/snapshot-profile @klarhimmel/snapshot-module @klarhimmel/sources-list (remove what you do not use) Pick: - snapshot-progress: the narration: newest line pulsing, older ticked, one live region - snapshot-profile: name, summary, trade, region, language - snapshot-module: one research module: reading, ready, unsure or failed - sources-list: the numbered sources Props: snapshot-progress: site, status queued | running | done, queuedNote, lines as { at, module, text }. snapshot-module: title, status pending | running | ready | unsure | failed, note, output as { headline, summary, items, sources }. sources-list: sources as { id, url, kind, fetchedAt }. Fixed words are props (words, kindWords, effortWords) so another language can replace them. Copy: The data is read from other sites: draw it as text, never as HTML. Say what could not be checked in a plain sentence; never guess. Accessibility: One polite live region holds only the newest line. Motion respects reduced motion. External links open in a new tab with noopener nofollow. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: one live region; every source marker links to a source; unsafe addresses become #; no sample copy while a field is empty.

Variables

VariableWhat to fill inExample
{site}The address being researchedacme.example

A good result

One live region. Every source marker links to a source. Unsafe addresses become #.

checklist.md
- [ ] one live region
- [ ] every source marker links to a source
- [ ] unsafe addresses become #
- [ ] no sample copy while a field is empty