diff --git a/.opencode/skills/sce-project-overview-html/SKILL.md b/.opencode/skills/sce-project-overview-html/SKILL.md new file mode 100644 index 00000000..518c07d4 --- /dev/null +++ b/.opencode/skills/sce-project-overview-html/SKILL.md @@ -0,0 +1,136 @@ +--- +name: sce-project-overview-html +description: | + Generates a single self-contained HTML document from the project's `context/` Markdown files so a human reader can quickly understand the project and how it works. Embeds Mermaid.js (client-side, CDN) so existing Mermaid diagrams in context render in-browser, and includes inline CSS for a clean, readable layout. Output is written to `context/tmp/project-overview.html` (disposable, gitignored). Use when the user wants a project overview as HTML, a readable project summary page, a shareable project walkthrough, or to visualize the context memory as a single document. +compatibility: opencode +--- + +## What I do +- Read the project's `context/` Markdown files with my own file-read tool. +- Author a single self-contained HTML document directly with my own file-write tool — I do NOT generate, run, or emit any conversion script (no Python, no Node, no shell pipeline). I write the HTML myself. +- Embed Mermaid.js via CDN so existing Mermaid blocks render in-browser. +- Write the result to `context/tmp/project-overview.html` (disposable, gitignored). + +## When to use +- Use when the user asks for a project overview as HTML, a readable summary page, or a shareable walkthrough of the project's shared context memory. +- Trigger phrases include "generate project overview HTML", "project overview as a page", "render context to HTML", "make a project summary page", or "build a project walkthrough". + +## Source of truth +- The source of truth is `context/` only. This skill does not scan or analyze application code. +- It renders the current-state context memory into HTML as-is. + +## How to run this + +1. **Read the root context files** - read these five files in order using your file-read tool: + - `context/overview.md` + - `context/architecture.md` + - `context/patterns.md` + - `context/glossary.md` + - `context/context-map.md` + +2. **Read linked domain files** - parse `context/context-map.md` for linked domain files under `context/cli/`, `context/sce/`, and any other `context/{domain}/` sections. Read each linked file with your file-read tool so its content can be included in the HTML. + +3. **Author the HTML document yourself** - using your own file-write tool, write a single self-contained HTML file with the structure described in [HTML structure contract](#html-structure-contract) below. Convert the Markdown content to HTML body markup yourself as you write the file. Do NOT generate, scaffold, or execute any conversion script (no Python, no Node, no shell, no build step). You are the renderer: read the Markdown, then write the equivalent HTML directly. + +4. **Write the output** - write the HTML to `context/tmp/project-overview.html` with your file-write tool. Create the `context/tmp/` directory if it does not exist. + +5. **Report the result** - print the absolute path of the generated file and remind the user it is disposable (regenerated on demand, gitignored). + +## HTML structure contract + +The generated HTML must be a single self-contained document with a left-side navigation sidebar and the main content to its right. Use this structure: + +```html + + + + + + {project_name} — Project Overview + + + +
+ +
+
+
+
+
+
+ +
+
+ + + + +``` + +### Section ordering +1. Overview +2. Architecture +3. Patterns +4. Glossary +5. Context Map +6. Domain files (one `
` per linked file, ordered as listed in `context-map.md`) + +### Markdown-to-HTML rendering +- Convert each Markdown file's content to HTML body markup (headings, paragraphs, lists, tables, code blocks, blockquotes) yourself as you write the file. You are the renderer — do not delegate this to a script. +- Preserve Mermaid blocks as `
...
` so the client-side Mermaid.js library renders them. Do not convert Mermaid fenced blocks to plain code blocks. +- Preserve inline code as `` and fenced code blocks as `
`.
+- Generate heading anchors (`id` attributes) from heading text for in-page navigation.
+
+### Anchor navigation (left sidebar)
+- Build a table-of-contents `