{"slug":"studio-html-report","title":"studio-html-report","summary":"Studio / GTM reports are interactive Three.js UIs opened with open_preview (UI, not PDF). Expert Review / Security / Debug stay a self-contained HTML file in File Preview (no JavaScript). Use after RiskLens, SEO, Marketing, Leads, Ads, Montage, Meeting, Scraping, Review, Security","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-15T18:31:21.505449Z","repo":{"url":"https://github.com/Navinspire-ia/navin","stars":35,"forks":4,"license":"AGPL-3.0","updatedAt":"2026-09-25T11:43:14Z"},"bodyHtml":"<hr>\n<h2>name: studio-html-report\ndescription: &gt;\nStudio / GTM reports are interactive Three.js UIs opened with open_preview\n(UI, not PDF). Expert Review / Security / Debug stay a self-contained HTML\nfile in File Preview (no JavaScript). Use after RiskLens, SEO, Marketing,\nLeads, Ads, Montage, Meeting, Scraping, Review, Security, or Debug.\nmetadata: {\"navin\":{\"emoji\":\"\uD83D\uDCC4\",\"category\":\"documents\",\"requires\":}}</h2>\n<h1>Studio / expert HTML report</h1>\n<p>Two tracks. Pick the one that matches the mission. Never put Three.js on a\nPPT or Word page.</p>\n<h2>File naming</h2>\n<table>\n<thead>\n<tr>\n<th>Mission</th>\n<th>Report file / app</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>RiskLens</td>\n<td><code>risklens-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>SEO</td>\n<td><code>seo-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Marketing (<code>/campaign</code>)</td>\n<td><code>marketing-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Montage</td>\n<td><code>montage-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Ads</td>\n<td><code>ads-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Leads</td>\n<td><code>leads-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Scraping</td>\n<td><code>scrape-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Meeting</td>\n<td><code>meeting-report-[YYYYMMDD-HHMMSS]</code></td>\n</tr>\n<tr>\n<td>Review (<code>/inspect</code>)</td>\n<td><code>review-report-[YYYYMMDD-HHMMSS].html</code></td>\n</tr>\n<tr>\n<td>Security (<code>/fortify</code>)</td>\n<td><code>security-report-[YYYYMMDD-HHMMSS].html</code></td>\n</tr>\n<tr>\n<td>Debug (<code>/debug</code>)</td>\n<td><code>debug-report-[YYYYMMDD-HHMMSS].html</code></td>\n</tr>\n</tbody>\n</table>\n<p>Also keep working files in native formats next to it when useful: <code>.md</code>, <code>.csv</code>,\n<code>.xlsx</code>, <code>.json</code>, images, etc. The report is the <strong>summary surface</strong>, not a\nreplacement for data files.</p>\n<hr>\n<h2>Track A - Studio / GTM UI (convert UI, not PDF)</h2>\n<p>Missions: RiskLens, SEO, Marketing, Montage, Ads, Leads, Meeting, Scraping.</p>\n<p>The report is an <strong>interactive UI</strong>. Do not design for Export PDF. File Preview\nprint is not the close path.</p>\n<h3>Stack (required)</h3>\n<p>Vite + React + one official DS (MUI / Fluent / Carbon) + <code>framer-motion</code> +\n<code>three</code> + <code>@react-three/fiber</code> + <code>@react-three/drei</code>. Follow <code>ui-ux-pro-max</code>\nand <code>make-interfaces-feel-better</code>.</p>\n<p>Before the scene:</p>\n<pre><code>python3 \"$SEARCH\" \"&lt;report theme&gt; spatial dashboard\" --stack threejs\n</code></pre>\n<p>Use the drei helpers the search returns: OrbitControls (damping), Environment,\nContactShadows, PresentationControls when the hero is a product. Optional\n<code>@react-three/postprocessing</code> only if that hero needs bloom.</p>\n<h3>Scene quality (required)</h3>\n<ul>\n<li>One R3F Canvas / one renderer; <code>pixelRatio</code> capped at 2; antialias at construct</li>\n<li>PBR materials + AmbientLight + DirectionalLight (never a black unlit mesh)</li>\n<li>shadowMap on; cast/receive on the hero and the ground</li>\n<li>FOV 45-75; explicit camera position + lookAt</li>\n<li>Designed object or environment the user can read, HTML overlay for the report</li>\n<li><code>prefers-reduced-motion</code>: freeze the scene, show the still</li>\n<li>Canvas <code>role=\"img\"</code> and a real aria-label</li>\n<li>Never wallpaper particles, never a blank canvas, never GSAP/Spline/Lottie spam</li>\n</ul>\n<h3>Layout (overlay on the scene)</h3>\n<ol>\n<li><strong>Header</strong> - mission name, report title, subject / scope / path, timestamp</li>\n<li><strong>Executive summary</strong> - 3-6 bullets or short cards (what matters first)</li>\n<li><strong>Body sections</strong> - one clear section per theme; working controls only</li>\n<li><strong>Deliverables</strong> - table: file path | format | what it contains. Only what the\nuser asked for; render scripts, scrapers and intermediates live under\n<code>build/</code> and never appear in this table</li>\n<li><strong>Footer</strong> - generated by Navin, timestamp, short disclaimer if needed</li>\n</ol>\n<h3>After writing</h3>\n<p>Start the app and call <code>open_preview</code> (web). Click the primary nav yourself.\nDo not paste the full HTML into chat. Do not close with Export PDF.</p>\n<hr>\n<h2>Track B - Expert File Preview report (no JavaScript)</h2>\n<p>Missions: Review (<code>/inspect</code>), Security (<code>/fortify</code>), Debug (<code>/debug</code>).</p>\n<p>File Preview sandboxes scripts - <strong>no JS interactivity</strong>. Self-contained file:\nall CSS inline in a style block. No external fonts, no javascript, no CDNs.</p>\n<p>For Review / Security / Debug tool reports (<code>code_review</code> report,\n<code>security_scan</code> write_report, <code>debug_repair</code> report), File Preview opens\nautomatically in the WebUI. Otherwise call <code>open_file_preview</code> on the HTML\npath immediately (Download HTML). Print CSS is optional. PDF is not the\ndesign target. Do not paste the full HTML into chat.</p>\n<h3>Layout</h3>\n<ol>\n<li><strong>Header</strong> - mission name, report title, subject / scope / path, timestamp</li>\n<li><strong>Executive summary</strong> - 3-6 bullets or short cards (what matters first);\nfor Review/Security/Debug: severity counters (Critical / High / Medium / Low)</li>\n<li><strong>Body sections</strong> - one clear section per theme</li>\n<li><strong>Remediation plan (Review / Security / Debug)</strong> - numbered choices the user\ncan pick in chat (<code>Start with #1</code>, <code>#2</code>, …). Each choice: title, severity,\neffort (S/M/L), risk if delayed, first concrete step</li>\n<li><strong>Deliverables</strong> - table: file path | format | what it contains. Only what the\nuser asked for; render scripts, scrapers and intermediates live under\n<code>build/</code> and never appear in this table</li>\n<li><strong>Footer</strong> - generated by Navin, timestamp, short disclaimer if needed</li>\n</ol>\n<h3>Finding cards (Review / Security / Debug) - required</h3>\n<p>For <strong>every</strong> confirmed finding, render a card with:</p>\n<table>\n<thead>\n<tr>\n<th>Field</th>\n<th>Rule</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Severity chip</td>\n<td>Critical / High / Medium / Low / Info with color</td>\n</tr>\n<tr>\n<td>Title</td>\n<td>Short, specific</td>\n</tr>\n<tr>\n<td>Location</td>\n<td><code>path/to/file.ext:LINE</code> (or hunk range)</td>\n</tr>\n<tr>\n<td>Impact</td>\n<td>What an attacker / user / system suffers</td>\n</tr>\n<tr>\n<td><strong>Real example</strong></td>\n<td>Mandatory proof - see below</td>\n</tr>\n<tr>\n<td>Fix</td>\n<td>Minimal concrete remediation</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Real example</strong> (pick what fits; at least one per finding):</p>\n<ul>\n<li>Vulnerable or buggy <strong>code excerpt</strong> (10-40 lines max, redact secrets)</li>\n<li><strong>Payload / PoC</strong> (<code>' OR 1=1--</code>, XSS string, curl with headers)</li>\n<li><strong>HTTP request/response</strong> snippet proving the flaw</li>\n<li><strong>Failing test / stack trace / scanner output</strong> (trimmed)</li>\n<li><strong>Before → after</strong> snippet for the recommended fix</li>\n</ul>\n<p>Never fill with a generic OWASP paragraph and no project-specific proof.</p>\n<h3>Remediation plan UI (no JavaScript)</h3>\n<p>Use numbered choice cards styled like selectable options:</p>\n<pre><code>&lt;section class=\"plan\"&gt;\n  &lt;h2&gt;Remediation plan - choose where to start&lt;/h2&gt;\n  &lt;p class=\"hint\"&gt;Reply in chat with the number, e.g. \"Start with #1\".&lt;/p&gt;\n  &lt;article class=\"choice\"&gt;\n    &lt;header&gt;&lt;span class=\"num\"&gt;#1&lt;/span&gt; &lt;span class=\"sev\"&gt;Critical&lt;/span&gt; Title&lt;/header&gt;\n    &lt;p&gt;Effort: S · Risk if delayed: …&lt;/p&gt;\n    &lt;p&gt;First step: …&lt;/p&gt;\n  &lt;/article&gt;\n  …\n&lt;/section&gt;\n</code></pre>\n<p>Order choices by severity × exploitability (or by dependency for Debug).\nDo not auto-start fixes until the user picks a number (unless they already\nasked for Auto-fix / fix everything).</p>\n<h3>Roadmap &amp; strategy (audits / Review / Security / Debug) - required</h3>\n<p>A remediation list alone is not a plan. After the choices, add a\n<strong>Roadmap</strong> section with 3-4 phases, each rendered as a card:</p>\n<table>\n<thead>\n<tr>\n<th>Phase</th>\n<th>Horizon</th>\n<th>Content rule</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Phase 0 - Stabiliser</td>\n<td>24-72h</td>\n<td>Only stop-the-bleeding items (exposed secrets, live exploits, data loss)</td>\n</tr>\n<tr>\n<td>Phase 1 - Corriger</td>\n<td>1-2 semaines</td>\n<td>Critical/High fixes, grouped by module so one owner can batch them</td>\n</tr>\n<tr>\n<td>Phase 2 - Renforcer</td>\n<td>30-60 jours</td>\n<td>Structural work: tests, CI gates, auth hardening, monitoring</td>\n</tr>\n<tr>\n<td>Phase 3 - Exceller</td>\n<td>Trimestre</td>\n<td>Architecture debt, performance, design system, documentation</td>\n</tr>\n</tbody>\n</table>\n<p>Each phase must list: objective (one sentence), the numbered tasks it\ncontains (reference the remediation choice numbers), <strong>effort in\nperson-days per task</strong>, dependencies between tasks (\"needs #3 first\"),\nand an <strong>exit criterion</strong> that is verifiable (\"CI blocks merge when\ntests fail\", \"gitleaks scan returns 0 findings\"), not vague (\"better\nsecurity\").</p>\n<p>Close the roadmap with a short <strong>Strategy</strong> block (5-10 lines of prose,\nnot bullets):</p>\n<ul>\n<li>Target state in one paragraph: what the project looks like when the\nroadmap is done, with 2-3 measurable KPIs (test coverage %, mean time\nto patch, Lighthouse score, error budget)</li>\n<li>Quick wins vs structural work: name which items buy the most risk\nreduction per day of effort and why</li>\n<li>Verification loop: how each fix is proven (test added, scanner re-run,\nCI gate) so regressions cannot silently return</li>\n<li>Top 2 risks of the plan itself (e.g. key rotation breaks a deploy,\nstrict TS flags block the team) and the mitigation for each</li>\n</ul>\n<p>Every recommendation in the report must be actionable as written: name\nthe exact file/command/config to change and what to change it to. \"Add\nrate limiting\" is filler; \"add slowapi Limiter on POST /api/auth/login,\n5/min per IP, see snippet\" is a recommendation.</p>\n<h3>Visual system</h3>\n<ul>\n<li>Prefer a clean dark report shell: background <code>#0a0e1a</code>, cards <code>#121826</code>,\ntext <code>#e8eefc</code>, muted <code>#9aa8c7</code>, accent <code>#5b8cff</code>, success <code>#3ecf8e</code>,\nwarning <code>#f0b429</code>, danger <code>#f07178</code></li>\n<li>System UI / sans stack: <code>ui-sans-serif, system-ui, sans-serif</code></li>\n<li>Generous spacing, 12-16px card radius, subtle 1px borders</li>\n<li>Severity / score chips with color, not emoji spam</li>\n<li>Code / PoC blocks: monospace, <code>#0d1117</code> background, wrap long lines</li>\n<li>Tables: readable zebra or row separators; wrap long URLs</li>\n<li>Print-friendly: <code>@media print</code> with white/black fallbacks so a print\ndialog stays legible if the user asks</li>\n</ul>\n<h3>Content rules</h3>\n<ul>\n<li>Specific numbers, URLs, paths, and code - no filler</li>\n<li>Mask secrets in examples (<code>sk-***</code>, password hashes truncated)</li>\n<li>Link workspace file paths as plain text paths (not <code>file://</code>)</li>\n<li>Keep the HTML under ~300 KB when possible so Preview is not truncated</li>\n<li>French or English to match the user brief</li>\n</ul>\n<h2>Mission-specific emphasis</h2>\n<ul>\n<li><strong>RiskLens</strong> - synthesis (most likely / most dangerous / hidden assumption),\nfailure cards, revised plan, checklist (Track A UI)</li>\n<li><strong>SEO</strong> - impact-ordered findings, keyword clusters, content actions, schema\n/ meta snippets when relevant (Track A UI)</li>\n<li><strong>Marketing</strong> - message / persona, channel plan, asset inventory with paths\n(Track A UI)</li>\n<li><strong>Leads</strong> - ICP snapshot, ranked accounts/people, signals, outreach next steps\n(source URLs mandatory) (Track A UI)</li>\n<li><strong>Ads</strong> - evidence paths, kill/scale, no invented ROAS (Track A UI)</li>\n<li><strong>Scraping</strong> - crawl stats, ok/error, export paths, sample rows (Track A UI)</li>\n<li><strong>Meeting</strong> - decisions, owners, actions (Track A UI)</li>\n<li><strong>Review</strong> - Approve / Request changes verdict; findings by layer\n(correctness, SQL/data, API, frontend, tests, perf); remediation choices</li>\n<li><strong>Security</strong> - phase coverage (injection, front, authz, network, secrets,\nprivacy); PoC per finding; hardening plan choices</li>\n<li><strong>Debug</strong> - root-cause statement with evidence; related latent bugs; fix\nplan choices ordered by unblock value</li>\n</ul>\n<h2>Chat close</h2>\n<p>Studio / GTM: three to six sentences max: headline result + the Preview UI\npath + the other key file formats. Expert Review / Security / Debug: ask\nwhich remediation number to start with.</p>\n","files":[{"path":"SKILL.md","sizeBytes":10529,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-15T18:35:34.785592Z","sha256":"FEA6F064ECB00BC146EBE2874732A3ED9DE33470481BD7CF2F9C2AC7768530C5","sizeBytes":5005},"review":null,"source":{"repositoryUrl":"https://github.com/Navinspire-ia/navin","path":"navin/skills/studio-html-report","license":"AGPL-3.0","commit":"8d5ed11c1b8af5a6d77d3e915deb4d49ace9294f","subtreeSha":"26B7AFA9160D2F5A55EC2796D9F2CB3451CC53F188ECCA33F6E786DC555087F1","lastSyncedAt":"2026-09-29T20:56:04.898552Z"},"reviewedAt":"2026-09-15T18:55:32.264028Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/Navinspire-ia/navin/tree/main/navin/skills/studio-html-report"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install navinspire-ia-navin@llmmart"},{"target":"git","command":"git clone https://github.com/Navinspire-ia/navin.git"}]}