菜单
Kaustubh Hiware's personal slide preferences and recurring patterns. Load alongside frontend-slides when building or modifying presentations. Covers identity, component patterns, file conventions, image rules, and decorative vocabulary not defined in frontend-slides.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
Use only when user explicitly invokes /tra. Never infer or auto-load. Translates text between English and Japanese bidirectionally.
Add a rule or preference to ~/.claude/CLAUDE.md
基于 SOC 职业分类
| name | slides-preferences |
| description | Kaustubh Hiware's personal slide preferences and recurring patterns. Load alongside frontend-slides when building or modifying presentations. Covers identity, component patterns, file conventions, image rules, and decorative vocabulary not defined in frontend-slides. |
This skill is an addendum to frontend-slides. It does not replace it — load both. These rules override or extend frontend-slides defaults wherever they conflict.
index.html — markup only, no inline CSS or JS blocksstyles.css — all styles (never talk.css or any other name)main.js — all JavaScript (or inline at bottom of HTML if trivial)./images/ — all images (never ./assets/ or ./img/)G-XXX) required on all publicly hosted decks — place in <head>.Every slide has two footer elements on the same baseline — same font, size, weight, color, and vertical position:
<div class="slide-event">JSConf · 2026.06.15</div>
<div class="slide-number">01</div>
.slide-event, .slide-number {
position: absolute;
bottom: 52px;
font-weight: 300;
font-size: 20px;
letter-spacing: 0.1em;
color: var(--chalk-faint); /* or --ink-faint */
}
.slide-event { left: 76px; }
.slide-number { right: 76px; }
01, 02, 03. Never 1/12 or 1 of 12.Event Name · YYYY.MM.DD.Every deck's title slide must show:
Kaustubh Hiware — displayed alone, no job title, no role label, no "Conference Talk" eyebrow.Event Name · YYYY.MM.DD (middle dot separator, date as 2026.06.15).<p class="title-meta">
<span>Kaustubh Hiware</span>
<span class="meta-dot">·</span>
<span>JSConf · 2026.06.15</span>
</p>
The last slide is a structural mirror of the first:
layout-title / layout-closing)deco-circles)↩ Restart button (bottom-center) and All slides link (bottom-right)Do not design a different closing slide. If in doubt: copy the title slide structure, add restart + all-slides.
On the last slide only. Bottom-center of stage.
<button class="restart-btn reveal" onclick="deck.show(0)">↩ Restart</button>
.restart-btn {
position: absolute;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
background: transparent;
border: 2px solid var(--accent);
border-radius: 999px;
padding: 18px 56px;
color: var(--accent);
font-size: 22px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
animation: restart-pulse 2s ease-out infinite;
}
.restart-btn:hover {
background: var(--accent);
color: var(--bg);
animation: none;
}
@keyframes restart-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
70% { box-shadow: 0 0 0 28px rgba(var(--accent-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
The pulse animation is non-negotiable — it exists because it makes the button obvious to the presenter without being distracting to the audience.
On the first and last slide of every deck.
<a href="../index.html" class="all-slides-btn">All slides</a>
.all-slides-btn {
position: absolute;
bottom: 120px;
right: 76px;
border: 1.5px solid rgba(var(--accent-rgb), 0.4);
border-radius: 999px;
padding: 14px 40px;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
text-decoration: none;
}
.all-slides-btn:hover {
background: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
Present on almost every non-title slide. Acts as a section breadcrumb above the slide title.
<div class="arc-label reveal d1">
<span class="arc-label-text">Section Name</span>
<span class="section-line"></span>
</div>
section-line (60px wide, 1px high horizontal rule in accent color) must only appear immediately after arc-label-text. Remove any orphaned section-line spans."Presenting Data · 1/4", "Presenting Data · 2/4".27px, letter-spacing: 0.22em, uppercase, accent color.These elements belong in specific locations. Do not scatter them across content slides.
.deco-circles)Title slide and closing slide only. Positioned off the right edge.
<div class="deco-circles">
<div class="deco-circle c1"></div> <!-- 520×520, faint border only -->
<div class="deco-circle c2"></div> <!-- 340×340, dim border only -->
<div class="deco-circle c3"></div> <!-- 110×110, filled at ~8% opacity -->
</div>
.arc-bg-number)Large decorative number on arc/sequential slides. Right-side, vertically centered, behind content.
.arc-bg-number {
position: absolute;
right: 80px;
top: 50%;
transform: translateY(-50%);
font-size: 380px;
font-weight: 900;
opacity: 0.04;
color: var(--accent);
line-height: 1;
pointer-events: none;
user-select: none;
}
6px wide, full-height, left edge, accent color gradient, z-index: 2. Present on all content slides.
<div class="title-bracket-deco">< 🎤 ></div>
Style: 132px display serif, accent color, opacity: 0.75. This is the deck's visual signature — keep it.
Both dark and light themes require:
<canvas class="matrix-canvas"> rendered behind all slides at opacity: 0.07–0.09 — creates animated ambient texture.slide::before pseudo-element with a repeating CSS grid pattern at ~3% opacity — creates subconscious depth.These are nearly invisible at normal viewing distance. Do not remove them to simplify code.
Beyond frontend-slides defaults, every deck needs:
history.pushState on every slide change (#1, #2, …). popstate listener for browser back/forward. Hash read on init so deep-links work.3px fixed bar at the bottom of the viewport (outside the 1920×1080 stage). Fills as slides advance. transition: width 0.4s var(--ease-expo). Accent color at opacity: 0.55..progress-bar {
position: fixed; bottom: 0; left: 0;
height: 3px;
background: var(--accent);
transition: width 0.4s var(--ease-expo);
z-index: 2000;
opacity: 0.55;
}
For talks with distinct sections, the same outline slide repeats at every section transition — full list, one item .active at a time:
<ol class="outline-list">
<li class="outline-item active reveal d2">
<span class="outline-num">01</span>Types of Public Speaking
</li>
<li class="outline-item reveal d3">
<span class="outline-num">02</span>Structure
</li>
…
</ol>
Inactive items use var(--ink-faint). Active item uses full var(--ink). A .ghost-num element (400px serif, rgba(accent, 0.06)) shows the current section index in the background.
Kalam. Caveat is rejected — do not suggest or use it.text-transform: uppercase, letter-spacing: 0.18–0.22em.<em> inside headings maps to accent color in addition to italic.object-fit: contain, not cover, unless the user explicitly asks for a full-bleed photo slide.<head>:
<link rel="preload" as="image" href="./images/photo.jpg">
reveal animation classes to images — they interfere with preloading.:root. No magic values inline.var(--ease-expo) is cubic-bezier(0.16, 1, 0.3, 1) — define it at :root.Colors are context-driven, not aesthetic defaults. When choosing a color scheme for a new deck, ask about real-world context: outfit, venue lighting, event brand, audience. A new context may warrant a new palette entirely.
When the user provides a markdown file to convert into slides:
arc-label-text (section breadcrumbs) since those are navigation chrome, not content.--- in the markdown. Each --- = one slide boundary. Do not merge, re-split, or second-guess the user's slide breaks.