skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:preview

View files and directories or generate slides, diagrams, and ASCII from Markdown or HTML.

1|Updated Mar 6, 2026
Search Tags:#markdown#html#mermaid#preview#visualization#slides#diagrams
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-preview-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:preview
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/preview
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-preview-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

View files and directories or generate visual explanations, slides, and diagrams from Markdown or self-contained HTML.

Core Features & Use Cases

  • Universal viewer for Markdown content and generated visuals (explain, slides, diagrams, ASCII)
  • HTML export options for self-contained distribution or browser viewing
  • Generates visual representations of topics (architecture, workflows) from existing content

Quick Start

Invoke the preview on a Markdown file or directory to view its contents or generate visuals.

Frequently Asked Questions about ck:preview

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

FAQPage Schema
How do I preview Markdown files visually?▼

You can preview Markdown files visually by invoking the skill on a file or directory, rendering the content as HTML or generating visual explanations, slides, and diagrams from the source.

Can I generate diagrams and slides from existing Markdown?▼

Yes, you can generate diagrams and slides from existing Markdown by using generation modes like explain, slides, diagram, and ascii to create visual representations of architectures or workflows.

How do I export Markdown content into a self-contained HTML file?▼

To export Markdown content, the skill provides HTML export options that create self-contained files, allowing you to distribute and view the generated visuals directly in a browser.

Does this support Mermaid diagrams for visualizing workflows?▼

Yes, Mermaid is supported for visualizing workflows. The skill can generate visual representations of topics and architectures from your Markdown content using diagram generation modes.

What is the best way to view files and directories visually?▼

The best way to view files and directories visually is to invoke the preview skill, which loads frontmatter instructions and renders Markdown or self-contained HTML outputs for quick document exploration.

How do I create presentation-ready visuals from Markdown?▼

You can create presentation-ready visuals from Markdown by using the slides generation mode, which transforms existing document content into visual outputs suitable for presentations.

Related Skills

Explore More Content & Communication Skills→
TDMoralesTDMorales

implementation-scope-resolution

Analyze markdown files and repository structures to resolve implementation scope.

Community
Advanced
1337hero1337hero
1

visual-explainer

Render diagrams, visuals, and data tables as self-contained HTML with inlined CSS.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

mermaid-builder

Generate syntactically valid Mermaid diagrams for flowcharts, sequence, class, state, Gantt, ER, and data lineage.

Official
Advanced
EdgeHuntEdgeHunt

ck:preview

Generate visual explanations, slides, or diagrams from Markdown or HTML.

Official
Intermediate