Document Formatter Skill
This is a skill that organizes document structure and converts it into a beautiful, easy-to-read format.
Overview
This skill automatically formats messy Markdown documents, half-written notes, and unstructured text into professional, easy-to-read documents.
Key Features
- Markdown Formatting: Standardize headings, lists, and code blocks
- Automatic Table of Contents Generation: Create hierarchical TOC from headings
- Style Guide Application: Maintain consistent writing style
- Beautiful HTML Conversion: GitHub-style or professional designs
- Code Highlighting: Code blocks with syntax highlighting
- Table Formatting: Neatly aligned tables
- Link Validation: Detect broken links and suggest fixes
- Image Optimization: Add alt text, specify image sizes
- Print Optimization: Layout optimized for PDF output
Usage
Basic Usage
Please format the following Markdown document:
[Paste messy Markdown here]
Add Table of Contents
Please add a table of contents to this document:
Position: Top
Style: Numbered
Depth: Up to 3 levels
HTML Conversion
Convert this Markdown to beautiful HTML:
Style: GitHub-style
Code Highlighting: Enabled
Print Support: Yes
Apply Style Guide
Format this document according to the Microsoft Style Guide:
- Headings use sentence case (only first word capitalized)
- Lists use parallel structure
- Code is explicitly marked
Formatting Features
1. Heading Formatting
Fixes Applied:
- Correct hierarchical structure (H1 → H2 → H3 order)
- Add proper blank lines before and after headings
- Prevent skipping heading levels
- Maintain consistent heading style
Before Formatting:
markdown
### Introduction
# Project Name
## Features
#### Details
After Formatting:
markdown
# Project Name
## Introduction
## Features
### Details
2. List Formatting
Fixes Applied:
- Standardize indentation (2 or 4 spaces)
- Unify list markers (choose one of , , )
- Correct nesting levels
- Ensure parallel structure for list items
Before Formatting:
markdown
* Item 1
- Sub-item 1-1
* Sub-sub-item 1-1-1
-Item 2
+ Sub-item 2-1
After Formatting:
markdown
- Item 1
- Sub-item 1-1
- Sub-sub-item 1-1-1
- Item 2
- Sub-item 2-1
3. Code Block Formatting
Fixes Applied:
- Add language specification
- Standardize indentation
- Format code (using Prettier, Black, etc.)
- Support syntax highlighting
Before Formatting:
function hello(){
console.log("Hello")
}
After Formatting:
markdown
```javascript
function hello() {
console.log("Hello");
}
```
4. Table Formatting
Fixes Applied:
- Align columns
- Separate header and body with proper lines
- Standardize cell padding
- Ensure correct Markdown table syntax
Before Formatting:
markdown
|---|---|---|
|Tanaka|30|Engineer|
|Sato|25|Designer|
After Formatting:
markdown
|------|------|--------------|
| Tanaka | 30 | Engineer |
| Sato | 25 | Designer |
5. Link and Image Formatting
Fixes Applied:
- Normalize URLs
- Improve link text
- Add alt text to images
- Fix relative paths
Before Formatting:
markdown
[Click here](http://example.com)
After Formatting:
markdown
[Example Site](https://example.com)
6. Blockquote Formatting
Fixes Applied:
- Unify blockquote markers
- Format nested blockquotes
- Clarify source attribution
Before Formatting:
markdown
>This is a quote
> >Nested quote
After Formatting:
markdown
> This is a quote
>
> > Nested quote
Table of Contents Generation
Automatic TOC Generation
Automatically generate a table of contents from headings.
Options:
- Position: Top, Bottom, Custom Position
- Depth: Up to H2, Up to H3, Up to H4
- Style: Numbered, Bulleted
- Anchor Links: Enabled/Disabled
Example Output:
markdown
# Document Title
## Table of Contents
1. [Introduction](#introduction)
2. [Installation](#installation)
1. [Prerequisites](#prerequisites)
2. [Steps](#steps)
3. [Usage](#usage)
1. [Basic Usage](#basic-usage)
2. [Advanced Usage](#advanced-usage)
4. [FAQ](#faq)
## Introduction
[Content...]
Custom TOC
Generate table of contents:
- Include only H2 and H3
- Exclude "Introduction" and "Acknowledgements"
- Numbered list
- Clickable anchor links
Style Guides
1. Google Developer Documentation Style Guide
Features:
- Concise and clear writing
- Prefer active voice
- Use second person (you)
- Consistent technical terminology
Application Example:
Before: "The button can be clicked by users"
After: "Click the button"
Before: "It is recommended that..."
After: "We recommend..."
2. Microsoft Writing Style Guide
Features:
- Headings use sentence case
- Lists use parallel structure
- Procedures use numbered lists
- Clear instructional language
Application Example:
Before: "How To Install The Software"
After: "How to install the software"
Before:
- Installing
- Configuration
- To run
After:
- Install the software
- Configure the settings
- Run the application
3. AP Stylebook
Features:
- Suitable for news and blog articles
- Standardized date formats
- Rules for number notation
- Explicit abbreviation usage
4. APA Style (Academic Writing)
Features:
- Formal writing style
- Standardized citations
- Reference lists
- Structured section layout
5. Custom Style
Define your own style rules:
Format with custom style:
- Headings: All uppercase
- Lists: Always numbered
- Code blocks: Must include language specification
- Links: Always set to open in new tab
HTML Conversion
GitHub-Style
Features:
- Same appearance as GitHub Markdown
- Syntax highlighting
- Table styling
- Responsive design
Output Example:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="github-markdown.css">
<style>
.markdown-body {
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
</style>
</head>
<body class="markdown-body">
[Converted HTML]
</body>
</html>
Professional Style
Features:
- Suitable for business documents
- Print-optimized
- Page numbers, headers/footers
- Table of contents, index
Technical Documentation Style
Features:
- Suitable for API specifications, manuals
- Sidebar navigation
- Copy buttons for code examples
- Search functionality
Blog Article Style
Features:
- Easy-to-read typography
- Featured images
- SNS share buttons
- Comment section
Code Highlighting
Supported Languages
Apply syntax highlighting for the following languages:
- C/C++: GCC, MSVC, Clang
- C#: .NET, Unity
- Python: Python 3.x
- JavaScript/TypeScript: Node.js, Browser
- Java: Java 8+
- Go: Go 1.x
- Rust: Rust 2021
- SQL: PostgreSQL, MySQL, SQL Server
- Shell: Bash, PowerShell
- Markup: HTML, XML, JSON, YAML
- And over 50 other languages
Themes
Code Highlighting Themes:
- github (default)
- monokai
- solarized-light
- solarized-dark
- dracula
- nord
- atom-one-dark
- vs-code
Features
- Line Numbers: Show/Hide
- Highlight Lines: Emphasize specific lines
- Diff Display: Show added/removed lines
- Copy Button: One-click copy
Example:
markdown
```javascript {2-3} showLineNumbers
function calculate(a, b) {
const sum = a + b; // Highlight this line
return sum; // Highlight this line too
}
```
Table Formatting
Automatic Alignment
Automatically calculate column widths for alignment:
Before Formatting:
markdown
|Name|Age|Occupation|
|-|-|-|
|John|30|Engineer|
|Jane|25|Designer|
After Formatting:
markdown
|------|-----|------------|
| John | 30 | Engineer |
| Jane | 25 | Designer |
Cell Alignment
markdown
|:-----|:------:|------:|
| Left | Center | Right |
Complex Tables
- Suggest cell merging
- Convert to HTML tables
- Convert from CSV
Link Validation
Broken Link Detection
Link Check Results:
✓ [GitHub](https://github.com) - OK (200)
✗ [Broken](https://example.com/404) - Not Found (404)
? [Internal](#section) - Section does not exist
Fix Suggestions
Fix Suggestions:
- [Click here] → Change to more descriptive link text
- http:// → Change to https://
- Relative path → Change to absolute path (optional)
Image Optimization
Add Alt Text
markdown
Before: 
After: 
Specify Size
markdown
Before: 
After: {width=300}
HTML:
<img src="logo.png" alt="Logo" width="300">
Image Alignment
markdown
Center Alignment:
<p align="center">
<img src="logo.png" alt="Logo">
</p>
Special Features
1. Add Front Matter
Add YAML metadata:
yaml
---
title: "Document Title"
author: "Author Name"
date: 2024-06-15
tags: [markdown, documentation]
---
# Document Body
2. Footnote Formatting
markdown
Body text[^1]
[^1]: Footnote content
3. Definition Lists
markdown
Term 1
: Definition 1
Term 2
: Definition 2a
: Definition 2b
4. Task Lists
markdown
- [x] Completed task
- [ ] Incomplete task
- [ ] Another incomplete task
5. Math Formulas (LaTeX)
markdown
Inline Formula: $E = mc^2$
Block Formula:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
Formatting Rules
Line Breaks and Blank Lines
Rules:
- Before/After headings: 2 blank lines
- Between paragraphs: 1 blank line
- Before/After lists: 1 blank line
- Before/After code blocks: 1 blank line
- Before/After tables: 1 blank line
Line Length
Recommended Settings:
- Maximum line length: 80 characters (code), 100 characters (text)
- Auto-wrap: Enabled
- Soft wrap: Wrap at word boundaries
Indentation
Settings:
- Lists: 2 or 4 spaces
- Code blocks: Follow language conventions
- Blockquotes: Auto-indent
Output Formats
1. Markdown
Formatted Markdown files:
- Standard Markdown
- GitHub Flavored Markdown (GFM)
- CommonMark
- Markdown Extra
2. HTML
HTML Conversion Options:
- Standalone (embedded CSS)
- External CSS link
- Inline CSS
- Include/Exclude JavaScript
3. PDF
PDF Generation:
- Page Size: A4, Letter, Custom
- Margins: Standard, Narrow, Wide
- Headers/Footers: Customizable
- Page Numbers: Position, Format
- Table of Contents: Auto-generated
- Bookmarks: Generated from headings
4. Word (DOCX)
Convert to Word documents using Pandoc format
5. Other Formats
- reStructuredText
- AsciiDoc
- LaTeX
- MediaWiki
Customization
Customize Formatting Rules
yaml
# .markdownlint.yaml
MD001: true # Heading level increment
MD003:
style: atx # Heading style
MD004:
style: dash # List marker
MD013:
line_length: 100 # Maximum line length
MD024: false # Allow duplicate headings
Templates
Use custom HTML templates:
html
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<style>
/* Custom CSS */
</style>
</head>
<body>
{{content}}
</body>
</html>
Use Cases
1. Format Existing Documents
Format this old README according to modern best practices:
- Add table of contents
- Add language specifications to code blocks
- Align tables
- Validate links
2. Draft to Final Document
Turn this note into a formal document:
Input: Bulleted notes
Output: Structured Markdown + HTML
3. Standardize Multiple Documents
Standardize the following 3 documents with the same style:
Style Guide: Google
Format: Strict
4. Improve GitHub README
Improve this README:
- Add badges
- Generate table of contents
- Format code examples
- Optimize screenshot placement
5. Convert Technical Docs to HTML
Convert API specification to HTML:
Style: Technical Documentation
Sidebar: Enabled
Search: Enabled
Copy Buttons: For all code blocks
Best Practices
1. Consistency
- Use the same style guide within a project
- Standardize indentation, markers, and heading styles
- Maintain consistent terminology (e.g., "e-mail" vs "email")
2. Readability
- Separate content with proper blank lines
- Split long paragraphs
- Use lists effectively
- Keep code examples minimal and clear
3. Accessibility
- Add alt text to images
- Use descriptive link text
- Include headers for tables
- Use proper heading hierarchy
4. SEO (For Web Publication)
- Add metadata
- Use descriptive headings
- Use keywords appropriately
- Build internal link structure
Troubleshooting
Common Issues
Issue: Tables are broken
Solution: Escape pipe characters, check column count
Issue: Code blocks don't display correctly
Solution: Verify language specification, check backtick count
Issue: Links don't work
Solution: Normalize anchor text, verify paths
Issue: Japanese text wraps incorrectly
Solution: Adjust word-break settings, specify fonts
Limitations
- Very large documents (10MB+) may take longer to process
- Complex embedded HTML may not work with some features
- PDF generation may be limited by available fonts
Version Information
- Skill Version: 1.0.0
- Supported Markdown: CommonMark, GFM
- HTML Conversion: Based on Markdown-it
- PDF Generation: Puppeteer/wkhtmltopdf
Usage Example:
Please format this document:
[Paste messy Markdown here]
Requirements:
- Add table of contents (only H2 and H3)
- Add language specifications to code blocks
- Align tables
- Generate GitHub-style HTML
With this prompt, you'll get a professionally formatted document!