Playbook Todo List: Screenshots and Videos

This document tracks the screenshots and videos needed for CADit user documentation. These will be generated using the Playbook automation system (see: /docs/core/Architecture/automated-documentation.md).

Status Key:

Not created
Created
[~] In progress

Getting Started

interface-tour.md

interface-overview.png - Full interface showing 2D panel (left), 3D panel (right), toolbars
2d-toolbar-labeled.png - 2D toolbar with tool icons labeled
3d-toolbar-labeled.png - 3D toolbar with tool icons labeled
context-menu.png - Context menu with shape selected

your-first-design.md

first-design.mp4 - Video showing: select rectangle tool, draw rectangle, adjust height, export

{
  "steps": [
    { "action": "design.new" },
    { "action": "tool.set", "tool": "RECTANGLE" },
    { "action": "draw", "start": [0, 0], "end": [50, 50] },
    { "action": "tool.set", "tool": "HEIGHT" },
    { "action": "height.set", "value": 10 },
    { "action": "capture", "name": "first-design", "type": "gif" }
  ]
}

Drawing Tools

pen-tools.md

freehand-tool.mp4 - Freehand drawing demo (exists)

polygon-tool.mp4 - Polygon tool click-to-place demo

{
  "steps": [
    { "action": "design.new" },
    { "action": "tool.set", "tool": "POLYGON" },
    { "action": "tap", "point": [0, 0] },
    { "action": "tap", "point": [50, 0] },
    { "action": "tap", "point": [50, 50] },
    { "action": "tap", "point": [0, 50] },
    { "action": "tap", "point": [0, 0] },
    { "action": "capture", "name": "polygon-tool", "type": "gif" }
  ]
}

brush-tool.mp4 - Brush tool with size variation
brush-sizes.png - Comparison of small/medium/large brush strokes

shape-tools.md

rectangle-tool.mp4 - Drawing rectangles
circle-tool.mp4 - Drawing circles
star-tool.mp4 - Drawing stars
shape-tools-gallery.png - Grid showing all shape types
shift-constraint.mp4 - Using Shift for constrained proportions

text-tool.md

text-tool.mp4 - Adding and editing text
font-selection.png - Font picker showing available fonts
text-3d-result.png - Text extruded to 3D

eraser-tool.md

eraser-tool.mp4 - Erasing parts of shapes
eraser-sizes.png - Comparison of small/medium/large eraser

transform-tool.md

selection-methods.mp4 - Click, drag box, Shift+click selection
transform-handles.png - Shape with transform handles labeled
rotation-demo.mp4 - Rotating a shape

photo-guide.md

photo-guide-import.mp4 - Importing and positioning a reference image
photo-guide-tracing.mp4 - Tracing over a photo guide

3D Tools

height-and-extrusion.md

height-tool.mp4 - Adjusting height with drag handles

{
  "steps": [
    { "action": "design.new" },
    { "action": "tool.set", "tool": "RECTANGLE" },
    { "action": "draw", "start": [-25, -25], "end": [25, 25], "saveAs": "rect" },
    { "action": "select", "target": "$rect" },
    { "action": "tool.set", "tool": "HEIGHT" },
    { "action": "height.set", "value": 5 },
    { "action": "idle" },
    { "action": "height.set", "value": 20 },
    { "action": "capture", "name": "height-tool", "type": "gif" }
  ]
}

height-handles.png - Height tool with handles labeled
height-panel.png - Height input in detail panel

sculpt-tool.md

sculpt-tool.mp4 - Adding handles and sculpting
sculpt-handles.png - Sculpt profile with handles

twist-tool.md

twist-tool.mp4 - Applying twist to an extruded shape

stamp-tool.md

stamp-tool.mp4 - Stamping a shape onto a surface

rotate-and-translate.md

3d-rotate.mp4 - Rotating an object in 3D
3d-translate.mp4 - Moving an object in 3D space
shift-snapping.mp4 - Using Shift for snap rotation

3d-primitives.md

sphere-primitive.png - Sphere with parameter panel
torus-primitive.png - Torus with parameter panel
cone-primitive.png - Cone with parameter panel
primitives-gallery.png - All primitives side by side

revolve-tool.md

revolve-tool.mp4 - Creating a revolved shape
revolve-profile.png - 2D profile before revolve
revolve-result.png - 3D result after revolve

spaces-and-planes.md

place-space.mp4 - Creating a new space on a surface
multiple-spaces.png - Design with multiple spaces visible
space-picker.mp4 - Using space picker to switch spaces

boolean-operations.md

union-operation.mp4 - Combining two shapes

{
  "steps": [
    { "action": "design.new" },
    { "action": "tool.set", "tool": "CIRCLE" },
    { "action": "draw", "start": [0, 0], "end": [30, 30] },
    { "action": "draw", "start": [20, 0], "end": [50, 30] },
    { "action": "select.all" },
    { "action": "capture", "name": "union-before", "type": "screenshot" }
  ]
}

cut-operation.mp4 - Subtracting one shape from another
hole-material.mp4 - Using hole material for transparent cuts
boolean-comparison.png - Before/after for each operation

Modes

doodle-mode.md

doodle-mode-toggle.png - Toggle button (exists)
doodle-mode.mp4 - Doodle mode demo (exists)
doodle-layer-panel.png - Layer panel with multiple layers
doodle-layer-height.mp4 - Adjusting layer height

maker-mode.md

maker-mode-enter.mp4 - Entering maker mode from a parametric object
parameter-panel.png - Parameter panel with various input types
maker-mode-adjust.mp4 - Adjusting parameters with live preview

symmetry-mode.md

symmetry-toggle.png - Symmetry mode toggle button
symmetry-drawing.mp4 - Drawing with symmetry enabled
symmetry-line.png - Symmetry line indicator on canvas

point-edit-mode.md

point-edit-enter.mp4 - Entering point edit mode
point-handles.png - Point handles and bezier handles
point-edit-curve.mp4 - Editing bezier curves

Working with Designs

saving-designs.md

save-dialog.png - Save dialog with options
local-designs-panel.png - Local designs gallery

importing-files.md

import-menu.png - Import options in menu
stl-import.mp4 - Importing an STL file

exporting-for-printing.md

export-menu.png - Export options
export-3mf-result.png - 3MF file opened in slicer

colors-and-materials.md

color-picker.png - Color picker panel
multi-color-design.png - Design with multiple colors
hole-material-example.png - Shape set as hole material

context-menu.md

context-menu-full.png - Full context menu with shape selected
align-options.png - Alignment submenu
fill-outline-toggle.png - Fill vs outline comparison

Design Library

browsing-designs.md

library-homepage.png - Design library main page
design-card.png - Individual design card with stats
search-results.png - Search results page

publishing-designs.md

upload-wizard-step1.png - Upload wizard design type selection
upload-wizard-step2.png - File upload step
upload-wizard-metadata.png - Metadata entry form

my-designs-dashboard.md

dashboard-overview.png - My designs dashboard
design-edit-page.png - Design edit page

user-profiles.md

profile-page.png - Public user profile
profile-settings.png - Profile settings page

Object Makers

qr-code-maker.md

qr-code-maker.png - QR code maker interface
qr-code-result.png - Generated QR code 3D model

image-extrude-maker.md

image-extrude-settings.png - Image extrude parameter panel
image-extrude-demo.mp4 - Converting an image to 3D

Reference

keyboard-shortcuts.md

shortcut-indicator.png - Shortcut shown in tooltip

Asset Summary

Category	Screenshots	Videos	Total
Getting Started	4	1	5
Drawing Tools	9	10	19
3D Tools	12	10	22
Modes	6	5	11
Working with Designs	5	2	7
Context Menu	3	0	3
Design Library	8	0	8
Object Makers	3	1	4
Reference	1	0	1
Total	51	29	80

Notes

Screenshots should be captured at 2x resolution for retina displays
Videos should be short (under 15 seconds) and focused
Use the Playbook automation system to generate consistent assets
Place generated assets in /cadit-next/public/user-docs/screenshots/
Video format: MP4 (H.264) or WebM for web compatibility