@mindstudio-ai/remy 0.1.277 → 0.1.279

package/dist/subagents/designExpert/prompts/ui-patterns.md

@@ -25,7 +25,7 @@ Some surfaces are deep enough to carry their own craft reference in <available_s
 
 ### Wireframes
 
-When you need to show a layout, component, interaction, or animation, use a wireframe. Use a markdown code fence with `wireframe` as the type, starting with a YAML frontmatter block (`name` and `description`), then self-contained HTML+CSS.
+When you need to show a layout, component, interaction, or animation, create a wireframe with the `createWireframe` tool: pass a `name`, a one-line `description`, and self-contained HTML+CSS. The tool saves the wireframe as a file under `src/.wireframes/` and returns a markdown reference line like `![Feed Post Card](src/.wireframes/feed-post-card-x7f2.html)` — include that exact line in your response wherever the wireframe belongs, with your notes in the surrounding prose. The reference line renders as a live visual preview, and the developer reads the file itself for the exact markup and CSS.
 
 Never use ASCII art, box-drawing characters, or code-block diagrams to describe layouts. Always use a wireframe instead, even if it's just grey rectangles with labels. A 20-line wireframe with placeholder boxes communicates proportions, spacing, and hierarchy better than any text diagram. For abstract layouts, use skeleton-style placeholders (grey boxes, rounded rects) rather than mocking up real content.
 
@@ -35,13 +35,11 @@ Wireframes render in a small transparent iframe. Set a background color and shad
 
 Wireframes are vanilla HTML/CSS/JS (no React). For animations beyond CSS, use GSAP via CDN: `<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>`
 
-Quick skeleton wireframe (grey boxes, just showing layout and hierarchy):
+Wireframe files are immutable — to revise one, create a new wireframe. If you're iterating on an earlier one, read its file first and riff from there.
 
-```wireframe
----
-name: Content Card Layout
-description: Card with image area, title, metadata row, rating, and actions. Skeleton placeholders showing proportions and hierarchy.
----
+Quick skeleton wireframe (grey boxes, just showing layout and hierarchy) — `createWireframe` with name "Content Card Layout", description "Card with image area, title, metadata row, rating, and actions. Skeleton placeholders showing proportions and hierarchy.", and this html:
+
+```html
 <html lang="en"><head>
 <meta charset="utf-8"/>
 <style>
@@ -74,13 +72,9 @@ description: Card with image area, title, metadata row, rating, and actions. Ske
 </html>
 ```
 
-Detailed component wireframe (showing specific design decisions):
+Detailed component wireframe (showing specific design decisions) — `createWireframe` with name "Feed Post Card", description "Photo post card with header, image frame, action row (like/comment/share/bookmark), like count, and caption. Shows spacing, typography hierarchy, and icon placement.", and this html:
 
-```wireframe
----
-name: Feed Post Card
-description: Photo post card with header, image frame, action row (like/comment/share/bookmark), like count, and caption. Shows spacing, typography hierarchy, and icon placement.
----
+```html
 <html lang="en"><head>
 <meta charset="utf-8"/>
 <meta content="width=device-width, initial-scale=1.0" name="viewport"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindstudio-ai/remy",
-  "version": "0.1.277",
+  "version": "0.1.279",
   "description": "Remy coding agent",
   "repository": {
     "type": "git",