frontend-slides-code

原文涵盖的主题

• Frontend Slides as Code (Interactive HTML/CSS Decks)
• Quick Start
• When to Use
• Best Practices
• Dependencies
• Examples
• Step-by-Step
• Validation

Zero-dependency 16:9 browser slide decks with keyboard navigation, action headlines, live code copy, and @media print PDF export. Building a technical keynote, architecture review, or startup pitch deck as a single self-contained HTML file Embedding live interactive demos, syntax-highlighted code blocks, or animated SVG architecture diagrams directly inside slides Version-controlling presentation content in Git alongside code with clean diffs and zero proprietary binary lock-in Exporting pixel-accurate 16:9 PDF handouts directly from Chromium via @media print rules Use the Assertion-Evidence model: every slide must be a complete declarative claim ('Karpenter Cut Compute Spend by 42%'), never a topic label ('Cost Overview'). Cap slide density strictly: maximum 1 core visual (chart, diagram, or code block) + 3 concise bullet points per slide. Lock viewport aspect ratio to 16:9 (aspect-ratio: 16 / 9; max-width: 1280px) with clamp() typography so text never overflows or truncates. Include @media print rules (@page { size: 16in 9in; margin: 0; }) that display all slides sequentially with page-break-after: always. Provide a progress bar, slide counter (03 / 12), keyboard shortcuts (Arrow

这里只展示节选，请以完整原文和当前要求为准。