Skip to content
cccskills
FreePublished on GitHubEnglish overview

html-ppt-taste-brutalist

Create 16:9 HTML presentations for project debriefs, security reviews, and incident reports. A dark CRT terminal style combines monospaced text, red alerts, data grids, timelines, and audit logs to present dense operational information.

OriginalShow the original description

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

AI rating100/ 100See how to install

Good for

  • Presenting project debriefs
  • Reporting infrastructure incidents
  • Organizing security review findings
  • Explaining operational procedures

Overview

What it does

Creates 16:9 HTML slides for project retrospectives and incident reports in the style of a dark CRT terminal. A charcoal background, white monospaced text, and red warnings support presentations that prioritize information density. The deck contains 10–14 slides, using a cover, objectives, numerical summaries, risk tables, timelines, architecture diagrams, and audit logs. Every slide also includes fields for information such as classification and time.

When it helps

Use it to explain infrastructure operations, present security reviews, or report after a project ends. It suits material where facts and the sequence of events need a clear structure. The consistent terminal appearance also helps draw attention to important warnings and figures that depart from a trend.

Example requests

  • “Turn the incident timeline and response into HTML slides with a timeline and audit log.”
  • “Organize these security review findings with a risk table and warning slide.”

Notes

The design uses a dark CRT appearance throughout; light slides are not mixed into the same presentation. Body text uses a monospaced font. Rounded corners, shadows, and photographs are excluded. Slide changes are normally instant.

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?
AGoodIt clearly identifies incident reporting and similar uses, with dark CRT-style 16:9 slides as the output.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
AGoodIt specifies a 10–14-slide structure, color codes, CSS rules, and a final checklist.
SafetyAre sending data, deleting files, and running commands disclosed?
AGoodThe instructions concern HTML and CSS creation, with no transmission, deletion, or credential reading.
Easy setupDoes it need few tools or API keys, and are they documented?
AGoodIt centers on HTML and CSS, with no API key, paid service, or specific operating system required.

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.7 KB
  • example.html37.4 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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)

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

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