# Present

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-qwwiwi-agentos-skills-public-present`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [qwwiwi](https://agentstack.voostack.com/s/qwwiwi)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [qwwiwi](https://github.com/qwwiwi)
- **Source:** https://github.com/qwwiwi/agentos-skills-public/tree/main/skills/present

## Install

```sh
agentstack add skill-qwwiwi-agentos-skills-public-present
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

1. **Determine content type** — lesson, report, data, plan, comparison, roadmap
2. **Gather content** — from the conversation, files, or generate it
3. **Create HTML** using the design system below
4. **Save** as `present-{topic}.html` in your working directory
5. **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
```css
@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
```html

{title}

  
    {badge}
    {title}
    {subtitle}
  
  ...
  

```

## 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`

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [qwwiwi](https://github.com/qwwiwi)
- **Source:** [qwwiwi/agentos-skills-public](https://github.com/qwwiwi/agentos-skills-public)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-qwwiwi-agentos-skills-public-present
- Seller: https://agentstack.voostack.com/s/qwwiwi
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.