← ClaudeAtlas

memphis-html-pptlisted

Convert a user-provided web link or Markdown document into a high-quality Memphis style HTML presentation preview. Use when the user wants PPT-style storytelling, a Memphis visual language, or a local HTML deck preview for a source article, webpage, note, or markdown draft.
Moosphan/memphis-html-ppt · ★ 0 · Web & Frontend · score 70
Install: claude install-skill Moosphan/memphis-html-ppt
# Memphis HTML PPT Preview Use this skill to turn a source document or webpage into a polished HTML presentation preview with a Memphis look. ## What To Build - Input: webpage URL, pasted Markdown, or local Markdown file - Output: a local HTML preview that feels like a PPT deck - Style: high-quality Memphis, playful but controlled, bright, layered, geometric, and editorial ## Core Workflow 1. Extract the source into slide-worthy sections. 2. Preserve every source section and subsection; never cut content just to reduce page count. 3. Split overflow into continuation slides when a section exceeds a template's capacity. 4. Map each section to one or more templates from the skill template library. 5. Render the deck as an HTML preview with Memphis styling and responsive 16:9 framing. 6. Keep the presentation readable first, decorative second. ## Fast Path Use the bundled generator when the user wants an immediate preview: ```bash node scripts/generate-preview.js --input ./notes.md --output ./preview.html node scripts/generate-preview.js --input https://example.com/article --output ./preview.html ``` The generated preview uses the shared Memphis stylesheet in `assets/memphis-preview.css`. ## Style Rules - Use bold color blocking, cutout shapes, dots, squiggles, stripes, and asymmetry. - Prefer warm off-white surfaces with saturated accents. - Keep typography large, confident, and varied. - Add layered depth with stickers, shadows, overlaps, and framed panels. - Avoid g