Sakura Chroma
FreeCreate vibrant, vintage-style travel photo essays in HTML.
Free · Opens the source repo
What Sakura Chroma does
Sakura Chroma is a specialized HTML deck designed for creating visually striking travel photo essays, particularly those themed around cherry blossom season in Kyoto. This skill provides a cohesive design system that includes typography, color palettes, and decorative elements, all inspired by vintage Japanese cassette packaging. Users can expect a low-formality, medium-density presentation style that evokes a nostalgic aesthetic, making it suitable for personal stories, travel narratives, and creative presentations.
The skill is built around a single, self-contained HTML deck that emphasizes the importance of maintaining its unique design language. Users are guided to clone the provided example file, replace placeholder content with their own, and adhere strictly to the established design rules. This ensures that the final output retains the intended visual identity, which features bold typography and a vibrant color scheme reminiscent of retro product catalogs.
Ideal for indie brands, music labels, and creative studios, Sakura Chroma is perfect for anyone looking to present their stories with a playful yet polished touch. The skill is particularly effective for projects that benefit from a tactile, printed-product personality, making it an excellent choice for zine pitches, product launches, and annual reports. However, it is not suitable for more restrained or corporate presentations, as its design elements are intentionally loud and eye-catching.
Users should be aware that while the skill allows for some customization in terms of content and slide length, it requires strict adherence to the original design system. This includes not altering fonts, colors, or layout structures, ensuring that the final product remains true to its intended aesthetic and functional purpose.
When to use it
Use this skill when you want to create a vibrant and visually engaging presentation that tells a personal or travel story, particularly in a nostalgic style.
When not to use it
Avoid this skill for professional or corporate presentations that require a more subdued or formal design approach.
What you can build with it
Creating a Travel Presentation
Use Sakura Chroma to craft a visually engaging presentation about your recent trip to Kyoto, showcasing cherry blossoms and personal experiences.
Indie Brand Decks
Develop a presentation for your indie hardware brand that captures the essence of your products with a nostalgic design.
Zine Pitch
Create a pitch deck for your zine that reflects its playful and creative nature, utilizing the vibrant design elements of Sakura Chroma.
How to install Sakura Chroma
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-sakura-chroma --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-ioSakura Chroma
Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.
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: low
- Density: medium
- Slides in demo: 8
Best for
Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports. Equally good for any deck wanting bold colour, condensed display type, and a tactile printed-product personality.
Avoid for
Decks that need restrained, corporate, or quiet typography — the bold condensed lockups, ribbon stripes, and primary-colour palette are intentionally loud and product-page-y.
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-sakura-chroma" 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 Sakura Chroma
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.