메뉴
Self-contained HTML report archetypes. Pick the right shape for the document — Folio (book), Stage (slides), Atlas (dashboard), Field (editorial long-read), Ledger (comparison matrix), Timeline (chronological story). Single-file, date-stamped outputs, no external deps, light-mode by default.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
A pre-publish checkpoint for a client blog/content draft — grammar and mechanics, brand voice against a per-client profile, and factual claims checked against the client's own site — that ends in one verdict a VA or owner can act on without reading the whole report: SHIP / SHIP WITH FIXES / HOLD. Use when a user asks to "QA this draft," "check this post before it goes live," "run content QA for [client]," "does this sound like [client]," or wants a pre-publish gate so nothing ships with an embarrassing factual miss, an off-voice line, or a typo in the headline.
A local tabbed dashboard showing all six AMM Founding Circle tools' reports in one place (Connection Sentinel, Bug Hunter, Content QA, Lead Grader, Penny Dashboard, Outbound Engine), each with a Refresh button that re-runs that tool's own command and pulls its latest report back in. Use when a member wants one place to check every tool at a glance instead of hunting down six separate report files, when presenting results live to a client or teammate, or when a specific tool's tab needs re-running after config changes.
Find the ghost tokens. Audit Claude Code or Codex setup, see where context goes, fix it. Use when context feels tight.
Compute per-client cost/billing profitability (Penny Dashboard) and generate an internal owner view plus a locked-down, client-safe HTML page per client. Use when an agency owner asks to run their Penny Dashboard, check which clients are unprofitable, see margin by client, or generate a client-safe cost/spend page to send a client.
Sweep every client site and Google Ads account for real, client-visible errors — broken links, disapproved ads, dead tracking tags, broken redirect chains. Use when the user says "run my bug hunt", "sweep my clients", "check my client sites for errors", "audit my Google Ads accounts for problems", or wants to know what's broken before a client finds it. Read-only — never edits, pauses, or posts anything.
An always-on checker that pings every API/MCP connection your automations depend on and alerts you the moment one silently dies -- email + macOS notification, plus a tiny local status board. Use when you want to know instantly if a connection (Search Atlas MCP, Google Ads, GA4, Meta, CallRail, Smartlead, ClickUp, Slack, or anything else) has gone down, when a scheduled automation "seems quiet" and you need ground truth instead of guessing, or when you're setting up your first always-on agent and want a watch on it from day one.
| name | html-reports |
| description | Self-contained HTML report archetypes. Pick the right shape for the document — Folio (book), Stage (slides), Atlas (dashboard), Field (editorial long-read), Ledger (comparison matrix), Timeline (chronological story). Single-file, date-stamped outputs, no external deps, light-mode by default. |
A library of reusable HTML report archetypes for generating standalone, single-file documents. Every archetype is:
<style> and <script>, no CDN dependencies, opens by double-clicking.-apple-system, "Segoe UI", Roboto for body. No web-font requests.Pick the archetype that matches the shape of the document, not just the topic.
| Archetype | Shape | Use when | Path |
|---|---|---|---|
| Folio | Book — fixed left TOC + scrollable content | The reader needs to jump between many distinct sections (per-person scorecards, framework references, audit reports, post-incidents) | folio/ |
| Stage | Slides — paginated, one idea per page | The report tells a linear story with a small number of big ideas (exec readouts, kickoff decks, narrative summaries) | stage/ |
| Atlas | Map — top-down dense overview with drill-down panels | The reader needs to see everything at once and pivot (cluster maps, portfolio dashboards, system health overviews) | atlas/ |
| Field | Editorial long-read — full-bleed hero + serif body + pull quotes | The reader is being persuaded or oriented through narrative (post-mortems, customer case studies, strategy memos, deep-dives) | field/ |
| Ledger | Comparison table — sticky row/col headers, color-cued scoring matrix | The reader is comparing N options against M criteria (vendor bake-offs, strategy tradeoffs, before/after audits, A/B reads, person-vs-person) | ledger/ |
| Timeline | Vertical date spine — chronological events with metric snapshots and before/after deltas | Time IS the primary axis (incident reviews, growth narratives, release-impact studies, account-health trajectories, recurring-meeting quality trends) | timeline/ |
| Catalog | Search-first faceted list — left-rail filters, prominent search, in-page detail drawer, virtual scroll | The reader needs to find one specific record among 60–5000 items (customer directories, integration registries, vendor lists, tool catalogs, faceted knowledge bases) | catalog/ |
#ffffff) background, near-black text (#111 or #1a1a1a), grays for chrome (#e5e7eb, #f5f5f5).reports/<topic>/<slug>-YYYY-MM-DD.html in the relevant repo, where YYYY-MM-DD is the data as-of date or coverage end date. If there is no data date, use the generation date. Never name a generated report page index.html; reserve index.html only for hand-maintained galleries, landing pages, or navigation wrappers that link to dated reports.Report date: YYYY-MM-DD. If the data has an as-of date or coverage window, include it too, such as Data through: YYYY-MM-DD or Coverage: YYYY-MM-DD to YYYY-MM-DD. The primary visible date must match the filename date.Each archetype lives in its own subdirectory with:
README.md — when to use, when not to, visual spec, data shape, customization knobs, examples.template.html.j2 — Jinja2 template parameterized for arbitrary content.styles.css — extracted CSS (template inlines it; this is for reference and reuse).example-minimal.html — tiny standalone example so a future user can preview the format.