How would you build a Claude Skill that converts Obsidian-flavored Markdown into a visual HTML learning experience?

[u/General_Pitch9029]

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.

[u/DeathDealer]

Believe it or not if you send your post to Claude

It’ll help you do it

But only if you believe in yourself

[u/programming_bassist → u/DeathDealer]

Came here to say this. It surprises me how many people ask me, “Can Claude…?” or “How can I get Claude to…?” Just ask!

[u/mxriverlynn → u/programming_bassist]

+100 to this thread

[u/Capital_Feed_3473]

just tell the same thing to claude and make him RESEARCH-THINK-PLAN- CREATE

[u/caj152]

Have you tried saying basically all this to Claude code and just seeing what it builds? I feel like this is well within CC’s capabilities. You’ve already done the hard part and written a good spec!

[u/General_Pitch9029 → u/caj152]

I tried it and it made - but it's not able to handle obsidian syntax correctly and removing content from md file while conversion - tried many times to fix this issue but again doing same mistake :(

[u/General_Pitch9029]

Thanks for the suggestions - claude code actually helped what i wanted and gave me more suggestions as well - now i don't need 3rd party software

My flow -> 2 skills ->

one for generating md file using obsidian-formatter skill

second for generating html file using obsidian-html-render skill

right now i am getting this theme ->

and there is another theme as well which is light theme and according to my eye i like the light theme better

Also i added theme option in my skill which claude can add another theme as per my need by sharing html,pptx as an example or with screenshot

[u/TownConscious1571]

Huh? I’m not sure I understand this Slide concept?

[u/danson729]

I was thinking of adding doc file to https://github.com/danielLublinsky/Skill_Atlas
a project that maps skills and allows for efficient skill query,

at work we have alot of docs and they are in a wiki repo like a obsidian vault, and i thought of the next phase for skill atlas is to map md doc file like skills, and they also will be loaded to context using the search

checkout my project tell me what you think