Course Website Design Specification

Overview

The Atomic Shelf Video Production Academy is a structured, progressive learning environment built as a section within the existing Atomic Shelf Editor portal. It uses React + TypeScript + Vite, matching the existing codebase patterns (src/components/, src/services/, src/types.ts).

The website must feel like an internal creative academy — rigorous, visually beautiful, practical, and directly connected to daily production work.

Page Structure

1. Course Dashboard (/academy or /course)

Purpose: Central hub showing progress, next steps, and quick links.

Components:

• Course title and purpose (hero section)
• Current progress (module completion indicators)
• Recommended next lesson (prominently displayed)
• Active assignments (cards with due dates and status)
• Quick links to templates and reference materials
• Visual workflow overview (the 6-phase production pipeline as a diagram)

Data source: Local storage for progress tracking (user-specific preferences), templates from course/templates/, reference materials from course/references/.

2. Curriculum (/academy/curriculum)

Purpose: Browse all 16 modules, sorted by phase.

Components:

• Five collapsible phase sections: Foundations, Creative Development, Production, Finishing, Professional Delivery
• Each module card shows: objectives, estimated duration, prerequisites, assessment requirements
• Color-coded by completion status (completed / in progress / locked)
• Resume button for in-progress modules
• Final challenge (Module 16) highlighted as capstone

3. Lesson Workspace (/academy/module-01, etc.)

Purpose: The active learning environment for each module.

Components:

• Lesson navigation (sidebar or stepper)
• Lesson content (principle, demonstration, workflow)
• Embedded video examples where available
• Step-by-step instructions (numbered, actionable)
• Downloadable source assets (book metadata, templates)
• Exercise submission area (file upload or text entry)
• Notes field (local storage, user-specific)
• Feedback display (formative, immediate)
• Completion requirement indicator (clear pass/fail criteria)

Lesson structure (matches the 10 required elements):

1. Learning Objective (banner)
2. Principle Explanation (prose + callout)
3. Visual Demonstration (professional + weak example)
4. Step-by-Step Workflow (numbered list)
5. Professional Example (highlighted block)
6. Common Mistakes (table)
7. Hands-On Exercise (task description + source assets)
8. Downloadable Template (linked card)
9. Submission Requirement (banner)
10. Assessment (scored or pass/fail)

4. Symphony Prompt Lab (/academy/prompt-lab)

Purpose: A structured prompt organizer for B-roll generation.

Components:

• Structured prompt editor (tabs for each prompt element)
• Genre and mood reference dropdown
• Shot type and camera movement reference
• Continuity notes field
• Negative constraints builder (checklist of common exclusions)
• Example prompts gallery (from references/symphony-prompt-library.md)
• Prompt revision history (versioned entries)
• Links to generated assets (manual association)

This is a prompt organizer, not an API integration. Editors copy prompts into Symphony manually. The lab organizes, tracks, and provides feedback on prompt quality.

5. Editing Workshop (/academy/editing-workshop)

Purpose: Planning and execution hub for the editing stage.

Components:

• Storyboard and shot list (from completed storyboards)
• Asset inventory (from 07_Broll-Approved/)
• Timeline planning worksheet (beat-by-beat duration planning)
• Caption and sound checklists (from QA template)
• Approved-tool instructions (from references/google-editing-cheatsheet.md)
• Export and delivery requirements (settings checklist)

6. Quality Assurance (/academy/qa)

Purpose: Formal four-gate review process.

Components:

• Interactive checklist (Gate A–D, all items)
• Critical-defect warnings (red banners for Gate A failures)
• Review notes field (accumulated across gates)
• Pass/fail status indicator (per gate and overall)
• Resubmission workflow (mark defect, note fix, re-review)
• Final delivery confirmation (checkbox + timestamp)

7. Resource Library (/academy/resources)

Purpose: Central repository for all downloadable materials.

Components:

• Templates: Creative brief, script, storyboard, prompt log, QA checklist, production report, testing plan, source check
• Glossary: Searchable, from references/glossary.md
• Genre Guides: Interactive, from references/genre-guides.md
• Prompt Examples: Filtered by genre, scene type, camera movement
• Technical Specifications: Export settings, tool capabilities, shortcut cards
• Approved Brand Assets: Color swatches, typography, logo placement
• Troubleshooting Guide: Common issues and solutions

Interaction Design Principles

Active Production Environment

The course is not a video course. Editors create actual video assets as they progress.

• Every exercise produces a deliverable (script, storyboard, prompt, edit, etc.)
• Submissions are stored in the user's course workspace
• Formative feedback explains why an answer works or fails — never just "correct/incorrect"
• Progress is tracked by submitted deliverables, not videos watched

Responsive Design

• Desktop-first: The primary workspace for editing work
• Tablet: Readable lesson content, form filling
• Mobile: Dashboard glance, notifications, quick references

Keyboard Shortcuts

• Cheat sheets for the Google editing tool (from references/google-editing-cheatsheet.md)
• In-app shortcuts for navigation (Cmd/Ctrl + [number] for module shortcuts)
• Toggle for dark/light mode (defaults to studio dark)

Visual Design

Color Scheme

Matches the Atomic Shelf style guide:

Typography

• Headlines: Editorial sans-serif (Inter Bold, 18–24px)
• Body: Highly readable sans-serif (Inter Regular, 14–16px)
• Code/Technical: Monospace (12–14px)
• Captions: Same as body, 12px minimum

Spacing

• Layout: 24px grid baseline
• Card padding: 20px
• Section gap: 32px
• Line height: 1.5 for body, 1.2 for headings

Module Grouping

Modules are grouped into five phases in the Curriculum view:

Workspace Persistence

Local Workspace Structure

Each editor's course workspace lives in local browser storage, structured as:

~/atomic-shelf-academy/coursework/
├── module-01/
│   ├── exercise-1-analysis.json
│   └── checklist-progress.json
├── module-02/
│   ├── creative-brief-BOOKSLUG.json
│   └── source-check-BOOKSLUG.json
├── ...
├── workspace-BOOKSLUG/
│   ├── 01_Brief/
│   ├── 02_Source-Metadata/
│   ├── 03_Scripts/
│   ├── 04_Storyboards/
│   ├── 05_Symphony-Prompts/
│   ├── 06_Broll-Generated/
│   ├── 07_Broll-Approved/
│   ├── 08_Editing-Project/
│   ├── 09_Exports/
│   └── 10_QA-and-Approval/
└── final-project/
    └── (complete final challenge workspace)

Progress Tracking

• Each module has a completion checklist tracked in local state
• Formative assessment results feed the production dashboard
• The final challenge requires all 15 prerequisite modules to be marked complete
• No module can be skipped — the curriculum is sequential with the exception of parallel prerequisites (Module 10 requires Module 06, Module 11 requires Module 04)

Integration Points

With the Editor Portal

The course academy integrates into the existing Editor app:

1. Navigation: "Video Production Academy" link in the topbar or sidebar
2. Context: Course examples use real campaign data from the portal's prompt library
3. Workspace: Course workspaces use the same folder structure as production workspaces
4. Templates: Downloadable templates match the production workflow's naming conventions
5. Branding: Uses the existing Atomic Shelf dark theme (navy/ivory/orange/green)

With AtomicStudio

• The "Generate" button in the course's Editing Workshop mirrors the PromotionsTab's handleGenerate flow
• The Prompt Lab organizes prompts in the same structure as PromptLibraryItem
• The QA checklist mirrors the four-gate review process used in production