firefrost-gaming/claude-code-skills-reference
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Remove bash execution errors from demos using echo commands

Browse Source 
**Critical fix for Image #1 issue:**

**Root cause:** VHS interprets typed text as actual bash commands in a real shell.
Text like "Create:", "Conclusion:", "12" caused "command not found" errors.

**Solution:** Wrap all narrative text in `echo '...'` commands for proper bash execution.

**Changes:**
- ppt-creator demo: All stages now use `echo` for display
- ui-designer demo: All steps now use `echo` for display
- File sizes increased (proper animation rendering):
  - ppt-creator: 496KB → 2.2MB
  - ui-designer: 262KB → 2.6MB

**Verification:**
✓ No "command not found" errors in VHS output
✓ Both GIFs render as valid 1400x800 GIF89a format
✓ All stage names and deliverables remain accurate per SKILL.md

**Technical details:**
- Before: `Type "# Stage 2: Storyline"` → bash error
- After: `Type "echo '# Stage 2: Storyline'"` → clean output

This fix ensures demos display workflow narratives without bash execution errors.
This commit is contained in:
daymade
2025-10-26 13:25:28 +08:00
parent 2d9dde15f7
commit 4ce0bb2ab4
4 changed files with 96 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
demos/ppt-creator/create-presentation.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 485 KiB

After

Width:  |  Height:  |  Size: 2.1 MiB

92
demos/ppt-creator/create-presentation.tape
View File

@@ -7,70 +7,58 @@ Set Theme "Catppuccin Mocha"
Set Padding 30
Set TypingSpeed 50ms
Type "# PPT Creator - Professional Presentation Generation" Sleep 1s Enter
Type "echo '# PPT Creator - Professional Presentation Generation'" Sleep 500ms Enter
Sleep 2s
Type "Create a presentation about renewable energy" Sleep 1s
Enter
Type "echo 'User: Create a presentation about renewable energy'" Sleep 500ms Enter
Sleep 2s
Type "# ✓ ppt-creator activates automatically" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '✓ ppt-creator activates automatically'" Sleep 500ms Enter
Sleep 2s
Type "# Stage 2: Storyline (Pyramid Principle)" Sleep 500ms
Enter
Sleep 1s
Type " → Conclusion: Renewable energy adoption is accelerating" Sleep 500ms
Enter
Sleep 1s
Type "# Stage 3: Outline & Slide Titles (Assertions)" Sleep 500ms
Enter
Sleep 1s
Type " → 12 slides with assertion-style headings" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Stage 2: Storyline (Pyramid Principle)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Conclusion: Renewable energy adoption is accelerating'" Sleep 500ms Enter
Sleep 2s
Type "# Stage 4: Evidence & Charts" Sleep 500ms
Enter
Sleep 1s
Type " → Selecting charts via VIS-GUIDE.md" Sleep 500ms
Enter
Sleep 1s
Type " → scripts/chartkit.py generates PNG charts" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Stage 3: Outline & Slide Titles (Assertions)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → 12 slides with assertion-style headings'" Sleep 500ms Enter
Sleep 2s
Type "# Stage 6: Speaker Notes (45-60s per slide)" Sleep 500ms
Enter
Sleep 1s
Type " → Opening → Assertion → Evidence → Transition" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Stage 4: Evidence & Charts'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Selecting charts via VIS-GUIDE.md'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → scripts/chartkit.py generates PNG charts'" Sleep 500ms Enter
Sleep 2s
Type "# Stage 7: Self-Check & Scoring (RUBRIC.md)" Sleep 500ms
Enter
Sleep 1s
Type " → Score: 82/100 (target: ≥75)" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Stage 6: Speaker Notes (45-60s per slide)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Opening → Assertion → Evidence → Transition'" Sleep 500ms Enter
Sleep 2s
Type "# Stage 8: Package Deliverables (/output/)" Sleep 500ms
Enter
Sleep 1s
Type " ✓ slides.md (Marp/Reveal.js format)" Sleep 500ms
Enter
Sleep 1s
Type " ✓ notes.md (speaker notes)" Sleep 500ms
Enter
Sleep 1s
Type " ✓ refs.md (citations & sources)" Sleep 500ms
Enter
Sleep 1s
Type " ✓ assets/*.png (generated charts)" Sleep 500ms
Enter
Sleep 1s
Type " ✓ presentation.pptx (if python-pptx available)" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Stage 7: Self-Check & Scoring (RUBRIC.md)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Score: 82/100 (target: ≥75)'" Sleep 500ms Enter
Sleep 2s
Type "echo ''" Sleep 100ms Enter
Type "echo '# Stage 8: Package Deliverables (/output/)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ slides.md (Marp/Reveal.js format)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ notes.md (speaker notes)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ refs.md (citations & sources)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ assets/*.png (generated charts)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ presentation.pptx (if python-pptx available)'" Sleep 500ms Enter
Sleep 3s

BIN
demos/ui-designer/extract-design-system.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 0 B

133
demos/ui-designer/extract-design-system.tape
View File

@@ -7,97 +7,76 @@ Set Theme "Catppuccin Mocha"
Set Padding 30
Set TypingSpeed 50ms
Type "# UI Designer - Design System Extraction" Sleep 1s Enter
Type "echo '# UI Designer - Design System Extraction'" Sleep 500ms Enter
Sleep 2s
Type "Extract design system from my SaaS dashboard screenshots" Sleep 1s
Enter
Type "echo 'User: Extract design system from my SaaS dashboard screenshots'" Sleep 500ms Enter
Sleep 2s
Type "# ✓ ui-designer activates automatically" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '✓ ui-designer activates automatically'" Sleep 500ms Enter
Sleep 2s
Type "# Step 1: Gather Inputs" Sleep 500ms
Enter
Sleep 1s
Type " → Reference images: reference-images/saas-dashboard/" Sleep 500ms
Enter
Sleep 1s
Type " → Project idea: ideas/project-management-app.md" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Step 1: Gather Inputs'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Reference images: reference-images/saas-dashboard/'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Project idea: ideas/project-management-app.md'" Sleep 500ms Enter
Sleep 2s
Type "# Step 2: Extract Design System (Task tool)" Sleep 500ms
Enter
Sleep 1s
Type " → Analyzing 5 screenshots..." Sleep 500ms
Enter
Sleep 1s
Type " → Color palette: #2563EB, #DC2626, #059669" Sleep 500ms
Enter
Sleep 1s
Type " → Typography: Inter, 14-40px" Sleep 500ms
Enter
Sleep 1s
Type " → Spacing: 4-48dp grid system" Sleep 500ms
Enter
Sleep 1s
Type " ✓ documents/designs/saas-dashboard_design_system.md" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Step 2: Extract Design System (Task tool)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Analyzing 5 screenshots...'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Color palette: #2563EB, #DC2626, #059669'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Typography: Inter, 14-40px'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Spacing: 4-48dp grid system'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ documents/designs/saas-dashboard_design_system.md'" Sleep 500ms Enter
Sleep 2s
Type "# Step 3: Generate MVP PRD (Task tool)" Sleep 500ms
Enter
Sleep 1s
Type " → Interactive refinement with user..." Sleep 500ms
Enter
Sleep 1s
Type " → Features: kanban, timeline, team chat" Sleep 500ms
Enter
Sleep 1s
Type " ✓ PRD completed (saved to variable)" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Step 3: Generate MVP PRD (Task tool)'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Interactive refinement with user...'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Features: kanban, timeline, team chat'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ PRD completed (saved to variable)'" Sleep 500ms Enter
Sleep 2s
Type "# Step 4: Compose Implementation Prompt" Sleep 500ms
Enter
Sleep 1s
Type " → Using vibe-design-template.md" Sleep 500ms
Enter
Sleep 1s
Type " → Combining design system + PRD" Sleep 500ms
Enter
Sleep 1s
Type " ✓ documents/ux-design/app_design_prompt_20251026.md" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Step 4: Compose Implementation Prompt'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Using vibe-design-template.md'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Combining design system + PRD'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ documents/ux-design/app_design_prompt_20251026.md'" Sleep 500ms Enter
Sleep 2s
Type "# Step 5: Verify React Environment" Sleep 500ms
Enter
Sleep 1s
Type " → Checking for package.json with react..." Sleep 500ms
Enter
Sleep 1s
Type " ✓ React project found" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Step 5: Verify React Environment'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Checking for package.json with react...'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ React project found'" Sleep 500ms Enter
Sleep 2s
Type "# Step 6: Implement UI" Sleep 500ms
Enter
Sleep 1s
Type " → Creating 3 mobile variations" Sleep 500ms
Enter
Sleep 1s
Type " → Creating 2 web variations" Sleep 500ms
Enter
Sleep 1s
Type " ✓ Components: solution-a/pages/Dashboard.jsx" Sleep 500ms
Enter
Sleep 1s
Type " ✓ Components: solution-b/pages/Dashboard.jsx" Sleep 500ms
Enter
Sleep 1s
Type " ✓ Showcase page with all variations" Sleep 500ms
Enter
Type "echo ''" Sleep 100ms Enter
Type "echo '# Step 6: Implement UI'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Creating 3 mobile variations'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' → Creating 2 web variations'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ Components: solution-a/pages/Dashboard.jsx'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ Components: solution-b/pages/Dashboard.jsx'" Sleep 500ms Enter
Sleep 500ms
Type "echo ' ✓ Showcase page with all variations'" Sleep 500ms Enter
Sleep 3s