Present — HTML Visualization
When to use
- User writes
/present or asks to format something visually
- Need to visualize data, a lesson, report, plan, or comparison
- Request for an HTML file to view in a browser
Process
- Determine content type — lesson, report, data, plan, comparison, roadmap
- Gather content — from the conversation, files, or generate it
- Create HTML using the design system below
- Save as
present-{topic}.html in your working directory
- Send to the user (as a document attachment or file)
Design System
Colors (dark theme — default)
--el-bg: #141416
--el-text: #ffffff
--el-text-muted: #a1a1aa
--el-card-bg: rgba(255,255,255,0.06)
--el-card-border: rgba(255,255,255,0.1)
--el-accent: #c9a44a (gold)
--el-accent-dim: rgba(201,164,74,0.15)
--el-code-bg: rgba(255,255,255,0.08)
--el-divider: rgba(255,255,255,0.1)
--el-error: #ef4444
--el-success: #22c55e
Fonts
- Headings:
'Playfair Display', Georgia, serif — font-weight: 600-700
- Body:
'Inter', sans-serif — font-weight: 400-600
- Code:
'SF Mono', 'Fira Code', monospace
- Import:
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap
Components
Header (lesson-header)
- badge: uppercase, accent bg, border-radius: 100px
- title: Playfair Display, 2rem, font-weight 700
- subtitle: Inter, 1rem, muted color
Table of Contents (toc)
- card-bg background, border, border-radius: 1rem
- Numbering: accent color, font-weight 600
Sections (section)
- Heading: Playfair, 1.5rem, number in accent, border-bottom divider
- Body: Inter, 0.9375rem, line-height 1.7
Cards (card)
- card-bg, card-border, border-radius: 1rem, padding: 1.25rem
- card-title: font-weight 600
Code (pre > code)
- code-bg, card-border, border-radius: 0.75rem
- REQUIRED: white-space: pre-wrap; word-wrap: break-word; word-break: break-all
- font-size: 0.8125rem, line-height: 1.6
- color: #e4e4e7
Tables (table)
- th: accent color, uppercase, letter-spacing 0.05em
- td: muted color, first td — white font-weight 500
- border-bottom: divider
Analogy (analogy)
- accent-dim bg, border-left: 3px solid accent
- label: accent, uppercase, 0.75rem
Key point (key-point)
- card-bg, border: accent, border-radius: 1rem
- label: accent, uppercase, bold
Error box (error-box)
- bg: rgba(239,68,68,0.1), border: rgba(239,68,68,0.2)
- title: #ef4444
Summary card (summary-card)
- accent-dim bg, accent border
- Playfair heading
Responsive
@media (max-width: 480px) {
.container { padding: 1rem 1rem 3rem; }
.lesson-title { font-size: 1.5rem; }
.section-title { font-size: 1.25rem; }
pre { padding: 0.75rem; }
}
HTML scaffold
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{title}</title>
<!-- Fonts, CSS vars, styles -->
</head>
<body>
<div class="container">
<div class="lesson-header">
<div class="lesson-badge">{badge}</div>
<h1 class="lesson-title">{title}</h1>
<p class="lesson-subtitle">{subtitle}</p>
</div>
<div class="toc">...</div>
<!-- sections -->
</div>
</body>
</html>
Content types and structure
Lesson
- Header with badge "Lesson · {topic}"
- TOC with numbering
- Sections with numbers, code blocks, tables
- Practice at the end, summary table
Report
- Badge "Report · {date}"
- Key metrics in cards (grid)
- Data tables
- Conclusions in summary-card
Comparison
- Badge "Comparison"
- Comparison table (th: parameter, columns: options)
- Pros/cons in cards
- Verdict in summary-card
Roadmap / Plan
- Badge "Roadmap" or "Plan"
- Stages as numbered sections
- Timeline visualization (CSS)
- Statuses: done (green), progress (accent), planned (muted)
Data / Dashboard
- Badge "Dashboard · {topic}"
- Metrics in grid cards
- Data tables
- Trends described or via ASCII charts
Rules
- Standalone HTML: single file, no external dependencies except Google Fonts (CDN optional)
- Always dark theme by default
- Responsive: mobile-first, max-width: 100%
- pre/code blocks: ALWAYS white-space:pre-wrap + word-wrap:break-word + word-break:break-all
- Template reference:
assets/template-lesson.html
1---2name: present3description: Generate beautifully formatted HTML presentations with a dark theme. Triggers: /present, 'create presentation', 'visualize', 'make HTML'. Accepts any content (lesson, report, data, plan, comparison, roadmap) and produces a standalone HTML file.4---56# Present — HTML Visualization78## When to use9- User writes `/present` or asks to format something visually10- Need to visualize data, a lesson, report, plan, or comparison11- Request for an HTML file to view in a browser1213## Process14151. **Determine content type** — lesson, report, data, plan, comparison, roadmap162. **Gather content** — from the conversation, files, or generate it173. **Create HTML** using the design system below184. **Save** as `present-{topic}.html` in your working directory195. **Send** to the user (as a document attachment or file)2021## Design System2223### Colors (dark theme — default)24```25--el-bg: #14141626--el-text: #ffffff27--el-text-muted: #a1a1aa28--el-card-bg: rgba(255,255,255,0.06)29--el-card-border: rgba(255,255,255,0.1)30--el-accent: #c9a44a (gold)31--el-accent-dim: rgba(201,164,74,0.15)32--el-code-bg: rgba(255,255,255,0.08)33--el-divider: rgba(255,255,255,0.1)34--el-error: #ef444435--el-success: #22c55e36```3738### Fonts39- Headings: `'Playfair Display', Georgia, serif` — font-weight: 600-70040- Body: `'Inter', sans-serif` — font-weight: 400-60041- Code: `'SF Mono', 'Fira Code', monospace`42- Import: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap`4344### Components4546**Header (lesson-header)**47- badge: uppercase, accent bg, border-radius: 100px48- title: Playfair Display, 2rem, font-weight 70049- subtitle: Inter, 1rem, muted color5051**Table of Contents (toc)**52- card-bg background, border, border-radius: 1rem53- Numbering: accent color, font-weight 6005455**Sections (section)**56- Heading: Playfair, 1.5rem, number in accent, border-bottom divider57- Body: Inter, 0.9375rem, line-height 1.75859**Cards (card)**60- card-bg, card-border, border-radius: 1rem, padding: 1.25rem61- card-title: font-weight 6006263**Code (pre > code)**64- code-bg, card-border, border-radius: 0.75rem65- **REQUIRED:** white-space: pre-wrap; word-wrap: break-word; word-break: break-all66- font-size: 0.8125rem, line-height: 1.667- color: #e4e4e76869**Tables (table)**70- th: accent color, uppercase, letter-spacing 0.05em71- td: muted color, first td — white font-weight 50072- border-bottom: divider7374**Analogy (analogy)**75- accent-dim bg, border-left: 3px solid accent76- label: accent, uppercase, 0.75rem7778**Key point (key-point)**79- card-bg, border: accent, border-radius: 1rem80- label: accent, uppercase, bold8182**Error box (error-box)**83- bg: rgba(239,68,68,0.1), border: rgba(239,68,68,0.2)84- title: #ef44448586**Summary card (summary-card)**87- accent-dim bg, accent border88- Playfair heading8990### Responsive91```css92@media (max-width: 480px) {93 .container { padding: 1rem 1rem 3rem; }94 .lesson-title { font-size: 1.5rem; }95 .section-title { font-size: 1.25rem; }96 pre { padding: 0.75rem; }97}98```99100### HTML scaffold101```html102<!DOCTYPE html>103<html lang="en">104<head>105<meta charset="UTF-8">106<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">107<title>{title}</title>108<!-- Fonts, CSS vars, styles -->109</head>110<body>111<div class="container">112 <div class="lesson-header">113 <div class="lesson-badge">{badge}</div>114 <h1 class="lesson-title">{title}</h1>115 <p class="lesson-subtitle">{subtitle}</p>116 </div>117 <div class="toc">...</div>118 <!-- sections -->119</div>120</body>121</html>122```123124## Content types and structure125126### Lesson127- Header with badge "Lesson · {topic}"128- TOC with numbering129- Sections with numbers, code blocks, tables130- Practice at the end, summary table131132### Report133- Badge "Report · {date}"134- Key metrics in cards (grid)135- Data tables136- Conclusions in summary-card137138### Comparison139- Badge "Comparison"140- Comparison table (th: parameter, columns: options)141- Pros/cons in cards142- Verdict in summary-card143144### Roadmap / Plan145- Badge "Roadmap" or "Plan"146- Stages as numbered sections147- Timeline visualization (CSS)148- Statuses: done (green), progress (accent), planned (muted)149150### Data / Dashboard151- Badge "Dashboard · {topic}"152- Metrics in grid cards153- Data tables154- Trends described or via ASCII charts155156## Rules157158- Standalone HTML: single file, no external dependencies except Google Fonts (CDN optional)159- Always dark theme by default160- Responsive: mobile-first, max-width: 100%161- pre/code blocks: ALWAYS white-space:pre-wrap + word-wrap:break-word + word-break:break-all162- Template reference: `assets/template-lesson.html`
qwwiwi