Skip to content

Add Imaginarium deck presentation with deck-stage web component#1

Closed
redpillar75 wants to merge 16 commits into
mainfrom
claude/install-agent-skills-xpmqI
Closed

Add Imaginarium deck presentation with deck-stage web component#1
redpillar75 wants to merge 16 commits into
mainfrom
claude/install-agent-skills-xpmqI

Conversation

@redpillar75

Copy link
Copy Markdown
Owner

Summary

This PR introduces a complete presentation deck for "Intro to Imaginarium — Blueprints for the Planetarium" along with a reusable <deck-stage> web component for rendering HTML-based slide decks.

Key Changes

New Files

  • imaginarium-deck/deck.html — A 12-slide presentation deck featuring:

    • Cover slide with course branding and QR code
    • Table of contents
    • Statistics and key metrics
    • Three-pillar feature overview
    • Course roadmap with stacked bar chart
    • Section dividers with large typography
    • Pull quote with attribution
    • Call-to-action slides
    • Deep-dive content sections with multi-column layouts
    • Learning arc visualization
    • Project process timeline
    • Skills matrix table

    The deck uses a custom design system with:

    • Space Grotesk and JetBrains Mono typography
    • CSS Grid-based layouts (12-column, 8-row per slide)
    • Accent color (#E6FF3D) for emphasis
    • Modular card and panel components
    • Print-friendly styling for PDF export
  • imaginarium-deck/deck-stage.js — A reusable web component (<deck-stage>) that provides:

    • Keyboard navigation (arrow keys, Page Up/Down, Space, Home/End, number keys)
    • Mobile tap zones for touch navigation
    • Speaker notes support via JSON in a <script id="speaker-notes"> tag
    • Responsive scaling with letterboxing to fit any viewport
    • Print-to-PDF support (one slide per page at authored dimensions)
    • Slide change lifecycle events (slidechange CustomEvent)
    • Persistent slide state via URL hash
    • Bottom-center overlay with slide counter and navigation hints
    • Accessibility features (ARIA labels, focus management)
    • Optional noscale attribute for DOM capture (PPTX export)

Implementation Details

  • The deck component uses light DOM for slides (not shadow DOM), so authored CSS applies directly while the component's shadow DOM handles layout and chrome.
  • Slides are hidden with visibility: hidden and opacity: 0 rather than unmounted, preserving state across navigation.
  • The <deck-stage> scales the canvas using CSS transform: scale() for crisp rendering at any viewport size.
  • Print styles use @page rules injected into the document head to ensure proper pagination.
  • The component dispatches slidechange events with detailed metadata (index, previous index, total count, reason) for integration with external systems.

https://claude.ai/code/session_011xBtKWkDsmQMgrf2cnUcVK

claude and others added 16 commits May 19, 2026 18:18
12-slide Neo-Grid Bold HTML deck for Red Pillar's Summer 2026 classroom
kickoff. Covers course premise, semester numbers, three pillars (Imagine /
Blueprint / Build), course arc chart, project process, learning curve, and
skills matrix. Self-contained with deck-stage.js navigation runtime.

https://claude.ai/code/session_011xBtKWkDsmQMgrf2cnUcVK
Adds the Baker Agent subagent from chefkannofriend-source/mbbb-baker-agent:
- scripts/bakers_percent.py: Baker's % calculator and recipe lookup CLI
- data/recipe-library/baker/knowledge/: 12 technique reference files
- data/recipe-library/baker/_md/: recipe library (example brioche included)

Agent definition installed globally at ~/.claude/agents/baker.md
Docker Compose stack:
- bbilly1/tubearchivist: main app (port 8000)
- bbilly1/tubearchivist-es: Elasticsearch for video indexing
- redis: task queue

Setup: copy tubearchivist/.env.example → tubearchivist/.env,
fill in passwords and TA_HOST, then: docker compose up -d
Self-hosted short-video generation tool with Streamlit WebUI (port 8501)
and FastAPI backend (port 8080). Supports 15+ LLM providers, Pexels/Pixabay
video sources, edge-tts/Whisper subtitles, and Docker Compose deployment.

https://claude.ai/code/session_011xBtKWkDsmQMgrf2cnUcVK
Expands original 72-tool PDF into a fully interactive Swiss-design HTML guide:
- 80+ tools across 4 tiers with detailed descriptions and use cases per tool
- New tools added: Higgsfield AI MCP, HuggingFace MCP, Domain Tools MCP
- Full 5-pillar mapping updated with June 2026 tools
- 8-scene interactive presentation (prev/next/dots/keyboard nav)
- Theme toggle (paper/dark), palette cycle, print-to-PDF button
- Your custom stack mapping table with tier placement and unlock descriptions
- 72-hour bootcamp learning path updated with new tools

https://claude.ai/code/session_011xBtKWkDsmQMgrf2cnUcVK
@redpillar75

Copy link
Copy Markdown
Owner Author

Superseded by focused replacement PR #2. The original branch is retained as a backup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants