一键在 Manus 中运行任何 Skill

render-plans-to-html

星标0

分支0

更新时间2026年6月5日 15:07

Converte artifacts de planejamento Markdown (PLAN.md, REVIEW.md, tasks.md, etc.) em dashboard HTML self-contained com sidebar, status pills, mermaid e syntax highlighting.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

FelipeOFF

FelipeOFF/my-claude-code-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

render-plans-to-html

Convert any Markdown planning artifact into one self-contained, offline-capable HTML dashboard. Works with output from GSD, Superpowers, Ralph Specum, HopLoop, or any plain .md.

When to Use

User asks to render or visualize plans, specs, reviews, or a folder of MD files in HTML.
A planning artifact needs to be shared with someone who can't run the source tool.
Multi-document phase output should be agglomerated into one navigable surface.

When NOT to Use

Designing product UI — use frontend-design or huashu-design instead.
Editing source-of-truth Markdown — this skill never modifies inputs.

How to Run It

This skill runs via npx — no prior install required. Node.js ≥ 20 must be available on $PATH.

Resolve input. Single .md, folder (recursive), or comma-separated list. Ask only if not provided.
Resolve output. Default: <cwd>/plans.html. Override with --out.
Detect language. Pass --lang matching the language the user has been speaking in the conversation: pt-BR for Portuguese, en for English, es for Spanish. Do not rely on the system locale alone — the user's primary language in the chat is more reliable than $LANG. Only omit --lang when you genuinely cannot tell which language the user prefers; the CLI then falls back to $LANG/$LC_ALL and finally to English.
Execute the renderer:

npx --yes render-plans-to-html <path>[,path2,...] \
  [--out output.html] [--title "Phase v1.9"] \
  [--lang pt-BR|en|es] [--default-agent opus|sonnet|haiku|codex] \
  [--theme dark]

Report. Print the absolute output path and offer to open it.

The HTML opens on an Overview tab with progress, ETA per agent, USD cost per agent, severity heatmap and burndown. Click any document in the sidebar to drill down to the original markdown.

Behavior

Detects doc type by filename and content: plan / review / requirements / tasks / research / design / verification / generic.
Each type gets a color-coded badge in the sidebar.
Checkboxes (- [ ] / - [x]) become status pills with a done/total metric.
Severity keywords (**CRITICAL**, **HIGH**, **MEDIUM**, **LOW**) become colored tags with counters.
Mermaid blocks render as live diagrams (vendored mermaid).
Code blocks get syntax highlight (vendored highlight.js).
External links collected per doc into a "References" footer.
Sidebar search filters nav.
Dark/light theme toggle, persisted in localStorage.
"Copy as prompt" button copies the active doc back as text for re-prompting.
Output is a single .html with all CSS and JS inlined — works offline.

Quick Reference

Input	Behavior
`file.md`	Renders one doc
`folder/`	Recursive `*.md` discovery
`a.md,b.md`	Renders the listed files in order

Flag	Default	Purpose
`--out`	`./plans.html`	Output file path
`--title`	`Plans (N)`	Title shown in sidebar header
`--theme`	`auto`	Initial theme: `light`, `dark`, or `auto`

Optional: Local Install

If the user wants to install the CLI globally (so render-plans is always on $PATH), run the installer once:

npx render-plans-to-html-install --all       # Claude Code + Codex
npx render-plans-to-html-install --claude    # Claude Code only
npx render-plans-to-html-install --codex     # Codex only

This is not required — the npx --yes render-plans-to-html flow above works without any local install.

同仓库更多 Skills

同仓库

absolute-flutter

FelipeOFF/my-claude-code-skills

Use this skill whenever the user is building or scaffolding a new Flutter or Dart mobile app, adding any Flutter feature, screen, page, view model, use case, repository, or API/backend call, setting up Flutter push notifications or deep links, or mapping/refactoring an existing Flutter project toward a layered clean architecture — EVEN WHEN the user never names the architecture, rx_notifier, MVVM, clean architecture, get_it, dio, drift, or go_router. It applies the moment the work touches Flutter app structure: a request like "add a login screen", "fetch data from this endpoint", "create a settings feature", "wire up FCM", "open this screen from a notification", or "clean up my Flutter project" is in scope. This skill is THE way to produce Flutter code in this codebase shape: rx_notifier Controller view models, AbstractUseCase with Either<AppError,T> error handling, I*Repository interface/impl pairs, a tiered dio gateway, get_it dependency injection, drift TTL cache, and go_router navigation. Prefer it over a

2026-06-110

code-review-graph

FelipeOFF/my-claude-code-skills

Knowledge graph semântico da codebase via MCP. Mapeia arquitetura, analisa blast-radius de mudanças e faz code review com até 8x menos tokens. Usa Tree-sitter (24 linguagens) + SQLite.

2026-06-050

llm-wiki

FelipeOFF/my-claude-code-skills

Mantém uma knowledge base persistente no Obsidian seguindo o pattern Karpathy LLM Wiki — ingest de sources, query sobre wiki compilado, lint de saúde. Dispara quando o usuário pede "ingest", "alimenta o wiki", "atualiza wiki", "consulta wiki", "lint wiki", "/wiki-ingest", "/wiki-query", "/wiki-lint", "que sabemos sobre X", "compila X no wiki", "adiciona ao wiki", ou ao salvar uma nova source em References/.

2026-06-050

design-md

FelipeOFF/my-claude-code-skills

Analisa projetos Stitch e sintetiza design system semântico em arquivos DESIGN.md.

2026-06-050

enhance-prompt

FelipeOFF/my-claude-code-skills

Transforma ideias vagas de UI em prompts polidos e otimizados para Stitch.

2026-06-050

frontend-project-style

FelipeOFF/my-claude-code-skills

Design system e style guide configurável para projetos frontend. Use SEMPRE que criar componentes, páginas ou UI em React/Next/Angular/Vue.

2026-06-050

name	render-plans-to-html
description	Converte artifacts de planejamento Markdown (PLAN.md, REVIEW.md, tasks.md, etc.) em dashboard HTML self-contained com sidebar, status pills, mermaid e syntax highlighting.
source	vendored
upstream	https://github.com/FelipeOFF/render-plans-to-html
license	MIT
added	"2026-05-16T00:00:00.000Z"
vendored	"2026-06-05T00:00:00.000Z"

render-plans-to-html

Convert any Markdown planning artifact into one self-contained, offline-capable HTML dashboard. Works with output from GSD, Superpowers, Ralph Specum, HopLoop, or any plain .md.

When to Use

User asks to render or visualize plans, specs, reviews, or a folder of MD files in HTML.
A planning artifact needs to be shared with someone who can't run the source tool.
Multi-document phase output should be agglomerated into one navigable surface.

When NOT to Use

Designing product UI — use frontend-design or huashu-design instead.
Editing source-of-truth Markdown — this skill never modifies inputs.

How to Run It

This skill runs via npx — no prior install required. Node.js ≥ 20 must be available on $PATH.

Resolve input. Single .md, folder (recursive), or comma-separated list. Ask only if not provided.
Resolve output. Default: <cwd>/plans.html. Override with --out.
Detect language. Pass --lang matching the language the user has been speaking in the conversation: pt-BR for Portuguese, en for English, es for Spanish. Do not rely on the system locale alone — the user's primary language in the chat is more reliable than $LANG. Only omit --lang when you genuinely cannot tell which language the user prefers; the CLI then falls back to $LANG/$LC_ALL and finally to English.
Execute the renderer:

npx --yes render-plans-to-html <path>[,path2,...] \
  [--out output.html] [--title "Phase v1.9"] \
  [--lang pt-BR|en|es] [--default-agent opus|sonnet|haiku|codex] \
  [--theme dark]

Report. Print the absolute output path and offer to open it.

The HTML opens on an Overview tab with progress, ETA per agent, USD cost per agent, severity heatmap and burndown. Click any document in the sidebar to drill down to the original markdown.

Behavior

Detects doc type by filename and content: plan / review / requirements / tasks / research / design / verification / generic.
Each type gets a color-coded badge in the sidebar.
Checkboxes (- [ ] / - [x]) become status pills with a done/total metric.
Severity keywords (**CRITICAL**, **HIGH**, **MEDIUM**, **LOW**) become colored tags with counters.
Mermaid blocks render as live diagrams (vendored mermaid).
Code blocks get syntax highlight (vendored highlight.js).
External links collected per doc into a "References" footer.
Sidebar search filters nav.
Dark/light theme toggle, persisted in localStorage.
"Copy as prompt" button copies the active doc back as text for re-prompting.
Output is a single .html with all CSS and JS inlined — works offline.

Quick Reference

Input	Behavior
`file.md`	Renders one doc
`folder/`	Recursive `*.md` discovery
`a.md,b.md`	Renders the listed files in order

Flag	Default	Purpose
`--out`	`./plans.html`	Output file path
`--title`	`Plans (N)`	Title shown in sidebar header
`--theme`	`auto`	Initial theme: `light`, `dark`, or `auto`

Optional: Local Install

If the user wants to install the CLI globally (so render-plans is always on $PATH), run the installer once:

npx render-plans-to-html-install --all       # Claude Code + Codex
npx render-plans-to-html-install --claude    # Claude Code only
npx render-plans-to-html-install --codex     # Codex only

This is not required — the npx --yes render-plans-to-html flow above works without any local install.