Files
bc6a246c65 feat(slides): enhance deck project experience (#5083)
* feat(deck): enhance slide deck functionality with speaker notes and navigation improvements

- Added a switch for including speaker notes in slide decks, defaulting to true.
- Updated keyboard navigation to include 'R' for resetting to the first slide.
- Implemented click navigation for half-slide transitions.
- Enhanced the deck framework to support hidden programmatic prev/next controls.
- Improved handling of file inputs in question forms to support file submissions.

This update aims to improve user experience in creating and presenting slide decks, ensuring better accessibility and functionality.

* feat(artifacts): enforce semantic naming for user-facing deliverables

- Updated guidelines to require semantic filenames derived from user briefs for new artifacts, moving away from defaulting to `index.html`.
- Enhanced documentation to clarify naming conventions for HTML files, emphasizing the use of descriptive names like `investor-pitch-deck.html`.
- Adjusted prompts and hints across the system to reflect these changes, ensuring consistency in user-facing outputs.
- Improved test coverage to validate the new naming conventions and ensure proper implementation in various contexts.

This update aims to enhance clarity and usability in project file management, promoting better organization and user experience.

* feat(file-viewer): enhance speaker notes display and improve file workspace functionality

- Updated the speaker notes section to include a styled placeholder for empty notes, improving user experience.
- Changed the icon in the file workspace from "slides" to "panel-left" for better clarity.
- Introduced new sub-category filtering options in the file workspace, enhancing organization and navigation.
- Improved styling for the page creator search input and added visual feedback for loading states.

These changes aim to enhance usability and visual consistency across the file viewer and workspace components.

* test(web): align workspace tests with pages switcher

* test(e2e): open design files through pages menu

* fix(deck): keep source mode reachable

* fix(workspace): restore uploaded file tabs

* feat(deck-thumbnail): implement virtualized thumbnail rail for improved performance

- Introduced a new `DeckThumbnailRail` component to optimize the rendering of deck thumbnails, reducing memory usage and improving load times.
- Enhanced the `FileViewer` to integrate the new thumbnail rail, allowing for lazy loading of thumbnails based on viewport visibility.
- Added tests for the `DeckThumbnailRail` to ensure correct functionality and caching behavior.
- Updated styles for better visual consistency and performance during thumbnail rendering.

These changes aim to enhance user experience by providing a smoother and more efficient way to navigate through deck slides.

* feat(deck): enhance deck rendering with thumbnail support and keyboard shortcuts

- Integrated `DeckSlideThumbnail` for rendering individual slides in a shadow root, improving performance and reducing main-thread load.
- Updated `DeckThumbnailRail` to utilize the new thumbnail component, allowing for efficient slide navigation.
- Implemented keyboard shortcuts for deck navigation, enhancing user experience during presentations.
- Added tests for `buildDeckRenderInput` to ensure proper functionality of the deck stage fallback.
- Improved styling for loading states in the viewer, providing a smoother visual experience.

These changes aim to optimize the deck viewing experience by reducing resource consumption and enhancing interactivity.

* feat(deck): improve thumbnail loading and speaker notes editing experience

- Refactored `DeckSlideThumbnail` to enhance loading states with a new shimmer effect, improving visual feedback during thumbnail rendering.
- Updated `DeckThumbnailRail` to manage loading states for thumbnails, ensuring a smoother user experience.
- Simplified the speaker notes editing interface by removing the toggle switch, allowing direct editing from the notes body.
- Enhanced accessibility by adding roles and focus states to speaker notes elements.
- Added tests to verify the new loading states and speaker notes functionality.

These changes aim to optimize the user experience in deck navigation and speaker notes management, providing a more intuitive and responsive interface.

* feat(file-viewer): enhance version export functionality and speaker notes interaction

- Introduced new export options for file versions, including PDF and image formats, improving the ability to download and share content.
- Implemented a streamlined process for exporting version content, with progress indicators and error handling for a better user experience.
- Enhanced speaker notes editing by refining event handling to prevent unintended focus shifts, ensuring a smoother editing experience.
- Updated styles for improved visual consistency in the file version download interface.
- Added tests to verify the functionality of version exports and speaker notes interactions.

These changes aim to optimize the file viewer's usability and enhance the overall experience when managing and exporting project files.

* fix(web): polish export menus and creator filters

* fix(file-viewer): fall back to preview exports

* test(file-viewer): cover version export fallbacks

* test(file-viewer): assert loading skeleton by role

* fix(file-viewer): restore html source mode affordance

* fix(file-viewer): capture full version fallback snapshots

* docs: trim slides handoff eof

* test(exports): cover full preview snapshot requests

* test(file-viewer): account for snapshot options arg

* refactor(file-viewer, file-workspace): streamline export functions and enhance page creator dialog visibility

* test(file-workspace): enhance slide template creation and mock plugin responses

* feat(export): add support for versioned exports and enhance HTML export functionality

* feat(export): implement versioned export support across multiple formats and enhance related tests

* feat(file-viewer): enhance manual edit functionality with commit sequence tracking and add test for inline text session saving

* style(speaker-notes): update filmstrip and thumb-frame styles for improved responsiveness and add corresponding tests

* feat(file-viewer): enhance comment composer functionality with portal metrics and improve draw toolbar layout for mobile views

* feat(analytics): track slide deck viewing experience

Add analytics for the new deck/slides experience introduced in this PR:
the deck viewer surface, in-deck slide navigation, thumbnail rail, and
speaker-notes authoring. Presentation entry stays on the existing
present_popover click to avoid double-counting.

- contracts: DeckViewerSurfaceViewProps (surface_view),
  DeckViewerClickProps (ui_click), SpeakerNotesSaveResultProps
  (new speaker_notes_save_result event), wired into the event unions.
- web: track* wrappers + fire helpers in FileViewer — deck_viewer
  surface_view on deck mount, slide_prev/next/reset, thumbnail_select,
  thumbnail_rail_toggle (expand/collapse), speaker_notes_edit, and
  speaker_notes_save_result (preview + presenter surfaces).
- tests: deck analytics suite asserting the emitted (event, props) pairs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(file-viewer, file-workspace): enhance export toast functionality and improve localization for page creation

* feat(home-view, plugins-home-section, agent-skill): update default facet preference, enhance category selection handling, and improve localization support

- Set `preferDefaultFacet` to true in HomeView component for better user experience.
- Introduced `handlePickCategory` function in PluginsHomeSection to manage category selection based on card layout visibility.
- Updated PRIMARY_CATEGORIES to reflect the new order and added localization for titles and descriptions in adaptAgentSkill.
- Enhanced tests to verify the correct handling of display copy and tags from SKILL frontmatter.

* feat(plugins-home, file-workspace): introduce commercial category labels and enhance deck handling

- Added a new module for resolving and localizing commercial category labels for plugins.
- Updated the FileWorkspace and PluginCard components to display the commercial category label on deck cards.
- Enhanced the PageCreatorPresetFrame to adjust frame classes based on deck presets.
- Refactored subcategory handling in facets to align with the new commercial category taxonomy.
- Improved localization support for new category labels across multiple languages.

* feat(deck-preview): implement deck preview scaling and enhance home hero layout

- Introduced `useDeckPreviewScale` hook to manage scaling of deck previews within a fixed 1280×720 logical viewport, ensuring proportional rendering across various templates.
- Updated `FileWorkspace`, `HomeHero`, and `PluginCard` components to utilize the new scaling functionality for improved visual consistency.
- Enhanced the layout of the home hero section to accommodate new subtype chips and descriptions, including a "More" dropdown for overflow handling.
- Improved localization support for new UI elements across multiple languages.

* fix(PreviewModal): clarify sidebar prop documentation and update test description

- Updated the documentation for the `PreviewSidebar` interface to specify that the sidebar's stage-edge handles are not shown when the sidebar prop is absent.
- Modified the test suite description for `PreviewModal` to be more concise and relevant.

* test(e2e): select prototype visual card

---------

Co-authored-by: free666799 <293857035+free666799@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-10 09:41:47 +00:00

8.7 KiB
Raw Permalink Blame History

name, en_name, zh_name, description, en_description, zh_description, tags, triggers, od, inputs, parameters, outputs, capabilities_required, example_prompt
name en_name zh_name description en_description zh_description tags triggers od inputs parameters outputs capabilities_required example_prompt
kami-deck Turn a Study into a Lab Meeting Deck like a Senior Postdoc 像资深博士后一样做组会研究汇报 A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI. A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI. 像资深博士后一样做组会研究汇报——一份可商业交付的学术研究 Deck,围绕真实主题、证据链与决策目标组织。
academic-research
academic-review-deck
research
grant
review
decision-deck
commercial-slide-agent
kami-deck
academic-review-deck
academic-research
Turn a Study into a Lab Meeting Deck like a Senior Postdoc
像资深博士后一样做组会研究汇报
research
grant
review
html deck
html slides
surface mode featured audience tone scale preview design_system craft category scenario example_prompt
web deck 4 founders, researchers, design studios, conference talks editorial, restrained, print-first 6-15 viewport-locked slides
type entry
html index.html
requires
false
requires
typographic-rhythm
pixel-discipline
academic-research research Create "Turn a Study into a Lab Meeting Deck like a Senior Postdoc" as a decision-grade Academic research deck in this template's own visual system. Subject: A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Audience: lab group, PI. First ask only for missing essentials: audience, decision target, source-of-truth materials, deadline, and must-keep numbers. Then produce the slide plan, written slides, visual direction, speaker-ready structure, and a critic pass against this rubric: does the deck prove novelty without overclaiming.
id label
brand Brand identity (shared across slides)
id label
deck_title Deck title shown in the per-slide chrome
id label
slides Ordered list of typed slides (cover · chapter · content · stats · quote · cta · end)
id label
language Primary language stack
language
type values default description
enum
en
zh-CN
ja
en Sets `--serif` to Charter / TsangerJinKai02 / YuMincho respectively.
path description
<out>/index.html Self-contained kami deck with horizontal swipe pagination.
file-write
Build me a 9-slide kami-style internal deck for "Hokuto Research" — a Q1 portfolio review. Cover slide on ink-blue with the firm name. Chapter dividers between Macro, Equities, and Outlook. Three content slides with ink-blue numbered headings. One stats slide showing AUM / IRR / fund count. One closing CTA. End card with the firm signature. Japanese language stack.

kami-deck

Sister skill to kami-landing. Produces a single self-contained HTML file: a horizontal magazine-style swipe deck in the kami (紙 / 纸) design system — print rhythm, ink-blue accent, serif at one weight, no italic, no cool grays.

The navigation model is intentionally borrowed from the guizang-ppt skill — ←/→ arrow keys, wheel / swipe, ESC for the overview grid. The aesthetic stays kami: parchment content slides, ink-blue cover and chapter slides, serif everywhere.

Design system source of truth: design-systems/kami/DESIGN.md. Read it before shipping. Tokens, type rules, and forbidden colors all live there. Slide-specific scale ratios (macro × 1.6, letter-spacing × 0.6 vs. print) are documented in §3 "Hierarchy" and §5 "Layout Principles · Slides".

What you get

  • N viewport-sized slides (6-15 is the sweet spot) laid out horizontally on one transformed flex track.
  • Cover and chapter slides flip background to ink-blue (#1B365D) with ivory text — the only place dark theme is used.
  • Content / stats / quote / CTA slides stay on parchment (#f5f4ed) with serif at weight 500.
  • Per-slide chrome strip: brand mark · deck title · live slide counter (01 / 09).
  • Tabular-nums on every counter, metric, page number.
  • Coral-free — kami's accent is ink-blue. Progress bar and dot nav are ink-blue too.
  • Keyboard / wheel / touch nav, ESC overview grid, dot indicator.
  • Multilingual stack — EN / zh-CN / ja, set on :root via the language parameter.

Slide types

Kind Background Use it for
cover ink-blue Title plate at the start. Centered serif title + tagline.
chapter ink-blue Roman/Arabic numeral chapter divider.
content parchment Section number + title + body + optional bullets.
stats parchment 3-4 metric cells (value · label · sub).
quote parchment Pull quote with ink-blue left rule + author signature.
cta parchment Closing pitch + 1-2 buttons.
end ink-blue Mega serif kicker word + colophon footer.

A typical 11-slide deck:

1. cover     — ink-blue title plate
2. chapter   — "01 / Why now"
3. content   — manifesto
4. content   — capabilities + bullets
5. stats     — 4 numbers
6. chapter   — "02 / How it feels"
7. content   — method
8. content   — selected work
9. quote     — testimonial
10. cta      — primary action
11. end      — ink-blue kicker

Workflow

1. Gather the brief

Ask in two rounds (don't dump the whole list at once):

  1. Identity round — name, mark, tagline, location, edition, language.
  2. Content round — for each slide, kind + the typed fields.

2. Pick the language stack

Same as kami-landing: EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja → YuMincho. JA also overrides --olive to #4d4c48 because YuMincho strokes are thinner.

3. Write index.html

Output a single file with all CSS inline. Mirror the structure of example.html. Use only the tokens from design-systems/kami/DESIGN.md.

The runtime script (keyboard / wheel / touch nav, dot indicator, progress bar, ESC overview) should match the model documented in open-design-landing-deck/scripts/compose.ts. Do not reuse the open-design-landing-deck CSS; the visual language is different.

4. Self-check

  • All cover / chapter / end slides use ink-blue background (#1B365D) with ivory text. All other slides are on parchment.
  • Ink-blue covers ≤ 5% of any parchment slide's surface.
  • Slide titles use serif weight 500 only. No italic.
  • All numeric stacks (counter, metrics, page numbers) carry font-variant-numeric: tabular-nums.
  • Press → / Space / scroll. Smoothly slides one viewport to the right; dot nav advances; the ink-blue progress bar ticks forward.
  • Press Esc. Overview grid appears with scaled thumbnails.
  • Resize to 1080px and 640px. Cover / content collapse to a single column; dot nav still works.
  • Lighthouse: contrast AA, font-display swap, no layout shift.

Boundaries

  • Do not introduce a second accent color. Pick ink-blue or pick nothing.
  • Do not use italic anywhere — emphasis swaps to ink-blue.
  • Do not use rgba() for tag fills; pre-blend over parchment and use solid hex from the table in design-systems/kami/DESIGN.md §2.
  • Do not add a router. This is a single-file artifact.
  • Do not reuse Atelier Zero collage imagery (the open-design-landing visual system). Kami is gradient-free, image-light, and hierarchy is carried by type.

See also