Frontend Guidelines

Skills

Skill	Priority	Description
data-always-ready	CRITICAL	Parent guards data, children assume it exists
mvc-pattern	CRITICAL	Screen → Container → View separation
state-management	CRITICAL	Single store ownership, no duplicate state
type-safety	HIGH	Use `as const` objects, no magic strings
keyframe-data-model	HIGH	Frame-based keyframes, origins, state machine
ui-style-guide	MEDIUM	Colors, buttons, spacing, components
lint	MEDIUM	Build check for JS/JSX errors

Quick Reference

Data Guards

// Parent guards, child renders
{selectedClip && <ClipEditor clip={selectedClip} />}

MVC Structure

Screen (data fetching, hook initialization)
  └── Container (state logic, event handlers)
        └── View (presentational, props only)

Keyframes

keyframe = {
  frame: number,                    // Frame-based, not time
  origin: 'permanent' | 'user' | 'trim',
  // + mode-specific data (x, y, width, height for crop)
}

State

Zustand stores: Global state (
```
editorStore
```
,
```
exportStore
```
, etc.)
Screen-owned hooks: Each screen initializes
```
useVideo
```
,
```
useCrop
```
, etc.
No prop drilling from App.jsx: Screens are self-contained

Don't

Don't add console.logs in committed code
Don't fetch data in View components
Don't render components without data guards
Don't use localStorage (all persistence via SQLite + R2)
Don't use time in seconds for keyframes (use frame numbers)

Frontend Guidelines

Skills

Skill	Priority	Description
data-always-ready	CRITICAL	Parent guards data, children assume it exists
mvc-pattern	CRITICAL	Screen → Container → View separation
state-management	CRITICAL	Single store ownership, no duplicate state
type-safety	HIGH	Use `as const` objects, no magic strings
keyframe-data-model	HIGH	Frame-based keyframes, origins, state machine
ui-style-guide	MEDIUM	Colors, buttons, spacing, components
lint	MEDIUM	Build check for JS/JSX errors

Quick Reference

Data Guards

// Parent guards, child renders
{selectedClip && <ClipEditor clip={selectedClip} />}

MVC Structure

Screen (data fetching, hook initialization)
  └── Container (state logic, event handlers)
        └── View (presentational, props only)

Keyframes

keyframe = {
  frame: number,                    // Frame-based, not time
  origin: 'permanent' | 'user' | 'trim',
  // + mode-specific data (x, y, width, height for crop)
}

State

Zustand stores: Global state (
```
editorStore
```
,
```
exportStore
```
, etc.)
Screen-owned hooks: Each screen initializes
```
useVideo
```
,
```
useCrop
```
, etc.
No prop drilling from App.jsx: Screens are self-contained

Don't

Don't add console.logs in committed code
Don't fetch data in View components
Don't render components without data guards
Don't use localStorage (all persistence via SQLite + R2)
Don't use time in seconds for keyframes (use frame numbers)

Frontend Guidelines

Frontend Guidelines

Skills

Quick Reference

Data Guards

MVC Structure

Keyframes

State

Don't

Related Skills

Markdown Converter

Nano Banana Pro

1password

Frontend Guidelines

Skills

Quick Reference

Data Guards

MVC Structure

Keyframes

State

Don't