@feimacode/open-design-agent-kit 0.1.8 → 0.2.0

package/assets/codex-skills/open-design-poster/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: open-design-poster
+description: Design a poster or flyer for print or screen, check it, and export print-ready PDFs or upload-ready images, including other sizes and one version per row of a spreadsheet — use whenever the user wants a poster, flyer, event or gig poster, print piece, handout, certificate or name card set, or wants an existing design in other sizes or as a print-ready PDF, even if they don't mention Open Design
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Design a poster with Open Design, check it, and export files that are ready to print or post.
+
+Brief: the rest of the user's message (if there is none, ask the user: "What is the poster for, and is it for print (which size) or screens?")
+
+## 1. Pick the medium and a default shape
+
+Decide whether this is for **print** or **screens**. If the brief doesn't say, ask the user before doing anything else. Don't guess between print and screen: the units, bleed and type sizes are different.
+
+You don't need the final size yet. The poster is built **fluid**: it reflows to any shape, so the user can pick or change the size later, when exporting. Use the size the user names as the default shape; otherwise use `a3` for print and `ig-portrait` for screens, and tell the user they can change it at any time.
+
+| Use | Format id | Size |
+|---|---|---|
+| Print, small: flyer, handout | `a4` · `letter` | 210×297 mm · 8.5×11 in |
+| Print, medium: notice-board poster | `a3` · `tabloid` | 297×420 mm · 11×17 in |
+| Print, large: wall poster | `a2` · `a1` · `poster-18x24` · `poster-24x36` | 420×594 mm · 594×841 mm · 18×24 in · 24×36 in |
+| Print, conference or research poster | `a0` | 841×1189 mm |
+| Instagram portrait | `ig-portrait` | 1080×1350 px |
+| Story / Reels / TikTok cover | `story` | 1080×1920 px |
+| X single image | `x-image` | 1600×900 px |
+| Square (Instagram / LinkedIn) | `ig-square` | 1080×1080 px |
+
+A handout and a wall poster carry different amounts of text, so if the user says which it is, write the copy for that; the shape itself can still change.
+
+## 2. Generate
+
+If the user asked for options ("show me a few directions"), run a design exploration first and build out the direction they pick, with the same `format` and `fluid: true`.
+
+Otherwise call `prepare_open_design_brief` with:
+
+- a `skillId`: `od:prototype:poster-hero` for a bold marketing poster, `od:prototype:magazine-poster` for an editorial or type-led one, or another skill whose style fits better (`list_open_design_skills` with query "poster");
+- the brief, in the user's words;
+- `format`: the default shape from step 1;
+- `fluid: true`.
+
+Call `list_open_design_design_systems` first only if the user names a brand or visual direction.
+
+Author the file yourself, following the returned instructions. Their **Canvas** section is authoritative: one `data-od-card data-od-fluid` element sized by `--od-w`/`--od-h`, everything inside sized in container units, and layout rules for wide and tall shapes. Also:
+
+- Use real copy from the brief, with no lorem ipsum. A poster is read from a distance: one dominant headline, then the what / when / where, then the call to action.
+- If the user gives a list of names, sessions or locations to make one poster each, mark the changing text with `data-od-field="<column name>"` (and a per-person QR slot with `data-od-qr-field="<column>"`), and fill the design with the first row's values.
+- No external image URLs unless the user supplied them. No emoji as key visuals; draw them as inline SVG.
+
+## 3. Add a QR code, if it needs one
+
+Register the artifact first (step 4), then call `create_open_design_qr_code` with the entry path and the URL, and paste the returned inline SVG where the code goes. Never draw a fake or placeholder QR code.
+
+## 4. Register
+
+Call `register_open_design_artifact` with the entry path, kind `html`, a title, `sourceSkillId`, and `format` set to the default shape.
+
+## 5. Check and fix
+
+Call `check_open_design_artifact` with the entry path. It returns the poster as an image plus preflight findings. Fix every **error** in its findings (text cut off, overlapping or in the bleed, a QR code that doesn't decode), and fix warnings where you reasonably can (sizes that don't scale with the poster, small type, low contrast, low-resolution images). Look at the image too: the headline should dominate and nothing important should be cramped or cut. Check again until there are no errors (at most two fix rounds; tell the user about anything left).
+
+## 6. Other shapes
+
+When the user wants other sizes, or before the final export of a print piece, call `export_open_design_artifact` with `shapeSheet: true` and `checkOnly: true` (add `presets` with just the shapes they care about, or leave it out for every shape). It writes one image of the poster at each shape, marking shapes with errors; show it to the user. If you can view images, look at it too: the headline should dominate every shape and nothing important should be cropped.
+
+For a shape that has errors or looks wrong, call `adapt_open_design_artifact` with the entry path and those format ids. For a fluid poster it returns **tune** instructions: fix that shape inside the same file with its `@container` rule, then check every shape again with a shape sheet. Don't create new files for other sizes.
+
+## 7. Export
+
+- **One shape:** call `export_open_design_artifact` with the entry path and `preset` set to the format id. A print format gives a PDF the size of the bleed box, with trim and bleed boxes set and the bleed added automatically; add `cropMarks: true` if the user's printer wants crop marks. A screen format gives a PNG within the platform's size limit.
+- **Several shapes:** pass `presets` with the format ids instead: one file per shape, named `<name>-<format>`.
+- **One per row of a list:** add `data` with the workspace path of the user's CSV, XLSX or JSON file, and `nameField` with the column to name files by. Images come out one per row; print PDFs come out as one multi-page PDF per shape (add `split: true` for one file per row).
+
+## 8. Report
+
+List each exported file's path, size and any remaining warnings. For print files, also give the trim size and bleed, and tell the user the PDF is RGB: most print shops convert it, but they should ask if theirs needs CMYK. Mention that the poster can be exported at any other size later without regenerating it. Don't print, post, upload or order anything yourself.

package/assets/codex-skills/open-design-publish/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: open-design-publish
+description: Share an Open Design artifact as a live link (a temporary no-account link, or your own Netlify, Vercel, Cloudflare Pages or GitHub Pages), or as one self-contained HTML file — use whenever the user wants to share, publish, deploy or host an Open Design artifact, or get a link to send to teammates or stakeholders; also when they want a single HTML file to attach or send
+---
+
+<!-- generated:open-design-agent-kit -->
+
+Share an Open Design artifact with people who don't have this project open.
+
+Request: the rest of the user's message (if there is none, ask the user: "Which design should we share, and how?")
+
+## 1. Find the artifact
+
+If the request names a design, find its entry file (`get_open_design_artifact`, or the `.open-design/` folder). If several match or none is named, ask the user which one. It must be registered; if it isn't, register it first with `register_open_design_artifact`.
+
+## 2. A file, or a link?
+
+- **A file to attach or send** (email, Slack, a ticket): call `export_open_design_artifact` with `format: "standalone"`. It writes one self-contained `.html` under the artifact's `exports/` folder, with its local CSS, scripts, images and fonts inlined. Give the user the path, and mention anything it still loads from the internet (such as web fonts). Nothing goes online. Stop here.
+- **A link**: continue below.
+
+## 3. Prepare the link
+
+Call `publish_open_design_artifact` with the `entryPath`. Pass `provider` only if the user already said where:
+
+- `netlify-temporary` or `cloudflare-temporary`: no account, the link lasts about an hour unless claimed
+- `netlify`, `vercel`, `cloudflare-pages` or `github-pages`: the user's own account, a link that lasts
+
+Without a provider, the tool returns the choices: show them to the user and call it again with their pick.
+
+## 4. Follow the returned instructions exactly
+
+They check the host's CLI, then **stop for the user's explicit yes** before anything goes online. That stop is mandatory: say what goes out, who can see it, how long it lasts, and that the small "Made with Open Design" footer badge is included unless they ask for `badge: false`. Deploy only the bundle folder the tool names.
+
+## 5. Finish
+
+Give the user the link. For a temporary link, also give the claim URL and when it expires, for them only. Then record it by calling `publish_open_design_artifact` again with `published`, as the instructions show, so a later publish updates the same site.

package/assets/codex-skills/open-design-social-post/SKILL.md

@@ -15,20 +15,22 @@ If the brief names a platform or format, use it. Otherwise ask the user to pick
 
 | Format | Canvas | skillId | Export |
 |---|---|---|---|
-| X single image | 1600×900 | `od:prototype:card-twitter` | `selector: "[data-od-card]"`, `maxBytes: 5000000` |
+| X single image | 1600×900 | `od:prototype:card-twitter` | `preset: "x-image"` |
 | X post mock (for a video overlay or quote) | card element | `od:prototype:social-x-post-card` | `selector: "[data-od-card]"`, `maxBytes: 5000000` |
-| Square carousel (Instagram / LinkedIn) | 1080×1080 per card | `od:prototype:social-carousel` | `selector: "[data-od-card]"`, `maxBytes: 8000000` |
-| Instagram portrait | 1080×1350 | `od:prototype:poster-hero` | `width: 1080, height: 1350`, `selector: "[data-od-card]"`, `maxBytes: 8000000` |
-| Story / Reels / TikTok cover | 1080×1920 | `od:prototype:poster-hero` | `width: 1080, height: 1920`, `selector: "[data-od-card]"`, `maxBytes: 8000000` |
-| Xiaohongshu cards | 1080×1440 per card | `od:prototype:card-xiaohongshu` | `selector: "[data-od-card]"` |
-| YouTube thumbnail | 1280×720 | `od:prototype:social-youtube-thumbnail` | `width: 1280, height: 720`, `selector: "[data-od-card]"`, `maxBytes: 2000000` |
+| Square carousel (Instagram / LinkedIn) | 1080×1080 per card | `od:prototype:social-carousel` | `preset: "ig-square"` |
+| Instagram portrait | 1080×1350 | `od:prototype:poster-hero` | `preset: "ig-portrait"` |
+| Story / Reels / TikTok cover | 1080×1920 | `od:prototype:poster-hero` | `preset: "story"` |
+| Xiaohongshu cards | 1080×1440 per card | `od:prototype:card-xiaohongshu` | `preset: "xhs-card"` |
+| YouTube thumbnail | 1280×720 | `od:prototype:social-youtube-thumbnail` | `preset: "yt-thumbnail"` |
 | YouTube video | 1920×1080 MP4 | `od:video:hyperframes` | MP4 via the HyperFrames CLI (see step 4) |
 
+A preset fills in the canvas size, `selector: "[data-od-card]"` and the platform's upload limit (X 5 MB, Instagram 8 MB, YouTube thumbnail 2 MB).
+
 For several platforms at once, run steps 2–4 once per format and keep each one as its own artifact.
 
 ## 2. Generate
 
-Call `prepare_open_design_brief` with the row's `skillId` and the brief. Call `list_open_design_design_systems` first only if the user names a brand or visual direction. In the brief you pass, say the exact canvas size from the table.
+Call `prepare_open_design_brief` with the row's `skillId`, the brief, and `format` set to the row's preset id (leave it out for the X post mock and YouTube video). Call `list_open_design_design_systems` first only if the user names a brand or visual direction. For the X post mock, say in the brief that it is one card element.
 
 Author the files yourself with your own file-editing tools, following the returned instructions, and add these rules for social posts:
 
@@ -39,11 +41,11 @@ Author the files yourself with your own file-editing tools, following the return
 
 ## 3. Register
 
-Call `register_open_design_artifact` with the entry path, kind `html`, a title, and `sourceSkillId` set to the row's `skillId`, so the export can find the right size.
+Call `register_open_design_artifact` with the entry path, kind `html`, a title, `sourceSkillId` set to the row's `skillId`, and the same `format` you passed to the brief, so the export can find the right size.
 
 ## 4. Export
 
-- **Image formats**: call `export_open_design_artifact` with the entry path and the row's export arguments. If it returns warnings (failed fonts or images, over budget), fix the artifact and export again.
+- **Image formats**: call `export_open_design_artifact` with the entry path and the row's export arguments. If its preflight reports errors (text cut off, a card that isn't the canvas size) or it returns warnings (failed fonts or images, over budget), fix the artifact and export again. Before exporting, call `check_open_design_artifact` to see the post as an image with its preflight findings, without writing files; fix every error first.
 - **YouTube video**: follow the brief's "Host override" section. Render with `npx hyperframes render … --output <artifact-dir>/exports/<name>.mp4`, and check `ffmpeg -version` first.
 
 ## 5. Report