frontpage

Compose editorial HTML frontpages from structured visualization specs with Mermaid validation.

8|Updated Mar 22, 2026
One-click install
npx skills add https://github.com/Cygnusfear/pi-extensions --skill frontpage
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontpage
Source: https://github.com/Cygnusfear/pi-extensions/tree/main/packages/frontpage/skills/frontpage
Command: npx skills add https://github.com/Cygnusfear/pi-extensions --skill frontpage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontpage turns verbose, structured chat outputs into a clear editorial-style HTML visualization, helping readers understand arguments instead of scanning walls of text.

Core Features & Use Cases

  • Structured spec to HTML: Compose a page via a spec so you control layout, narrative flow, and visual intent without hand-writing styling.
  • Editorial “annotation layer”: Add labels and chart annotations so each visual element interprets the pattern, not just displays data.
  • Multi-technology visualization support: Use Mermaid, Chart.js, D3, static SVG, or raw HTML sections within one page for architecture, comparisons, timelines, and more.

Quick Start

Use frontpage_create to generate a whiteboard-style frontpage from a structured spec describing your thesis and sections.

Frequently Asked Questions about frontpage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn dense chat output into an editorial HTML visualization?

To turn dense chat output into an editorial HTML visualization, you provide a structured spec defining your thesis and sections, which the tool composes into a clear, scannable frontpage without hand-writing HTML styling.

Can I use Mermaid, D3, and Chart.js in the same information design frontpage?

Yes, you can use Mermaid, D3, and Chart.js in the same information design frontpage. The tool supports multiple section types within a single page to render architecture graphs, comparisons, and timelines.

What is the best way to add an annotation layer to chart visualizations?

The best way to add an annotation layer to chart visualizations is through an editorial spec that applies labels and chart annotations, ensuring each visual element interprets the data pattern rather than just displaying it.

Does the Mermaid visualization rendering workflow validate lint findings?

Yes, the Mermaid visualization rendering workflow validates lint findings. It applies a deterministic create, update, and open tool operation process to ensure your Mermaid sections are checked before composing the final frontpage.

Do I need to hand-write HTML styling to compose an editorial frontpage?

No, you do not need to hand-write HTML styling to compose an editorial frontpage. You control the layout, narrative flow, and visual intent entirely through a structured visualization spec instead of manual coding.