← Files AgentBrokoARCHIVED FILE
static/app.html
35.6 KB · Sep 30, 2026 · 23:15 UTC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgentBroko Documentation | Skills Hub for Coding Agents & Creators</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg-page: #ffffff;
--bg-subtle: #f8fafc;
--bg-code: #0b0f19;
--bg-tab-active: #1e293b;
--border-light: #e2e8f0;
--border-dark: #1e293b;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #64748b;
--accent-blue: #2563eb;
--accent-purple: #7c3aed;
--accent-emerald: #10b981;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--bg-page);
color: var(--text-primary);
min-height: 100vh;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* Header */
header {
border-bottom: 1px solid var(--border-light);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 100;
padding: 0.85rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
color: var(--text-primary);
font-weight: 800;
font-size: 1.15rem;
letter-spacing: -0.03em;
}
.version-badge {
font-size: 0.72rem;
padding: 0.12rem 0.5rem;
background: #f1f5f9;
color: #475569;
border: 1px solid var(--border-light);
border-radius: 9999px;
font-weight: 600;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.25rem;
}
.nav-link {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: color 0.15s;
}
.nav-link:hover {
color: var(--text-primary);
}
.btn-nav-primary {
padding: 0.4rem 0.85rem;
background: var(--text-primary);
color: #ffffff !important;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
transition: opacity 0.15s;
}
.btn-nav-primary:hover {
opacity: 0.9;
}
/* Container Layout */
.layout-container {
max-width: 920px;
margin: 0 auto;
padding: 3rem 1.5rem 6rem;
}
/* Hero */
.hero {
margin-bottom: 3.5rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid var(--border-light);
}
.hero-tag {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-purple);
margin-bottom: 0.6rem;
}
.hero h1 {
font-size: 2.75rem;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--text-primary);
line-height: 1.15;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.15rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1.75rem;
}
/* Install Bar */
.install-bar {
background: #f8fafc;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 0.85rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 560px;
}
.install-code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.92rem;
font-weight: 500;
color: var(--text-primary);
}
.btn-copy {
background: #ffffff;
border: 1px solid var(--border-light);
color: var(--text-secondary);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.15s;
}
.btn-copy:hover {
color: var(--text-primary);
border-color: var(--text-primary);
}
/* Workflows Overview Cards */
.workflow-box {
background: #f8fafc;
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 2.5rem;
}
.workflow-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-top: 1rem;
}
@media (max-width: 768px) {
.workflow-steps {
grid-template-columns: 1fr;
}
}
.workflow-step {
background: #ffffff;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 1.25rem;
}
.step-num {
font-size: 0.75rem;
font-weight: 800;
color: var(--accent-purple);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.4rem;
}
.step-title {
font-size: 1rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.4rem;
}
.step-desc {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.5;
}
/* Documentation Sections */
.doc-section {
margin-bottom: 3.5rem;
}
.section-heading {
font-size: 1.45rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text-primary);
margin-bottom: 0.4rem;
}
.section-desc {
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 1.25rem;
}
/* TABBED CODE CONTAINER */
.tabbed-card {
background: var(--bg-code);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 1.25rem;
border: 1px solid var(--border-dark);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.tab-bar-header {
background: #060911;
padding: 0.35rem 0.75rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
gap: 0.5rem;
overflow-x: auto;
}
.tab-buttons-group {
display: flex;
gap: 0.25rem;
}
.tab-btn {
background: transparent;
border: none;
color: #94a3b8;
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
font-weight: 500;
padding: 0.4rem 0.75rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.tab-btn:hover {
color: #f8fafc;
background: rgba(255, 255, 255, 0.05);
}
.tab-btn.active {
color: #ffffff;
background: #1e293b;
font-weight: 600;
}
.tab-btn-copy {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #cbd5e1;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3rem 0.65rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.tab-btn-copy:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.15);
}
.code-pane {
display: none;
padding: 1.25rem;
overflow-x: auto;
}
.code-pane.active {
display: block;
}
pre {
margin: 0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.86rem;
line-height: 1.7;
color: #f8fafc;
white-space: pre;
}
.comment { color: #64748b; }
.cmd { color: #38bdf8; font-weight: 600; }
.flag { color: #c084fc; }
.arg { color: #f1f5f9; }
.str { color: #86efac; }
/* Callout Box */
.callout {
background: #f8fafc;
border-left: 3px solid var(--text-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 0.9rem 1.15rem;
font-size: 0.88rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.callout strong {
color: var(--text-primary);
}
/* Prompt Box Simulation */
.prompt-example-card {
background: #ffffff;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin-bottom: 1rem;
}
.prompt-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: var(--accent-purple);
background: rgba(124, 58, 237, 0.1);
padding: 0.15rem 0.5rem;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.prompt-text {
font-size: 0.95rem;
color: var(--text-primary);
font-style: italic;
border-left: 3px solid var(--accent-purple);
padding-left: 0.75rem;
margin-bottom: 0.5rem;
}
.prompt-output-note {
font-size: 0.82rem;
color: var(--text-muted);
}
/* Skills Reference Table */
.skills-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
margin-bottom: 1.5rem;
}
.skills-table th {
text-align: left;
padding: 0.75rem 1rem;
background: #f8fafc;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
font-weight: 600;
}
.skills-table td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--border-light);
color: var(--text-secondary);
}
.skills-table tr:hover td {
background: #fbfcfe;
}
.skills-table code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
background: #f1f5f9;
padding: 0.2rem 0.4rem;
border-radius: 4px;
color: var(--text-primary);
}
/* Footer */
footer {
border-top: 1px solid var(--border-light);
background: #ffffff;
padding: 2.5rem 2rem;
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
}
.footer-links {
display: flex;
justify-content: center;
gap: 1.75rem;
margin-bottom: 0.75rem;
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
}
.footer-links a:hover {
color: var(--text-primary);
}
</style>
</head>
<body>
<!-- Header -->
<header>
<a href="/" class="brand">
AgentBroko
<span class="version-badge">v1.3.0</span>
</a>
<nav class="nav-links">
<a href="#how-it-works" class="nav-link">How It Works</a>
<a href="#install" class="nav-link">Install Skills</a>
<a href="#video-forge" class="nav-link">Video Forge</a>
<a href="#pdf-playbook" class="nav-link">PDF Playbook</a>
<a href="#troubleshooting" class="nav-link">Agent Guide</a>
<a href="https://github.com/sajidhossain8272/agentbroko" target="_blank" class="nav-link">GitHub</a>
<a href="https://www.npmjs.com/package/agentbroko" target="_blank" class="btn-nav-primary">npm package</a>
</nav>
</header>
<!-- Main Content -->
<div class="layout-container">
<!-- Hero Section -->
<div class="hero">
<div class="hero-tag">AI Agent Skills Ecosystem</div>
<h1>Empower Your IDE Coding Agent with Video & PDF Skills</h1>
<p>
Install AgentBroko skills into any workspace. Open your AI editor (Google Antigravity, Cursor, VS Code Cline, Windsurf, Roo Code), prompt your agent in plain English, and watch it generate broadcast videos and 20-page handbooks with zero external API keys.
</p>
<div class="install-bar">
<span class="install-code">npx agentbroko init</span>
<button class="btn-copy" onclick="copySnippet('npx agentbroko init', this)">
<span>Copy</span>
</button>
</div>
</div>
<!-- ========================================================= -->
<!-- THE 3-STEP AGENT-FIRST USER JOURNEY -->
<!-- ========================================================= -->
<div class="workflow-box" id="how-it-works">
<h3 style="font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem;">
🚀 The Agent-First Experience
</h3>
<p style="font-size: 0.92rem; color: var(--text-secondary);">
Just like software packages live in <code>node_modules</code>, AgentBroko provisions standard skill contracts in <code>.agents/skills/</code> so your coding agent knows exactly how to build media for you.
</p>
<div class="workflow-steps">
<div class="workflow-step">
<div class="step-num">Step 1 • Install</div>
<div class="step-title">Initialize Skills</div>
<div class="step-desc">Run <code>npx agentbroko init</code> or <code>npx agentbroko add video-forge</code> in your project.</div>
</div>
<div class="workflow-step">
<div class="step-num">Step 2 • Prompt</div>
<div class="step-title">Ask Your Agent</div>
<div class="step-desc">In Cursor, Antigravity, or VS Code, tell your agent: <i>"Create a 30s TikTok short for my SaaS launch using Video Forge."</i></div>
</div>
<div class="workflow-step">
<div class="step-num">Step 3 • Deliver</div>
<div class="step-title">Instant Media</div>
<div class="step-desc">Your agent plans the timeline, generates voiceovers, builds SRTs, and outputs <code>final.mp4</code> or <code>playbook.pdf</code> locally.</div>
</div>
</div>
</div>
<!-- ========================================================= -->
<!-- 1. INSTALLATION & SETUP (TABBED SWITCHER) -->
<!-- ========================================================= -->
<section id="install" class="doc-section">
<h2 class="section-heading">1. Workspace Installation & Setup</h2>
<p class="section-desc">Add AgentBroko skills to any existing repository or new project:</p>
<div class="tabbed-card" id="install-card">
<div class="tab-bar-header">
<div class="tab-buttons-group">
<button class="tab-btn active" onclick="switchTab('install-card', 'init', this)">npx init (All Skills)</button>
<button class="tab-btn" onclick="switchTab('install-card', 'add', this)">npx add (Single Skill)</button>
<button class="tab-btn" onclick="switchTab('install-card', 'doctor', this)">Doctor & Diagnostics</button>
<button class="tab-btn" onclick="switchTab('install-card', 'npm', this)">npm install</button>
<button class="tab-btn" onclick="switchTab('install-card', 'python', this)">Python (pip)</button>
</div>
<button class="tab-btn-copy" onclick="copyActiveTabCode('install-card', this)">Copy</button>
</div>
<!-- Tab 1: npx init -->
<div class="code-pane active" id="pane-install-card-init">
<pre><span class="comment"># 1. Initialize ALL agent skills in your project workspace</span>
<span class="cmd">npx agentbroko init</span>
<span class="comment"># Provisions:</span>
<span class="comment"># .agents/skills/video-forge/SKILL.md (Video editing skill contract)</span>
<span class="comment"># .agents/skills/pdf-playbook/SKILL.md (Handbook synthesis skill contract)</span>
<span class="comment"># .agents/skills/pdf/SKILL.md (Offline PDF tools)</span>
<span class="comment"># .cursorrules, CLAUDE.md & .agents/AGENTS.md (IDE Agent instructions + stuck recovery)</span></pre>
</div>
<!-- Tab 2: npx add single skill -->
<div class="code-pane" id="pane-install-card-add">
<pre><span class="comment"># Add only Video Forge skill:</span>
<span class="cmd">npx agentbroko add video-forge</span>
<span class="comment"># Add only PDF Playbook skill:</span>
<span class="cmd">npx agentbroko add pdf-playbook</span>
<span class="comment"># Add only Offline PDF tools:</span>
<span class="cmd">npx agentbroko add pdf</span></pre>
</div>
<!-- Tab 3: doctor -->
<div class="code-pane" id="pane-install-card-doctor">
<pre><span class="comment"># Check environment diagnostics for FFmpeg, Python, ReportLab, and TTS</span>
<span class="cmd">npx agentbroko doctor</span>
<span class="comment"># Print full AI coding agent instruction and self-recovery guide</span>
<span class="cmd">npx agentbroko guide</span></pre>
</div>
<!-- Tab 4: npm -->
<div class="code-pane" id="pane-install-card-npm">
<pre><span class="comment"># Install locally as a development dependency</span>
<span class="cmd">npm install -D agentbroko</span>
<span class="cmd">npx agentbroko init</span>
<span class="comment"># Or install globally for terminal access</span>
<span class="cmd">npm install -g agentbroko</span></pre>
</div>
<!-- Tab 5: python -->
<div class="code-pane" id="pane-install-card-python">
<pre><span class="comment"># Clone and install locally in editable mode</span>
<span class="cmd">git clone https://github.com/sajidhossain8272/agentbroko.git</span>
<span class="cmd">cd agentbroko</span>
<span class="cmd">pip install -e .</span>
<span class="comment"># Initialize skills in current workspace</span>
<span class="cmd">agentbroko init</span></pre>
</div>
</div>
<div class="callout">
<strong>Prerequisites:</strong> Python 3.10+ and <code>ffmpeg</code> / <code>ffprobe</code> on your PATH for video rendering.
</div>
</section>
<!-- ========================================================= -->
<!-- 2. PROMPTING YOUR IDE AGENT -->
<!-- ========================================================= -->
<section class="doc-section">
<h2 class="section-heading">2. How to Prompt Your IDE Coding Agent</h2>
<p class="section-desc">Once initialized, open your AI editor (Cursor, Google Antigravity, Cline, Roo Code, Windsurf) and prompt your agent directly:</p>
<div class="prompt-example-card">
<span class="prompt-badge">🎬 Video Forge Agent Prompt Example</span>
<div class="prompt-text">
"Hey agent, create a 30-second 9:16 vertical TikTok short for my new AI Developer Tool launch. Use Video Forge to write the voiceover script, synthesize speech narration, generate kinetic SRT subtitles, and render the final MP4 video."
</div>
<div class="prompt-output-note">
✓ Your agent reads <code>.agents/skills/video-forge/SKILL.md</code>, creates <code>project.json</code>, synthesizes <code>narration.wav</code> and <code>subtitles.srt</code>, and renders <code>outputs/final.mp4</code> automatically.
</div>
</div>
<div class="prompt-example-card">
<span class="prompt-badge">📄 PDF Playbook Agent Prompt Example</span>
<div class="prompt-text">
"Agent, generate a complete 20-page developer handbook on 'Building AI Agents with Microservices' for Backend Engineers. Use PDF Playbook skill to structure the chapters, checklists, and compile the final PDF."
</div>
<div class="prompt-output-note">
✓ Your agent reads <code>.agents/skills/pdf-playbook/SKILL.md</code>, writes a structured 18-chapter blueprint <code>spec.json</code>, and compiles a publication-ready ReportLab PDF.
</div>
</div>
</section>
<!-- ========================================================= -->
<!-- 3. SKILL: VIDEO FORGE -->
<!-- ========================================================= -->
<section id="video-forge" class="doc-section">
<h2 class="section-heading">3. Skill: Video Forge Reference</h2>
<p class="section-desc">
Local-first video editing, offline speech synthesis, and FFmpeg video compositing:
</p>
<div class="tabbed-card" id="video-card">
<div class="tab-bar-header">
<div class="tab-buttons-group">
<button class="tab-btn active" onclick="switchTab('video-card', 'cli', this)">CLI Workflow</button>
<button class="tab-btn" onclick="switchTab('video-card', 'spec', this)">project.json Spec</button>
</div>
<button class="tab-btn-copy" onclick="copyActiveTabCode('video-card', this)">Copy</button>
</div>
<!-- Tab 1: CLI Workflow -->
<div class="code-pane active" id="pane-video-card-cli">
<pre><span class="comment"># 1. Check local tools (FFmpeg, FFprobe, TTS engines)</span>
<span class="cmd">agentbroko video-forge doctor</span>
<span class="comment"># 2. Create a new video project scaffold</span>
<span class="cmd">agentbroko video-forge init <span class="arg">my-video</span></span>
<span class="comment"># 3. Validate project schema without rendering</span>
<span class="cmd">agentbroko video-forge validate <span class="arg">my-video/project.json</span></span>
<span class="comment"># 4. Generate speech narration from a text script (offline TTS)</span>
<span class="cmd">agentbroko video-forge speak <span class="flag">--file</span> <span class="arg">my-video/script.txt</span> <span class="flag">--output</span> <span class="arg">my-video/audio/narration.wav</span></span>
<span class="comment"># 5. Create synchronized SRT captions</span>
<span class="cmd">agentbroko video-forge captions <span class="flag">--file</span> <span class="arg">my-video/script.txt</span> <span class="flag">--output</span> <span class="arg">my-video/captions/subtitles.srt</span></span>
<span class="comment"># 6. Render the final MP4 video</span>
<span class="cmd">agentbroko video-forge render <span class="arg">my-video/project.json</span></span></pre>
</div>
<!-- Tab 2: project.json Spec -->
<div class="code-pane" id="pane-video-card-spec">
<pre>{
<span class="flag">"output"</span>: <span class="str">"outputs/final.mp4"</span>,
<span class="flag">"title"</span>: <span class="str">"My Video"</span>,
<span class="flag">"video"</span>: { <span class="flag">"width"</span>: 1080, <span class="flag">"height"</span>: 1920, <span class="flag">"fps"</span>: 60 },
<span class="flag">"clips"</span>: [
{ <span class="flag">"source"</span>: <span class="str">"media/clip-01.mp4"</span>, <span class="flag">"start"</span>: 0, <span class="flag">"duration"</span>: 5, <span class="flag">"speed"</span>: 1, <span class="flag">"volume"</span>: 1 }
],
<span class="flag">"audio"</span>: { <span class="flag">"narration"</span>: <span class="str">"audio/narration.wav"</span>, <span class="flag">"music"</span>: null, <span class="flag">"music_volume"</span>: 0.12 },
<span class="flag">"subtitles"</span>: <span class="str">"captions/subtitles.srt"</span>
}</pre>
</div>
</div>
</section>
<!-- ========================================================= -->
<!-- 4. SKILL: PDF PLAYBOOK -->
<!-- ========================================================= -->
<section id="pdf-playbook" class="doc-section">
<h2 class="section-heading">4. Skill: PDF Playbook Reference</h2>
<p class="section-desc">
Publication-grade 20-page developer handbook and technical documentation synthesis via ReportLab:
</p>
<div class="tabbed-card" id="pdf-card">
<div class="tab-bar-header">
<div class="tab-buttons-group">
<button class="tab-btn active" onclick="switchTab('pdf-card', 'spec', this)">Agent Spec Mode</button>
<button class="tab-btn" onclick="switchTab('pdf-card', 'gemini', this)">Gemini AI</button>
<button class="tab-btn" onclick="switchTab('pdf-card', 'ollama', this)">Ollama (Offline)</button>
</div>
<button class="tab-btn-copy" onclick="copyActiveTabCode('pdf-card', this)">Copy</button>
</div>
<div class="code-pane active" id="pane-pdf-card-spec">
<pre><span class="comment"># Compile PDF from your AI coding agent's structured JSON spec</span>
<span class="cmd">agentbroko pdf-playbook <span class="flag">--spec</span> <span class="arg">playbook_spec.json</span> <span class="flag">--output</span> <span class="arg">my-guide.pdf</span></span></pre>
</div>
<div class="code-pane" id="pane-pdf-card-gemini">
<pre><span class="comment"># Generate with Google Gemini API</span>
<span class="cmd">agentbroko pdf-playbook <span class="flag">--api-key</span> <span class="arg">AIzaSy...</span> <span class="flag">--title</span> <span class="str">"AI Engineering Playbook"</span> <span class="flag">--output</span> <span class="arg">guide.pdf</span></span></pre>
</div>
<div class="code-pane" id="pane-pdf-card-ollama">
<pre><span class="comment"># Generate 100% offline with local Ollama (run 'ollama run llama3' first)</span>
<span class="cmd">agentbroko pdf-playbook <span class="flag">--provider</span> <span class="arg">ollama</span> <span class="flag">--output</span> <span class="arg">local-guide.pdf</span></span></pre>
</div>
</div>
</section>
<!-- ========================================================= -->
<!-- 5. REGISTERED SKILLS REFERENCE -->
<!-- ========================================================= -->
<section class="doc-section">
<h2 class="section-heading">5. Registered Skills Reference</h2>
<p class="section-desc">All skills are discoverable from your command line or coding agent context:</p>
<table class="skills-table">
<thead>
<tr>
<th>Skill / Tool</th>
<th>CLI Command</th>
<th>Purpose</th>
<th>Network</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>All Skills Init</strong></td>
<td><code>npx agentbroko init</code></td>
<td>Provisions all <code>.agents/skills/</code> and IDE rules into workspace</td>
<td>Offline (0 KB)</td>
</tr>
<tr>
<td><strong>Add Single Skill</strong></td>
<td><code>npx agentbroko add <skill></code></td>
<td>Installs one specific skill (e.g. <code>video-forge</code>, <code>pdf-playbook</code>)</td>
<td>Offline (0 KB)</td>
</tr>
<tr>
<td><strong>Doctor Check</strong></td>
<td><code>npx agentbroko doctor</code></td>
<td>Verifies FFmpeg, Python, ReportLab, and offline TTS engines</td>
<td>Offline (0 KB)</td>
</tr>
<tr>
<td><strong>Agent Stuck Guide</strong></td>
<td><code>npx agentbroko guide</code></td>
<td>Prints self-recovery instructions for coding agents</td>
<td>Offline (0 KB)</td>
</tr>
<tr>
<td><strong>Video Forge</strong></td>
<td><code>agentbroko video-forge</code></td>
<td>Timeline assembly, TTS speech, subtitles, FFmpeg MP4 rendering</td>
<td>Offline (0 KB)</td>
</tr>
<tr>
<td><strong>PDF Playbook</strong></td>
<td><code>agentbroko pdf-playbook</code></td>
<td>20-page developer handbook synthesis via ReportLab</td>
<td>Offline / AI</td>
</tr>
<tr>
<td><strong>PDF Tools</strong></td>
<td><code>agentbroko pdf</code></td>
<td>Offline text extraction, page rendering, metadata inspection</td>
<td>Offline (0 KB)</td>
</tr>
</tbody>
</table>
</section>
<!-- ========================================================= -->
<!-- 6. 🆘 AGENT STUCK & RECOVERY GUIDE -->
<!-- ========================================================= -->
<section id="troubleshooting" class="doc-section">
<h2 class="section-heading">6. 🆘 Agent Stuck & Self-Recovery Protocol</h2>
<p class="section-desc">If your AI coding agent runs into issues or fails during execution, follow this deterministic recovery checklist:</p>
<div class="prompt-example-card" style="border-left: 4px solid var(--accent-orange, #f59e0b);">
<span class="prompt-badge" style="background: rgba(245, 158, 11, 0.15); color: #f59e0b;">Emergency Resolution Checklist</span>
<div class="prompt-text" style="font-family: var(--font-mono, monospace); font-size: 0.88rem; line-height: 1.6;">
1. <b>Run Doctor:</b> <code>npx agentbroko doctor</code><br>
2. <b>Missing FFmpeg:</b> Install via <code>winget install Gyan.FFmpeg</code> (Windows), <code>brew install ffmpeg</code> (macOS), or <code>sudo apt install ffmpeg</code> (Linux).<br>
3. <b>Missing ReportLab:</b> Run <code>python -m pip install reportlab</code>.<br>
4. <b>Project Validation Error:</b> Run <code>npx agentbroko video-forge validate project.json</code> and check file existence on disk.<br>
5. <b>Inspect Local Media:</b> Run <code>ffprobe -v error -show_entries stream=width,height,duration <file></code>.<br>
6. <b>Zero Cloud Leaks:</b> Never send media or sensitive PDFs to external cloud APIs.
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer>
<div class="footer-links">
<a href="https://github.com/sajidhossain8272/agentbroko" target="_blank">GitHub Repository</a>
<a href="https://www.npmjs.com/package/agentbroko" target="_blank">npm Package</a>
<a href="https://github.com/sajidhossain8272/agentbroko/blob/main/docs/INSTALL.md" target="_blank">Installation Guide</a>
<a href="https://github.com/sajidhossain8272/agentbroko/blob/main/docs/USAGE.md" target="_blank">Usage Guide</a>
<a href="https://github.com/sajidhossain8272/agentbroko/blob/main/LICENSE" target="_blank">MIT License</a>
</div>
<p>AgentBroko • Open Source Skills Hub by Broke Innovation • MIT Licensed</p>
</footer>
<!-- Interactive Tab & Copy Scripts -->
<script>
function switchTab(cardId, tabKey, btn) {
const card = document.getElementById(cardId);
if (!card) return;
// Remove active class from all buttons in this card
card.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// Hide all panes in this card
card.querySelectorAll('.code-pane').forEach(p => p.classList.remove('active'));
// Show active pane
const targetPane = document.getElementById(`pane-${cardId}-${tabKey}`);
if (targetPane) {
targetPane.classList.add('active');
}
}
function copyActiveTabCode(cardId, button) {
const card = document.getElementById(cardId);
if (!card) return;
const activePane = card.querySelector('.code-pane.active pre');
if (activePane) {
const text = activePane.innerText || activePane.textContent;
copySnippet(text, button);
}
}
function copySnippet(text, button) {
navigator.clipboard.writeText(text).then(() => {
const originalText = button.innerHTML;
button.innerHTML = '<span>✓ Copied</span>';
button.style.borderColor = '#10b981';
button.style.color = '#10b981';
setTimeout(() => {
button.innerHTML = originalText;
button.style.borderColor = '';
button.style.color = '';
}, 2000);
}).catch(err => {
console.error('Failed to copy: ', err);
});
}
</script>
</body>
</html>
SHA-256: e6d2638fa4825ace9538c3e3f25b5b5a271b3f973409de1e9c9f22a2565f1847