From maratai-manager
Create a polished, self-contained HTML demo page from any source material — feature descriptions, ticket lists, release notes, or free-form conversation. Use when asked to create a demo page, presentation, or showcase.
How this skill is triggered — by the user, by Claude, or both
Slash command
/maratai-manager:demo-pageThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create a polished, self-contained HTML demo page from any source material. The page tells a story about real user problems being solved — not a changelog, but a narrative that makes end users think "finally, that annoying thing is fixed."
Create a polished, self-contained HTML demo page from any source material. The page tells a story about real user problems being solved — not a changelog, but a narrative that makes end users think "finally, that annoying thing is fixed."
Accept free-form input from the conversation. This can be:
If the conversation has no material to work with, tell the user:
Give me the material you'd like turned into a demo page — feature descriptions, ticket lists, release notes, or just describe what was built.
Stop and wait.
From the provided material, separate two buckets:
Before moving to Phase 2, make sure you understand why each demo section matters — not just what was built.
For each demo section candidate, write down:
If the input material only describes what was built (not why), ask the user one focused question:
For each feature, what user problem does it solve?
This is the only question worth blocking on. Do NOT proceed to variant proposals with surface-level understanding — if you can only describe the feature mechanically ("users can now filter by X"), you don't understand the pain yet.
From the context, infer:
docs/demo-YYYY-MM-DD.html using today's date, or infer from contextDo not ask the user for these — propose them in Phase 2 along with the narrative variants.
This is the core of the skill. Propose, don't interrogate.
Quality gates for variants:
Present three narrative directions:
Variant A — Controversial Bold angle, provocative headings. Takes a strong opinion about why these changes matter. Makes the audience feel something.
Variant B — Informative Straightforward problem-then-solution. Clear, professional, no-nonsense. Each section follows a clean before/after structure.
Variant C — Unique Unexpected structure or creative theme. Might reorder sections in a surprising way, use an unusual metaphor, or frame everything through an unexpected lens.
For each variant, present:
Present all three variants. The user picks one, mixes elements, or gives direction. Single approval step — no back-and-forth questions.
Three sources — infer from context which applies, don't ask:
magick input.png -crop WxH+X+Y +repage output.png) to remove irrelevant areasRead references/design-system.md for the complete CSS, HTML skeleton, and component markup.
The design system is optimized for screen sharing (Zoom, Google Meet). Key constraints:
For each section, choose a layout pattern — never use the same pattern twice in a row:
| Pattern | Name | Best for | Key trait |
|---|---|---|---|
| A | Stacked | 2-3 screenshots | Text on top, full-width images below |
| B | Cinematic | Flagship features, 1 primary + 2 supporting | Centered text, full-width hero + 2-col grid, tinted background |
| C | Narrative | 2 screenshots, explanatory features | 1000px container, full-width screenshots, callout box |
Write to docs/demo-YYYY-MM-DD.html (default, date = today) or user-specified path. Single self-contained file with inline CSS and minimal JS (IntersectionObserver for heading animation only).
<img src="..."> paths in the generated HTMLdocs/demo-screenshots/docs/demo-YYYY-MM-DD.html in a browser to review."After generating the HTML, open it in the browser and review each section:
The closing section is a dark footer that wraps up the narrative:
h3: Use the closing heading from the approved variant (e.g., "What we shipped", "What's new", etc.)| Artifact | Location |
|---|---|
| Output HTML | docs/demo-YYYY-MM-DD.html (default) |
| Screenshots | docs/demo-screenshots/*.png |
| CSS & template | references/design-system.md |
| Writing guide | references/storytelling.md |
npx claudepluginhub mir/maratai --plugin maratai-managerGenerates self-contained HTML slide decks for product presentations. Reads pm-context.md, extracts brand colors from websites, adds keyboard navigation and print-friendly layouts.
Generates multi-page marketing websites for web apps using captured screenshots, animated GIF workflows, and feature demos from the running app via browser tools.
Creates high-fidelity HTML design artifacts including prototypes, slide decks, landing pages, UI mockups, and animations. Uses Playwright for browser rendering and screenshot verification.