agent-devkit 0.0.1

package/runtime/vendor/plugins/open-design/_official/examples/frame-macos-notification/open-design.json

@@ -0,0 +1,123 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-frame-macos-notification",
+  "title": "macOS Notification Banner",
+  "title_i18n": {
+    "en": "macOS Notification Banner",
+    "zh-CN": "macOS 通知横幅",
+    "zh-TW": "macOS 通知橫幅",
+    "ja": "macOS 通知バナー",
+    "ko": "macOS 알림 배너",
+    "de": "macOS-Benachrichtigungsbanner",
+    "fr": "Bannière de notification macOS",
+    "ru": "Баннер уведомлений macOS",
+    "es": "Banner de notificación macOS",
+    "pt-BR": "Banner de notificação macOS",
+    "it": "Banner di notifica macOS",
+    "vi": "Banner thông báo macOS",
+    "pl": "Banner powiadomień macOS",
+    "id": "Banner Notifikasi macOS",
+    "nl": "macOS-meldingsbanner",
+    "ar": "بانر إشعارات macOS",
+    "tr": "macOS Bildirim Banner'ı",
+    "uk": "Банер сповіщень macOS"
+  },
+  "version": "0.1.0",
+  "description": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
+  "description_i18n": {
+    "en": "Realistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.",
+    "zh-CN": "拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告",
+    "zh-TW": "逼真的 macOS 通知橫幅，包含應用程式圖示、標題和內文，適用於影片疊加層或產品預告。",
+    "ja": "アプリアイコン、タイトル、本文を含むリアルな macOS 通知バナー。動画オーバーレイや製品ティザーに最適。",
+    "ko": "앱 아이콘, 제목, 본문이 포함된 사실적인 macOS 알림 배너로, 비디오 오버레이나 제품 티저에 적합합니다.",
+    "de": "Realistisches macOS-Benachrichtigungsbanner mit App-Symbol, Titel und Text, geeignet für Video-Overlays oder Produkt-Teaser.",
+    "fr": "Bannière de notification macOS réaliste avec icône d'app, titre et corps de texte, adaptée aux superpositions vidéo ou teasers produit.",
+    "ru": "Реалистичный баннер уведомлений macOS с иконкой приложения, заголовком и текстом, подходит для видеооверлеев или анонсов продуктов.",
+    "es": "Banner de notificación macOS realista con icono de app, título y cuerpo, ideal para superposiciones de video o avances de productos.",
+    "pt-BR": "Banner de notificação macOS realista com ícone do app, título e corpo, ideal para sobreposições de vídeo ou teasers de produtos.",
+    "it": "Banner di notifica macOS realistico con icona app, titolo e corpo, adatto per overlay video o teaser di prodotti.",
+    "vi": "Banner thông báo macOS chân thực với biểu tượng ứng dụng, tiêu đề và nội dung, phù hợp cho lớp phủ video hoặc teaser sản phẩm.",
+    "pl": "Realistyczny banner powiadomień macOS z ikoną aplikacji, tytułem i treścią, odpowiedni do nakładek wideo lub zapowiedzi produktów.",
+    "id": "Banner notifikasi macOS realistis dengan ikon aplikasi, judul, dan isi, cocok untuk overlay video atau teaser produk.",
+    "nl": "Realistische macOS-meldingsbanner met app-pictogram, titel en tekst, geschikt voor video-overlays of productteaser.",
+    "ar": "بانر إشعارات macOS واقعي مع أيقونة التطبيق والعنوان والنص، مناسب لتراكبات الفيديو أو إعلانات المنتجات.",
+    "tr": "Uygulama simgesi, başlık ve gövde içeren gerçekçi macOS bildirim banner'ı, video kaplama veya ürün tanıtımları için uygundur.",
+    "uk": "Реалістичний банер сповіщень macOS з іконкою додатка, заголовком і текстом, підходить для відеооверлеїв або анонсів продуктів."
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Open Design",
+    "url": "https://github.com/nexu-io"
+  },
+  "homepage": "https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/frame-macos-notification",
+  "tags": [
+    "example",
+    "first-party",
+    "video",
+    "macos",
+    "notification",
+    "banner",
+    "overlay",
+    "frame"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "video",
+    "scenario": "video",
+    "surface": "video",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "Use the macOS Notification Banner template to turn my content into a realistic macOS notification banner for a video overlay or product teaser. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.",
+        "zh-CN": "用「macOS 通知横幅」模板把我的内容做成一段「拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "macOS Notification Banner",
+          "title_i18n": {
+            "en": "macOS Notification Banner",
+            "zh-CN": "macOS 通知横幅"
+          }
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "assets": [
+        "./example.html"
+      ]
+    },
+    "pipeline": {
+      "stages": [
+        {
+          "id": "generate",
+          "atoms": [
+            "file-write",
+            "live-artifact"
+          ]
+        }
+      ]
+    },
+    "capabilities": [
+      "prompt:inject",
+      "fs:write"
+    ]
+  }
+}

package/runtime/vendor/plugins/open-design/_official/examples/frontend-slides/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Zara Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/runtime/vendor/plugins/open-design/_official/examples/frontend-slides/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: frontend-slides
+description: "Create animation-rich, zero-dependency HTML presentations on a fixed 1920×1080 stage that scales to any viewport. Distinctive typography, committed palettes, choreographed reveals — no generic AI-slop aesthetics."
+triggers:
+  - "html slides"
+  - "animation slides"
+  - "interactive deck"
+  - "web ppt"
+  - "frontend slides"
+  - "presentation"
+od:
+  mode: deck
+  surface: web
+  category: slides
+  upstream: "https://github.com/zarazhangrui/frontend-slides"
+  preview:
+    type: html
+    entry: example.html
+  example_prompt: "Use Frontend Slides to turn my content into an animation-rich single-file HTML deck on a fixed 1920×1080 stage: distinctive typography, a committed palette, staggered reveals, keyboard navigation, and hash routing. Start from example.html and replace the content — keep the design system."
+  example_prompt_i18n:
+    zh-CN: "用 Frontend Slides 把我的内容做成一套动画丰富的单文件 HTML 幻灯片：固定 1920×1080 舞台等比缩放、个性化字体排印、克制而坚定的配色、错峰入场动画、键盘导航和 hash 路由。从 example.html 出发只替换内容，保留设计系统。"
+---
+
+# Frontend Slides
+
+Zero-dependency, animation-rich HTML presentations that run entirely in the browser. Curated from the MIT-licensed [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides).
+
+**Start from `example.html` in this plugin folder. It is the proven seed: copy its stage CSS, slide shell, and the entire `SlidePresentation` controller script verbatim, then replace slide content. Do not rewrite the stage system, the navigation script, or the design tokens architecture from scratch.**
+
+## Hard spec (locked — every deck must satisfy all of these)
+
+### Fixed 16:9 stage — NON-NEGOTIABLE
+
+- Every deck is authored on a fixed **1920×1080** canvas: `.deck-viewport` (fills the window) wraps `.deck-stage` (1920×1080, `transform-origin: 0 0`).
+- JavaScript scales the whole stage uniformly: `factor = min(innerWidth/1920, innerHeight/1080)`, then `translate(x, y) scale(factor)` to center with letterbox/pillarbox. Re-run on `resize`.
+- Never reflow slide content per device. No responsive breakpoints inside slides. All slide measurements are fixed px at the 1920×1080 design size.
+- Include the FULL contents of `references/viewport-base.css` in the `<style>` block (the seed already embeds it).
+
+### Slide structure
+
+- Each page is one `<section class="slide">` directly inside `.deck-stage`. Around 10 slides for a standard deck; split content into more slides rather than shrinking type.
+- Slide switching uses `.active` / `.visible` classes toggling `visibility`, `opacity`, `pointer-events` — **never `display: none/block`** (layout classes like `display: flex` on children would override it and show every slide at once).
+- No scrolling, no overflow, no overlapping panels, no text below comfortable reading size at 1920×1080.
+
+### Navigation runtime (keep the seed's script)
+
+- Keyboard: `←`/`→`, `↑`/`↓`, `Space`, `PageUp`/`PageDown`, `Home`/`End`.
+- Hash routing: current slide mirrored to `#/<index>`; deep links and `hashchange` restore the slide.
+- Mouse wheel (debounced ~650ms) and touch swipe (≥40px threshold).
+- Page counter chrome lives in `.deck-controls`, fixed-positioned **outside** the scaled stage.
+
+### Design tokens
+
+- All colors, fonts, sizes, and easing live in `:root` CSS custom properties; retheme by editing tokens only.
+- Typography: distinctive webfonts from Google Fonts or Fontshare — **never** Inter, Roboto, Arial, or system fonts as display type. Avoid `#6366f1` indigo and purple-gradient-on-white clichés.
+- Pick one preset from `references/STYLE_PRESETS.md` (12 curated presets: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink) or design a custom system with the same discipline. The seed ships **Bold Signal**.
+
+### Layout vocabulary (compose slides from these)
+
+`title-card` (colored focal card), `agenda` (numbered editorial list), `section divider` (giant outlined number), `bullets` (icon + heading + support line, max 4-6), `big-stat` (oversized number + side note), `quote`, `two-column comparison`, `principle grid` (2×2 cards), `CSS bar chart` (scaleY-animated bars), `closing`. Keep the slide-number top-left, breadcrumb nav top-right, and baseline rule bottom — that chrome is the deck's signature.
+
+### Motion
+
+- Entrances via `.reveal` elements that transition when the slide gains `.visible`; stagger with `transition-delay` steps (~0.1s).
+- One signature easing per deck (seed: `cubic-bezier(0.16, 1, 0.3, 1)`); animate only `transform` and `opacity`.
+- `prefers-reduced-motion` support is mandatory (included in viewport-base.css).
+- Match animation character to the content's feeling using `references/animation-patterns.md`.
+
+### Density modes
+
+Ask (or infer) whether the deck is speaker-led or reading-first:
+
+- **Low density / speaker-led** — one idea per slide, large type, 1-3 bullets max, more slides.
+- **High density / reading-first** — self-contained slides, structured grids/tables, 4-6 cards max, still no overflow.
+
+### Output contract
+
+- Single self-contained `.html` file: all CSS and JS inline, no build step, no external JS libraries, no CDN scripts.
+- Icons are inline SVG. No remote images from slow CDNs; CSS-generated visuals (gradients, shapes, patterns) are a first-class path.
+- Comment every section: `/* === SECTION NAME === */`.
+- CSS gotcha: never negate CSS functions directly (`-clamp()` is silently ignored) — use `calc(-1 * clamp(...))`.
+
+## References (read on demand)
+
+| File | When |
+| ---- | ---- |
+| `references/STYLE_PRESETS.md` | Choosing the visual direction |
+| `references/viewport-base.css` | Mandatory stage CSS — embed in full |
+| `references/html-template.md` | Controller architecture, inline-editing pattern, image pipeline |
+| `references/animation-patterns.md` | Matching effects to feeling |
+
+## Attribution
+
+Design system, fixed-stage model, presets, and workflow come from the upstream MIT-licensed [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides) (© 2025 Zara Zhang). The LICENSE file ships in this plugin folder; keep it in place when redistributing.