rich-page

Build an opinionated, visually distinctive single self-contained HTML page from an arbitrary source — explainer, research write-up, PRD, pitch, one-pager, distilled report, "make this less boring" rebuild. The output is one .html file that renders identically when DM'd to anyone: CDN-loaded libraries are allowed (they're stable), but every image is base64-inlined so there are no external file references.

The point of this skill, in the spirit of Google Research's Generative UI work: generate the interface, not just the content. Most "explainers" written by AI default to prose with a card grid. Reach further. A bar chart with the SLO line called out. A Mermaid sequence of the actual protocol. A scroll-tied walkthrough of how a request travels through the system. A click-to-detail architecture diagram. Typography that signals intent. The visual treatment is the contribution.

This skill is a four-phase workflow. The split between Phase 2 (visual plan) and Phase 3 (build) is what keeps the page focused — without it, every section becomes a card grid and the page reverts to AI slop.

When this skill applies

Trigger for explicit asks ("make me a rich page about X", "turn this PDF into something visual", "build me a deck"), but also for implicit ones:

• "I want something I can show the team about Y"
• "explain Z in a visual way" / "more visual than a doc"
• "make this less boring" / "give it some eye candy"
• "distill our research into a page"
• "I want a one-pager / pitch / PRD page for [thing]"
• "rebuild that page" / "redo it with more visuals"
• "turn this into something I can present"