Skip to content
cccskills
FreePublished on GitHubEnglish overview

html-ppt-taste-editorial

Create 16:9 HTML presentations with warm off-white backgrounds, serif headings, thin dividers, and generous whitespace. Use the restrained editorial style for investor updates, design reviews, internal statements, or lectures.

OriginalShow the original description

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`.

AI rating90/ 100See how to install

Good for

  • Preparing an investor update deck
  • Presenting a design review
  • Sharing internal principles
  • Creating restrained lecture slides

Overview

What it does

This skill creates 16:9 HTML slides with warm off-white backgrounds and generous whitespace, giving presentations the feel of a magazine layout. It uses serif type for headings, sans serif type for body text, and monospace type for supplementary information. Available layouts include covers, comparisons, tables, horizontal bar charts, and quotations. Thin dividers and a restrained accent color keep the presentation visually consistent.

When it helps

Use it for investor updates, design reviews, internal policy presentations, and lecture materials. It suits situations where you need to organize figures and arguments and present them in a calm visual style. A total of 10–12 slides is recommended.

Example requests

  • “Turn an investor update into HTML slides with a comparison table and a horizontal bar chart.”
  • “Organize our internal policy into a presentation using numbered statements and quotations.”

Notes

The output is HTML. The design avoids pure white, pure black, strong shadows, gradients, and emojis. Navigation supports the keyboard, wheel, swipes, and dot buttons. All slides remain visible when printing or when scripts do not run.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe material specifies 16:9 HTML slides for investor updates, reviews, and lectures, with explicit color and typography rules.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodThe material provides color codes, type sizes, ten slide archetypes, navigation requirements, and a pre-flight checklist.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodInstructions focus on HTML presentation and navigation; no deletion, external transmission, or credential reading is described.
Easy setupDoes it need few tools or API keys, and are they documented?
BPartly lackingThe material identifies example.html and typefaces, but does not explain how to obtain or load the fonts.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (2)

  • SKILL.md4.2 KB
  • example.html30.5 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103.1KUpdated Oct 22, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103.1KUpdated Oct 22, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103.1KUpdated Oct 22, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103.1KUpdated Oct 22, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103.1KUpdated Oct 22, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103.1KUpdated Oct 22, 2026

See all skills by nexu-io

Report a problem with this skill