What Retro Zine does
The Retro Zine skill is designed for creating visually engaging, lo-fi HTML presentations that evoke the charm of printed materials. This skill is particularly suited for indie zines, community projects, and personal storytelling, allowing users to showcase their content in a crafted, handmade aesthetic. The provided HTML deck is a self-contained template that incorporates a cohesive typography and decorative system, ensuring that all elements of the presentation feel united and intentional.
To get started, users clone the example.html file, replacing placeholder content with their own text and images. The design system is crucial to maintain, as it includes specific fonts, colors, and decorative elements that contribute to the zine's identity. Users can adjust the number of slides by duplicating existing layouts, but must adhere to the established design vocabulary to preserve the overall look and feel of the deck.
This skill is ideal for those looking to create content that feels intimate and personal, making it suitable for a range of applications from community presentations to creative portfolios. However, it is important to note that the Retro Zine is not suitable for contexts that require a polished, digital-native appearance; its intentionally handmade aesthetic may not align with more formal or tech-driven presentations.
When to use it
Use this skill when you want to produce zines or presentations that require a crafted, lo-fi aesthetic, particularly for community or personal storytelling.
When not to use it
Avoid this skill for projects that demand a sleek, modern digital design or where speed and polish are priorities.
What you can build with it
Creating a Community Zine
Use the Retro Zine skill to document local stories and portraits, presenting them in a visually engaging format that resonates with community members.
Indie Publication Launch
Launch your indie publication with the Retro Zine, leveraging its crafted aesthetic to attract readers and convey your unique voice.
Personal Travel Photo Essay
Compile your travel experiences into a photo essay using the Retro Zine, allowing you to share your adventures in a nostalgic, printed style.
How to install Retro Zine
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-retro-zine --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by nexu-ioRetro Zine
Beige paper with green accent and Bebas Neue + Caveat: a riso-printed zine in HTML form.
A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.
At a glance
- Scheme: light
- Formality: medium-low
- Density: medium
- Slides in demo: 10
Best for
Anything that should feel printed, lo-fi, and crafted: indie zines and publications, music / arts brands, creator portfolios, small-batch craft launches, community decks. Also a great underdog choice for tech, research, or business decks that want a riso-print warmth instead of digital polish.
Avoid for
Contexts that demand digital-native polish or fast modern-tech energy — the layered zine aesthetic intentionally feels handmade.
Workflow
- Clone
example.htmlinto the user's workspace as the working file. - Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
- Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
- Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
- Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
- Keep the navigation runtime as shipped. If the deck ships an
assets/deck-stage.jsor inline keyboard handler, leave it intact.
Output contract
Emit between <artifact> tags:
<artifact identifier="zhangzara-retro-zine" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>
Source & license
Vendored from upstream MIT-licensed
zarazhangrui/beautiful-html-templates.
The full upstream MIT license text — including the original copyright notice — ships in this skill at
LICENSE and must be redistributed alongside any copy of example.html,
template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.
Frequently asked questions about Retro Zine
Similar skills
PPTX HTML Fidelity Audit
Ensure your PPTX matches its HTML source perfectly.
HTML PPT Studio
Create professional HTML presentations effortlessly.
Humanize PPT
Transform raw material into presentation-ready outlines.
Replit Deck
Create visually cohesive decision decks with ease.
Open Design Landing Deck
Create engaging marketing decks with a magazine-style format.
Magazine Web Presentation
Create visually striking HTML presentations with ease.