Skip to content

fix: require viewport-base.css in Mode C #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
snvtac wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: require viewport-base.css in Mode C #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c3a623
fix: require viewport base in mode c
snvtac Jun 25, 2026
6654dd9
docs: clarify mode c viewport baseline
snvtac Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,7 @@ This skill uses **progressive disclosure** — the main `SKILL.md` is a workflow
| `bold-template-pack/selection-index.json` | Compact bold template metadata for candidate selection | Phase 2 (style selection) |
| `bold-template-pack/templates/*/preview.md` | Tiny style cards for shortlisted bold previews | Phase 2 after shortlisting |
| `bold-template-pack/templates/*/design.md` | Full design system for the selected bold template | Phase 3 after user selection |
| `viewport-base.css` | Mandatory fixed-stage CSS | Phase 3 (generation) |
| `viewport-base.css` | Mandatory fixed-stage CSS | Phase 3 and Mode C preflight |
| `html-template.md` | HTML structure and JS features | Phase 3 (generation) |
| `animation-patterns.md` | CSS/JS animation reference | Phase 3 (generation) |
| `scripts/extract-pptx.py` | PPT content extraction | Phase 4 (conversion) |
Expand Down
15 changes: 8 additions & 7 deletions SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,14 @@ Determine what the user wants:

### Mode C: Modification Rules

When enhancing existing presentations, fixed-stage fitting is the biggest risk:
When enhancing existing presentations, first preserve the required viewport baseline, then manage fixed-stage fitting:

1. **Before adding content:** Count existing elements, check against density limits
2. **Adding images:** Fit them inside the 1920×1080 slide canvas. If slide already has max content, split into two slides
3. **Adding text:** Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
4. **After ANY modification, verify:** the slide stage remains 16:9, no text overflows its card, no panels overlap, and screenshots look correct at 1280×720 plus one phone viewport
5. **Proactively reorganize:** If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked
1. **Before any modification:** Read `viewport-base.css`, then create or update a single dedicated `/* viewport-base.css BEGIN */` / `/* viewport-base.css END */` block in a `<style>` tag in `<head>`. Treat the baseline as missing or incomplete unless the block contains the FULL `viewport-base.css` contents, including `html, body`, `.deck-viewport`, `.deck-stage`, `.slide`, `.slide.active` / `.slide.visible`, media bounds, print rules, and reduced-motion rules. After installing the full block, scan later CSS and remove or rewrite any conflicting fixed-stage or slide-state declarations on `.deck-viewport`, `.deck-stage`, `.slide`, `.slide.active`, or `.slide.visible` (especially display-based slide switching, width/height/inset/position/overflow/visibility/opacity/pointer-events/z-index/transform-origin). Theme variables, backgrounds, typography, and slide content styles may override normally; fixed-stage and slide-state properties must come from `viewport-base.css`.
2. **Before adding content:** Count existing elements, check against density limits
3. **Adding images:** Fit them inside the 1920×1080 slide canvas. If slide already has max content, split into two slides
4. **Adding text:** Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
5. **After ANY modification, verify:** the dedicated `viewport-base.css` block exists exactly once with the full contents, no later CSS overrides fixed-stage or slide-state properties, the slide stage remains 16:9, no text overflows its card, no panels overlap, and screenshots look correct at 1280×720 plus one phone viewport
6. **Proactively reorganize:** If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked

**When adding images to existing slides:** Move image to a new slide or reduce other content first. Never add images without checking if existing content already fills the 1920×1080 slide stage.

Expand Down Expand Up @@ -372,7 +373,7 @@ This captures each slide as a screenshot and combines them into a PDF. Perfect f
| [bold-template-pack/selection-index.json](bold-template-pack/selection-index.json) | Compact bold template metadata for candidate selection | Phase 2 (style selection) |
| [bold-template-pack/templates/*/preview.md](bold-template-pack/templates/) | Lightweight style cards for shortlisted bold title previews | Phase 2 after shortlisting |
| [bold-template-pack/templates/*/design.md](bold-template-pack/templates/) | Detailed design-system docs for the selected bold template only | Phase 3 after user selection |
| [viewport-base.css](viewport-base.css) | Mandatory fixed-stage CSS — copy into every presentation | Phase 3 (generation) |
| [viewport-base.css](viewport-base.css) | Mandatory fixed-stage CSS — copy into every presentation | Phase 3 and Mode C preflight |
| [html-template.md](html-template.md) | HTML structure, JS features, code quality standards | Phase 3 (generation) |
| [animation-patterns.md](animation-patterns.md) | CSS/JS animation snippets and effect-to-feeling guide | Phase 3 (generation) |
| [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction | Phase 4 (conversion) |
Expand Down
15 changes: 8 additions & 7 deletions plugins/frontend-slides/skills/frontend-slides/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,14 @@ Determine what the user wants:

### Mode C: Modification Rules

When enhancing existing presentations, fixed-stage fitting is the biggest risk:
When enhancing existing presentations, first preserve the required viewport baseline, then manage fixed-stage fitting:

1. **Before adding content:** Count existing elements, check against density limits
2. **Adding images:** Fit them inside the 1920×1080 slide canvas. If slide already has max content, split into two slides
3. **Adding text:** Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
4. **After ANY modification, verify:** the slide stage remains 16:9, no text overflows its card, no panels overlap, and screenshots look correct at 1280×720 plus one phone viewport
5. **Proactively reorganize:** If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked
1. **Before any modification:** Read `viewport-base.css`, then create or update a single dedicated `/* viewport-base.css BEGIN */` / `/* viewport-base.css END */` block in a `<style>` tag in `<head>`. Treat the baseline as missing or incomplete unless the block contains the FULL `viewport-base.css` contents, including `html, body`, `.deck-viewport`, `.deck-stage`, `.slide`, `.slide.active` / `.slide.visible`, media bounds, print rules, and reduced-motion rules. After installing the full block, scan later CSS and remove or rewrite any conflicting fixed-stage or slide-state declarations on `.deck-viewport`, `.deck-stage`, `.slide`, `.slide.active`, or `.slide.visible` (especially display-based slide switching, width/height/inset/position/overflow/visibility/opacity/pointer-events/z-index/transform-origin). Theme variables, backgrounds, typography, and slide content styles may override normally; fixed-stage and slide-state properties must come from `viewport-base.css`.
2. **Before adding content:** Count existing elements, check against density limits
3. **Adding images:** Fit them inside the 1920×1080 slide canvas. If slide already has max content, split into two slides
4. **Adding text:** Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
5. **After ANY modification, verify:** the dedicated `viewport-base.css` block exists exactly once with the full contents, no later CSS overrides fixed-stage or slide-state properties, the slide stage remains 16:9, no text overflows its card, no panels overlap, and screenshots look correct at 1280×720 plus one phone viewport
6. **Proactively reorganize:** If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked

**When adding images to existing slides:** Move image to a new slide or reduce other content first. Never add images without checking if existing content already fills the 1920×1080 slide stage.

Expand Down Expand Up @@ -372,7 +373,7 @@ This captures each slide as a screenshot and combines them into a PDF. Perfect f
| [bold-template-pack/selection-index.json](bold-template-pack/selection-index.json) | Compact bold template metadata for candidate selection | Phase 2 (style selection) |
| [bold-template-pack/templates/*/preview.md](bold-template-pack/templates/) | Lightweight style cards for shortlisted bold title previews | Phase 2 after shortlisting |
| [bold-template-pack/templates/*/design.md](bold-template-pack/templates/) | Detailed design-system docs for the selected bold template only | Phase 3 after user selection |
| [viewport-base.css](viewport-base.css) | Mandatory fixed-stage CSS — copy into every presentation | Phase 3 (generation) |
| [viewport-base.css](viewport-base.css) | Mandatory fixed-stage CSS — copy into every presentation | Phase 3 and Mode C preflight |
| [html-template.md](html-template.md) | HTML structure, JS features, code quality standards | Phase 3 (generation) |
| [animation-patterns.md](animation-patterns.md) | CSS/JS animation snippets and effect-to-feeling guide | Phase 3 (generation) |
| [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction | Phase 4 (conversion) |
Expand Down