From folio
Use when the user needs to choose between distinct technical approaches — UI layouts, API shapes, schema designs, algorithm strategies, architectural patterns — and wants them laid out side by side. Produces a single self-contained HTML grid of N (typically 3–6) options, each column with the same sub-sections plus a comparison matrix and a recommendation, so tradeoffs are scannable at a glance. Software topics only.
How this skill is triggered — by the user, by Claude, or both
Slash command
/folio:code-option-comparisonThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
When a user is choosing between distinct ways to do something — "Redis or Postgres LISTEN/NOTIFY for
When a user is choosing between distinct ways to do something — "Redis or Postgres LISTEN/NOTIFY for pubsub?", "give me 4 onboarding flow designs", "compare polling vs streaming vs websocket" — the right artifact is not a long narrative. It's a grid: N columns, the same sub-sections in each, scannable tradeoffs, ending in a comparison matrix and a recommendation. This skill produces that grid as a single self-contained HTML file.
Trigger phrases: "compare N approaches", "side-by-side comparison", "give me 4 different ways to X", "lay them out so I can compare", "show me the tradeoffs between X and Y and Z."
Inputs: a choice point the user faces (a design decision, implementation strategy, schema shape, algorithm) — with the options either enumerated by the user or generated by you on request.
Output: one self-contained HTML file, typically docs/comparisons/<topic>.html.
software-visual-explainer.software-visual-explainer in PR mode.software-visual-explainer.templates/template.html, filling in N column blocks per references/column-shape.md.references/verification.md first.This SKILL.md is the orchestrator. Detail lives in the reference files:
| For… | Read |
|---|---|
| Column sub-sections, the comparison matrix, recommendation, grid layout, copy buttons | references/column-shape.md |
| The pre-completion checklist (content, build, a11y, print) | references/verification.md |
| The HTML skeleton to start from | templates/template.html |
templates/template.html is fully self-contained: it embeds the shared core and loads Mermaid +
Prism from a CDN. There is no build step. Write .mermaid blocks and <pre><code class="language-X">,
replace {{LANGUAGE}} in the Prism <script> tag with the language(s) used, and open the file in a
browser — Mermaid renders the diagrams and Prism highlights the code. Nothing to install, no Node.
(The page needs a network connection to reach the CDN; it is not offline-self-contained.)
Do not fork the palette. The template's <style>/<script> are an inline copy of
visual-explainer-core's core.css/core.js. Never hand-edit the theme in one template — change the
canonical core.css/core.js and re-sync (see that skill). Add only comparison-specific components in
the template's own <style> block.
Default docs/comparisons/<topic>.html; create the directory if needed. Topic name kebab-case.
npx claudepluginhub jtotty/folio --plugin folioFetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Applies a firm's KYC/AML rules grid to parsed onboarding records: assigns risk rating, checks required documents, outputs rule outcomes with citations, and routes for escalation.
Generates daily or weekly digests of activity from connected sources (chat, email, docs, tasks, CRM), highlighting action items, decisions, mentions, and project updates.