Cobalt Grid
FreeCreate serious B2B sales decks with a structured design.
Free · Opens the source repo
What Cobalt Grid does
Cobalt Grid is a specialized HTML template designed for creating high-formality B2B sales decks. It features a unique design aesthetic that combines electric cobalt italic serifs on a graph-paper canvas, complemented by pixel-glitch decorations. This skill is particularly suited for producing decision-grade sales presentations that require a calm and serious tone, making it ideal for business scenarios such as renewal proposals and seat-expansion cases. The template is crafted to maintain a consistent design language, ensuring that typography, color palette, and decorative elements work harmoniously together.
Users can start by cloning the provided example.html file into their workspace, where they will replace placeholder content with their own information. The design system is strictly enforced, meaning users must adhere to the established fonts, colors, and layouts without making substitutions. This ensures that the final output retains the intended identity, which is crucial for maintaining professionalism in B2B communications.
The Cobalt Grid is best utilized for decks that aim to convey serious research findings, agency capabilities, or curated trend reports. It is particularly effective for studio annuals and academic presentations that require a structured and formal approach. However, users should be aware that this template is not suitable for decks that need a more vibrant, multi-colored approach or a casual tone, as its design is intentionally austere and focused on a single accent color.
In summary, Cobalt Grid provides a straightforward workflow for users looking to create polished and professional sales decks without the need for extensive design knowledge. By following the provided guidelines, users can produce high-quality presentations that effectively communicate their business cases to stakeholders and decision-makers.
When to use it
Use Cobalt Grid when you need to create formal sales presentations that require a serious tone and a cohesive design.
When not to use it
Avoid this skill for presentations that need a playful or colorful design, as it adheres to a strict cobalt and cream palette.
What you can build with it
Renewal Proposal Deck
Create a formal presentation for renewing a client contract, showcasing realized value and ROI.
Agency Capabilities Presentation
Develop a structured deck highlighting your agency's strengths and past projects for potential clients.
Design Research Publication
Compile a serious trend report or research findings into a cohesive and visually consistent format.
How to install Cobalt Grid
View source1. Install with the skills CLI
npx skills add nexu-io/open-design/html-ppt-zhangzara-cobalt-grid --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-ioCobalt Grid
Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.
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: high
- Density: medium
- Slides in demo: 8
Best for
Anything that should feel like a quietly serious design / research bulletin, art publication, or curated trend report. Strong for studio annuals, agency capabilities decks, design-research publications, architecture / art / academic decks, and any deck wanting one strict accent colour and a printed-ledger calmness rather than corporate polish.
Avoid for
Decks that need warmth, multi-colour energy, or a casual / playful voice — the strict cobalt + cream + grid palette is intentionally austere.
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-cobalt-grid" 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 Cobalt Grid
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.