mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +07:00
* feat(skills): add taste-skill-derived web prototype and HTML PPT examples Adds five skills distilling Leonxlnx/taste-skill into the project's SKILL.md + example.html convention so authors can pick a deliverable shape (web prototype / deck) and a design register (editorial / soft / brutalist) without the LLM defaulting to Inter-on-white slop. - web-prototype-taste-editorial: minimalist-skill applied (warm monochrome, Instrument Serif x Inter Tight, hairline bento) - web-prototype-taste-soft: soft-skill applied (silver canvas, ambient mesh, double-bezel cards, button-in-button CTAs, spring motion) - web-prototype-taste-brutalist: brutalist-skill Swiss-print mode (newsprint, Archivo Black, viewport-bleeding numerals, hazard-red, ASCII syntax) - html-ppt-taste-editorial: 10-slide investor memo deck in the editorial register, compatible with the existing html-ppt static-preview pattern - html-ppt-taste-brutalist: 11-slide tactical-telemetry / CRT-terminal incident debrief deck (scanline overlay, hazard-red alerts, audit log) Each SKILL.md cites the upstream taste-skill source file and lists hard rules, banned patterns, required components, and a pre-flight checklist. * fix(i18n): register new taste skills in German content registry Adds the five new taste-derived skills to DE_SKILL_IDS_WITH_EN_FALLBACK so the German display content coverage test sees them. Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code) * fix(skills): close stray </small> in html-ppt-taste-brutalist telemetry cell The paged-engineers tcell's delta span on slide 04 closed with `</small></span>`, leaving the example with invalid HTML that downstream previews/validators can flag. Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)
4.7 KiB
4.7 KiB
| name | description |
|---|---|
| html-ppt-taste-brutalist | 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). |
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
#4AF626for 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, leading0.9. - Geometry:
border-radius: 0. Visible 1px hairlines (#2A2A28on charcoal). Usedisplay: grid; gap: 1pxover a hairline-colored background to render perfect cells. - Scanline overlay: subtle
repeating-linear-gradientat2px / 4pxcycle, 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-radiusabove 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: 1pxof 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-radiusis 0; all corners are 90° - Title slide includes classification + serial + timestamp + coordinates
- At least one
display: grid; gap: 1pxtelemetry 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