chore(skills): add frame0-wireframe skill for UI wireframing

Replaces Frame0 MCP server with portable bash+curl scripts that call Frame0's local HTTP API directly. Includes low-level API wrapper, high-level composition helpers with project styling, component library patterns, and setup guide. Requires Frame0 desktop app running locally. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-23 11:57:00 +01:00
parent 1d4b9cf299
commit 08dfadb863
6 changed files with 1046 additions and 0 deletions
@@ -0,0 +1,285 @@
+# Frame0 HTTP API Reference
+
+Frame0 exposes a local HTTP API when the desktop app is running.
+
+## Endpoint
+
+```
+POST http://localhost:{port}/execute_command
+Content-Type: application/json
+```
+
+Default port: **58320** (override via `FRAME0_PORT` env var or `--port` flag).
+
+## Request Format
+
+```json
+{
+  "command": "namespace:action",
+  "args": { ... }
+}
+```
+
+## Response Format
+
+```json
+{
+  "success": true,
+  "data": { ... }
+}
+```
+
+On error:
+
+```json
+{
+  "success": false,
+  "error": "Error description"
+}
+```
+
+---
+
+## Commands by Namespace
+
+### shape — Shape Creation and Manipulation
+
+#### shape:create-shape
+
+Create a new shape on the current page.
+
+```json
+{
+  "command": "shape:create-shape",
+  "args": {
+    "type": "rectangle",
+    "shapeProps": {
+      "name": "my-button",
+      "left": 100,
+      "top": 200,
+      "width": 120,
+      "height": 36,
+      "fillColor": "#2a3040",
+      "strokeColor": "#333340",
+      "fontColor": "#c8d0e0",
+      "fontSize": 14,
+      "text": "Button Label",
+      "corners": [4, 4, 4, 4]
+    }
+  }
+}
+```
+
+**Shape types:** `rectangle`, `ellipse`, `triangle`, `diamond`, `line`, `text`, `image`, `icon`
+
+#### shape:update-shape
+
+```json
+{
+  "command": "shape:update-shape",
+  "args": {
+    "shapeId": "shape-id",
+    "shapeProps": {
+      "fillColor": "#1a1e24",
+      "text": "Updated Label"
+    }
+  }
+}
+```
+
+#### shape:move
+
+```json
+{
+  "command": "shape:move",
+  "args": {
+    "shapeId": "shape-id",
+    "dx": 50,
+    "dy": -20
+  }
+}
+```
+
+#### shape:group / shape:ungroup
+
+```json
+{
+  "command": "shape:group",
+  "args": {
+    "shapeIdArray": ["id-1", "id-2", "id-3"]
+  }
+}
+```
+
+#### shape:create-connector
+
+```json
+{
+  "command": "shape:create-connector",
+  "args": {
+    "tailId": "source-shape-id",
+    "headId": "target-shape-id",
+    "shapeProps": {
+      "strokeColor": "#c8d8f0"
+    }
+  }
+}
+```
+
+#### shape:create-icon
+
+```json
+{
+  "command": "shape:create-icon",
+  "args": {
+    "iconName": "search",
+    "shapeProps": {
+      "left": 100,
+      "top": 100,
+      "width": 24,
+      "height": 24,
+      "strokeColor": "#c8d0e0"
+    }
+  }
+}
+```
+
+Icon sizes: 16, 24, 32, 48 pixels.
+
+#### shape:create-image
+
+```json
+{
+  "command": "shape:create-image",
+  "args": {
+    "mimeType": "image/png",
+    "imageData": "base64-encoded-data",
+    "shapeProps": {
+      "left": 100,
+      "top": 100,
+      "width": 200,
+      "height": 150
+    }
+  }
+}
+```
+
+### edit — Editing Operations
+
+#### edit:delete
+
+```json
+{
+  "command": "edit:delete",
+  "args": {
+    "shapeIdArray": ["id-1", "id-2"]
+  }
+}
+```
+
+### page — Page Management
+
+#### page:add
+
+```json
+{
+  "command": "page:add",
+  "args": {
+    "pageProps": {
+      "name": "HUD Layout"
+    }
+  }
+}
+```
+
+#### page:get
+
+```json
+{
+  "command": "page:get",
+  "args": {
+    "pageId": "page-id"
+  }
+}
+```
+
+Omit `pageId` to get current page.
+
+#### page:get-all
+
+```json
+{
+  "command": "page:get-all",
+  "args": {}
+}
+```
+
+#### page:set-current
+
+```json
+{
+  "command": "page:set-current",
+  "args": {
+    "pageId": "page-id"
+  }
+}
+```
+
+#### page:delete
+
+```json
+{
+  "command": "page:delete",
+  "args": {
+    "pageId": "page-id"
+  }
+}
+```
+
+### file — Export
+
+#### file:export-image
+
+```json
+{
+  "command": "file:export-image",
+  "args": {
+    "pageId": "page-id",
+    "format": "png",
+    "fillBackground": true
+  }
+}
+```
+
+Formats: `png`, `svg`
+
+Optional: `"shapeIdArray": ["id-1"]` to export specific shapes only.
+
+---
+
+## Shape Properties Reference
+
+| Property | Type | Notes |
+|----------|------|-------|
+| `name` | string | Shape identifier/label |
+| `left` | number | X position in pixels (origin: top-left) |
+| `top` | number | Y position in pixels |
+| `width` | number | Width in pixels |
+| `height` | number | Height in pixels |
+| `fillColor` | string | Hex color (e.g., `"#2a3040"`) |
+| `strokeColor` | string | Hex color for border |
+| `fontColor` | string | Hex color for text |
+| `fontSize` | number | Font size in pixels |
+| `text` | string | Text content (for shapes with text) |
+| `wordWrap` | boolean | Enable text word wrapping |
+| `corners` | number[4] | Border radius [topLeft, topRight, bottomRight, bottomLeft] |
+| `path` | array | Coordinate pairs for lines/polygons |
+| `lineType` | string | Line style |
+| `tailEndType` | string | Arrow tail type |
+| `headEndType` | string | Arrow head type |
+
+## Coordinate System
+
+- Origin: top-left corner of the canvas
+- Units: pixels
+- X increases rightward, Y increases downward