preview
starsforks
How to install preview?
kv0906/pm-kit/preview
$npx -y skills add kv0906/pm-kit --skill previewRender vault notes as styled HTML and open in browser. Turn markdown docs, decisions, progress reports into readable previews. Use for "/preview docs/project-a/checkout-flow.md", "/preview progress all", "/preview decide auth-approach", or when user wants to see a doc before shar
SKILL.md
| 1 | # /preview — HTML Preview |
| 2 | |
| 3 | Render vault content as styled HTML for browser viewing. Markdown stays the source of truth; HTML is the presentation layer. |
| 4 | |
| 5 | ## Context |
| 6 | |
| 7 | Today's date: `!date +%Y-%m-%d` |
| 8 | |
| 9 | Config: @_core/config.yaml |
| 10 | Preview rules: @.claude/rules/preview-formats.md |
| 11 | HTML shells: @_templates/html/ |
| 12 | Processing logic: @_core/PROCESSING.md |
| 13 | |
| 14 | ## Usage |
| 15 | |
| 16 | ``` |
| 17 | /preview docs/project-a/checkout-flow.md |
| 18 | /preview decisions/project-a/2026-06-29-auth-approach.md |
| 19 | /preview progress all |
| 20 | /preview progress project-a --week |
| 21 | /preview decide auth-approach |
| 22 | /preview block api-rate-limit |
| 23 | /preview meet 2026-06-29-sync-sprint-review |
| 24 | /preview reports/2026-06-29-progress-all.md |
| 25 | ``` |
| 26 | |
| 27 | ## Flags |
| 28 | |
| 29 | | Flag | Effect | |
| 30 | |------|--------| |
| 31 | | `--with-links` | Inline first paragraph from linked notes | |
| 32 | | `--no-open` | Write HTML only, do not open browser | |
| 33 | | `--shell memo\|prd\|status\|executive` | Force template shell | |
| 34 | | `--link` | Write `preview:` path to source note frontmatter | |
| 35 | |
| 36 | ## Session Task Progress |
| 37 | |
| 38 | ``` |
| 39 | TaskCreate: "Resolve preview source" |
| 40 | activeForm: "Resolving preview source..." |
| 41 | |
| 42 | TaskCreate: "Render HTML" |
| 43 | activeForm: "Rendering HTML preview..." |
| 44 | |
| 45 | TaskCreate: "Open and verify" |
| 46 | activeForm: "Opening preview in browser..." |
| 47 | ``` |
| 48 | |
| 49 | ## Processing Steps |
| 50 | |
| 51 | ### 1. Parse Input |
| 52 | |
| 53 | Determine source mode: |
| 54 | |
| 55 | | Input pattern | Action | |
| 56 | |---------------|--------| |
| 57 | | Path to `.md` file | Read that file directly | |
| 58 | | `progress {project\|all}` | Synthesize like `/progress`, use status shell | |
| 59 | | `decide {slug}` | Glob `decisions/*/*{slug}*.md`, pick latest | |
| 60 | | `block {slug}` | Glob `blockers/*/*{slug}*.md` | |
| 61 | | `meet {slug}` | Glob `meetings/*{slug}*.md` | |
| 62 | | `doc {project} {slug}` | Read `docs/{project}/{slug}.md` | |
| 63 | |
| 64 | If ambiguous, ask user to clarify path. |
| 65 | |
| 66 | ### 2. Gather Content |
| 67 | |
| 68 | **File mode:** Read markdown + frontmatter. |
| 69 | |
| 70 | **Synthesis mode (`progress`):** Follow `/progress` gather steps: |
| 71 | - Scan dailies, blockers, docs, decisions for project/timeframe |
| 72 | - Build structured sections: Shipped, In Progress, Blockers, Decisions |
| 73 | - Count metrics for status shell |
| 74 | |
| 75 | ### 3. Select HTML Shell |
| 76 | |
| 77 | Auto-detect from source: |
| 78 | |
| 79 | | Source | Shell | |
| 80 | |--------|-------| |
| 81 | | `docs/` | `shell-prd.html` | |
| 82 | | `decisions/`, `meetings/`, `blockers/` | `shell-memo.html` | |
| 83 | | `progress` synthesis | `shell-status.html` | |
| 84 | | `reports/*executive*` | `shell-executive.html` | |
| 85 | | Other | `shell-memo.html` (default) | |
| 86 | |
| 87 | Override with `--shell` flag. |
| 88 | |
| 89 | ### 4. Convert Markdown → HTML |
| 90 | |
| 91 | - Remove YAML frontmatter block |
| 92 | - Map frontmatter to shell vars: `project`, `status`, `date`, `title` (from H1 or filename) |
| 93 | - Convert body markdown to semantic HTML |
| 94 | - Resolve `[[wikilinks]]` per preview-formats.md |
| 95 | - Escape user content in HTML (no XSS — literal text only) |
| 96 | |
| 97 | ### 5. Write Output |
| 98 | |
| 99 | - Ensure `reports/previews/` exists |
| 100 | - Filename: `{date}-{slug}.html` (slug from source file or synthesis type) |
| 101 | - Load shell template, replace all `{{PLACEHOLDER}}` tokens |
| 102 | - Write complete self-contained HTML file |
| 103 | |
| 104 | ### 6. Open Browser |
| 105 | |
| 106 | Unless `--no-open`: |
| 107 | |
| 108 | ```bash |
| 109 | # macOS |
| 110 | open "reports/previews/{filename}.html" |
| 111 | |
| 112 | # Linux |
| 113 | xdg-open "reports/previews/{filename}.html" 2>/dev/null |
| 114 | |
| 115 | # Windows |
| 116 | start "" "reports/previews/{filename}.html" |
| 117 | ``` |
| 118 | |
| 119 | ### 7. Optional: Link Back to Source |
| 120 | |
| 121 | If `--link` and source is a single vault note: |
| 122 | - Edit source frontmatter: `preview: reports/previews/{filename}.html` |
| 123 | |
| 124 | ### 8. Append Vault Log |
| 125 | |
| 126 | Append to `01-index/_vault-log.md`: |
| 127 | - Action: `preview` |
| 128 | - Files: output HTML path + source path |
| 129 | - Details: shell used, synthesis or file mode |
| 130 | |
| 131 | ## Output |
| 132 | |
| 133 | ``` |
| 134 | Preview ready: reports/previews/2026-06-29-checkout-flow.html |
| 135 | Shell: prd |
| 136 | Source: docs/project-a/checkout-flow.md |
| 137 | Opened in browser. |
| 138 | ``` |
| 139 | |
| 140 | ## Error Handling |
| 141 | |
| 142 | | Situation | Action | |
| 143 | |-----------|--------| |
| 144 | | Source file not found | Suggest similar paths via Glob | |
| 145 | | Empty vault (progress) | Report "no data in timeframe" — do not write empty HTML | |
| 146 | | Browser open fails | Report file path; user can open manually | |
| 147 | |
| 148 | ## Design Principles |
| 149 | |
| 150 | - **Typography first** — readable fonts, generous line-height, print-ready |
| 151 | - **No dependencies** — pure HTML/CSS, no npm/pip required |
| 152 | - **Self-contained** — single file, embedded styles, works offline |
| 153 | - **Source preserved** — never modify markdown body unless `--link` requested |
People who liked this also viewed
6 picksType
- agent-browserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web aSkillsJul 2026
- browser-act--- name: browser-act description: "Browser automation CLI for AI agents. NEVER run browser-act commands directly via Bash — always invoke this skill first. Use browser-act when a user mentions it bSkillsJul 2026
- playwright-cliAutomate browser interactions, test web pages and work with Playwright tests.SkillsJul 2026
- accessibilityAudit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make SkillsJun 2026
- anti-detect-browserLaunch and manage anti-detect browsers with unique real-device fingerprints for multi-account operations, web scraping, ad verification, and AI agent automation. Use when the user needs to run multiplSkillsMar 2026
- web-access所有联网操作必须通过此 skill 处理，包括：搜索、网页抓取、登录后操作、网络交互等。 触发场景：用户要求搜索信息、查看网页内容、访问需要登录的网站、操作网页界面、抓取社交媒体内容（小红书、微博、推特等）、读取动态渲染页面、以及任何需要真实浏览器环境的网络任务。SkillsMay 2026
