--- name: quick-view description: Generate minimal HTML pages to review Claude Code output in a browser. Use when terminal output is hard to read, when reviewing lists/tables/drafts, or when user says "show me", "make this reviewable", "quick view", or "open as webpage". Produces unstyled semantic HTML only. For granular feedback with inline comments, see the comment-mode skill. --- # Quick View Generate minimal HTML to review structured data in a browser. Minimal styling, maximum readability. ## When to Use - User wants to review output that's hard to read in terminal - Lists, tables, drafts, summaries that benefit from visual layout - User says: "show me", "view this", "make reviewable", "open as webpage" ## Output Rules **DO:** - Semantic HTML: ``, `
ContactActionDraft
@nameFollow upHey...
``` ### Expandable sections (for long content) ```html
@username — action 
Long content here that may need truncation...
``` ### Type-differentiated items ```html
User message or input
Draft content
Completed item
``` ### With actions ```html

Open Telegram ·

``` ### Sourced data (citations & drill-down) When displaying data gathered from external sources, always include attribution links for drill-down. **Add to base template CSS:** ```css .source { color: var(--muted); font-size: 0.75rem; } .source a { color: var(--muted); } .source a:hover { color: var(--accent); } ``` **Inline attribution (preferred for lists):** ```html
Tip title — Description of the tip. — @username
``` **Table with source column:** ```html
TipSource
Description here @user
``` **Expandable with source in summary:** ```html
Tip title — @source

Full content...

``` **Meta header with main source:** ```html

Generated: {timestamp} · {count} items · Source: Original thread

``` **Principles:** - Always link to original when data comes from external sources - Use `@username` for social media, domain for articles - Source links should be muted/subtle, not prominent - Include main source in meta header for collections from single source ### Editable drafts (with diff tracking) For drafts that user may edit before sending. Tracks original vs edited for later analysis. ```html
@username — action 
Original draft text here
Open Telegram
``` Include this script block at end of `` (before closing `` tag): ```javascript function saveDraft(el) { const key = 'draft_' + el.dataset.username; const edited = el.textContent.trim(); const original = el.dataset.original; if (edited !== original) { localStorage.setItem(key, edited); el.closest('details').querySelector('.status').textContent = '(edited)'; } } function copyDraft(btn) { const pre = btn.closest('details').querySelector('pre'); navigator.clipboard.writeText(pre.textContent.trim()); btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = 'Copy', 1500); } function restoreEdits() { document.querySelectorAll('pre[data-username]').forEach(el => { const saved = localStorage.getItem('draft_' + el.dataset.username); if (saved) { el.textContent = saved; el.closest('details').querySelector('.status').textContent = '(edited)'; } }); } function exportEdits() { const edits = []; document.querySelectorAll('pre[data-username]').forEach(el => { const original = el.dataset.original; const current = el.textContent.trim(); if (original !== current) { edits.push({ username: el.dataset.username, original, edited: current }); } }); if (edits.length === 0) { alert('No edits to export'); return; } const blob = new Blob([JSON.stringify({exported_at: new Date().toISOString(), edits}, null, 2)], {type: 'application/json'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'draft_edits.json'; a.click(); } restoreEdits(); ``` Add export button in header when using editable drafts: ```html

Generated: {timestamp} · {count} drafts ·

``` ## Workflow 1. Identify the data to display (file, variable, recent output) 2. Choose pattern: list, table, or expandable sections 3. Generate HTML using template above 4. Write to `_private/views/{name}-temp.html` 5. Run `open _private/views/{name}-temp.html` 6. If user approves, promote to `{name}.html` ## Example User: "show me the drafts" Claude: 1. Reads `_private/drafts/outreach_drafts.md` 2. Parses each draft (heading = contact, body = draft) 3. Generates HTML with `
` for each draft 4. Writes to `_private/views/drafts-temp.html` 5. Runs `open _private/views/drafts-temp.html` Result: Browser opens, user sees expandable list of drafts with auto dark/light mode, long content truncated with "Show more", can copy each one. User: "this looks good, keep it" Claude: 1. Renames `drafts-temp.html` → `drafts.html` 2. Confirms: "Saved as drafts.html" ## Styling Handoff This skill produces functional HTML with minimal styling. For full visual styling, invoke the `html-style` skill after generating. **Classes used by quick-view (compatible with html-style):** | Class | Purpose | |-------|---------| | `.type-user` | User input/message | | `.type-draft` | Draft content | | `.type-done` | Completed item | | `.source` | Attribution links | | `.meta` | Metadata header | | `.truncate` | Long content container | | `.actions` | Action button container | **Data attributes for JS hooks:** - `data-username` — Identifier for drafts - `data-original` — Original text for diff tracking ## Attribution Truncation pattern and CSS variables approach inspired by [simon willison's claude-code-transcripts](https://github.com/simonw/claude-code-transcripts).