メニュー
Use when building standalone HTML/CSS/JS presentation slide decks — self-contained single-file decks with viewport-fit layout, keyboard navigation, and browser Print-to-PDF export.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-slides |
| description | Use when building standalone HTML/CSS/JS presentation slide decks — self-contained single-file decks with viewport-fit layout, keyboard navigation, and browser Print-to-PDF export. |
| license | MIT |
| metadata | {"author":"Petr Král (pekral.cz)"} |
prefers-reduced-motion support.One HTML file. One <section class="slide"> per slide inside a <main>. Theme values live in CSS custom properties so they are trivial to change.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Deck</title>
<style>
:root {
--bg: #0f172a; --fg: #f8fafc; --accent: #38bdf8;
--font: system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font); }
/* One slide = one viewport. Active slide shown, others hidden. */
.slide {
position: fixed; inset: 0;
height: 100vh; height: 100dvh;
overflow: hidden;
display: none; flex-direction: column;
justify-content: center; align-items: flex-start;
padding: clamp(2rem, 6vw, 6rem);
gap: clamp(0.75rem, 2vh, 2rem);
}
.slide[aria-current="true"] { display: flex; }
/* Type and spacing scale with the viewport so nothing overflows. */
.slide h1 { font-size: clamp(2rem, 6vw, 5rem); line-height: 1.05; }
.slide h2 { font-size: clamp(1.5rem, 4vw, 3rem); }
.slide p, .slide li { font-size: clamp(1rem, 2.2vw, 1.6rem); line-height: 1.4; max-width: 60ch; }
.slide ul { padding-left: 1.2em; display: grid; gap: clamp(0.4rem, 1.2vh, 1rem); }
.accent { color: var(--accent); }
.progress {
position: fixed; bottom: 0; left: 0; height: 4px;
background: var(--accent); transition: width .3s ease;
}
/* Enter animation, disabled for reduced motion. */
.slide[aria-current="true"] > * { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.slide[aria-current="true"] > *, .progress { animation: none; transition: none; }
}
</style>
</head>
<body>
<main>
<section class="slide" aria-current="true">
<h1>Deck <span class="accent">Title</span></h1>
<p>Subtitle or tagline.</p>
</section>
<section class="slide">
<h2>Key points</h2>
<ul><li>First point</li><li>Second point</li><li>Third point</li></ul>
</section>
</main>
<div class="progress" id="progress"></div>
<script>
const slides = [...document.querySelectorAll('.slide')];
let current = slides.findIndex(s => s.getAttribute('aria-current') === 'true');
if (current < 0) current = 0;
function show(i) {
current = Math.max(0, Math.min(slides.length - 1, i));
slides.forEach((s, n) => s.setAttribute('aria-current', String(n === current)));
document.getElementById('progress').style.width =
((current + 1) / slides.length * 100) + '%';
location.hash = '#' + (current + 1);
}
document.addEventListener('keydown', e => {
if (['ArrowRight', 'ArrowDown', 'PageDown', ' '].includes(e.key)) { e.preventDefault(); show(current + 1); }
if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(e.key)) { e.preventDefault(); show(current - 1); }
if (e.key === 'Home') show(0);
if (e.key === 'End') show(slides.length - 1);
});
const fromHash = parseInt(location.hash.slice(1), 10);
show(Number.isFinite(fromHash) ? fromHash - 1 : current);
</script>
</body>
</html>
.slide uses height: 100vh; height: 100dvh; overflow: hidden;.clamp() — never a fixed pixel font that overflows small screens.-clamp(...).Validate at: 1920x1080, 1280x720, 768x1024, 375x667, 667x375.
clamp()-based padding and gaps.main, section, real h1/h2, ul/li.--fg and --bg.prefers-reduced-motion by disabling animation and transitions.| Slide type | Limit |
|---|---|
| Title | 1 heading + 1 subtitle + optional tagline |
| Content | 1 heading + 4–6 bullets or 2 short paragraphs |
| Feature grid | 6 cards max |
| Code | 8–10 lines max |
| Quote | 1 quote + attribution |
| Image | 1 image constrained by the viewport |
The default path uses the browser's built-in Print-to-PDF. Add a print stylesheet so every slide becomes one page.
@media print {
@page { size: 1280px 720px; margin: 0; }
.progress { display: none; }
.slide {
position: static; display: flex !important;
height: 720px; width: 1280px;
break-after: page;
}
}
Then: open the deck in a browser, Print (Cmd/Ctrl+P), choose "Save as PDF", set margins to None and background graphics on.
Open the deck with the platform opener: macOS open deck.html, Linux xdg-open deck.html, Windows start "" deck.html.
Optional, if available: a headless browser (e.g. a Chromium --print-to-pdf invocation) can render the same print stylesheet to PDF unattended. Do not require or install it — the browser Print-to-PDF path always works.
Use when you need an evidence-first, read-only inventory of every automation in this repo (GitHub Actions, Claude Code hooks/settings, MCP servers, composer scripts, the bundled CLI installer, the skills catalog, scheduler/cron) before changing any of them, classifying each as live, broken, or redundant and recommending keep/merge/cut/fix.
Use when choosing how to run Claude Code autonomously on this project — from a single sequential pipeline to multi-agent DAG orchestration. A reference catalog of loop patterns anchored to this repo's real tooling (resolve-issue, autoresolve-oldest-github-issue, code-review-github, process-code-review, merge-github-pr, /loop), with composer build / composer skill-check as the quality gate between iterations.
Use when a goal is vague speed ("make it faster", "reduce p95", "cut query time") and you need a bounded, measured loop that promotes only verified, correctness-preserving wins instead of guessed micro-tweaks.
Use when measuring performance baselines or detecting regressions before and after a change in a Laravel app — page Core Web Vitals, API latency percentiles, build/test velocity, and DB query timing, stored as git-tracked baselines for team comparison.
Use when a single objective is too large for one pull request and must span multiple sessions or PRs. Turns the objective into a sequenced construction plan of 3-12 one-PR steps, each with a cold-start context brief, dependency edges, and exit criteria, then reviews it adversarially and registers it as Markdown.
Use when refactor PHP classes to improve structure, readability, and maintainability while preserving behavior