skills.rest
quan2005
quan2005COMMUNITY
Explore all skills by this author →
GitHub

visual-design-book

Convert journal entries into self-contained HTML design books with chapter structure.

13|2|Updated Mar 13, 2026
Search Tags:#html generation#meeting notes#narrative structure#journal visualization#design book#lecture layout#knowledge design
One-click install
npx skills add https://github.com/quan2005/journal-claw --skill visual-design-book
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-book
Source: https://github.com/quan2005/journal-claw/tree/main/apps/web/resources/workspace-template/.claude/skills/visual-design-book
Command: npx skills add https://github.com/quan2005/journal-claw --skill visual-design-book

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill transforms finished journal entries into polished, self-contained visual HTML design books so ideas, meetings, lectures, and knowledge notes become easier to review, present, and reuse.

Core Features & Use Cases

  • Adaptive content framing: Detects whether a journal entry is mainly product design, meeting notes, lecture/share content, or general knowledge, then applies the matching narrative lens.
  • Structured long-form visualization: Generates a single-file HTML page with a consistent warm gold visual system, logical chapter progression, responsive layout, print support, and dark mode behavior.
  • Source linkage workflow: Writes the generated HTML path back into the source journal entry's sources metadata so the visualization stays connected to the original note.
  • Use cases: Convert a product review log into a design explainer, reshape meeting notes into a decision panorama and action roadmap, or turn a lecture summary into a scrollable course overview with parts, cases, quotes, and framework synthesis.

Quick Start

Ask to turn an existing journal entry into a visual design book by referencing the journal path, such as requesting a design book for a completed log you have already saved.

Frequently Asked Questions about visual-design-book

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

FAQPage Schema
How do I convert markdown journal entries into a visual HTML design book?▼

This Skill transforms completed markdown journal entries into self-contained visual HTML design books with logical narrative structure, applying chapter planning and dark mode compatible styling to product logs, meeting minutes, or lecture notes.

Can I generate a single-file HTML visualization for my meeting minutes and lecture notes?▼

Yes, you can generate a single-file HTML visualization for meeting minutes and lecture notes. The Skill detects the content type and applies a matching narrative lens to produce a structured HTML page with chapter progression and print support.

What is the best way to turn product design logs into a structured narrative presentation?▼

The best way to turn product design logs into a structured narrative presentation is using template-based HTML generation that applies a matching narrative lens to reshape entries into a logical chapter progression with warm gold visual styling.

Does this HTML generation tool support dark mode and print layouts for knowledge notes?▼

Yes, this HTML generation tool supports dark mode behavior and print layouts for knowledge notes. It generates self-contained visual HTML design books with a responsive layout and a consistent warm gold visual system.

How does the generated HTML visualization link back to the original markdown journal frontmatter?▼

The generated HTML visualization links back to the original markdown journal frontmatter through a source linkage workflow that writes the generated HTML path back into the source journal entry's sources metadata to maintain connectivity.

Can I process legacy HTML files and mdx files for journal visualization?▼

Yes, you can process legacy HTML files and mdx files for journal visualization. The Skill transforms these formats alongside standard markdown into polished visual design books with adaptive content framing.

Related Skills

Explore More Design & Creative Skills→
okwindsokwinds
50

repo-deep-dive-report

Generate structured Markdown and HTML repository reviews with Mermaid diagrams.

Community
Basic
dmlguq456dmlguq456
7

autopilot-note

Organize project artifacts into structured notes with routing suggestions.

Community
Advanced
rothwellmawela-cyberrothwellmawela-cyber
1

blog-chart

Generate dark-mode-compatible inline SVG charts for blog posts.

Community
Basic
opensourcewaysopensourceways
1

github-release-poster

Generate an HTML poster with SVG icons from GitHub release notes.

Official
Advanced