ck:preview

Generates visual explanations, slides, and diagrams from files and directories.

1|1|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/Thanh-apero/apero-kit-cli --skill ck-preview-thanh-apero
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:preview
Source: https://github.com/Thanh-apero/apero-kit-cli/tree/main/.claude/skills/preview
Command: npx skills add https://github.com/Thanh-apero/apero-kit-cli --skill ck-preview-thanh-apero

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mermaid, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

The ck:preview Skill provides a universal viewer for files and directories, as well as the ability to generate visual explanations, slides, diagrams, and more.

Core Features & Use Cases

  • Universal Viewer: View files and directories, including Markdown, code, and images.
  • Visual Explanations: Generate ASCII diagrams, Mermaid diagrams, and prose explanations.
  • Slides: Create presentation slides from Markdown content.
  • Diagrams: Generate architecture diagrams and other visual representations.
  • Use Case: Imagine you have a complex system architecture document. Use this Skill to generate a visual diagram that helps you understand the system's structure and components.

Quick Start

Use the ck:preview skill to generate a visual explanation of the system architecture in the document 'architecture.md'.

Frequently Asked Questions about ck:preview

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

FAQPage Schema
How do I generate visual diagrams from Markdown files?

To generate visual diagrams from Markdown files, use a universal viewer that parses document content and renders architecture diagrams. It supports Mermaid.js to translate text-based system architecture descriptions into visual representations.

How can I view code and images within a directory structure?

You can view code and images within a directory structure using a universal file viewer. It processes directory paths to display supported file formats, including code snippets and images, directly in your environment.

Do I need Mermaid.js to create visual explanations and slides?

Yes, you need Mermaid.js to create visual explanations and slides. It serves as the required dependency for rendering text-based definitions into visual diagrams, while Markdown handles presentation slide content generation.

What is the best way to create presentation slides from Markdown content?

The best way to create presentation slides from Markdown content is using a universal viewer that parses Markdown formatting. It translates text headers and lists into structured visual slides for system architecture explanations.

Can I generate ASCII diagrams alongside Mermaid diagrams for visual explanations?

Yes, you can generate ASCII diagrams alongside Mermaid diagrams for visual explanations. The viewer supports multiple rendering formats, allowing you to create both text-based ASCII and dependency-driven Mermaid visual representations.