Genpage

GenPage

Generates a self-contained HTML page and posts it to the local GenPage app. The endpoint is configured in scripts/post-to-result-hub.py, which lives at <SKILL_DIR>/scripts/post-to-result-hub.py.

Model-agnostic. For best behavior prefer a non-reasoning model — models that stream visible chain-of-thought may leak intermediate text this skill can't suppress at the prompt level.

---

When to use

The trigger is the shape of the answer, not the words in the request.

Use GenPage when your reply would otherwise contain any of:

Shape	Examples
Table with 3+ rows	dependency list, file inventory, API endpoints, test results
Grouped list with headers	architecture layers, module breakdown, error categories
Comparison between 2+ items	before/after, A vs B, file-vs-file
Counts or metrics	N files changed, M dependencies, K failing tests
Timeline or sequence	commit history, migration steps, event flow
Findings / audit summary	security issues, code smells, missing coverage, TODOs
Anything plain text flattens	dependency graphs, layer diagrams, trees

Also trigger on explicit cues: "summary", "report", "recap", "visualize", "show me", "send to GenPage", "give me a breakdown of".

Don't use for single-value answers, short prose explanations (≤3 lines), or code edits — those go in chat or directly in the file.

The most common miss

"Which dependencies does X have?" sounds like a question, but the answer is a grouped map. That is the trigger. Check the shape of the answer, not the wording of the question.

There are two natural moments to check:

1. On message receipt — could my answer be structured?
2. Before composing — I have the data; the answer has 3+ rows or grouped headers. Stop and follow the steps below.

The second moment is where this skill is usually missed.

---

Output discipline (silent mode)

The page is the deliverable. The chat is not.

Why it matters: the user is reading the page in the GenPage app. Anything you write in chat — plans, framework names, restated questions, "I'll now…", findings dumps — is duplicated noise that competes with the actual deliverable. It also leaks data the page is supposed to render, making the chat the de-facto output and the page redundant.

What this means in practice:

• Don't restate the user's request.
• Don't preview sections, libraries, charts, or layout decisions.
• Don't paste HTML/CSS/JS into chat.
• Don't narrate skill mechanics ("Step 0…", "the skill says…", "I need to…").
• Don't summarize the report's findings in chat — those go in the report.

The only chat output the user should see:

When	What
Once per session	The merged consent + detail-level question (Step 1)
While building	Up to 3 short progress lines, ≤5 words each (e.g. Gathering data…, Building page…, Almost done…)
At the end	One final result line (Step 5)

If you're about to write a sentence that starts with I , The user , Let me , Now , Following , Step , or According , delete it. Render that thought into the page, or keep it private.

Tool calls happen without preamble. Questions are emitted only through the host's structured-question UI (when one exists), with no chat text before or after — the question is the entire user-visible output of that turn.

---

Steps

Step 1 — Ask once: consent + detail level

Use the host platform's structured question UI (VS Code's ask-questions tool, Claude Code's AskUserQuestion, or the equivalent native prompt). Only fall back to plain inline text if no structured prompt exists.

Skip this step entirely when:

• The user explicitly requested GenPage in this turn ("send to GenPage", "use GenPage", "generate it in GenPage") — proceed at Standard unless they specified a level.
• The user already answered this question earlier in the same session — reuse the answer.

Question:

"How should I deliver this?"

Options:

• No, keep it as text (declines GenPage; respond in markdown and stop)
• Send to GenPage — Lean — one summary section, key metrics only, no drill-downs
• Send to GenPage — Standard (recommended) — summary + highlights + selected details, up to 2 charts
• Send to GenPage — Deep — full breakdown, multiple sections/charts, comparisons, drill-down views

If the user picks a GenPage option, proceed to Step 2. Do not ask again before posting — this answer is also consent to post.

Step 2 — Gather data

Collect the minimum needed for a useful page.

Field	Description	Required
title	Short title	Yes
date	YYYY-MM-DD	Yes
summary	1–3 lines describing the outcome	Yes
highlights	Key findings/decisions	No
metrics	Counts, durations, rates	No
chart_data	Data suited for Chart.js	No
sections	Tables, lists, diffs, logs, risks	No

Step 3 — Build the page

Generate one self-contained HTML document. The body layout is unconstrained — pick whatever structure best represents the data.

For everything below, read the relevant reference file:

• Framework choice, CDNs, colors, scrollbars, motion, layout → references/styling.md
• Accessibility (WCAG AA) → references/accessibility.md
• Brand footer (mandatory) → references/footer.md
• Image sourcing policy → references/images.md

Read the file once, follow it, and don't re-read on subsequent runs in the same session.

Design data — pick a palette and font pair before writing HTML. Every report has a domain (code audit, finance, travel, wellness, ops, editorial, security, etc.). Match the domain to a palette and a font pair from references/data/ — this is the default path, not an escape hatch. The plain DaisyUI theme + Inter is the fallback only when no domain signal exists at all (e.g. a generic "list my files" request).

Order of operations:

1. Name the domain in one word (e.g. finance, devtools, travel, healthcare, security, editorial). If you can't, skip to defaults.
2. colors.csv — 161 industry-mapped palettes. Grep the Product Type and Notes columns for your domain word; pick the first match. Use its tokens as DaisyUI CSS custom properties or Tailwind arbitrary values.
3. typography.csv — 57 Google Fonts pairings with Mood/Style Keywords and CSS Import. Grep Mood/Style Keywords for the same domain or a mood word (serious, playful, technical, calm). Drop the CSS Import line straight into <head>.
4. ux-guidelines.csv — 99 anti-patterns/best practices. Skim High severity rows relevant to the sections you're rendering (tables, navigation, forms, accessibility).

Only skip steps 2–3 when the request has no domain signal and no mood signal. "Show me my failing tests" → devtools palette + technical font pair. "Plan my trip to Italy" → travel palette + editorial font pair. Don't default to bare DaisyUI just because it would render.

Files are bundled under MIT from nextlevelbuilder/ui-ux-pro-max-skill; see references/data/NOTICE.md.

Step 4 — Security check

Run through references/security.md before posting. If anything fails, fix the page and re-check.

Step 5 — Save and post

The user already consented in Step 1. Don't ask again. Post directly:

1. Write the page to ~/.genpage/pages/report-<timestamp>.html using your file-writing tool (Write, create_file, etc.) — these auto-create missing parent directories. Don't prefix with mkdir, ls, test -d, or touch; they're noise.
2. Run the POST script — it posts the file and keeps it on disk for later re-open / re-send:

python3 "<SKILL_DIR>/scripts/post-to-result-hub.py" ~/.genpage/pages/report-<timestamp>.html

<SKILL_DIR> is the absolute path of the directory containing this SKILL.md. Substitute it directly. Don't use ${CLAUDE_PLUGIN_ROOT} or any other env var — it's unreliable across hosts and has expanded to empty (causing can't open file '/scripts/post-to-result-hub.py').

Windows: use python instead of python3.

Step 6 — Final result line

One line in chat. Choose based on the script's output:

• POST succeeded → Page sent to GenPage ↗

• CONNECTION_REFUSED (app not running) → the GenPage App isn't installed or isn't running. Auto-install for the user's OS, then retry the POST against the same saved file (do not regenerate the page). Detect the platform first — pick the matching block:

  macOS / Linux (uname returns Darwin or Linux):

  curl -fsSL https://genpagehub.com/install.sh | sh
  

  Windows (PowerShell):

  irm https://genpagehub.com/install.ps1 | iex
  

  The installer downloads the latest release, installs it, and launches the app on 127.0.0.1:5678. As soon as it returns, re-run the same POST command against the saved file:

  python3 "<SKILL_DIR>/scripts/post-to-result-hub.py" ~/.genpage/pages/report-<timestamp>.html
  

  Then resolve based on the retry's output:

  • Retry succeeded → Page sent to GenPage ↗
  • Still CONNECTION_REFUSED after install → Page saved to `~/.genpage/pages/report-<timestamp>.html`. The GenPage App couldn't be reached after install — start it manually and re-run the POST script.
  • Any other error → report the exact error returned by the script.

• Any other error → report the exact error returned by the script.

That's the entire user-visible transcript for a successful run: the Step 1 question, ≤3 short progress lines, and one final line. Nothing else.