What is the purpose of the HTML PPT XHS White Editorial skill?

This skill is designed to help users create structured and visually appealing presentation decks specifically for career advancement, such as promotion packets.

How do I start using this skill?

Begin by reading the master skill documentation to understand the authoring rules, then copy the provided template files into your project.

Can I customize the themes in my presentation?

Yes, you can swap in any of the 36 themes available in the assets folder to match your desired visual identity.

What happens if I don't follow the asset linking instructions?

If the asset linking instructions are not followed, your presentation may not function correctly, leading to broken links and non-functional slide navigation.

Is this skill suitable for casual presentations?

No, this skill is specifically tailored for professional contexts, such as self-reviews and promotion packets, rather than casual presentations.

HTML PPT XHS White Editorial

Name: HTML PPT XHS White Editorial
Availability: InStock
Author: nexu-io

Free

Create professional presentation 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 HTML PPT XHS White Editorial does

The HTML PPT XHS White Editorial skill provides a streamlined approach for creating visually appealing presentation decks tailored for career advancement and self-reviews. This skill is specifically designed for engineers and professionals who need to compile promotion packets or decision-grade career decks that clearly articulate their contributions and impact. By utilizing the full-deck template, users can ensure that their presentations maintain a consistent visual identity, which is crucial for effective communication in professional settings.

To get started, users should first familiarize themselves with the master skill, which outlines essential authoring rules and guidelines. The skill emphasizes the importance of maintaining the correct structure and layout by using the provided template files, such as index.html and style.css. Users are instructed to incorporate shared assets carefully to avoid broken links and ensure that the presentation functions correctly when deployed. This attention to detail is vital for creating polished and professional presentations that can impress management and calibration committees.

The skill also offers flexibility in design, allowing users to select from a variety of themes to match their personal or corporate branding. This customization ensures that each presentation can reflect the user's unique style while adhering to the professional standards expected in corporate environments. By following the structured approach laid out in the skill, users can create comprehensive and compelling decks that highlight their achievements and readiness for promotion or new opportunities.

Overall, the HTML PPT XHS White Editorial skill is ideal for professionals looking to enhance their presentation capabilities, particularly in scenarios that involve self-assessment and career progression. It combines ease of use with powerful features that cater to the specific needs of career-focused individuals.

When to use it

Use this skill when you need to prepare a professional presentation deck for a promotion or self-review.

When not to use it

This skill is not suitable for casual presentations or when you require extensive customization beyond the provided templates.

What you can build with it

Preparing a Promotion Packet

Use this skill to compile a comprehensive presentation deck that showcases your achievements and contributions for a promotion review.

Creating a Self-Review Deck

This skill helps you structure a self-assessment presentation that highlights your performance and areas for growth.

Designing a Decision-Grade Career Deck

Utilize the templates to create a polished presentation for management or calibration committees that clearly communicates your impact.

How to install HTML PPT XHS White Editorial

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-xhs-white-editorial --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

HTML PPT · 白底杂志风

A focused entry point into the html-ppt master skill that lands the user directly on the xhs-white-editorial full-deck template.

When this card is picked

The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of xhs-white-editorial (see the upstream full-decks catalog for screenshots and rationale).

How to author the deck

Read the master skill first. All authoring rules live in design-templates/html-ppt/SKILL.md — content/audience checklist, token rules, layout reuse, presenter mode, the keyboard runtime, and the "never put presenter-only text on the slide" rule.
Start from the matching template folder: design-templates/html-ppt/templates/full-decks/xhs-white-editorial/ — copy index.html and style.css into the project, keep the .tpl-xhs-white-editorial body class.
Bring the shared runtime with the template. The upstream index.html links the shared CSS/JS via ../../../assets/... because it sits three folders deep inside design-templates/html-ppt/templates/full-decks/. Once you copy index.html into the project, those parent-relative URLs no longer resolve and base.css, animations.css, and runtime.js will 404 — meaning the deck never activates and slide navigation is dead. Pick one of these two recipes per project:
- Recipe A — copy + rewrite (preferred): copy design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css, and design-templates/html-ppt/assets/runtime.js into a project-local assets/ (with assets/animations/animations.css), then rewrite the four <link>/<script> tags in index.html from ../../../assets/... to the matching project-local paths (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
- Recipe B — inline: read the same four files and replace each <link rel="stylesheet" href="../../../assets/..."> with a <style>...</style> containing the file's contents, and the <script src="../../../assets/runtime.js"> with a <script>...</script> containing runtime.js. Yields a single self-contained index.html. Either way, do not ship the upstream ../../../assets/... URLs verbatim into a project artifact — they only work in-tree.
Pick a theme. Default tokens look fine; if the user wants a different feel, swap in any of the 36 themes from design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> and let T cycle.
Replace demo content, not classes. The .tpl-xhs-white-editorial scoped CSS only recognises the structural classes shipped in the template — keep them.
Speaker notes go inside <aside class="notes"> or <div class="notes"> — never as visible text on the slide.

Attribution

Visual system, layouts, themes and the runtime keyboard model come from the upstream MIT-licensed lewislulu/html-ppt-skill. The LICENSE file ships at design-templates/html-ppt/LICENSE; please keep it in place when redistributing.

Frequently asked questions about HTML PPT XHS White Editorial

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.