@easysociable/cli 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easysociable/cli",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "mcpName": "io.github.murphywuwu/easysociable-mcp",
   "description": "Agent-first CLI for EasySociable: Content Engine, Template, Slideshow, and MCP",
   "type": "module",

package/skills/easysociable-slideshow/SKILL.md

@@ -20,7 +20,8 @@ What only the user has never blocks the Run; it becomes a visible, replaceable
 stand-in they fill in Studio:
 
 - their Brand (name, handle, avatar) → bound samples (step 1);
-- their own material (screenshots, photos) → image placeholders (step 5).
+- their own material (screenshots, photos, results) → a finished stand-in now,
+  and one "swap in yours" line in the final message (step 5).
 
 ## Command output (`--json`)
 
@@ -35,7 +36,8 @@ Read results from these paths; don't guess:
 | `formulas get` | `data` (`beats[]`, `looks[].layouts`) |
 | `templates references` | a top-level array (`familyId`, `name`, `roles`, `style`, `requiresImage`) |
 | `templates source` | top level: `familyId`, `canvas`, `studioJson` |
-| `icons search --query <word>` | icon list for the word |
+| `icons search --query <word>` | icon list for the word (ids, no SVG) |
+| `icons get --id <id> --idempotency-key <any-unique-string>` | `canonicalSvg` to inline |
 | `images upload --path …` | `data[]` (`path`, `asset.url`, or `error`); exit 1 if any failed |
 | `slideshows create` | top level: `id`, `studioUrl` |
 
@@ -75,9 +77,12 @@ asks the user for exactly those fields and updates every page when they fill the
 Research the topic from primary sources (official announcement, docs,
 reputable press). Keep a source URL for every fact. Drop claims you can only
 find in secondary blogs. Never invent numbers, dates, quotes or features.
+A first-person result ("I tested", "亲测", "it replied …") is a fact too: write
+it only when the user's material or a knowledge page records it. Otherwise
+write the step as an instruction ("send it this prompt"), not a report.
 
-While you read those sources, collect **evidence images**: real pictures that
-can be a page's focal point (a product screenshot, a chart, a figure from the
+**Evidence images** are their own search, whatever the facts came from: real
+pictures that can be a page's focal point (a product screenshot, a chart, a figure from the
 paper). Aim for 2–4 per Run, the cover first. A page built around a real image
 reads as proof and looks different from its neighbours; a text-only deck does
 neither.
@@ -87,8 +92,10 @@ neither.
   figure as its own file); openly licensed images (Wikimedia Commons, CC0/CC BY).
   Never image search, stock sites, news-site photos, other creators' posts or
   anything watermarked.
-- Take image URLs from pages you already opened (`og:image`, images in the
-  body) and download them: `curl -sL -o assets/<name>.png <url>`. PNG, JPEG or
+- Start from the subject itself: open its official site, docs or help pages,
+  launch post and launch video (a knowledge page's source links are a good
+  start). Take image URLs from those pages (`og:image`, images in the body)
+  and download them: `curl -sL -o assets/<name>.png <url>`. PNG, JPEG or
   WebP only (convert anything else to PNG), ≤ 20 MB.
 - Launch posts often show the product only in demo videos: pull frames of the
   real UI straight from the video URL, without downloading the whole file
@@ -101,12 +108,11 @@ neither.
   area, carries a watermark, or shows a recognisable person who is not the
   subject.
 - Keep each kept image's source URL for the final message.
-- Found nothing usable → fine, step 5 handles it. Don't spend more than a few
-  fetches looking.
+- Done when the official site, docs and launch post/video were checked.
+  Nothing usable → fine, step 5 still gives every page a finished image.
 
 When the user started from a Content Engine run, facts come from its knowledge
-pages (see `easysociable-content`). That replaces fact research only: still
-collect evidence images for the run's subject as above.
+pages (see `easysociable-content`); evidence images are still searched as above.
 
 ### 3. Hook and structure
 
@@ -166,8 +172,9 @@ Structure (step 3) and look are chosen separately. The look comes from a
 
 Don't filter out references that need an image just because you have none:
 most covers in the library have an image area. Use one and fill that area
-without a photo (references/REFERENCES.md, "A reference's image area"). Keep a
-placeholder only where the content needs a real screenshot or photo (step 5).
+without a photo (references/REFERENCES.md, "A reference's image area"). Decide
+each page's image (step 5) while you pick its reference: a diagram needs the
+image area, a large evidence image needs a large one.
 `--no-image` is for when you specifically want designs drawn with type alone.
 Read each chosen design with `easysociable templates source --family <familyId> --json`
 and adapt it as in `references/REFERENCES.md` ("Adapting a reference" and
@@ -190,10 +197,11 @@ Say 'same as this'. Want another look? Say 'different look'."
 - Real products, apps, people, data → real screenshots or photos only. Never
   an AI-generated picture of a real product UI.
 - Concept / mood / background → generate one if this environment has an
-  image-generation tool; otherwise leave the page text-only.
+  image-generation tool; otherwise a diagram (3 below).
 - Generated images never contain text: all words stay in editable text layers.
   (A real screenshot or figure keeps its own text.)
-- Fill each image area in this order:
+- Every image area ships finished: never a grey placeholder, never "add
+  later". Fill it with the first of these you can do:
   1. The user's own image, when they gave one.
   2. An evidence image from step 2. Upload it
      (all at once: `easysociable images upload --path assets/a.png assets/b.jpg --json`)
@@ -201,25 +209,19 @@ Say 'same as this'. Want another look? Say 'different look'."
      Crop and scale it (`objectFit: 'cover'`, `objectPosition`), never alter
      what it shows. To point at something in it, add a separate element on top
      (a red ellipse border, an underline bar) so the user can move or delete it.
-  3. A screen that exists only after doing the page's steps (a prompt and the
-     AI's reply, a result page) and a browser tool is available → open the
-     product's web app, do exactly what the page says, screenshot each state,
-     crop to the phone or window. Login wall → ask the user once, for every
-     such page together: "Log in to <product> in this browser, then say done."
-     Never type a password yourself. Wait, then capture. They decline → 4.
-     Never a look-alike from someone else's post.
-  4. Something only the user has (their app, their dashboard, their results),
-     or a step-3 screen the user chose not to log in for → a **placeholder slot**, never
-     a text-only layout. Size it into the composition (usually the lower half
-     of the page) and label it with what to do and what to capture, e.g.
-     "Add: Grok Bot app screenshot" or "Add: Doubao's reply after you say 'I
-     goed to school' in voice mode". The user selects it in Studio and clicks
-     the upload button to replace it. Markup and SVG in
-     `references/REFERENCES.md` ("Image placeholder").
-  5. Anything else → fill the area from the content or delete it
-     (`references/REFERENCES.md`, "A reference's image area").
-- List every placeholder in the final message with how to get it
-  ("page 2: Doubao reply — say … in voice mode and screenshot the correction").
+     A screen you can capture yourself right now (a browser tool, no login,
+     no region block) counts too; never type a password or stop to ask.
+  3. A diagram drawn from the page's own words (references/REFERENCES.md,
+     "A reference's image area"): a prompt card for a tutorial step, A vs B
+     cards, ✗ / ✓, a 3–4 step flow, a big number. Always possible.
+- Never: a drawn imitation of a real product's UI, an invented AI reply or
+  screenshot, an invented number without "示例 / example" on it, an image from
+  someone else's post.
+- What only the user can add (their screenshot after logging in, their
+  dashboard, their results) is an upgrade, not a gap: list it at the end of
+  the final message, page by page, with how to get it and what the copy may
+  then say ("p2–4: log in to Doubao, send the prompt, screenshot the
+  correction; then the caption can say '亲测'").
 
 ### 6. Check (hard gate)
 
@@ -249,7 +251,7 @@ left ("The name, handle and avatar on pages 1 and 6 are samples: fill them
 once in the bar at the top of Studio, or in Brands at
 https://my.easysociable.com/brands, and every page updates"; name only the
 fields that are samples), the sources (facts and
-each evidence image: "p1 image: <url>"), and each image placeholder to replace (page + what to upload). Tell them to edit in
+each evidence image: "p1 image: <url>"), and the optional upgrades (step 5). Tell them to edit in
 Studio and click **Download** for the PNG ZIP.
 
 ### 8. Revise (same Run, never a copy)

package/skills/easysociable-slideshow/references/REFERENCES.md

@@ -29,13 +29,19 @@ Roles overlap in the catalog, so pass related ones together: `hook,cover` ·
    `height` = lines × lineHeight + ~12% of fontSize for descenders.
 4. Remove what you do not need; add only elements copied from another reference
    with the same `style` (rule rows, a stat row).
-4a. **A reference's image area** when you have no image and the content does
-   not need a real one: keep the area's box and fill it from the content with a
-   large number or keyword, a short quote with an oversized quote mark, an
-   accent-colour block carrying one word, or one icon from
-   `easysociable icons search --query <word>` on a tinted block. Never a grey placeholder or an
-   empty box on the cover. If nothing fits, delete the area and give the
-   headline its space.
+4a. **A reference's image area** when you have no real image: keep the area's
+   box and draw a diagram from the page's own words, every part editable text
+   or shapes:
+   - prompt card: the exact prompt the page tells the reader to send, in a
+     chat-bubble-like card with no product logo or UI chrome;
+   - A vs B: two cards side by side, a "vs" or arrow between;
+   - ✗ / ✓: the wrong and right version of the same thing;
+   - flow: 3–4 nodes with arrows for steps;
+   - a large number or keyword, a short quote with an oversized quote mark,
+     or an accent block carrying one word.
+   Icons: `easysociable icons search --query <word>`, then `icons get` for its
+   `canonicalSvg`. Made-up figures carry "示例 / example". Never an empty box. If
+   nothing fits, delete the area and give the headline its space.
 5. Brand chrome — every Run carries the Brand, bound so one Brand edit updates
    every page. The cover has a signature (avatar + name + handle); the CTA has
    avatar + handle next to the action. Inner pages keep only the Brand spots
@@ -86,29 +92,3 @@ Use one in `theme.json` as `{ "color": { "canvas", "text", "textMuted", "accent"
 | `dark` | `#06080C` / `#FFFFFF` / `#C7CBD3` / `#4C9BFF` |
 | `bold_promo` | `#F9F9F9` / `#0A0A0A` / `#555555` / `#0066DD` |
 
-## Image placeholder
-
-A replaceable image slot for a real screenshot or photo the user will add.
-Studio shows an upload button when it is selected.
-
-```jsx
-<img data-type="image" data-variable="image_0" data-image-mode="slot_default"
-  alt="Add: <what goes here>" src="data:image/svg+xml;base64,<SVG>"
-  style={{ position: 'absolute', left: 88, top: 760, width: 904, height: 388, objectFit: 'cover', borderRadius: 24 }} />
-```
-
-`<SVG>` is base64 of a grey box with an image icon and the label, sized to the slot:
-
-```xml
-<svg xmlns='http://www.w3.org/2000/svg' width='904' height='388' viewBox='0 0 904 388'>
-  <rect width='904' height='388' fill='#DDD6CC'/>
-  <g transform='translate(416,124)' fill='none' stroke='#8C8781' stroke-width='5' stroke-linejoin='round'>
-    <rect width='72' height='56' rx='8'/><path d='M6 50 L26 28 L40 42 L50 34 L66 50'/><circle cx='52' cy='16' r='6'/>
-  </g>
-  <text x='50%' y='230' text-anchor='middle' font-family='Inter, Arial, sans-serif' font-size='32' font-weight='600' fill='#6F6A64'>Add: Grok Bot app screenshot</text>
-</svg>
-```
-
-Put the same data URL in the page's `slots` under `image_N`. Number slots
-`image_0`, `image_1`, … per page. Use the style's own colours for the box
-(canvas-adjacent grey on light styles, `#1A1F27` on dark ones).