skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:preview

Generate self-contained HTML visual previews and diagrams for files and directories.

Updated Apr 2, 2026
Search Tags:#html#mermaid#preview#visualization#diff#slides#file-viewer
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-preview-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:preview
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/preview
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-preview-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reduce friction when exploring a repository or communicating designs by providing a single command to view files, browse directories, or generate readable visual explanations, slides, diagrams, diffs, and recaps from project content.

Core Features & Use Cases

  • View Mode: browse or render markdown and directory trees in a novel-reader UI and start/stop a local preview server for interactive inspection.
  • Generation Modes: produce visual explanations, presentation slides, architecture diagrams, ASCII diagrams, and HTML-only outputs such as diffs, plan reviews, and project recaps.
  • HTML Output: create self-contained HTML files using curated templates with mandatory theme toggle, zoom controls for Mermaid diagrams, and palette/typography rules from design references.
  • Templates & References: leverages bundled templates and reference guidance to enforce styling, mermaid v11 usage, output locations, and plan-aware save paths.
  • Error handling & UX: argument resolution, path/context fallback, overwrite semantics, and explicit user prompts for ambiguous inputs.

Quick Start

Use the ck:preview skill to generate a self-contained HTML explanation for "Project Architecture" by invoking /ck:preview --html --explain Project Architecture

Frequently Asked Questions about ck:preview

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

FAQPage Schema
How do I generate a self-contained HTML file to visualize a markdown file or directory tree?▼

Generate self-contained HTML output to visualize markdown files or directory trees using bundled templates. The output enforces mandatory theme toggles, typography rules, and zoom controls for interactive inspection.

Can I create architecture diagrams using Mermaid v11 from my repository files?▼

Create architecture diagrams using Mermaid v11 from your local repository files. The generation process applies reference templates to enforce styling and writes the visual outputs to plan-aware folders.

What is the best way to view local markdown files and project directories in a readable UI?▼

View local markdown files and project directories in a novel-reader UI. You can browse directory trees and start or stop a local preview server for interactive inspection directly from your command line.

How do I generate visual diffs and presentation slides from my project content?▼

Generate visual diffs and presentation slides from your project content using specific generation modes. These modes produce HTML-only outputs like plan reviews and project recaps using curated templates.

Does the HTML visualization output require external dependencies to render properly?▼

The HTML visualization output is entirely self-contained and requires no external dependencies to render. It leverages bundled templates and reference guidance to enforce styling, Mermaid v11 usage, and palette rules.

How does the tool handle ambiguous file paths when generating visual explanations?▼

The tool handles ambiguous file paths through argument resolution, path fallback, and explicit user prompts. It manages overwrite semantics to ensure correct visual explanations are generated without accidental data loss.

Related Skills

Explore More Software Engineering Skills→
Research-EqualityResearch-Equality
9

file_reader

Read and summarize local text files into concise structured summaries.

Official
Intermediate
adelproadelpro
2

visual-explainer

Generate self-contained HTML visualizations for technical concepts and data.

Community
Advanced
haidonglethqbhaidonglethqb

ck:mermaidjs-v11

Convert Mermaid.js v11 diagram definitions into SVG, PNG, or PDF visuals.

Community
Advanced
githubgithub
37.6k

plantuml-ascii

Convert PlantUML diagrams to ASCII art for terminal viewing.

Official
Advanced