lqshow/neon-slides

Claude Skill, designed for tech content creators—generate dark, tech-inspired HTML slides in a single sentence, ready to use when opened in a browser, and user-friendly for casting and live streaming.

https://github.com/user-attachments/assets/40b6f362-49bb-4986-a2e6-9cfab9af8269

What is this?

Neon Slides is a Claude Skill that solidifies a set of slides visual language of dark background + orange-blue neon contrast. You just need to send Claude an article outline, course highlights, or a live brief and trigger this skill to get a copy:

• Single file HTML — Double-click to open it in your browser and you can explain it, no need to install anything
• Keyboard Page Flipping —— ← → Space page flipping, G jumping to any page, Home End homepage and last page
• Casting Ready — 1920×1080 is best, text alignment, font size, and white space all adjusted according to the podium scene
• Semantic Components — Cover screen, chapter transition screen, half-screen text and images, comparison cards, three-column structure cards, list grids, code blocks, each with clear usage boundaries

Why not use a PPT

python-pptx Can’t create effects like glowing strokes, gradient titles, or detailed icon boxes; Traditional PowerPoint is too heavy, and every time you make and revise, it’s painful. Neon Slides is positioned as a landing page that can be spoken — it combines the texture of landing design with the presentation power of slides.

Suitable for:

• Technical Live Courseware (covering topics such as AI agents, k8s, n8n automation, MCP, etc.)
• Course/bootcamp introduction page
• Web versions of product architecture interpretations and technical articles
• The flagship deck for public speaking

Not suitable for:

• Files that need to be sent to colleagues for editing .pptx (select genuine PowerPoint)
• Xiaohongshu cover and official account single image (using canvas-type tools)
• White business report style (this skill is the dark neon aesthetic; forcing it would feel out of place)

Preview

Let’s first look at examples/template-demo.html — 4-screen example, covering four typical components: cover screen, concept screen, architecture screen, and chapter transition screen. Open the browser and press → to turn the page.

Installation

Method One: Claude.ai Users (Recommended)

1. Download neon-slides.zip from Release (or directly clone this repository and pack it)
2. In Claude.ai, go to Settings → Capabilities → Skills
3. Click Upload skill and select the zip file
4. After completion, you can trigger it in a conversation. Try saying: “Help me make a 10-screen live courseware in Neon Slides style, with the theme XXX.”