// Convert markdown to a beautifully styled, shareable HTML page and upload to S3-compatible storage
| name | pretty-page |
| description | Convert markdown to a beautifully styled, shareable HTML page and upload to S3-compatible storage |
Convert markdown content into a beautifully styled, shareable HTML page using the Good Neighbors design system (Risograph-inspired aesthetic). Renders locally and uploads to any S3-compatible host.
/pretty-page <file-path-or-inline-content> [--title "Page Title"] [--slug custom-slug] [--nav '<JSON>']
render.py and template.htmlupload.pyInstall the Python dependency:
pip install boto3
Set these environment variables (add to your .env or shell profile):
# Required
export S3_BUCKET=your-bucket-name
export AWS_ACCESS_KEY_ID=your-key
export AWS_SECRET_ACCESS_KEY=your-secret
# Optional โ for non-AWS providers (DO Spaces, Cloudflare R2, Backblaze B2)
export S3_ENDPOINT_URL=https://nyc3.digitaloceanspaces.com
export AWS_DEFAULT_REGION=nyc3
# Optional โ prefix for uploaded files (default: "pretty-page/")
export S3_PREFIX=public/
# Optional โ override public URL base (e.g. your CDN domain)
export S3_PUBLIC_BASE_URL=https://cdn.yourdomain.com
The template uses the Good Neighbors design system:
Markdown - [ ] and - [x] render as styled, clickable HTML checkboxes. State persists in browser localStorage (keyed by page title slug).
Floating button copies the full raw markdown source to clipboard.
#section-name), the auto-TOC is suppressed and the manual version is used[+]/[-] toggle, state persists in localStoragePass --nav with a JSON array of {label, url, active} objects to add a fixed nav bar:
NAV='[{"label":"Home","url":"https://example.com/","active":true},{"label":"Docs","url":"https://example.com/docs"}]'
python3 render.py source.md --nav "$NAV"
All h2/h3/h4 headings get slug-based id attributes for in-page linking.
Consecutive **Bold:** lines at the start of content are wrapped in a styled .metadata div.
Use blockquotes to create visually distinct cards โ great for profiles or structured content:
> **Name** โ Title
> - Career stop 1
> - Career stop 2 (current role)
>
> *Notes:* Cross-reference prose here.
When this skill is invoked:
python3 .claude/skills/pretty-page/render.py <file.md> [--title "Title"] [--slug slug] [--nav '<JSON>']
/tmp/pretty-page-{slug}.html and prints the path.python3 .claude/skills/pretty-page/upload.py /tmp/pretty-page-{slug}.html
Link-check before upload โ extract all URLs from the source and verify them:
grep -oP 'https?://[^)"\s]+' file.md | sort -u | while read url; do
code=$(curl -s -o /dev/null -w "%{http_code}" -L --max-time 10 "$url")
echo "$code $url"
done
Flag any 404s and fix them in the source .md before uploading.
The MD is always the source of truth. The pretty-page is a rendered artifact.
<body>: <!-- pretty-page source: /path/to/source.md -->.md first, then regenerate.Instead of posting raw .md files as attachments, use this to create a readable, styled page anyone can open in a browser.
Good for: