html-ppt-taste-brutalist skill

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

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry mode).

A100/100content scan

Is the html-ppt-taste-brutalist 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-brutalist 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-brutalist ~/.claude/skills/html-ppt-taste-brutalist

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 — Tactical Telemetry / CRT Terminal

A 16:9 deck for project debriefs, security reviews, infra incident write-ups, ops walkthroughs, and any "we are not selling, we are reporting" presentation. Reads like a declassified mission packet, not a pitch deck.

This skill commits to ONE substrate (dark CRT) — never mix with the light Swiss-print mode in the same artifact.

Source

Distilled from Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.2 (Tactical Telemetry & CRT Terminal). Deck system follows the project's existing html-ppt convention (16:9 slides, vertical-stack fallback when opened directly).

Hard rules

Substrate: deactivated-CRT charcoal #0A0A0A / #121212. Never pure black.
Foreground: white phosphor #EAEAEA. Secondary #9A9A98.
Accent: ONE color — hazard red #E61919. Used on alerts, classifications, the latest data point. Never as a slide background fill.
Optional: terminal green #4AF626 for ONE specific UI element across the entire deck (e.g. a single status indicator). Omit if it doesn't earn its place.
Type: monospace dominates. JetBrains Mono / IBM Plex Mono for body and meta. Heavy condensed grotesque (Archivo Black / Inter Black) only for slide titles.
Title scale: clamp(56px, 7vw, 96px), uppercase, tracking -0.04em, leading 0.9.
Geometry: border-radius: 0. Visible 1px hairlines (#2A2A28 on charcoal). Use display: grid; gap: 1px over a hairline-colored background to render perfect cells.
Scanline overlay: subtle repeating-linear-gradient at 2px / 4px cycle, opacity ≤ 0.08, applied as a fixed pointer-events-none layer.
Phosphor noise: optional SVG-grain pseudo-element, opacity ≤ 0.06.
Slide chrome: every slide carries top register strip — classification, slide ID, timestamp, coordinates — and a bottom bar with serial number + page.

Banned

border-radius above 0.
Drop shadows, gradients, glassmorphism, glow.
Color other than charcoal, phosphor, hazard red, and at most one terminal-green element.
Sans-serif body fonts. Monospace is the body.
Pitch-deck "delight" — emoji, illustration, stock photography, friendly icons.
Light-mode slides anywhere in the same deck.
Slide transitions other than instant cuts.

Required slide archetypes (10–14 total)

Classification cover — giant numeral or call-sign on the left, redaction bar above the title, mono meta column on the right.
Briefing strip — eight-cell mono register with mission ID, dates, principals, classification.
Numbered objectives — three to five hairline-separated theses, each with >>> marker.
Telemetry grid — display: grid; gap: 1px of mono key-value cells; red highlight on the variant that breaks the trend.
Threat / risk register — hairline table with severity column in red.
Sequence / timeline — vertical mono list, 2-px vertical rule on the left, hazard markers on critical events.
Diagram / wiring — pure-CSS box-and-line schematic; rectangles with hairlines, ASCII arrows.
Specimen — single mono character or word at viewport-bleeding scale, used as a visual fulcrum.
Alert — diagonal hazard-stripe block (repeating-linear-gradient(135deg, ...)) with the most important sentence in the deck.
Audit log — append-only mono entries with timestamp + actor + event.
Closing colophon — operator, system, build, classification, sign-off line.

Motion

This aesthetic is mechanical and instant.

Cuts between slides — no fades. Optionally a 60ms flicker (opacity: 0.85 → 1).
A blinking caret on the cover (▌) and a single pulse on the live status dot. Nothing else moves.

Pre-flight

[ ] Substrate is charcoal, foreground is phosphor, only accent is hazard red
[ ] All border-radius is 0; all corners are 90°
[ ] Title slide includes classification + serial + timestamp + coordinates
[ ] At least one display: grid; gap: 1px telemetry module
[ ] Scanline overlay applied as fixed pointer-events-none element, opacity ≤ 0.08
[ ] At least one diagonal hazard-stripe alert block
[ ] ASCII syntax decoration ([ ... ], >>>, ///) appears at least four times across the deck
[ ] Numeric data uses tabular-nums + monospace
[ ] No emojis, no curves, no gradients, no shadow effects
[ ] Terminal green appears on zero or one element only — never as text body color

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