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.