From solopreneur
Creates brand-aware presentations using frontend-slides or reveal.js. Extracts colors from design systems, scans assets, confirms setup, then generates slides.
npx claudepluginhub hanamizuki/solopreneur --plugin neo4j-devThis skill uses the workspace's default tool permissions.
Create presentations with brand colors, typography, and assets baked in from the start, instead of picking a generic style and then replacing everything later.
Generates self-contained HTML slide presentations with keyboard navigation, swipe support, fullscreen, animations, embedded images, and brand-accurate styling from guides.
Generates single-file HTML slide decks from briefs, notes, or content. Supports 13 layouts, 8 style presets, PDF export. Auto-triggers on 'create slide deck' or similar requests.
Generates self-contained HTML slide decks for product presentations. Reads pm-context.md, extracts brand colors from websites, adds keyboard navigation and print-friendly layouts.
Share bugs, ideas, or general feedback.
Create presentations with brand colors, typography, and assets baked in from the start, instead of picking a generic style and then replacing everything later.
This skill wraps two engines. It adds a brand setup phase before handing off to the engine's own workflow.
Before touching any engine, gather brand context. Ask these in a single AskUserQuestion call:
Question 1 — Brand Colors (header: "Brand"): How do you want to set定品牌色?
Question 2 — Assets (header: "Assets"): Do you have character images or background art?
Question 3 — Engine (header: "Engine"): Which engine do you want to use?
If design system file is provided:
--bg-primary / --background-color--accent / --primary-color--accent-secondary / --secondary-colorIf the design system describes colors in prose only (no hex codes):
If assets folder is provided:
SVG logo tinting trick
If you have a black / single-color SVG logo and want to match the brand primary color, use a CSS filter chain (no SVG editing needed):
.brand-mark {
filter: brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(1250%) hue-rotate(357deg) brightness(92%) contrast(87%);
/* This chain tints black to ~#CD9D4F (warm gold). */
}
Use codepen.io/sosuke/pen/Pjoqqp or hex-to-css-filter to generate a chain for any target color.
Apply a projection-optimized typography scale before writing any slide-specific CSS. See references/typography-scale.md.
Key rules:
--fs-body-md as the floor for readable content.--fs-micro is for decoration only (slide numbers, step counters). Never for content.:root so slides can reference them consistently.After brand colors + typography tokens are in place, move to Phase 1.
After brand + typography setup, invoke the appropriate skill:
frontend-slides skill, but skip its Phase 2 (style discovery) — you already have the brand colors. Jump straight to Phase 3 (generation) with the brand palette pre-applied. For atmosphere (corner glows, scene illustrations, character cameos), apply the layered backdrop system — see references/backdrop-system.md.revealjs skill. Generate the scaffold, then customize styles.css with the brand colors before filling in content. Use Google Fonts or Fontshare instead of system fonts.In both cases, pass through all brand colors, typography tokens, and asset paths so the engine uses them from the start.
If the deck uses emoji as functional pictograms (pipeline icons, status markers, stage glyphs), replace them with vector icons from an inline SVG sprite. Emoji render fuzzy on projectors and differ per OS. See references/icon-system.md.
Three things matter:
.icon-svg { width: 1em; height: 1em } — browsers render <svg> without size at 300×150px; this one rule prevents every icon from explodingcdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/regular/<name>.svg<symbol> per icon inside a top-of-body hidden <svg>, referenced via <use href="#icon-name">Skip this phase if emoji only appear in casual speaker notes or decoration that won't project.
If the deck is for a live speaker (not self-browsing), add a step-controlled reveal system so the speaker paces content with space / arrow keys. See references/reveal-system.md.
Covers:
.reveal elements revealed one at a timedata-toggle markers for complex multi-element states (honeycomb builds, etc.)Skip this phase if the deck is:
After writing all slide text, run:
/humanly review slide content in [path]
See references/chinese-guidelines.md for slide-specific Chinese AI-slop patterns that /humanly will flag, plus prewrite guidance to avoid them. Key pitfalls:
—— em-dash overuse (especially X —— Y reveal structure)不是 X,是 Y negation parallelism repeated across slidesApply all P1 findings from humanly. P2 is judgment call.
These are reusable components built for presentations. They're optional — use them when the content calls for it. See references/components.md for the full CSS and HTML.
| Component | When to use |
|---|---|
| Skill Card | Showing a named capability with description + tools used |
| Flow Steps | Sequential process (01 → 02 → 03) with descriptions |
| Swimlane | Two-party collaboration (left vs right, shared stages in center) |
| Background Art | Overlaying an image in the corner with gradient fade to background |
| HITL Bar | Human-in-the-loop divider between automated steps |
| Lifecycle Nodes | Horizontal chain of stages with arrows (circles + labels) |
| Component | When to use |
|---|---|
| Full-Bleed Diagonal Split | Before/after or conceptual contrast with two edge-to-edge images |
| 3-2 Honeycomb | 5-stage cycle with per-stage metadata (includes offset math to prevent overlap) |
| 24-Hour Circular Clock | Temporal data like cron schedules, daily routines, time-distributed events |
| Modes × Phases Grid | Process with parallel variants sharing the same phase names |
| Closed-Loop Diagram | Cyclical process where the visual should loop back |
| QR Panel (Persistent Sidebar) | Downloadable resources promoted across multiple slides |
| Skill Card with Command Pill | /slash-command style tools with terminal-purple monospace badges |
| Equal-Width Pipeline | Horizontal pipeline where N steps stay visually equal-width even with uneven label lengths (grid 1fr auto 1fr auto...) |
When generating a presentation, scan the content outline and suggest which components would work well. Don't force components where simple bullet points or text would be clearer.
When the user wants to export the deck to PDF (handout, archive, chat attachment), use the headless Chrome recipe in references/pdf-export.md. Needs a one-time @media print block in the deck's CSS — it forces 1920×1080 landscape pages and works around Chrome's print-pipeline bug that renders the .bg-art layered mask as black rectangles.
For decks with "scan to download" CTAs:
brew install qrencode
qrencode -o assets/qr.png -s 20 -m 2 "https://example.com"
-s 20 — 20px per dot (large enough for 3m scan distance)-m 2 — 2-dot margin (prevents scanner edge issues)#F2F2F2 or #FFFFFF) for scanner contrast — don't make transparent.| File | Purpose |
|---|---|
| references/typography-scale.md | 8-token projection-optimized scale + application rules |
| references/icon-system.md | Phosphor sprite pattern + 1em default size + descendant-selector pitfalls |
| references/backdrop-system.md | Layered slide atmosphere — body grid + corner glow modifiers + .bg-art scene layer + .character cameos |
| references/reveal-system.md | Step-controlled reveal + data-toggle + SVG sync patterns |
| references/chinese-guidelines.md | Chinese AI-slop avoidance + /humanly integration |
| references/components.md | CSS / HTML for 13 reusable layout components |
| references/pdf-export.md | Headless Chrome recipe + @media print block for landscape 16:9 PDF export (with .bg-art mask workaround) |