# Quick View
> 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.
- Skill: `majiayu000/quick-view` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/quick-view`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/quick-view/raw
- Safety review: pending (external: skill-scanner PASS, skillspector CAUTION)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/quick-view
---
# Quick View
Generate minimal HTML to review structured data in a browser. No styling. Browser defaults only.
## 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 only: `
`, `
`, ``, `
`, ``
- Browser defaults (no CSS except the 3 lines below)
- Write to `_private/views/{name}.html`
- Open with `open _private/views/{name}.html`
**DO NOT:**
- Add colors, fonts, or decorative styling
- Use CSS classes or frameworks
- Add JavaScript unless essential for function
- Over-engineer or "make it nice"
## Template
Every quick-view HTML file:
```html
{title}
{content}
```
That's it. Three CSS rules for readability. No more.
## Patterns
### List of items
```html
Title
@username — action item
```
### Table
```html
Contact
Action
Draft
@name
Follow up
Hey...
```
### Expandable sections (for long content like drafts)
```html
@username — action
```
### Editable drafts (with diff tracking)
For drafts that user may edit before sending. Tracks original vs edited for later analysis.
```html
@username — action
```
Include this script block at end of ``:
```javascript
```
Add export button in header:
```html
Generated: {date} · {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}.html`
5. Run `open _private/views/{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.html`
5. Runs `open _private/views/drafts.html`
Result: Browser opens, user sees expandable list of drafts, can copy each one.