What type of presentations is this skill best suited for?

The Blue Professional skill is ideal for B2B SaaS pitches, consulting deliverables, and advisory updates that require a modern and authoritative presentation style.

Can I customize the design elements of the deck?

While you can replace the content, it is important to preserve the design system, including fonts, colors, and layout structures, to maintain a cohesive look.

How do I adjust the number of slides in my presentation?

You can adjust the deck length by duplicating existing layouts for more content or removing slides from the bottom for less content, ensuring to update page-number labels accordingly.

Is there a limit to the types of layouts I can use?

You should stick to the provided layouts. If you need a different layout, you must create it from scratch while adhering to the established design principles.

What should I avoid when using this skill?

Avoid using this skill for informal or playful presentations, as the design is intended to convey a polished and professional tone.

Blue Professional

Name: Blue Professional
Availability: InStock
Author: nexu-io

Free

Create modern corporate strategy decks with ease.

by nexu-io84.9k stars on nexu-io/open-design

1 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Blue Professional does

The Blue Professional skill offers a streamlined approach to crafting corporate strategy decks specifically designed for executive presentations. With a clean, modern aesthetic featuring a cream paper background and electric cobalt blue accents, this HTML deck is tailored to convey professionalism and authority without appearing overly stiff. The skill is particularly suited for B2B SaaS pitches, consulting deliverables, and advisory updates, making it a versatile choice for professionals seeking to communicate complex information effectively.

To use the Blue Professional skill, users simply clone the provided example.html into their workspace and replace the placeholder content with their own. The design system is carefully curated, so it is essential to preserve the established typography, color palette, and layout structures throughout the customization process. This ensures that the final output maintains a cohesive and professional appearance, critical for high-stakes business environments.

The skill includes detailed instructions for adjusting the length of the deck, allowing users to duplicate existing layouts or remove slides as needed. Additionally, if a specific layout is required that is not included in the template, users are guided to create new layouts while adhering to the established design principles. This flexibility, combined with a focus on maintaining the integrity of the design system, makes the Blue Professional skill an excellent tool for producing polished and effective presentations.

Overall, this skill is ideal for anyone in a business setting who needs to prepare decision-grade presentations that are both visually appealing and strategically sound. However, it is not recommended for contexts that require a more playful or informal tone, as the design's polished nature may not align with those needs.

When to use it

Use this skill when preparing formal presentations for executive committees or business stakeholders that require a modern and authoritative look.

When not to use it

This skill is not suitable for informal or playful presentation contexts, as its design is intended to convey professionalism and restraint.

What you can build with it

Preparing Executive Presentations

Use this skill to create polished presentations for executive committees, ensuring a professional appearance.

B2B SaaS Pitches

Ideal for crafting presentations that require a modern and authoritative look to impress potential clients.

Consulting Deliverables

Utilize the Blue Professional skill for delivering consulting updates and advisory reports with a cohesive design.

How to install Blue Professional

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-zhangzara-blue-professional --agent claude-code

2. 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-io

Blue Professional

Cream paper background with electric cobalt blue accents; clean modern professional.

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-high
Density: medium
Slides in demo: 10

Best for

Anything that should feel modern-considered and lightly authoritative: B2B SaaS pitches, consulting deliverables, advisory updates, investor reports. Also a clean, tasteful choice whenever you want to read as professional without going stiff — research synthesis, internal reviews, brand work for service businesses.

Avoid for

Contexts where the deck should feel hot, playful, or intentionally informal — the cool electric-blue restraint will read as overly polished.

Workflow

Clone example.html into 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.js or inline keyboard handler, leave it intact.

Output contract

Emit between <artifact> tags:

<artifact identifier="zhangzara-blue-professional" 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 Blue Professional

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.