---
name: preview
description: Generate Ahrefs-styled HTML preview of a draft
argument-hint: "[draft-file]"
---

# Preview Skill

Generate an Ahrefs blog-styled HTML preview from a markdown draft.

## Input

- `$ARGUMENTS`: Path to a markdown draft file (e.g., `./5-drafts-cited/pinterest-seo.md`)

## Workflow

1. **Read the draft** from the provided path
2. **Extract the title** from the first H1 heading
3. **Convert markdown to HTML**:
   - Headings: `# ` → `<h1>`, `## ` → `<h2>`, etc.
   - Paragraphs → `<p>` tags
   - Lists → `<ul><li>` or `<ol><li>`
   - Bold: `**text**` → `<strong>`
   - Italic: `*text*` → `<em>`
   - Links: `[text](url)` → `<a href="url">text</a>`
   - Inline code → `<code>`
   - Code blocks → `<pre><code>`
   - Blockquotes → `<blockquote>`
   - Images → `<img>`
4. **Read the template** from `templates/ahrefs-preview.html`
5. **Insert content** by replacing `{{TITLE}}` and `{{CONTENT}}` placeholders
6. **Write HTML** to `6-preview/[slug].html`
7. **Open in browser**: Run `open 6-preview/[slug].html`

## Output

- HTML file at `6-preview/[slug].html`
- Opens automatically in the default browser

## Example

```
/preview ./5-drafts-cited/pinterest-seo.md
```