Spec to Readable HTML

Transform Markdown or text specifications into human-readable HTML documents with summaries, reordered structure, visual explanations, diagrams, charts, and traceability to the source. Use when asked to convert a spec, requirements document, API spec, product spec, design doc, or technical document into readable HTML, especially when the user wants summarization, restructuring, diagrams, graphs, images, or visual aids rather than a literal Markdown-to-HTML conversion.

43 stars 3 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add KeMezz/spec-to-readable-html --skill spec-to-readable-html

Manual install

git clone --depth 1 https://github.com/KeMezz/spec-to-readable-html.git /tmp/spec-to-readable-html
mkdir -p ~/.claude/skills
cp -r /tmp/spec-to-readable-html/. ~/.claude/skills/spec-to-readable-html

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Spec to Readable HTML

This skill turns specifications into polished, human-readable HTML reports. It is not a simple Markdown renderer. It should analyze the source, summarize where helpful, reorganize content for comprehension, and add visual aids when they clarify the document.

When invoked, `$lang` sets the output language (default: `ja`). If omitted, Japanese is used.

## When to Use This Skill

Use this skill when the user asks to:

- Convert a specification, requirements document, design doc, API spec, PRD, RFC, or technical document into HTML
- Make a Markdown spec easier for humans to read
- Add summaries, diagrams, charts, screenshots, icons, or visual explanations to a document
- Turn dense requirements into a readable web page or report
- Produce executive summaries, implementation overviews, API maps, workflows, architecture diagrams, or decision summaries from a spec

Do **not** treat the task as a literal Markdown-to-HTML conversion unless the user explicitly asks for a faithful conversion.

## Core Principles

1. **Improve comprehension, not just formatting**
   - Summarize long sections.
   - Group related information.
   - Surface key decisions, risks, dependencies, and open questions.

2. **Preserve traceability**
   - Do not silently change meaning.
   - Mark inferred content as `Inferred` or `Assumption`.
   - Prefer linking or referencing original section names where possible.

3. **Use visuals only when they help**

Read the full skill on GitHub

Details

Skill name: spec-to-readable-html
Repository: KeMezz/spec-to-readable-html
License: MIT
Repo updated: 30 May 2026

FAQ

What does the Spec to Readable HTML skill do?

How do I install the Spec to Readable HTML skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add KeMezz/spec-to-readable-html --skill spec-to-readable-html. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Spec to Readable HTML popular?

It lives in KeMezz/spec-to-readable-html, which has 43 GitHub stars and 3 forks.

Related skills

Sun Felt Wechat Illustrator

sunyifeng11111/sun-felt-wechat-illustrator

为中文微信公众号文章分析内容并生成清晰易懂、真实 3D 毛毡质感且图文一体的头条长封面、1:1 分享页封面与正文配图，同时给出每张正文图应插在哪个原句之后。用于用户提供文章、Markdown 或正文，并要求“公众号封面”“分享封面”“方形封面”“毛毡配图”“文章插图”“为正文配图”“只做封面”“生成 N 张配图”“推荐配图数量”等任务；未提供文章标题时默认根据核心命题生成合适的封面文字，正文图未指定画幅时默认 16:9，也支持用户明确指定 4:3 或 3:4，并使用少量毛毡文字帮助单图理解；适配方法论、教程、专业干货、商业科技、情感叙事、个人成长、生活方式、教育与母婴等内容。

Images, Video & Audio

Video to Skill

Lum1104/video-to-skill

Turn a video, tutorial, playlist, or course into an installed, evidence-grounded course Skill that can teach, give practice and feedback, apply demonstrated methods, and answer reference questions. Use when the user provides video sources and wants reusable learning or operational capability.

Images, Video & Audio

Xhs Images

manwithshit/xhs-images

Xiaohongshu (Little Red Book) infographic series generator with multiple style options. Breaks down content into 1-10 cartoon-style infographics. Use when user asks to create "小红书图片", "XHS images", or "RedNote infographics".

Images, Video & Audio

Video Illustrator

axtonliu/video-illustrator

Turn the user's own voice and real assets (book or course covers, screenshots, logos) plus a chosen visual style into a 20–60 second cinematic promo or concept explainer, or turn a passage, article, idea or script into an animated illustration clip, or (explainer mode) make one passage of an existing narrated video visible as a mechanism insert in 16:9 and 9:16, or (episode mode) make a whole researched, narrated science or tech explainer with real footage. One system where every mode runs the same steps and picks its look from one style atlas (a bright 3D diagram by default for explainers and

Images, Video & Audio

Youtube Learn

dotanminh/youtube-learn-skill

Phân tích video (YouTube, LinkedIn, Facebook, X, TikTok) theo hướng Belief Archaeology, kết hợp Multimodal phân tích hình ảnh và thế giới quan của người nói.

Images, Video & Audio16

Remotion Code Motion Explainer

vibe-motion/remotion-code-motion-explainer

Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.