{"claude_md":"# Markdown Live Preview\n\nReal-time markdown editor with split-pane live preview. Pure JavaScript, no external dependencies, dark theme. Type on the left, see rendered output on the right.\n\n## Quick Reference\n\nSee skill files — primary content is `preview.html`.\n\n## Agent Docs (read when relevant)\n\n| File | When to read |\n|------|-------------|\n| `agent_docs/preview.html` | preview |\n| `agent_docs/README.md` | README |\n","agent_docs":{"agent_docs/preview.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Markdown Live Preview</title>\n<style>\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { background: #0a0a1a; color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; }\nheader { background: rgba(168,85,247,0.12); border-bottom: 1px solid rgba(168,85,247,0.25); padding: 10px 18px; display: flex; align-items: center; gap: 12px; }\nheader h1 { font-size: 15px; font-weight: 700; color: #c084fc; letter-spacing: 0.02em; }\n.badge { background: rgba(168,85,247,0.2); border: 1px solid rgba(168,85,247,0.35); color: #a855f7; font-size: 10px; padding: 2px 8px; border-radius: 20px; font-family: monospace; }\n.stats { margin-left: auto; font-size: 11px; color: #555; font-family: monospace; }\nmain { display: flex; flex: 1; overflow: hidden; }\n.pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }\n.pane-header { background: rgba(255,255,255,0.04); padding: 7px 16px; font-size: 11px; color: #666; border-bottom: 1px solid rgba(255,255,255,0.07); font-family: monospace; display: flex; align-items: center; gap: 8px; }\n.pane-dot { width: 6px; height: 6px; border-radius: 50%; }\n.divider { width: 1px; background: rgba(255,255,255,0.08); }\ntextarea { flex: 1; background: transparent; border: none; outline: none; padding: 18px 20px; color: #e2e8f0; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.7; resize: none; }\n#preview { flex: 1; padding: 18px 20px; overflow-y: auto; font-size: 14px; line-height: 1.8; }\n#preview h1 { font-size: 22px; font-weight: 700; color: #f1f5f9; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(168,85,247,0.2); }\n#preview h2 { font-size: 17px; font-weight: 600; color: #e2e8f0; margin: 22px 0 10px; }\n#preview h3 { font-size: 14px; font-weight: 600; color: #cbd5e1; margin: 18px 0 8px; }\n#preview p { color: #94a3b8; margin: 0 0 10px; }\n#preview a { color: #a855f7; text-decoration: none; border-bottom: 1px solid rgba(168,85,247,0.3); }\n#preview strong { color: #e2e8f0; font-weight: 600; }\n#preview em { color: #cbd5e1; font-style: italic; }\n#preview code { background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.2); color: #c084fc; font-family: monospace; font-size: 12px; padding: 1px 6px; border-radius: 4px; }\n#preview pre { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); padding: 14px 16px; border-radius: 8px; margin: 0 0 14px; overflow-x: auto; }\n#preview pre code { background: transparent; border: none; color: #e2e8f0; padding: 0; font-size: 12.5px; display: block; line-height: 1.6; }\n#preview blockquote { border-left: 3px solid #a855f7; padding: 8px 14px; color: #94a3b8; background: rgba(168,85,247,0.06); margin: 0 0 14px; border-radius: 0 6px 6px 0; font-style: italic; }\n#preview ul, #preview ol { padding-left: 22px; margin: 0 0 10px; }\n#preview li { color: #94a3b8; margin-bottom: 3px; }\n#preview hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 20px 0; }\n#preview table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 13px; }\n#preview th { background: rgba(168,85,247,0.15); color: #e2e8f0; padding: 7px 12px; text-align: left; font-size: 12px; border-bottom: 1px solid rgba(168,85,247,0.2); }\n#preview td { padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #94a3b8; }\n#preview img { max-width: 100%; border-radius: 6px; }\n::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.25); border-radius: 3px; }\n</style>\n</head>\n<body>\n<header>\n  <h1>Markdown Live Preview</h1>\n  <span class=\"badge\">SkillSlap</span>\n  <span class=\"stats\" id=\"stats\">0 chars · 0 words</span>\n</header>\n<main>\n  <div class=\"pane\">\n    <div class=\"pane-header\"><span class=\"pane-dot\" style=\"background:#a855f7\"></span>Markdown</div>\n    <textarea id=\"editor\" spellcheck=\"false\"></textarea>\n  </div>\n  <div class=\"divider\"></div>\n  <div class=\"pane\">\n    <div class=\"pane-header\"><span class=\"pane-dot\" style=\"background:#10b981\"></span>Preview</div>\n    <div id=\"preview\"></div>\n  </div>\n</main>\n<script>\nfunction md(s) {\n  // Escape HTML first\n  let o = s.replace(/&(?![a-zA-Z#]\\w*;)/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');\n  // Fenced code blocks\n  o = o.replace(/```(\\w*)\\n?([\\s\\S]*?)```/g, (_,lang,code)=>`<pre><code class=\"lang-${lang}\">${code.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>')}</code></pre>`);\n  // Inline code\n  o = o.replace(/`([^`\\n]+)`/g,'<code>$1</code>');\n  // Headers\n  o = o.replace(/^#### (.+)$/gm,'<h4>$1</h4>').replace(/^### (.+)$/gm,'<h3>$1</h3>').replace(/^## (.+)$/gm,'<h2>$1</h2>').replace(/^# (.+)$/gm,'<h1>$1</h1>');\n  // HR\n  o = o.replace(/^---+$/gm,'<hr>');\n  // Bold + italic\n  o = o.replace(/\\*\\*\\*(.+?)\\*\\*\\*/g,'<strong><em>$1</em></strong>').replace(/\\*\\*(.+?)\\*\\*/g,'<strong>$1</strong>').replace(/(?<!\\*)\\*(?!\\*)(.+?)(?<!\\*)\\*(?!\\*)/g,'<em>$1</em>');\n  // Blockquotes\n  o = o.replace(/^> (.+)$/gm,'<blockquote>$1</blockquote>');\n  // Unordered lists\n  o = o.replace(/((?:^[-*] .+\\n?)+)/gm, m => '<ul>' + m.replace(/^[-*] (.+)$/gm,'<li>$1</li>') + '</ul>');\n  // Ordered lists\n  o = o.replace(/((?:^\\d+\\. .+\\n?)+)/gm, m => '<ol>' + m.replace(/^\\d+\\. (.+)$/gm,'<li>$1</li>') + '</ol>');\n  // Links\n  o = o.replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g,'<a href=\"$2\" target=\"_blank\" rel=\"noopener\">$1</a>');\n  // Images\n  o = o.replace(/!\\[([^\\]]*)\\]\\(([^)]+)\\)/g,'<img src=\"$2\" alt=\"$1\">');\n  // Tables\n  o = o.replace(/\\|(.+)\\|\\n\\|[-| :]+\\|\\n((?:\\|.+\\|\\n?)+)/g, (_,h,rows)=>{\n    const ths = h.split('|').filter(Boolean).map(c=>`<th>${c.trim()}</th>`).join('');\n    const trs = rows.trim().split('\\n').map(r=>'<tr>'+r.split('|').filter(Boolean).map(c=>`<td>${c.trim()}</td>`).join('')+'</tr>').join('');\n    return `<table><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table>`;\n  });\n  // Paragraphs (lines not starting with a tag)\n  o = o.replace(/^(?!<[a-zA-Z\\/])(.*\\S.*)$/gm,'<p>$1</p>');\n  return o;\n}\n\nconst editor = document.getElementById('editor');\nconst preview = document.getElementById('preview');\nconst stats = document.getElementById('stats');\n\nconst DEFAULT = `# Markdown Live Preview\n\n> Type in the **left pane** — see your rendered output instantly on the right.\n\n## Features\n\n- *Italic*, **bold**, \\`inline code\\`\n- Fenced code blocks with syntax hints\n- Tables, blockquotes, and horizontal rules\n- Links, images, and nested lists\n\n## Code Example\n\n\\`\\`\\`typescript\nasync function fetchSkill(id: string): Promise<Skill> {\n  const { data, error } = await supabase\n    .from('skills')\n    .select('*')\n    .eq('id', id)\n    .single();\n  if (error) throw error;\n  return data;\n}\n\\`\\`\\`\n\n## Table\n\n| Feature | Status |\n|---------|--------|\n| Headers | ✅ |\n| Bold/Italic | ✅ |\n| Code blocks | ✅ |\n| Tables | ✅ |\n\n---\n\nBuilt with **pure JavaScript** — no external dependencies.`;\n\nfunction update() {\n  const val = editor.value;\n  preview.innerHTML = md(val);\n  const words = val.trim() ? val.trim().split(/\\s+/).length : 0;\n  stats.textContent = `${val.length} chars · ${words} words`;\n}\n\neditor.value = DEFAULT;\nupdate();\neditor.addEventListener('input', update);\n</script>\n</body>\n</html>","agent_docs/README.md":"# Markdown Live Preview\n\nA real-time markdown editor and preview tool built for SkillSlap.\n\n## Features\n- Live preview as you type — no refresh needed\n- Pure JavaScript markdown parser (no external deps)\n- Supports: headers, bold/italic, code blocks, tables, blockquotes, lists, links, images\n- Dark theme matching the SkillSlap design system\n- Character and word count in the header\n\n## Usage\nOpen in any browser. Type markdown in the left pane, see rendered HTML in the right pane.\n"}}