@warpgogol/forge 1.1.0 → 1.2.2

package/skills/fo/ef-motion-design/SKILL.md

@@ -1,118 +0,0 @@
----
-name: ef-motion-design
-description: "Apply motion design patterns to Editframe compositions — transitions, animations, easing, kinetic typography. Use when the operator asks to add motion design or animation patterns."
-invocation: user
-category: fo
-concerns: read-only
-dependsOn: []
-languagePolicy: ref(PREFERENCES.md)
-triggers:
-  - "add motion design"
-  - "animate text"
-  - "kinetic typography"
-  - "transition between scenes"
-source: domain-knowledge
----
-
-<!-- skill-lint-disable SKILL-17 -->
-
-Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
-
-# Motion Design
-
-Motion design patterns for Editframe compositions: transitions, animations, easing, and kinetic typography. These patterns enhance video compositions with professional motion graphics.
-
-## Transitions
-
-Use `ef-transition` or the `transition` prop to declare CSS-like transitions between scenes:
-
-```tsx
-<Timegroup mode="sequence">
-  <Video src="assets/scene1.mp4" duration="5s" transition="fade" />
-  <Video src="assets/scene2.mp4" duration="5s" transition="slide-left" />
-</Timegroup>
-```
-
-### Transition types
-
-- **`fade`** — cross-fade between elements
-- **`slide-left`** / **`slide-right`** — slide in from left/right
-- **`slide-up`** / **`slide-down`** — slide in from top/bottom
-- **`zoom-in`** / **`zoom-out`** — scale transition
-- **`wipe`** — directional wipe
-
-## Kinetic typography
-
-Animate text with `ef-text` or the `Text` component using timing and positioning:
-
-```tsx
-<Timegroup mode="sequence">
-  <Text text="First" x="50%" y="50%" fontSize="72px" duration="1s" />
-  <Text text="Second" x="50%" y="50%" fontSize="72px" duration="1s" />
-  <Text text="Third" x="50%" y="50%" fontSize="72px" duration="1s" />
-</Timegroup>
-```
-
-### Text animation patterns
-
-- **Sequential reveal** — words appear one after another in a `mode="sequence"` Timegroup
-- **Position animation** — animate `x`/`y` props across time
-- **Scale animation** — animate `fontSize` across time
-- **Color transitions** — animate `color` across time
-
-## Easing
-
-Editframe supports CSS easing functions for transitions and animations:
-
-- `ease` (default)
-- `ease-in`
-- `ease-out`
-- `ease-in-out`
-- `linear`
-- `cubic-bezier(x1, y1, x2, y2)` — custom bezier curve
-
-## Pan and zoom
-
-Use `ef-pan-zoom` or the `PanZoom` component for Ken Burns-style effects:
-
-```tsx
-<PanZoom
-  src="assets/photo.jpg"
-  duration="5s"
-  startX="0%"
-  startY="0%"
-  endX="100%"
-  endY="100%"
-  startScale="1"
-  endScale="1.5"
-/>
-```
-
-## Motion blur
-
-Apply motion blur to moving elements with `ef-motionblur` or the `MotionBlur` component:
-
-```tsx
-<MotionBlur intensity="0.5">
-  <Video src="assets/fast-pan.mp4" duration="3s" />
-</MotionBlur>
-```
-
-## CSS variables for time-based animation
-
-Editframe compositions support CSS custom properties for time-based values, enabling complex animation sequences without JavaScript:
-
-```css
-:root {
-  --scene-duration: 5s;
-  --transition-duration: 0.5s;
-}
-```
-
-## Best practices
-
-- Keep transitions consistent within a composition — use 1-2 transition types
-- Match transition duration to content pacing (fast cuts for energy, slow for drama)
-- Use kinetic typography sparingly — it draws attention
-- Preview with `ref(forge.yaml bindings.commands.devServer)` before rendering
-- Run `ref(forge.yaml bindings.commands.validate)` to check composition structure

package/skills/fo/ef-onboard/SKILL.md

@@ -1,77 +0,0 @@
----
-name: ef-onboard
-description: Onboard a new Editframe video project — check prerequisites, discover requirements, scaffold, and start preview. Use when the operator asks to create a new video project.
-invocation: user
-category: fo
-concerns: content-mutation
-dependsOn: []
-languagePolicy: ref(PREFERENCES.md)
-triggers:
-  - "create a new editframe project"
-  - "start a new video project"
-  - "build a video with editframe"
-  - "create a video composition"
----
-
-<!-- skill-lint-disable SKILL-17 -->
-
-# ef-onboard
-
-Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
-
-Guide the operator through creating a new Editframe video project within a Forge-managed workspace. The skill covers prerequisites check, discovery, scaffold, domain knowledge reading, and build + preview.
-
-## Process
-
-### 1. Prerequisites check
-
-- **Node.js 24+**: Run `node --version`. If missing or below 24, direct the operator to `https://nodejs.org/en/download/` or install via the system package manager.
-- **FFmpeg**: Run `ffmpeg -version`. If missing, direct the operator to `https://ffmpeg.org/download.html` or install via the system package manager (`apt install ffmpeg`, `brew install ffmpeg`).
-- If either prerequisite is missing and cannot be installed automatically, stop and ask the operator to install it manually.
-
-### 2. Discovery
-
-Ask the operator:
-
-1. **Project type**:
-   - Single video (product demo, social media video, personal project)
-   - Video template (reusable with different assets — birthday card, wedding announcement)
-   - Video editing tool (custom editor built with Editframe as the engine)
-   - Video workflow automation (script that generates videos from triggers)
-   - Something else (ask them to describe it)
-
-2. **Existing assets**:
-   - Video clips, images, or audio files (file paths or URLs)
-   - Website URLs to use as content source — if provided, download and cache all relevant assets locally before building
-   - No existing assets — start from scratch
-
-3. **Node.js/React libraries**: Ask if the operator has any libraries in mind (e.g. AnimeJS for animations, Tailwind for styling).
-
-Prioritize getting all answers before starting to build. This minimizes wait time for the operator.
-
-### 3. Scaffold
-
-Run `forge create --name <project-name> --profile editframe` to scaffold the project with Forge governance (invariants, AGENTS.md templates, forge skills). The `editframe` profile scaffolds a React + TypeScript + Vite project with `@editframe/react` pre-configured.
-
-If `forge create` fails (missing profile, network error, permission issue), report the error to the operator and stop. Do not proceed to subsequent steps without a scaffolded project.
-
-### 4. Read domain knowledge
-
-Before building, the agent MUST read the vendored Editframe domain skills. These are bundled with `@warpgogol/forge` and available in `.agents/skills/`:
-
-- **ef-composition** — time model, media elements, rendering pipeline
-- **ef-dev-server** — Vite plugin setup, local asset serving
-- **ef-editor-gui** — editor toolkit for visual composition editing
-- **ef-webhooks** — webhook notifications for render completion
-- **ef-brand-video-generator** — brand video generation templates
-- **ef-motion-design** — motion design patterns, transitions, kinetic typography
-
-The agent should also read **ef-composition-review** and **ef-render-verify** for quality assurance workflows.
-
-### 5. Build and preview
-
-1. Build the initial composition based on the operator's answers from Step 2. Use the discovery answers (project type, assets, libraries) to determine composition structure, asset placement, and optional dependencies.
-2. Run `forge dev` to start the preview server (delegates to `editframe preview` per the `editframe` profile's `devServer.command`).
-3. Report the localhost URL to the operator.
-4. Run `forge doctor` to check all profile invariants on the initial composition. For the `editframe` profile, this covers VIDEO-01 through VIDEO-09.
-5. Report any invariant violations and suggest fixes.

package/skills/fo/ef-render-verify/SKILL.md

@@ -1,56 +0,0 @@
----
-name: ef-render-verify
-description: Verify an Editframe render — validate, build, check determinism, inspect output
-invocation: user
-category: fo
-concerns: read-only
-dependsOn: []
-languagePolicy: ref(PREFERENCES.md)
----
-
-<!-- skill-lint-disable SKILL-17 -->
-
-# ef-render-verify
-
-Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
-
-A read-only verification of an Editframe render pipeline. The skill runs validation, build, determinism check, and output inspection, then reports pass/fail for each step. It does **not** modify any file.
-
-## Scope
-
-This skill verifies render output for `.tsx` composition files using the `editframe` stack profile. It uses `forge validate`, `forge build`, and `forge determinism check` — all profile-driven commands.
-
-## Process
-
-### 1. Pre-render validation
-
-Run `forge validate` to check the composition with the profile's validate command (typically `editframe check`). Review the output for any validation errors. If validation fails, report the errors and stop — do not proceed to render.
-
-### 2. Render
-
-Run `forge build` to produce the MP4 output. Review the output for any build errors. If the build fails, report the errors and stop.
-
-### 3. Determinism check
-
-Run `forge determinism check` to verify the render is reproducible — two builds produce identical output. Review the output hash comparison. If the hashes differ, report the mismatch and stop.
-
-### 4. Output inspection
-
-Check the render output:
-
-- Verify the output MP4 file exists at the expected path (`dist/{composition}.mp4`).
-- Check that the file size is non-zero.
-- Check that the duration matches the root `Timegroup`'s `duration` prop (if ffprobe or equivalent is available).
-
-### 5. Report
-
-Summarize the verification results — pass/fail for each step:
-
-| Step              | Status      | Details                                |
-| ----------------- | ----------- | -------------------------------------- |
-| Validation        | pass / fail | <error details or "all checks passed"> |
-| Build             | pass / fail | <error details or "build completed">   |
-| Determinism       | pass / fail | <hash comparison result>               |
-| Output inspection | pass / fail | <file exists, size, duration check>    |
-
-If all steps pass, the render is verified. If any step fails, provide specific recommendations for fixing the issue.

package/skills/fo/ef-webhooks/SKILL.md

@@ -1,95 +0,0 @@
----
-name: ef-webhooks
-description: "Configure Editframe webhooks for render completion and file processing notifications. Use when the operator asks to set up webhooks for Editframe events."
-invocation: user
-category: fo
-concerns: read-only
-dependsOn: []
-languagePolicy: ref(PREFERENCES.md)
-triggers:
-  - "set up editframe webhooks"
-  - "render completion notification"
-  - "file processing webhook"
-  - "webhook signature verification"
-source: https://editframe.com/skills/webhooks.md
----
-
-<!-- skill-lint-disable SKILL-17 -->
-
-Before starting, read `PREFERENCES.md` at the repository root. If the file is missing or `aiLanguage` is unset, ask the operator once and create the file using the `my-preferences` skill semantics.
-
-# Webhooks
-
-Use webhooks to receive real-time HTTP POST notifications when a render completes or a file finishes processing. Use them instead of polling `getRenderProgress`/`getFileProcessingProgress`.
-
-No SDK function registers a webhook. Configure one on an API key, through the dashboard (Settings → API Keys, or `editframe.com/resource/api_keys`). Set a **Webhook URL** (must use HTTPS). Select which **Webhook Events** (topics) to receive. When you create or update the key, the dashboard generates a **Webhook Secret**, used to sign deliveries. Copy this secret and store it alongside the API key.
-
-## Handling a webhook
-
-```typescript
-import express from "express";
-import crypto from "node:crypto";
-
-const app = express();
-
-app.post("/webhooks/editframe", express.raw({ type: "*/*" }), (req, res) => {
-  const signature = req.headers["x-webhook-signature"] as string;
-  const rawBody = req.body as Buffer;
-
-  const expected = crypto
-    .createHmac("sha256", process.env.EDITFRAME_WEBHOOK_SECRET!)
-    .update(rawBody)
-    .digest("hex");
-
-  if (!crypto.timingSafeEqual(Buffer.from(signature, "hex"), Buffer.from(expected, "hex"))) {
-    return res.status(401).send("Invalid signature");
-  }
-
-  res.status(200).send("OK");
-  const payload = JSON.parse(rawBody.toString("utf-8"));
-  processWebhookEvent(payload).catch(console.error);
-});
-```
-
-Every request carries an `X-Webhook-Signature` header: `HMAC-SHA256(webhook_secret, raw_json_body)`, hex-encoded. Verify with `crypto.timingSafeEqual`, not `===`.
-
-Use `express.raw()`, not `express.json()`. Signature verification needs the exact raw bytes. Re-serializing parsed JSON can reorder keys or change whitespace, which changes the hash and breaks verification.
-
-## Payload
-
-```typescript
-{ topic: string, data: {...} }
-```
-
-### Render topics
-
-`render.created`, `render.pending`, `render.rendering`, `render.completed`, `render.failed`
-
-`data` includes `id`, `status`, `created_at`, `completed_at`, `failed_at`, `width`, `height`, `fps`, `byte_size`, `duration_ms`, `md5`, `metadata`, `expires_at` (`null` = permanent), `download_url` (populated once complete), `error` (populated on failure).
-
-### File topics
-
-`file.created`, `file.uploading`, `file.processing`, `file.ready`, `file.failed`, `file.updated`
-
-`data` includes `id`, `type` (`video`/`image`/`caption`), `status`, `filename`, `byte_size`, `md5`, `mime_type`, `width`, `height`, `expires_at`. Editframe sends `file.updated` for a file status change that doesn't match one of the other file topics.
-
-### Legacy topics
-
-`image_file.created`, `isobmff_file.created`, `isobmff_track.created`, `unprocessed_file.created`. Do not build new integrations against these.
-
-## Delivery
-
-- Each event arrives as one HTTP POST with a JSON body.
-- Editframe retries on a fixed 10-second interval, up to 3 attempts total, with a 30-second timeout per attempt.
-- Editframe may deliver an event more than once. Key side effects off `data.id` to stay idempotent.
-- Always hash the **raw** request body for signature verification.
-
-## Testing
-
-```bash
-npx editframe webhook -t render.completed
-```
-
-This sends a real test event to the URL configured on your API key. There is no `--webhookURL` flag — the target URL always comes from the key's dashboard configuration. The dashboard's API key detail page has an equivalent "Test Webhook" button.
-
-For local development, tunnel your dev server (e.g. `ngrok http 3000`) and point the API key's Webhook URL at the tunnel URL.