Neo-Grid Bold
FreeCreate confident, editorial-style presentation decks.
Free · Opens the source repo
What Neo-Grid Bold does
Neo-Grid Bold is a self-contained HTML presentation deck designed specifically for designers looking to create a compelling narrative for senior interviews or portfolio showcases. This skill emphasizes an editorial neo-brutalist aesthetic, characterized by a striking neon yellow accent on off-white paper, making it ideal for confident and design-led pitches. The deck includes a carefully curated typography, color palette, and decorative system, all of which are intended to work cohesively within a defined layout structure. Users are encouraged to maintain the integrity of the design system, ensuring that the overall identity remains consistent throughout the presentation.
The workflow for using Neo-Grid Bold is straightforward. Users begin by cloning the provided example HTML file and accompanying assets, which include a JavaScript runtime for navigation and rendering. The skill emphasizes the importance of replacing placeholder content with real data while adhering to the established design principles. This includes maintaining the font choices, color scheme, and layout structures, which are crucial for preserving the visual identity of the deck. Users can adjust the length of the presentation by duplicating existing slide layouts or removing slides as necessary, all while ensuring that the design remains intact.
This skill is particularly well-suited for contexts where a confident, editorial voice is required, such as design-led pitches, brand presentations, and keynotes at conferences. It excels in scenarios that involve data-heavy slides, comparisons, and process flows, making it versatile for various fields including tech, research, and finance. However, it is not recommended for situations that require a more traditional or subdued presentation style, as the bold design elements may not align with those contexts.
When to use it
Use Neo-Grid Bold when preparing for design-led pitches, portfolio presentations, or any scenario where a confident visual identity is essential.
When not to use it
Avoid this skill for presentations that require a more traditional or warm aesthetic, as the bold design may clash with those needs.
What you can build with it
Senior Interview Presentation
Use Neo-Grid Bold to create a compelling portfolio narrative for a senior design interview, showcasing your case studies and design philosophy.
Design-Led Pitch
Leverage the skill for pitching design concepts to stakeholders, ensuring your presentation stands out with a confident editorial style.
Conference Keynote
Utilize this deck for delivering engaging keynote presentations at conferences, particularly when data and design need to be effectively communicated.
How to install Neo-Grid Bold
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-neo-grid-bold --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-ioNeo-Grid Bold
Editorial neo-brutalism with a single neon yellow accent on off-white paper.
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
- Density: high
- Slides in demo: 12
Best for
Anything that should feel confident and editorial-graphic: design-led pitches, brand work, founder talks, conference keynotes. Excellent for stat-heavy slides, comparisons, and process flows. Just as strong for tech, research, or finance when the speaker wants to read as design-led rather than corporate.
Avoid for
Contexts that need to feel quiet, traditional, or warm — the neon-yellow accent and uppercase display commit to a confident editorial voice.
Workflow
- Clone
example.htmlAND theassets/folder into the user's workspace. This template ships anassets/deck-stage.jsruntime (keyboard navigation, stage rendering); the HTML references it asassets/deck-stage.js, so the file must sit next to the cloned HTML or that path will 404 in the generated artifact and navigation will silently break. Inlining the JS into a single<script>block in the HTML is an acceptable alternative when a single self-contained file is preferred. - 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-neo-grid-bold" 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 Neo-Grid Bold
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.