Mmcp.market

html-ppt-taste-editorial skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`.

A100/100content scan

Is the html-ppt-taste-editorial skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the html-ppt-taste-editorial skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/html-ppt-taste-editorial ~/.claude/skills/html-ppt-taste-editorial
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

HTML PPT — Editorial Minimalism

A 16:9 deck for the briefs that hate neon: investor updates, design reviews, internal manifestos, lecture decks. Reads like a print supplement, not a SaaS landing.

Source

Distilled from Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md. The deck system follows the project deck convention: each .slide is a 100vw × 100vh section, the active slide carries .active / .is-active, and the baked example owns keyboard, wheel, touch, and dot navigation inside the gallery iframe. No-script and print fallbacks keep every slide visible. See example.html in this directory.

Hard rules

  • Substrate: warm off-white #FBFBFA / #F7F6F3. Foreground off-black #1A1A19. Never pure white or pure black.
  • Type pairing: display in serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Inter Tight / Switzer), meta in mono (JetBrains Mono).
  • Display scale per slide: title clamp(56px, 6.5vw, 96px) italic-capable serif, line-height 1.05, tracking -0.025em.
  • Hairline only: 1px solid #EAEAEA — borders, dividers, table cells. No drop shadows.
  • One accent color chosen from the muted-pastel pairs (e.g. sage #346538 on #EDF3EC, or red #9F2F2D on #FDEBEC). Used sparingly — eyebrow dot, chart fill, call-out chip. Never as a slide background.
  • Slide padding: generous (72px 96px minimum). Title at most 14ch wide.
  • Eyebrow: every slide opens with a mono uppercase eyebrow letter-spacing: 0.18em and a section number 01 / 09.
  • Page numbers: mono, bottom-right corner.

Banned

  • Inter (use Inter Tight if you must, but prefer Switzer / SF Pro). No Roboto, Open Sans.
  • Heavy drop shadows. Glow. Gradient text.
  • 3-equal-card feature rows. Use uneven hairline-divided columns instead.
  • Emojis in text or as bullet markers — use — or no marker.
  • Full-bleed photography on every slide. Use one or two image slides; reserve them.
  • AI-cliché copy ("Elevate", "Unleash", "Seamless", "Next-Gen").
  • Slide transitions noisier than fade-in.

Required slide archetypes (10–12 total recommended)

  1. Cover — serif title, italic mid-sentence accent, mono meta footer.
  2. Eyebrow + thesis — single sentence of body lede on the left; mono numbered TOC on the right.
  3. Numbered manifesto — three or four hairline-separated theses.
  4. Bento data slide — uneven 6-col grid with hairline gaps; one stat in serif, supporting in mono.
  5. Quote / pull-out — single sentence at large serif, attribution mono, hairline above and below.
  6. Comparison — two columns separated by a vertical hairline; "Doesn't / Does" or "Before / After".
  7. Table or index — display: grid; gap: 1px on hairline color.
  8. Chart or breakdown — flat horizontal bar chart with mono labels, accent fill only on the latest bar.
  9. Team / colophon — mono key-value list, no avatars.
  10. Closing — serif final line italic; CTA as ghost button; signature in mono.

Motion

  • Runtime navigation: keyboard, wheel / trackpad, touch swipe, and dot buttons must all update the same active slide state. Keep the fade at roughly 400ms cubic-bezier(0.16, 1, 0.3, 1).
  • Static / print fallback: keep every slide visible when the runtime has not booted or the document is printed.
  • No translate, no blur, no auto-advance.

Pre-flight

  • [ ] Substrate is warm off-white; foreground is off-black; never pure black/white
  • [ ] Serif used on titles, grotesque on body, mono on meta — three families, three jobs
  • [ ] One accent color, used at most three times in the whole deck
  • [ ] Every slide has eyebrow + section number + page number
  • [ ] At least one hairline-grid table or comparison module
  • [ ] No drop shadows, no gradients, no emojis, no banned fonts
  • [ ] Keyboard, wheel / trackpad, touch swipe, and dot navigation all move one slide and keep the active dot / active slide in sync

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers