@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

package/dist/__w3kits/assets/design-templates/video-shortform/SKILL.md

@@ -0,0 +1,128 @@
+---
+name: video-shortform
+description: |
+  Short-form video generation skill — 3-10 second clips for product
+  reveals, motion teasers, ambient loops. Defaults to Seedance 2 but
+  works the same with Kling 3 / 4, Veo 3 or Sora 2. Output is one MP4
+  saved to the project folder. When the workspace also ships an
+  interactive-video / hyperframes skill, prefer composing several short
+  shots into a single timeline rather than one long monolithic clip.
+triggers:
+  - "video"
+  - "clip"
+  - "shortform"
+  - "reel"
+  - "短视频"
+  - "动效"
+od:
+  mode: video
+  surface: video
+  scenario: marketing
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: false
+  example_prompt: |
+    5-second product reveal — ceramic coffee mug rotating on a soft
+    paper backdrop, warm side-light from camera-left, micro dust motes
+    drifting through the beam. Cinematic, 16:9, slow drift on the camera.
+---
+
+# Video Shortform Skill
+
+Short-form (≤ 10s) is the sweet spot for current text-to-video models —
+they're great at one **shot** with one **idea**, weaker at multi-cut
+narratives. Plan one shot per call.
+
+Special case: `hyperframes-html` is **not** a photoreal text-to-video
+model. It's a local HTML-to-MP4 renderer. For that model, do not roleplay
+cinematography or "real-world" camera physics. Treat the brief as a motion
+design card / title-frame / product interstitial, ask at most one
+clarifying question, then dispatch immediately.
+
+## Resource map
+
+```
+video-shortform/
+├── SKILL.md
+└── example.html
+```
+
+## Workflow
+
+### Step 0 — Read the project metadata
+
+`videoModel`, `videoLength` (seconds), `videoAspect`. These are
+hard-locks — clamp the prompt to whatever the chosen model supports
+(Seedance 2 caps at 10s; Kling 4 supports up to 10s + image-to-video;
+Veo 3 supports 8s with audio).
+
+### Step 1 — Plan the shot
+
+Write the shotlist BEFORE calling the model:
+
+| Slot | Content |
+|---|---|
+| Subject | What's in frame? |
+| Camera | Static / pan / push-in / orbit? |
+| Lighting | Key direction + temperature |
+| Motion | What moves, at what pace? Subject motion vs camera motion. |
+| Sound | Ambient bed? (only if the model supports audio) |
+
+Normally, show this to the user as a one-sentence plan before
+dispatching — they can redirect cheaply.
+
+For `hyperframes-html`, skip the extra pre-dispatch narration once the
+user has answered the discovery form. Collapse the plan into the actual
+generation prompt and dispatch immediately.
+
+### Step 2 — Compose the prompt
+
+Use the format the upstream model prefers (Seedance: motion + camera +
+mood; Kling: subject + camera + style; Veo: subject + cinematography +
+sound). Bind the project's `videoAspect` and `videoLength` directly to
+the API parameters; never put them in prose.
+
+For `hyperframes-html`, write a concise motion-design brief instead of a
+camera-realism prompt. Focus on subject, layout, palette, motion
+character, and overall tone. Do not spend turns narrating environment
+checks, missing side files, or "I am about to dispatch" status updates.
+
+### Step 3 — Dispatch via the media contract
+
+Use the unified dispatcher — do **not** call provider APIs by hand:
+
+```bash
+"$OD_NODE_BIN" "$OD_BIN" media generate \
+  --project "$OD_PROJECT_ID" \
+  --surface video \
+  --model "<videoModel from metadata>" \
+  --aspect "<videoAspect from metadata>" \
+  --length <videoLength seconds> \
+  --output "<short-slug>-<seconds>s.mp4" \
+  --prompt "<assembled shot prompt from Step 2>"
+```
+
+The command prints one line of JSON: `{"file": {"name": "...", ...}}`.
+The bytes land in the project; the FileViewer plays it automatically.
+
+### Step 4 — Hand off
+
+Reply with: shot summary, the filename returned by the dispatcher, and
+one sentence on what to try if the user wants a variation.
+
+For `hyperframes-html`, keep the reply especially short: what was
+rendered, the filename, and one concrete variation idea.
+
+## Hard rules
+
+- One shot per turn. Multi-shot timelines belong in a hyperframes /
+  interactive-video skill, not here.
+- Match `videoAspect` exactly — re-renders are slow.
+- Never ship a video without saving the file — the user expects
+  something to play in the file viewer.
+- When the underlying model fails (NSFW filter, content policy,
+  timeout), report the error verbatim. Don't silently retry.
+- Do not claim a render has been "sent", "started", or "is running"
+  unless you have already called `"$OD_NODE_BIN" "$OD_BIN" media generate`.

package/dist/__w3kits/assets/design-templates/video-shortform/example.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Short-form video — example</title>
+    <style>
+      :root {
+        --bg: #0e0d0c;
+        --panel: #1a1816;
+        --ink: #f5efe5;
+        --muted: #8b8579;
+        --accent: #c96442;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
+        font-family: 'Iowan Old Style', 'Charter', Georgia, serif; }
+      body { min-height: 100dvh; display: grid; place-items: center; padding: 32px; }
+      .stage {
+        width: min(720px, 92vw);
+        background: var(--panel);
+        border-radius: 8px;
+        padding: 22px;
+        box-shadow: 0 24px 60px rgba(0,0,0,0.45);
+      }
+      .frame {
+        position: relative;
+        aspect-ratio: 16 / 9;
+        border-radius: 6px;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 30% 35%, #d8b08b 0%, #6f4a35 40%, #1a120c 80%);
+      }
+      .frame::after {
+        content: ''; position: absolute; inset: 0;
+        background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px);
+        pointer-events: none;
+        animation: scan 12s linear infinite;
+      }
+      @keyframes scan { from { background-position-y: 0; } to { background-position-y: 200px; } }
+      .frame .mug {
+        position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%);
+        width: 28%; aspect-ratio: 1 / 1;
+        background: radial-gradient(ellipse at 35% 35%, #f5efe5 0%, #c2b8a7 50%, #6f6757 100%);
+        border-radius: 18% 18% 22% 22% / 28% 28% 18% 18%;
+        box-shadow: 18px 6px 30px rgba(0,0,0,0.45);
+        animation: turn 6s ease-in-out infinite alternate;
+      }
+      .frame .mug::after {
+        content: ''; position: absolute; right: -14%; top: 28%;
+        width: 18%; height: 44%;
+        border: 6px solid #c2b8a7; border-left: none; border-radius: 0 100% 100% 0 / 0 50% 50% 0;
+      }
+      @keyframes turn { from { transform: translate(-50%, -50%) rotate(-6deg); } to { transform: translate(-50%, -50%) rotate(6deg); } }
+      .frame .timecode {
+        position: absolute; left: 14px; bottom: 12px;
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 11px; letter-spacing: 0.16em;
+        color: var(--muted);
+        background: rgba(0,0,0,0.4);
+        padding: 4px 8px; border-radius: 999px;
+      }
+      .frame .badge {
+        position: absolute; left: 14px; top: 12px;
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
+        color: var(--accent);
+      }
+      .meta {
+        display: grid; grid-template-columns: 1fr auto; gap: 10px;
+        align-items: end; margin-top: 18px;
+      }
+      .title { font-size: 22px; line-height: 1.1; margin: 0; }
+      .sub { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="frame">
+        <span class="badge">● REC</span>
+        <div class="mug" aria-hidden></div>
+        <span class="timecode">00:05 · 16:9 · seedance-2</span>
+      </div>
+      <div class="meta">
+        <h1 class="title">A 5-second product reveal — saved as MP4.</h1>
+        <span class="sub">Open Design · Video</span>
+      </div>
+    </div>
+  </body>
+</html>

package/dist/__w3kits/assets/design-templates/waitlist-page/SKILL.md

@@ -0,0 +1,229 @@
+---
+name: waitlist-page
+description: |
+  Minimal pre-launch landing with email capture, brand logo, and optional decorative layer.
+  Reads DESIGN.md for colors, typography, and layout rules.
+  Best for: product launches, beta signups, early access programs, indie projects.
+triggers:
+  - "waitlist page"
+  - "coming soon page"
+  - "pre-launch landing page"
+  - "email capture page"
+  - "launch page"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: marketing
+  featured: 1
+  preview:
+    type: html
+    entry: example.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  inputs:
+    - name: product_name
+      type: string
+      required: true
+    - name: tagline
+      type: string
+      required: true
+    - name: bg_expression
+      type: string
+      description: "CSS color expression for background (e.g., '#FDE8DF' or 'rgba(...)')."
+      required: true
+    - name: fg_expression
+      type: string
+      description: "CSS color expression for text and primary shapes (e.g., '#1A1410' or 'rgba(...)')."
+      required: true
+    - name: accent_expression
+      type: string
+      description: "CSS color expression for brand badge and highlights."
+      required: true
+    - name: deco_expression
+      type: string
+      description: "CSS color expression for decoration primary."
+      required: true
+    - name: stripe_expression
+      type: string
+      description: "CSS color expression for accent stripe."
+      required: true
+    - name: border_expression
+      type: string
+      description: "CSS color expression for input borders (e.g., 'rgba(100,50,30,0.38)' or 'color-mix(in srgb, var(--fg) 38%, transparent)'). Must be valid CSS."
+      required: true
+    - name: success_expression
+      type: string
+      description: "CSS color expression for success message. Defaults to #2D6A4F if not in DESIGN.md."
+      required: true
+    - name: btn_label_expression
+      type: string
+      description: "CSS color expression for button label text (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure WCAG AA contrast."
+      required: true
+    - name: ticker_bg_expression
+      type: string
+      description: "CSS color expression for ticker background (e.g., 'rgba(0,0,0,0.9)'). Must be valid CSS."
+      required: true
+    - name: ticker_fg_expression
+      type: string
+      description: "CSS color expression for ticker text (e.g., 'rgba(255,255,255,0.9)'). Ensure contrast."
+      required: true
+    - name: deco_stroke_expression
+      type: string
+      description: "CSS color expression for SVG strokes (e.g., 'rgba(0,0,0,0.12)'). Typically a muted foreground or neutral."
+      required: true
+    - name: logo_shadow_expression
+      type: string
+      description: "CSS color expression for logo container shadow (e.g., 'rgba(0,0,0,0.08)'). Typically a subtle foreground shade."
+      required: true
+    - name: logo_fg_expression
+      type: string
+      description: "CSS color expression for logo text/initials (e.g., 'rgba(255,255,255,1)' or '#fff'). Ensure contrast against accent."
+      required: true
+    - name: logo_mark
+      type: string
+      description: "Text initials are HTML-escaped by default. Inline SVG is allowed only after strict allowlist-based sanitization (removing scripts, event handlers, foreignObject, and external references); unsafe input falls back to escaped text."
+      required: false
+    - name: display_font_url
+      type: string
+      description: "Display font name with spaces encoded as '+' (e.g., 'Syne', 'DM+Sans'). Used in Google Fonts URL."
+      required: true
+    - name: display_font_css
+      type: string
+      description: "Display font name as it appears in CSS (e.g., 'Syne', 'DM Sans'). Already quoted if needed; no extra quotes in template."
+      required: true
+    - name: body_font_url
+      type: string
+      description: "Body font name with spaces encoded as '+' (e.g., 'DM+Sans', 'IBM+Plex+Serif'). Used in Google Fonts URL."
+      required: true
+    - name: body_font_css
+      type: string
+      description: "Body font name as it appears in CSS (e.g., 'DM Sans', 'IBM Plex Serif'). Already quoted if needed; no extra quotes in template."
+      required: true
+  outputs:
+    primary: index.html
+  capabilities_required:
+    - file_write
+  example_prompt: "Make a waitlist page for a design tool — clean, minimal, with a custom logo and one call-to-action."
+---
+
+# Waitlist Page Skill
+
+Pre-launch pages are your first handshake with future users. This skill builds a focused, honest entrance: your brand identity, what you're making, one clear path to join the early list. No artificial scarcity, no fake countdown, no inflation tactics—just a clean, mobile-first vessel for genuine interest.
+
+## Workflow
+
+### Preflight: Load hardened template and brand foundation
+
+0. **Load the brand identity** — Read `DESIGN.md` for the color system, font pairing, and spatial rules. This is your foundation. A waitlist page lives or dies by consistency with the brand it represents. If `DESIGN.md` is missing, ask the user to provide one before you proceed.
+1. **Read and copy the reusable template** — Read `assets/template.html`. This template is the hardened seed for all outputs. Copy it to `index.html` as your base. Do not write HTML from scratch or deviate from this structure. The template has all required layout, form structure, decorations, focus styles, and accessibility scaffolding baked in.
+
+### Steps: Token replacement with validation and escaping
+
+2. **Map tokens from inputs** — For each placeholder in the template (e.g., `{{PRODUCT_NAME}}`, `{{BG_EXPRESSION}}`, `{{BORDER_EXPRESSION}}`, `{{LOGO_MARK}}`), follow the replacement rules below:
+   - **Text tokens** (`{{PRODUCT_NAME}}`, `{{TAGLINE}}`): HTML-escape `<`, `>`, `&`, `"`, `'` before insertion into HTML text nodes or attribute values.
+   - **HTML tokens** (`{{LOGO_MARK}}`): If using text initials, HTML-escape them by default. If using inline SVG, you must strictly sanitize it using an allowlist: strip `<script>` tags, event handlers (`on*`), `<foreignObject>`, external refs (`href`, `xlink:href`, `url()`), and any disallowed attributes/elements before insertion. If the SVG cannot be safely sanitized, fallback to escaped text initials. Never emit raw, unsanitized arbitrary HTML. Ensure any SVG scales cleanly within its container.
+   - **Color expression tokens** (`{{BG_EXPRESSION}}`, `{{FG_EXPRESSION}}`, `{{ACCENT_EXPRESSION}}`, `{{DECO_EXPRESSION}}`, `{{STRIPE_EXPRESSION}}`, `{{SUCCESS_EXPRESSION}}`, `{{BORDER_EXPRESSION}}`, `{{BTN_LABEL_EXPRESSION}}`, `{{TICKER_BG_EXPRESSION}}`, `{{TICKER_FG_EXPRESSION}}`, `{{DECO_STROKE_EXPRESSION}}`, `{{LOGO_SHADOW_EXPRESSION}}`, `{{LOGO_FG_EXPRESSION}}`): Must strictly adhere to an explicit color grammar (`#hex`, `rgb`/`rgba`, `hsl`/`hsla`, `oklch`, or `color-mix()` using only local variables). Hard reject any input containing `;`, `{}`, `<`, `>`, comments (`/*`), `@`, `url(`, or external refs to prevent CSS injection. Do not wrap in `#` or add extra quotes. Examples: `rgba(196, 169, 154, 0.38)`, `color-mix(in srgb, var(--fg) 38%, transparent)`, `#FDE8DF`. Insert as-is into `:root` CSS variables. Derive `--success` from DESIGN.md if present; otherwise use the allowed fallback `#2D6A4F` only.
+   - **Font name tokens** (`{{DISPLAY_FONT_CSS}}`, `{{BODY_FONT_CSS}}`): These are CSS font-family values, already quoted if they contain spaces (e.g., `'DM Sans'`, `Syne`). Insert as-is into `--font-display` and `--font-body` declarations; do NOT add extra quotes.
+   - **Font URL tokens** (`{{DISPLAY_FONT_URL}}`, `{{BODY_FONT_URL}}`): Spaces must be encoded as `+` for the Google Fonts URL (e.g., `DM+Sans`, `IBM+Plex+Serif`). Validate the URL is well-formed before insertion.
+3. **Verify token mapping rules** — All color tokens are now in CSS variables:
+   - `--bg` = `{{BG_EXPRESSION}}` (e.g., `#FDE8DF`)
+   - `--fg` = `{{FG_EXPRESSION}}` (e.g., `#1A1410`)
+   - `--accent` = `{{ACCENT_EXPRESSION}}` (brand badge)
+   - `--deco` = `{{DECO_EXPRESSION}}` (decoration primary)
+   - `--deco-stripe` = `{{STRIPE_EXPRESSION}}` (accent stripe)
+   - `--input-border` = `{{BORDER_EXPRESSION}}` (full CSS expression with opacity)
+   - `--success` = `{{SUCCESS_EXPRESSION}}` or `#2D6A4F` fallback
+   - `--btn-label` = `{{BTN_LABEL_EXPRESSION}}` (button text color for contrast)
+   - `--ticker-bg` = `{{TICKER_BG_EXPRESSION}}` (animated ticker background)
+   - `--ticker-fg` = `{{TICKER_FG_EXPRESSION}}` (animated ticker text)
+   - `--deco-stroke` = `{{DECO_STROKE_EXPRESSION}}` (SVG strokes, typically muted with 12–15% opacity)
+   - `--logo-shadow` = `{{LOGO_SHADOW_EXPRESSION}}` (logo container shadow, subtle foreground shade)
+   - `--logo-fg` = `{{LOGO_FG_EXPRESSION}}` (contrasting text color for logo initials)
+4. **Responsive layout** — The template includes mobile-first scaling:
+   - 375px: form stacks to single column, logo shrinks to 40px, decoration compresses, no horizontal scroll.
+   - 768px: comfortable two-column breathing room.
+   - 1440px+: centered layout with generous whitespace.
+   - Verify all text remains readable and the email input + button are fully visible (no clipping) at 375×667 and 390×844.
+
+### Validation: Run hardened quality gates before emitting
+
+5. **Run the quality checklist** — Read `references/checklist.md`. Validate every **P0 gate** before emitting:
+   - Exactly one CTA (email form)
+   - No countdown timer, no fake social proof, no emoji
+   - No horizontal scroll at 375px
+   - Email input has `type="email"` and `required`; first name has no `required`
+   - Form does NOT use `novalidate`; JS uses `checkValidity()` guard
+   - Success message has `role="status"` or `aria-live="polite"`
+   - All colors from DESIGN.md or allowed fallback; **no invented hex values**
+   - All user text is HTML-escaped; color tokens adhere to strict grammar; fonts are URL-encoded
+   - **Pass P0 or do not emit.** If any P0 gate fails, ask the user or fix the token mappings and try again.
+6. **Verify P1 gates** for quality submission (recommended):
+   - Hover and active states on submit button
+   - Form validation with clear feedback
+   - Ticker animation respects `prefers-reduced-motion: reduce`
+   - All interactive elements have visible focus styles (input:focus includes `outline`)
+   - Tab/Enter keyboard support
+   - WCAG AA contrast for body text (≥4.5:1) and button label (≥4.5:1)
+   - Logo alt/aria-label present; ticker has `aria-hidden="true"`
+   - `<html lang="">` is set
+
+### Output
+
+7. **Emit clean HTML** — Single file, CSS inlined, SVG for graphics. Mark interactive elements with `data-od-id` (headline, form, logo, ticker, grid, etc.) so agents can customize without parsing.
+
+## Quality gates
+
+This skill enforces a hardened, template-based workflow to ensure compliance. **You must follow this execution path; deviating from the template disqualifies the output.**
+
+**Mandatory template-based execution:**
+- Read `assets/template.html` as your base; do not write HTML from scratch.
+- Copy it to `index.html` and replace only the `{{PLACEHOLDER}}` tokens with validated/escaped values.
+- Run every P0 gate in `references/checklist.md` before emitting; if any fail, fix and re-validate.
+
+**P0 gates (must pass):**
+- Single CTA: Email form is the only interactive element. No nav, no secondary buttons, no social links.
+- Logo placement: Fixed top-left, matches DESIGN.md accent color, scales down on mobile (50px → 40px).
+- Color consistency: Every color from DESIGN.md palette. Only allowed hardcoded exception: `#2D6A4F` for `--success`.
+- No anti-patterns: No countdown timer, no fake social proof, no emoji icons, no lorem ipsum.
+- Content integrity: Headline and copy tie directly to `product_name` and `tagline` inputs—no filler copy.
+- Mobile fit: No horizontal scroll at 375px. Email input and submit button are fully visible (no clipping) at 375×667 and 390×844. Vertical overflow is scrollable, not hidden.
+- Typographic discipline: Display + body fonts only (2-font rule). Consistent sizing across sections.
+- Form structure: Two fields (first name optional, email required), `checkValidity()` guard, success message with `role="status"`.
+- Token escaping: All user-supplied text HTML-escaped; color tokens adhere to strict grammar and contain no unsafe characters (`;`, `{}`, `<`, `>`, `/*`, `@`, `url(`); font names are URL-encoded; `{{LOGO_MARK}}` is escaped text initials or strictly sanitized inline SVG (no scripts, no event handlers, no foreignObject, no external hrefs).
+
+**P1 gates (should pass for quality submission):**
+- Hero section visually distinct and above-the-fold.
+- Email submit button has hover and active states.
+- Form validation provides clear feedback.
+- Page scrollable (not clipped) at all mobile viewports; CTA visible without scroll.
+- Ticker animation paused/removed under `prefers-reduced-motion: reduce`.
+- All interactive elements have visible focus styles (outline, not just outline:none).
+- Keyboard: Tab reaches each form field; Enter submits.
+- WCAG AA contrast: Body text ≥4.5:1, button label ≥4.5:1.
+- Logo alt/aria-label present; ticker has `aria-hidden="true"`.
+- `<html lang="">` set to correct language code.
+
+**Decoration restraint:**
+- Lower zone enhances without distraction. Opacity, subtle strokes, muted animation.
+- No gradient that spans more than 20% of viewport height.
+- Coil, stripe, grid, or ticker all use colors from DESIGN.md only.
+
+## Output
+
+**Only emit after all P0 gates in `references/checklist.md` pass.**
+
+Emit the artifact between tags:
+
+```
+<artifact identifier="waitlist-id" type="text/html" title="Coming Soon — {{PRODUCT_NAME}}">
+<!doctype html>
+<html lang="en">
+...
+</html>
+</artifact>
+```
+
+One line of description above the artifact; nothing below.
+
+**Post-emission:** If the user asks for changes, update the index.html in-place and re-run the P0 checklist gates before emitting the next version. Do not skip validation on iterations.