Danila Poyarkov e5b147148e Add AI & Automation docs section, CLI reference, formatting fixes

New 'AI & Automation' top-level nav section with 9 pages:
- AI Chat: setup, 87 tools, example prompts
- Collaboration: room sharing, cursors, follow mode
- JSX Renderer: elements, style props, visual diffing
- CLI (4 pages): inspecting, exporting, analyzing, scripting
- MCP Server: moved from Reference, setup + 90 tools

New CLI reference page in Reference with all 12 commands,
every option, alias, and default value.

Formatting fixes across all 7 locales:
- Wrap enum values in backticks (FRAME, SOLID, ROUND, etc.)
- Fix single-backtick code blocks → triple backticks
- Use <kbd> for all keyboard shortcuts
- Remove implementation details from user guide
- Delete stale eval-command.md and mcp-tools.md (14 files)
- Update dead links to new locations

2026-03-08 18:25:35 +03:00

3.1 KiB

Raw Blame History

OpenSpec Workflow

OpenPencil uses OpenSpec for spec-driven development. Specifications are the source of truth for what the system does.

Structure

openspec/
├── specs/              # Source of truth: how the system works now
│   ├── scene-graph/
│   │   └── spec.md
│   ├── canvas-rendering/
│   │   └── spec.md
│   ├── auto-layout/
│   │   └── spec.md
│   └── ...             # 19 capability specs total
├── changes/            # Proposed changes (one directory per change)
│   └── archive/        # Completed changes
└── config.yaml         # Optional configuration

Current Specs

Capability	Description
scene-graph	Flat Map storage, CRUD, hit testing
canvas-rendering	CanvasKit WASM rendering pipeline
canvas-navigation	Pan, zoom, hand tool
selection-manipulation	Click/marquee select, move, resize, rotate
undo-redo	Inverse-command pattern
text-editing	Text tool, Paragraph API, font loading
pen-tool	Vector network model, bezier curves
auto-layout	Yoga WASM flexbox, Shift+A toggle
figma-clipboard	Bidirectional Kiwi binary clipboard
fig-import	.fig file import pipeline
kiwi-codec	Kiwi binary codec, sparse field IDs
editor-ui	Vue 3 panels, toolbar, color picker
snap-guides	Edge/center snapping, rotation-aware
rulers	Canvas rulers, selection highlight
group-ungroup	`⌘G` / `⇧⌘G`, position-based sort
desktop-app	Tauri v2, macOS menu bar
testing	Playwright E2E, bun:test unit
scrub-input	Drag-to-scrub numeric inputs
tooling	Vite 7, oxlint, oxfmt, tsgo, VitePress

Workflow

1. Propose a Change

/opsx:propose add-dark-mode

Creates openspec/changes/add-dark-mode/ with:

proposal.md — why and what changes
design.md — technical approach
specs/ — delta specifications (ADDED/MODIFIED/REMOVED requirements)
tasks.md — implementation checklist

2. Implement

/opsx:apply

Execute tasks from tasks.md, checking off items as they're completed.

3. Archive

/opsx:archive

Merges delta specs into openspec/specs/ (the baseline)
Moves the change to openspec/changes/archive/

Spec Format

Each spec file follows a consistent structure:

# capability-name Specification

## Purpose
One-line description of what this capability does.

## Requirements

### Requirement: Name
Description using SHALL/MUST for normative requirements.

#### Scenario: Name
- **WHEN** condition
- **THEN** expected outcome

Every requirement has at least one scenario. Scenarios are potential test cases.

CLI Commands

openspec list                    # List active changes
openspec show <name>             # Show change details
openspec status --change <name>  # Artifact status
openspec archive <name>          # Archive completed change
openspec update                  # Regenerate skills/prompts

3.1 KiB Raw Blame History