From html-magazine
Transforms plain text, markdown, existing HTML, or images into a beautifully styled self-contained HTML magazine page with a real paper-magazine feel — paginated with page-flip navigation, sourced photography, and print-inspired typography. Use whenever the user says 'turn this into a magazine', 'make this look like a magazine article', 'magazine layout', 'magazine format', or wants content presented as a physical-magazine-style HTML page. Also trigger when the user shares text, markdown, or an image and asks for polished publication-quality output, editorial-style layout, or print-quality design. Supports four styles: Editorial (NYT / The Atlantic), Tech Minimal (Wired / MIT Technology Review), Vibrant Lifestyle (Vogue / GQ), and Business (The Economist / Fortune).
How this skill is triggered — by the user, by Claude, or both
Slash command
/html-magazine:html-magazineThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Transforms content into a stunning, self-contained HTML magazine page. The result should feel like leafing through a real physical magazine — not reading a website.
Transforms content into a stunning, self-contained HTML magazine page. The result should feel like leafing through a real physical magazine — not reading a website.
This skill is the editorial brain. It handles style selection, editorial voice rewriting, image sourcing, and visual specification. It then passes a complete visual brief to the ui-ux-pro-max skill, which handles all HTML/CSS/JS rendering.
This skill works across multiple AI coding agents:
AskUserQuestion for prompts, ui-ux-pro-max plugin for renderingactivate_skill for skill loading, plain text prompts for user interactionIf AskUserQuestion is not available, ask the same questions as plain text in the conversation and wait for the user to respond before proceeding. If ui-ux-pro-max is not available, generate the HTML directly using the visual element specifications from the style references.
If the user hasn't provided content, ask for it and wait for their response before proceeding to Step 2. Do not ask about style or rewrite level until content has been received. Accept:
Present four options using AskUserQuestion:
If the user already named a style, confirm and continue.
Present four options using AskUserQuestion:
Present three options using AskUserQuestion:
Read the relevant reference file:
references/editorial.md — NYT / The Atlanticreferences/tech-minimal.md — Wired / MIT Technology Reviewreferences/vibrant-lifestyle.md — Vogue / GQreferences/creator.md — Dazed / i-D / The FaceEach file contains:
Read references/substyles.md. Each style has 5 sub-styles. Randomly pick one — do not ask the user, do not always pick the first one. This ensures every magazine looks different even when the same style is chosen.
Include the sub-style name and its one-line description in the prompt to ui-ux-pro-max. For example, if the user picked Creator and you randomly selected "lo-fi analog film," include:
Style: youth culture magazine (like Dazed, i-D, The Face), with a lo-fi analog film feel — grain, muted tones, disposable camera vibes, nostalgic warmth
Using the editorial voice section from the style reference, rewrite the content at the chosen level. Create these magazine elements:
Invoke the ui-ux-pro-max skill. The prompt should include:
Do not prescribe colors, fonts, or layout details. Let ui-ux-pro-max make all visual decisions based on the style line and its own design system.
Rendering specifications to include in the brief:
FORMAT: Paper magazine — paginated with page-flip navigation, NOT a scrollable web page.
PAGE DIMENSIONS:
- Pages fill 92% of viewport height (92vh)
- Width derived from height via A4 ratio: calc(92vh / 1.414)
- Pages always horizontally centered on screen
- Dark surface/background behind the pages (color from style spec)
- Gutter shadows on inner edges to simulate binding
- Page numbers on every page
VIEW MODES:
- Single page view: one page centered. Default on viewports < 1100px.
- Two-page spread: two pages side by side like an open magazine. Default on viewports >= 1100px.
- Toggle button in top-right corner to switch modes. Persist choice in localStorage.
- Cover page always displays alone. Spread begins from page 2.
- In spread mode, left and right pages have mirrored gutter shadows (binding simulation).
- In spread mode, navigation advances by two pages.
NAVIGATION:
- Semi-transparent arrow buttons on left/right edges
- Keyboard: ArrowLeft, ArrowRight, Spacebar
- Touch: horizontal swipe support
- Page indicator at bottom center (e.g., "3 / 8" in single, "2–3 / 8" in spread)
PAGES TO GENERATE:
1. Cover — [style-specific cover description from reference]
2. Opening spread — lede with drop cap, byline, deck
3. Body pages — sections with images, pull quotes, sidebars
4. Closing page — final section, author credit, publication footer
IMAGES & MEDIA (follow the user's media preference):
If media preference is "images":
- You (ui-ux-pro-max) are responsible for sourcing photographs that match the content
- Search for and embed relevant images that complement the article
- Follow the media mood from the style reference included above
- If you can't find suitable media, fall back to CSS-only visuals for that element
If media preference is "images + video":
- Source both photographs and background video loops
- Use background video loops (muted, autoplay, looping) on key pages — cover, section openers, or visual breaks. Pause/play videos based on page visibility.
- Follow the media mood from the style reference included above
- If you can't find suitable media, fall back to CSS-only visuals for that element
If media preference is "none":
- Do NOT source or embed any external images or videos
- Use pure CSS and inline SVG for ALL visual elements
- Create striking decorative designs: geometric patterns, gradients, abstract shapes, clip-path compositions, SVG illustrations, ornamental borders, and color blocks
- Each page should have strong visual identity through CSS/SVG art alone
- This should feel intentionally designed, not like missing images — think art zine, brutalist editorial, or modernist print
BRANDING:
- Add a small "Built with html-magazine" watermark in the bottom-right corner of the page
- Fixed position, always visible, subtle and unobtrusive
- "html-magazine" should be a link to https://github.com/bluedusk/html-magazine
- Style: semi-transparent, small font (10-11px), sans-serif
- Example CSS:
.branding { position: fixed; bottom: 12px; right: 16px; font-family: sans-serif;
font-size: 10px; color: rgba(255,255,255,0.3); z-index: 9999; letter-spacing: 0.05em; }
.branding a { color: inherit; text-decoration: none; }
.branding a:hover { color: rgba(255,255,255,0.6); }
- Example HTML: <div class="branding">Built with <a href="https://github.com/bluedusk/html-magazine" target="_blank">html-magazine</a></div>
CONSTRAINTS:
- Single self-contained HTML file
- No external dependencies (no CDN fonts, no external CSS/JS)
- System font stacks only (Georgia, Helvetica Neue, Courier New families)
- Must work offline (except sourced image URLs)
- Responsive down to mobile
- Print support via @media print (hide branding in print)
Save the file to the current working directory as magazine.html (or magazine-2.html if it exists).
Tell the user:
Then offer two optional next steps:
Share via Vercel:
"Would you like to deploy this to Vercel so you can share it with a link?"
If yes, run:
npx vercel deploy magazine.html --yes
If the user isn't authenticated, guide them through npx vercel login first.
Export to PDF:
"Would you like to export this as a PDF?"
If yes, run the export script:
python3 scripts/export-pdf.py magazine.html
This requires the playwright Python package. If not installed, guide the user to install it: pip install playwright && playwright install chromium.
Before saving, verify:
npx claudepluginhub bluedusk/html-magazine --plugin html-magazineConverts URL, PDF, DOCX, Markdown, or plain text into a single-file HTML article with design and interactivity. Follows a structured workflow for shareable long-form visual articles.
Creates professionally designed B2B SaaS e-books in HTML+CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types.
Audits newsletter drafts for visual opportunities and generates on-brand visual assets. Use for enhancing drafts with [screenshot] placeholders or 'add visuals' requests.