npm - agent-devkit - Versions diffs - 0.0.1 - Mend

agent-devkit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4610) hide show

package/runtime/vendor/plugins/open-design/_official/examples/social-carousel/example.html ADDED Viewed

@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Three posts. One beat. — social carousel</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --stage: #0a0a0a;
+      --stage-2: #141414;
+      --paper: #f4ede0;
+      --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
+      --mono: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background:
+        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,255,255,0.04), transparent 70%),
+        var(--stage);
+      color: #f4ede0;
+      font: 14px/1.5 -apple-system, system-ui, sans-serif;
+    }
+    .stage {
+      max-width: 1280px; margin: 0 auto; padding: 60px 32px 80px;
+    }
+    .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
+    .stage-head h1 { margin: 0; font: italic 700 36px/1 var(--serif); letter-spacing: -0.005em; }
+    .stage-head h1 em { font-style: normal; }
+    .stage-head h1 .dot { color: #a4a09a; }
+    .stage-head .lede { margin: 8px 0 0; font: 11px/1.6 var(--mono); color: rgba(244,237,224,0.5); letter-spacing: 0.06em; max-width: 60ch; text-transform: uppercase; }
+    .stage-head .badge { font: 10.5px/1 var(--mono); padding: 7px 10px; border: 1px solid rgba(244,237,224,0.3); color: rgba(244,237,224,0.7); letter-spacing: 0.18em; flex-shrink: 0; }
+    .row { display: flex; gap: 22px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
+    .card {
+      width: clamp(280px, 30vw, 380px);
+      aspect-ratio: 1 / 1;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,0.06);
+      box-shadow: 0 30px 60px rgba(0,0,0,0.45);
+      position: relative;
+      overflow: hidden;
+      color: #ffffff;
+    }
+    .card .scrim {
+      position: absolute; inset: 0;
+      background:
+        linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
+      pointer-events: none;
+    }
+    .card .top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
+    .card .brand { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); border-radius: 999px; }
+    .card .brand .name { font: italic 700 13px/1 var(--serif); }
+    .card .brand .dot { width: 5px; height: 5px; background: var(--paper); border-radius: 50%; opacity: 0.9; }
+    .card .index { font: 11px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.16em; text-align: right; padding: 6px 10px; background: rgba(0,0,0,0.30); backdrop-filter: blur(4px); border-radius: 4px; }
+    .card .lockup { position: absolute; left: 22px; right: 22px; bottom: 78px; }
+    .card .lockup h2 { margin: 0; font: 700 60px/1 var(--serif); letter-spacing: -0.005em; color: #ffffff; }
+    .card .lockup h2 em { font-style: italic; }
+    .card .lockup h2 .accent { font-style: italic; }
+    .card .footer { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; }
+    .card .footer .caption { font: 10.5px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.14em; text-transform: uppercase; max-width: 70%; }
+    .card .loop { font: 10.5px/1 var(--mono); padding: 6px 8px; border: 1px solid rgba(255,255,255,0.55); border-radius: 4px; color: rgba(255,255,255,0.85); letter-spacing: 0.18em; }
+    /* Card 1 — dawn meadow, blue sky */
+    .card.c1 {
+      background:
+        linear-gradient(180deg, #5b8cb6 0%, #92aebd 32%, #b0a679 50%, #6f8a4d 70%, #2a4a2a 100%),
+        #4a6a8a;
+    }
+    .card.c1 .figure {
+      position: absolute; left: 50%; top: 56%;
+      width: 80px; height: 200px;
+      transform: translate(-50%, 0);
+      background:
+        radial-gradient(ellipse 30px 14px at 50% 30%, #2a1f15 0%, #2a1f15 60%, transparent 70%),
+        linear-gradient(180deg, #2a1f15 0%, #4a3018 22%, #6a3a1a 60%, transparent 100%);
+      filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
+      clip-path: polygon(35% 0%, 65% 0%, 78% 26%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 22% 26%);
+      opacity: 0.92;
+    }
+    /* Card 2 — forest dusk, warm orange center */
+    .card.c2 {
+      background:
+        radial-gradient(ellipse 80% 50% at 50% 100%, #f49255 0%, #c95a30 35%, transparent 60%),
+        radial-gradient(ellipse 80% 80% at 50% 90%, rgba(255,180,120,0.5), transparent 60%),
+        linear-gradient(180deg, #1c2a25 0%, #2a3a30 30%, #4a3a26 70%, #2a1a14 100%);
+    }
+    .card.c2 .trees {
+      position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+    }
+    .card.c2 .trees::before, .card.c2 .trees::after {
+      content: ''; position: absolute; bottom: 0; width: 50%; height: 70%;
+      background:
+        radial-gradient(circle at 20% 90%, #0f1a14 6px, transparent 7px),
+        radial-gradient(circle at 50% 88%, #0f1a14 8px, transparent 9px),
+        radial-gradient(circle at 80% 92%, #0f1a14 6px, transparent 7px);
+    }
+    .card.c2 .trees::before { left: 0; background:
+      linear-gradient(180deg, transparent 0%, transparent 30%, rgba(15,26,20,0.85) 30%, #0f1a14 100%);
+      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
+    }
+    .card.c2 .trees::after { right: 0; background:
+      linear-gradient(180deg, transparent 0%, transparent 36%, rgba(15,26,20,0.85) 36%, #0f1a14 100%);
+      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
+    }
+    .card.c2 .figure {
+      position: absolute; left: 52%; top: 56%; width: 56px; height: 130px;
+      transform: translate(-50%, 0);
+      background: linear-gradient(180deg, #2a1810 0%, #4a2818 100%);
+      clip-path: polygon(40% 0%, 60% 0%, 70% 22%, 70% 56%, 65% 100%, 35% 100%, 30% 56%, 30% 22%);
+      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
+    }
+    /* Card 3 — pink ridge / mountain */
+    .card.c3 {
+      background:
+        linear-gradient(180deg, #1b1e3a 0%, #4a3956 28%, #c9627e 60%, #d57f86 75%, #b8d2d8 100%);
+    }
+    .card.c3 .ridge {
+      position: absolute; inset: 0;
+      background:
+        linear-gradient(180deg, transparent 60%, rgba(60,30,40,0.4) 80%, rgba(40,20,30,0.7) 100%);
+    }
+    .card.c3 .ridge::before {
+      content: ''; position: absolute; left: 0; right: 0; bottom: 24%;
+      height: 30%;
+      background:
+        linear-gradient(180deg, #b3526a 0%, #7a3148 100%);
+      clip-path: polygon(0% 60%, 12% 30%, 22% 50%, 36% 18%, 50% 40%, 60% 22%, 72% 48%, 86% 26%, 100% 50%, 100% 100%, 0% 100%);
+    }
+    .card.c3 .ridge::after {
+      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
+      height: 32%;
+      background: linear-gradient(180deg, #2a1f2a 0%, #1a1018 100%);
+      clip-path: polygon(0% 50%, 8% 20%, 18% 38%, 30% 8%, 44% 32%, 56% 12%, 68% 36%, 82% 18%, 100% 40%, 100% 100%, 0% 100%);
+    }
+    .card.c3 .figure {
+      position: absolute; right: 18%; bottom: 14%; width: 30px; height: 56px;
+      background: #1a0d12;
+      clip-path: polygon(35% 0%, 65% 0%, 75% 30%, 60% 100%, 40% 100%, 25% 30%);
+      filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
+    }
+    @media (max-width: 1180px) {
+      .row { flex-direction: column; align-items: center; }
+      .card { width: min(96vw, 480px); }
+      .card .lockup h2 { font-size: 56px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="stage" data-od-id="stage">
+    <div class="stage-head">
+      <div>
+        <h1>Three posts<span class="dot">.</span> One <em>beat</em><span class="dot">.</span></h1>
+        <p class="lede">1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.</p>
+      </div>
+      <span class="badge">SERIES · 01 → 03</span>
+    </div>
+    <div class="row" data-od-id="cards">
+      <article class="card c1" data-od-id="card-1">
+        <div class="figure"></div>
+        <div class="scrim"></div>
+        <div class="top">
+          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
+          <div class="index">01 · ONWARDS</div>
+        </div>
+        <div class="lockup"><h2>onwards<em>.</em></h2></div>
+        <div class="footer">
+          <div class="caption">Man, walking forward — close.</div>
+          <div class="loop">1× LOOP</div>
+        </div>
+      </article>
+      <article class="card c2" data-od-id="card-2">
+        <div class="trees"></div>
+        <div class="figure"></div>
+        <div class="scrim"></div>
+        <div class="top">
+          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
+          <div class="index">02 · TO THE NEXT ONE</div>
+        </div>
+        <div class="lockup"><h2><span class="accent">to the</span><br/><em>next one.</em></h2></div>
+        <div class="footer">
+          <div class="caption">Woman, stepping into frame.</div>
+          <div class="loop">1× LOOP</div>
+        </div>
+      </article>
+      <article class="card c3" data-od-id="card-3">
+        <div class="ridge"></div>
+        <div class="figure"></div>
+        <div class="scrim"></div>
+        <div class="top">
+          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
+          <div class="index">03 · LOOKING AHEAD</div>
+        </div>
+        <div class="lockup"><h2>looking<br/><em>ahead.</em></h2></div>
+        <div class="footer">
+          <div class="caption">Woman, overlooking the city.</div>
+          <div class="loop">1× LOOP</div>
+        </div>
+      </article>
+    </div>
+  </div>
+</body>
+</html>

package/runtime/vendor/plugins/open-design/_official/examples/social-carousel/open-design.json ADDED Viewed

@@ -0,0 +1,128 @@
+{
+  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
+  "specVersion": "1.0.0",
+  "name": "example-social-carousel",
+  "title": "Social Carousel",
+  "title_i18n": {
+    "zh-CN": "社交媒体轮播图",
+    "zh-TW": "社群媒體輪播圖",
+    "ja": "ソーシャルカルーセル",
+    "ko": "소셜 캐러셀",
+    "de": "Social Carousel",
+    "fr": "Carrousel Social",
+    "ru": "Социальная карусель",
+    "es": "Carrusel Social",
+    "pt-BR": "Carrossel Social",
+    "it": "Carosello Social",
+    "vi": "Băng chuyền mạng xã hội",
+    "pl": "Karuzela społecznościowa",
+    "id": "Carousel Sosial",
+    "nl": "Sociale Carousel",
+    "ar": "دوّار وسائل التواصل",
+    "tr": "Sosyal Carousel",
+    "uk": "Соціальна карусель",
+    "en": "Social Carousel"
+  },
+  "version": "0.1.0",
+  "description": "A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series (\"onwards.\" → \"to the next one.\" → \"looking ahead.\"). Each card has a brand mark, a number / total, a caption, and a \"loop\" affordance. Use when the brief asks for a \"carousel post\", \"social carousel\", \"Instagram carousel\", \"LinkedIn series\", \"X thread cards\", or \"三连发\".",
+  "description_i18n": {
+    "zh-CN": "三张 1080×1080 方形社交媒体轮播卡片——三个富有电影感和品牌调性的面板，配有连贯的展示标题（'往前走。' → '到下一个。' → '展望未来。'）。每张卡片包含品牌标识、序号/总数、说明文字和'循环'提示。适用于'轮播帖子'、'社交媒体轮播'、'Instagram 轮播'、'LinkedIn 系列'、'X 系列卡片'或'三连发'等需求。",
+    "zh-TW": "三張 1080×1080 方形社群媒體輪播卡片——三個富有電影感和品牌調性的面板，配有連貫的展示標題（'繼續前進。' → '到下一個。' → '展望未來。'）。每張卡片包含品牌標誌、序號/總數、說明文字和'循環'提示。適用於'輪播貼文'、'社群媒體輪播'、'Instagram 輪播'、'LinkedIn 系列'、'X 系列卡片'或'三連發'等需求。",
+    "ja": "1080×1080の正方形で構成される3枚のソーシャルメディアカルーセル。映画的でブランドに沿った3つのパネルに、シリーズ全体で連続する見出し（『前へ。』→『次へ。』→『先を見据えて。』）を配置。各カードにはブランドマーク、番号/総数、キャプション、「ループ」アフォーダンスが含まれます。『カルーセル投稿』『ソーシャルカルーセル』『Instagram カルーセル』『LinkedIn シリーズ』『X スレッドカード』『三連発』などの要件に対応。",
+    "ko": "1080×1080 정사각형으로 배치된 3장의 소셜 미디어 캐러셀 카드. 영화적이고 브랜드에 맞는 3개의 패널에 시리즈 전체를 연결하는 헤드라인('계속 앞으로.' → '다음으로.' → '앞을 바라보며.')을 제공합니다. 각 카드에는 브랜드 마크, 번호/전체 수, 캡션, '루프' 어포던스가 포함됩니다. '캐러셀 게시물', '소셜 캐러셀', 'Instagram 캐러셀', 'LinkedIn 시리즈', 'X 스레드 카드', '三连发' 요청 시 사용하세요.",
+    "de": "Ein dreiteiliges Social-Media-Karussell mit 1080×1080-Quadraten – drei filmische, markengerechte Panels mit Display-Überschriften, die über die Serie hinweg verbunden sind ('vorwärts.' → 'zum nächsten.' → 'nach vorne blicken.'). Jede Karte enthält ein Markenzeichen, Nummer/Gesamt, eine Bildunterschrift und ein 'Loop'-Affordance. Verwenden Sie es für Anfragen wie 'Karussell-Post', 'Social Carousel', 'Instagram-Karussell', 'LinkedIn-Serie', 'X-Thread-Karten' oder '三连发'.",
+    "fr": "Un carrousel de trois cartes pour les réseaux sociaux au format 1080×1080 – trois panneaux cinématographiques alignés sur la marque avec des titres qui se connectent à travers la série ('en avant.' → 'vers le suivant.' → 'regard vers l'avenir.'). Chaque carte comprend un logo de marque, un numéro/total, une légende et une affordance de 'boucle'. À utiliser pour les demandes de 'post carrousel', 'carrousel social', 'carrousel Instagram', 'série LinkedIn', 'cartes de thread X' ou '三连发'.",
+    "ru": "Трёхкарточная карусель для соцсетей в формате 1080×1080 квадратов – три кинематографичные панели в фирменном стиле с заголовками, связанными по всей серии ('вперёд.' → 'к следующему.' → 'смотрим в будущее.'). Каждая карточка содержит логотип бренда, номер/всего, подпись и индикатор 'петли'. Используйте для запросов 'карусельный пост', 'социальная карусель', 'карусель Instagram', 'серия LinkedIn', 'карточки треда X' или '三连发'.",
+    "es": "Un carrusel de tres tarjetas para redes sociales en formato 1080×1080 – tres paneles cinematográficos alineados con la marca, con titulares que se conectan a lo largo de la serie ('adelante.' → 'al siguiente.' → 'mirando al futuro.'). Cada tarjeta incluye marca, número/total, pie de foto y affordance de 'bucle'. Úselo para solicitudes de 'publicación en carrusel', 'carrusel social', 'carrusel de Instagram', 'serie de LinkedIn', 'tarjetas de hilo de X' o '三连发'.",
+    "pt-BR": "Um carrossel de três cartões para mídias sociais em formato 1080×1080 – três painéis cinematográficos alinhados à marca com títulos que se conectam ao longo da série ('em frente.' → 'para o próximo.' → 'olhando adiante.'). Cada cartão inclui marca, número/total, legenda e affordance de 'loop'. Use para solicitações de 'post em carrossel', 'carrossel social', 'carrossel do Instagram', 'série do LinkedIn', 'cartões de thread do X' ou '三连发'.",
+    "it": "Un carosello social a tre schede in formato 1080×1080 – tre pannelli cinematografici in linea con il brand con titoli che si collegano attraverso la serie ('avanti.' → 'al prossimo.' → 'guardando avanti.'). Ogni scheda include marchio del brand, numero/totale, didascalia e affordance di 'loop'. Da usare per richieste di 'post carosello', 'carosello social', 'carosello Instagram', 'serie LinkedIn', 'schede thread X' o '三连发'.",
+    "vi": "Băng chuyền ba thẻ cho mạng xã hội với bố cục 1080×1080 hình vuông – ba bảng điều khiển điện ảnh phù hợp thương hiệu với tiêu đề hiển thị kết nối qua chuỗi ('tiến lên.' → 'đến cái tiếp theo.' → 'nhìn về phía trước.'). Mỗi thẻ có logo thương hiệu, số/tổng số, chú thích và affordance 'vòng lặp'. Sử dụng khi yêu cầu 'bài đăng băng chuyền', 'băng chuyền xã hội', 'băng chuyền Instagram', 'chuỗi LinkedIn', 'thẻ chuỗi X' hoặc '三连发'.",
+    "pl": "Trzykartkowa karuzela do mediów społecznościowych w formacie 1080×1080 kwadratów – trzy filmowe panele zgodne z marką z nagłówkami łączącymi się w całej serii ('dalej.' → 'do następnego.' → 'patrząc w przyszłość.'). Każda karta zawiera znak marki, numer/całość, podpis i affordance 'pętli'. Użyj w przypadku zapytań o 'post karuzelowy', 'karuzela społecznościowa', 'karuzela Instagram', 'seria LinkedIn', 'karty wątku X' lub '三连发'.",
+    "id": "Carousel media sosial tiga kartu dengan tata letak 1080×1080 persegi – tiga panel sinematik sesuai merek dengan judul tampilan yang terhubung di seluruh seri ('maju.' → 'ke yang berikutnya.' → 'melihat ke depan.'). Setiap kartu memiliki merek, nomor/total, keterangan, dan affordance 'loop'. Gunakan saat brief meminta 'postingan carousel', 'carousel sosial', 'carousel Instagram', 'seri LinkedIn', 'kartu thread X', atau '三连发'.",
+    "nl": "Een driekaarten social media-carousel met 1080×1080 vierkanten – drie filmische, merkconforme panelen met display-koppen die over de serie heen verbonden zijn ('voorwaarts.' → 'naar de volgende.' → 'vooruitkijkend.'). Elke kaart heeft een merkteken, nummer/totaal, bijschrift en een 'loop'-affordance. Gebruik wanneer de briefing vraagt om 'carrouselpost', 'sociale carousel', 'Instagram-carousel', 'LinkedIn-serie', 'X-thread-kaarten' of '三连发'.",
+    "ar": "دوّار من ثلاث بطاقات لوسائل التواصل الاجتماعي بتخطيط 1080×1080 مربع – ثلاث لوحات سينمائية متوافقة مع العلامة التجارية بعناوين عرض متصلة عبر السلسلة ('إلى الأمام.' → 'إلى التالي.' → 'نظرة للمستقبل.'). كل بطاقة تحتوي على علامة تجارية، رقم/الإجمالي، تعليق توضيحي، وإشارة 'حلقة'. استخدمها عندما يطلب الموجز 'منشور دوّار'، 'دوّار اجتماعي'، 'دوّار Instagram'، 'سلسلة LinkedIn'، 'بطاقات خيط X'، أو '三连发'.",
+    "tr": "1080×1080 kare düzeninde üç kartlı sosyal medya carousel'i – seri boyunca birbirine bağlanan başlıklarla ('ileriye.' → 'bir sonrakine.' → 'ileriye bakarak.') sinematik, markaya uygun üç panel. Her kart bir marka işareti, sayı/toplam, başlık ve 'döngü' affordance içerir. 'Carousel gönderisi', 'sosyal carousel', 'Instagram carousel', 'LinkedIn serisi', 'X dizi kartları' veya '三连发' talep edildiğinde kullanın.",
+    "uk": "Трикарткова карусель для соцмереж у форматі 1080×1080 квадратів – три кінематографічні панелі в стилі бренду із заголовками, що з'єднуються впродовж серії ('вперед.' → 'до наступного.' → 'дивлячись уперед.'). Кожна картка містить логотип бренду, номер/усього, підпис та індикатор 'петлі'. Використовуйте для запитів 'карусельний пост', 'соціальна карусель', 'карусель Instagram', 'серія LinkedIn', 'картки треду X' або '三连发'.",
+    "en": "A three-card social-media carousel laid out as 1080×1080 squares — three cinematic, on-brand panels with display headlines that connect across the series (\"onwards.\" → \"to the next one.\" → \"looking ahead.\"). Each card has a brand mark, a number / total, a caption, and a \"loop\" affordance. Use when the brief asks for a \"carousel post\", \"social carousel\", \"Instagram carousel\", \"LinkedIn series\", \"X thread cards\", or \"三连发\"."
+  },
+  "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/social-carousel",
+  "tags": [
+    "example",
+    "first-party",
+    "prototype",
+    "marketing",
+    "web",
+    "desktop",
+    "social-carousel",
+    "carousel-post",
+    "instagram-carousel",
+    "linkedin-carousel",
+    "x-thread-cards",
+    "social-series",
+    "untitled"
+  ],
+  "compat": {
+    "agentSkills": [
+      {
+        "path": "./SKILL.md"
+      }
+    ]
+  },
+  "od": {
+    "kind": "scenario",
+    "taskKind": "new-generation",
+    "mode": "prototype",
+    "platform": "desktop",
+    "scenario": "marketing",
+    "surface": "web",
+    "preview": {
+      "type": "html",
+      "entry": "./example.html"
+    },
+    "useCase": {
+      "query": {
+        "en": "Design a 3-card cinematic social carousel — ‘onwards.’, ‘to the next one.’, ‘looking ahead.’. 1080×1080 squares, drop-into-Instagram ready.",
+        "zh-CN": "使用这个插件完成以下任务：Design a 3-card cinematic social carousel — ‘onwards.’, ‘to the next one.’, ‘looking ahead.’. 1080×1080 squares, drop-into-Instagram ready."
+      },
+      "exampleOutputs": [
+        {
+          "path": "./example.html",
+          "title": "Social Carousel"
+        }
+      ]
+    },
+    "context": {
+      "skills": [
+        {
+          "path": "./SKILL.md"
+        }
+      ],
+      "designSystem": {
+        "primary": true
+      },
+      "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/social-media-dashboard/SKILL.md ADDED Viewed

@@ -0,0 +1,118 @@
+---
+name: social-media-dashboard
+description: |
+  Creator-facing social media analytics dashboard in a single HTML file.
+  A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI
+  cards (followers, engagement rate, likes, reposts), a follower-growth
+  chart, a "top post this week" preview, and a trending topics / top
+  comments side panel. Use when the brief mentions a "social media
+  dashboard", "creator analytics", "social analytics", or names specific
+  platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together
+  with metrics like followers, engagement, likes, reposts.
+triggers:
+  - "social media dashboard"
+  - "social analytics"
+  - "creator dashboard"
+  - "creator analytics"
+  - "social media analytics"
+  - "社媒后台"
+  - "创作者后台"
+  - "社交媒体仪表盘"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: creator
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments."
+---
+# Social Media Dashboard Skill
+Produce a single-screen, creator-facing social media analytics dashboard.
+## Workflow
+1. **Read the active DESIGN.md** (injected above). Colors, typography,
+   spacing, radii, and component styling all come from it. Do not invent
+   new tokens; do not hard-code brand colors of the platforms — let the
+   DESIGN.md carry the visual identity, and reference platforms only by
+   name and monogram.
+2. **Identify** which platforms the brief calls out. Default to
+   X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform
+   switcher to a single row, max 5 entries.
+3. **Generate plausible data**, never `Metric A / Metric B` placeholders.
+   Pick a creator persona (default: "AI / design indie creator") and
+   derive consistent numbers across the page — e.g. follower counts on
+   the switcher must match the KPI row when X is selected.
+4. **Lay out** the page top-to-bottom:
+   - **Header bar**: brand mark + section label ("ANALYTICS"), a
+     dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a
+     creator avatar block on the right.
+   - **Hero strip**: a one-sentence summary in display type
+     ("You shipped 14 posts on X this week."), one supporting line of
+     metadata, and two CTAs ("Export report", "New post →").
+   - **Ask bar**: a single-line input styled as a search field, with
+     ghost-text suggestions ("top performing last week",
+     "comments from verified accounts").
+   - **Platform switcher**: 4 cards in one row, each with platform
+     monogram, name, follower count, and a `+X.XK this week` delta. The
+     active platform uses an elevated surface from DESIGN.md.
+   - **KPI row**: 4 cards — Followers · Engagement Rate · Likes (7D) ·
+     Reposts (7D). Each card has a label (uppercase, label-md), a big
+     value (display or headline-lg), a delta vs prior period, and a
+     small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").
+   - **Main grid (2/3 + 1/3)**:
+     - Left: **Follower Growth · 30D** — a full-width inline SVG line
+       chart with a soft area fill underneath, axis ticks at start /
+       midpoint / end, and two labelled annotation dots
+       ("Newsletter drop +842", "Viral thread +1.2K").
+     - Right: **Top Post · This Week** — a card showing the rendered
+       post (avatar, handle, post body, optional 16:9 media block), with
+       a header tag "click-through rate 5.6%" in the DS accent.
+   - **Lower grid (1/2 + 1/2)**:
+     - **Trending topics on this platform**: 5–7 chip-style rows with
+       topic name + post count + 24h delta sparkline (10 polyline
+       points, no labels).
+     - **Top comments**: 3 cards, each with avatar, handle (verified
+       check if relevant), comment body (2 lines max, ellipsised), and
+       a small `❤ 312 · 💬 18` row in muted text.
+5. **Write** one self-contained HTML document:
+   - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
+   - CSS Grid for page-level layout; Flexbox inside cards.
+   - Semantic HTML: `<header>`, `<main>`, `<section>`, `<article>`.
+   - Tag each logical region with `data-od-id="slug"` for comment mode:
+     `header`, `hero`, `ask`, `platform-switcher`, `kpis`,
+     `follower-growth`, `top-post`, `trending`, `top-comments`.
+6. **Charts**: inline SVG only, no JS libraries.
+   - Line chart: `<path>` for the curve, a second `<path>` with low-alpha
+     fill for the area, two `<circle>` annotation dots with text labels.
+   - Sparklines: `<polyline>` with 10 points, no axes, ~16px tall.
+   - Use the DS accent for highlights and the DS `on-surface-variant` for
+     muted text. Accent appears at most three times on the page.
+7. **Self-check**:
+   - Every color resolves to a DESIGN.md token (or a documented
+     `rgba(token, alpha)` for glass surfaces).
+   - Numbers are internally consistent (switcher follower count matches
+     the active platform's KPI).
+   - Header bar and hero strip are sticky; main content scrolls.
+   - Density follows the DS mood: glass / cosmic DSes get more breathing
+     room and ambient glow on the active platform; clean / corporate DSes
+     tighten gaps and drop the glow.
+## Output contract
+Emit between `<artifact>` tags:
+```
+<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+One sentence before the artifact, nothing after.