print-prep-wdyd
Create a styled, printable HTML version of a prep document and open it in the browser
What this skill does
<references>
- references/printable-template.html
</references>
<purpose>
Convert a prep document from `~/.things/what-did-you-do/prep-docs/` into a styled, printable HTML file. The HTML uses a dark theme with readable typography and is optimized for both screen reading and printing. Output is saved to `~/.things/what-did-you-do/printable-prep-docs/` and opened in the default browser.
</purpose>
<steps>
<step id="load-config" number="1">
<description>Load Configuration</description>
<load-config>
<action>Resolve the user's home directory.</action>
<command language="bash" output="home" tool="Bash">echo $HOME</command>
<constraint>Never pass `~` to the Read tool.</constraint>
<read path="<home>/.things/config.json" output="config" />
<command language="bash" tool="Bash">mkdir -p <home>/.things/what-did-you-do/printable-prep-docs</command>
</load-config>
</step>
<step id="resolve-source" number="2">
<description>Resolve Source Prep Document</description>
<if condition="argument-provided">
<action>Check if the argument is an exact filename in `<home>/.things/what-did-you-do/prep-docs/`. If not, search for a file matching the argument as a substring (company name, date, etc.).</action>
</if>
<if condition="no-argument">
<action>List all files in `<home>/.things/what-did-you-do/prep-docs/`.</action>
<if condition="no-prep-docs-exist">
<action>Tell the user: "No prep docs found. Run `/generate-prep-doc` first." Then stop.</action>
</if>
<if condition="one-prep-doc">
<action>Use it automatically.</action>
</if>
<if condition="multiple-prep-docs">
<ask-user>
Which prep doc do you want to print?
<options>
- <dynamically list available prep docs with date and company>
</options>
</ask-user>
</if>
</if>
<read path="<home>/.things/what-did-you-do/prep-docs/<resolved-filename>" output="prep-doc" />
</step>
<step id="parse-frontmatter" number="3">
<description>Parse Frontmatter and Content</description>
<action>Separate the YAML frontmatter from the markdown body. Extract:
- `type` (interaction type)
- `company`
- `date`
- `scheduled`
- `contact`
- `role`
- `source`
</action>
</step>
<step id="build-html" number="4">
<description>Build Styled HTML Document</description>
<action>Read the HTML template from @references/printable-template.html. This template contains the complete CSS styling (dark theme, print media query) and HTML structure. Replace `{{placeholders}}` with actual values from the frontmatter and convert the markdown body to HTML for the `{{content}}` placeholder.</action>
<action>Convert the markdown body to HTML elements manually, element by element. Map:
- `# heading` → `<h1>`
- `## heading` → `<h2>`
- `### heading` → `<h3>`
- `**bold**` → `<strong>`
- `*italic*` → `<em>`
- `> blockquote` → `<blockquote><p>...</p></blockquote>`
- `- list item` → `<ul><li>...</li></ul>`
- `1. list item` → `<ol><li>...</li></ol>`
- `| table |` → `<table>` with `<thead>` and `<tbody>`
- `` `code` `` → `<code>`
- `---` → `<hr>`
- Paragraphs → `<p>`
</action>
<constraint>Do NOT use a markdown-to-HTML library or `npx marked`. Convert the markdown to HTML directly, element by element, to maintain full control over the output structure.</constraint>
<constraint>The frontmatter MUST be rendered as the `.meta` grid at the top, NOT as raw text or an `<h2>`.</constraint>
<constraint>The `body` has `padding: 1rem` and NO `max-width`. This is intentional for printability -- the document should fill the available width.</constraint>
<constraint>Include the `@media print` block so the document prints cleanly on paper with light-theme colors.</constraint>
</step>
<step id="write-and-open" number="5">
<description>Write HTML and Open in Browser</description>
<action>Derive the output filename from the source filename, replacing `.md` with `.html`.</action>
<write path="<home>/.things/what-did-you-do/printable-prep-docs/<filename>.html">
<action>Write the complete HTML document.</action>
</write>
<command language="bash" tool="Bash">open <home>/.things/what-did-you-do/printable-prep-docs/<filename>.html</command>
<template name="confirmation">
> Printable prep doc created and opened:
> `<home>/.things/what-did-you-do/printable-prep-docs/<filename>.html`
</template>
</step>
<step id="git-workflow" number="6">
<description>Handle Git Workflow</description>
<git-workflow>
<command language="bash" tool="Bash">git -C <home>/.things pull --rebase 2>/dev/null || true</command>
<action>Based on the `git_workflow` setting (from config.json):</action>
<if condition="workflow-auto">
<action>Automatically `git add` the HTML file, `git commit -m "printable-prep: <company>"`, and `git push`.</action>
</if>
<if condition="workflow-ask">
<ask-user>Use AskUserQuestion -- "Would you like to commit and push the printable prep doc?"</ask-user>
</if>
<if condition="workflow-manual">
<action>Tell the user the file has been saved and they can commit when ready.</action>
</if>
</git-workflow>
</step>
</steps>
Related in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.