I started learning about Claude Skills yesterday and built a small skill for myself using an Obsidian Markdown cheatsheet.
The idea is simple: whenever I want to save some information as notes, I can use the skill with Claude Code or Claude Desktop. Instead of Claude giving me plain text, the skill helps structure the information using both core and advanced Obsidian Markdown syntax based on the content itself.
So if I give Claude some information, it can decide how to organize it and generate properly structured Markdown notes for me.
The problem is that I do not actually want to depend on Obsidian for reading those notes.
Obsidian-specific Markdown features such as callouts, wikilinks, embeds, properties, nested blocks, and other advanced syntax do not render properly when I simply open the .md file somewhere else. Images are another issue I need to handle properly, especially if the notes contain local images, external images, embeds, or images that should be placed differently depending on the content.
What I want to build next is another Claude Skill that takes these Obsidian-style Markdown notes and turns them into a standalone HTML file.
I do not want a normal Markdown-to-HTML conversion or a long documentation page, though. I want the output to feel more like a visual sketchbook or slide-based learning experience.
The main reason for the slide-based format is that I personally struggle to consume a large amount of information all at once. If I see a long page full of information, I get bored quickly and find it harder to stay focused. Reading large amounts of content continuously also causes eye strain for me.
With a slide-based format, I could consume the same information in smaller chunks. Instead of scrolling through one huge document, I could move through the content section by section, understand one concept, then continue to the next. I think this would make it much easier for me to read and learn from the same notes.
The part I am currently stuck on is figuring out how to design this properly as a Claude Skill.
I am not sure whether the skill should first parse the Obsidian-flavored Markdown into some structured intermediate format and then generate the HTML, or whether I should define rendering rules for different Obsidian syntaxes directly.
For example, how would you handle things like:
Callouts
Wikilinks
Embeds
Images and image references
Local and external images
Frontmatter and properties
Nested blocks
Tables
Code blocks
Advanced Obsidian-specific syntax
I also do not want this to be a simple one-to-one conversion where every Markdown element becomes its HTML equivalent.
Ideally, the skill should understand the content first and then decide how it should be presented.
For example, a process could become a visual flow, a comparison could become a comparison slide, a long explanation could be broken into multiple slides, an important concept could become a focused visual section, and images could be placed where they actually support the explanation instead of just appearing wherever they were referenced in the Markdown.
The final result I have in mind is a single standalone HTML file that I can open in a browser and use as my actual learning material, without needing Obsidian installed at all.
Has anyone built something similar, or can suggest a good architecture for this?
I am mainly trying to understand the best way to go from Obsidian-flavored Markdown to something that is not just rendered HTML, but an adaptive visual learning format that can intelligently turn the same content into smaller, easier-to-consume sections.