@drawcall/design 0.1.0

package/skills/drawcall-design/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: drawcall-design
+description: Create, modify, inspect, and screenshot 3D objects and scenes in Drawcall Design using its MCP tools or @drawcall/design CLI. Use for Drawcall Design projects, frames, and code-frame source. Do not use for full games or applications.
+---
+
+# Drawcall Design
+
+Use the Drawcall Design MCP tools when available. Otherwise, use `npx @drawcall/design`. Drawcall Design is a remote, current-state canvas: inspect the existing project, frames, and source before changing them.
+
+A code frame stores source as a `Record<absolute path, code>`. A renderable frame has exactly one `/index.ts` or `/index.js`. That module must export `scene`, whose value is a `THREE.Object3D`, and may export `camera`, whose value is a `THREE.Camera`.
+
+Source runs as browser ESM. Use relative imports with explicit extensions for other frame files and normal package imports for browser-compatible packages. Top-level await is supported. In TypeScript files, use syntax that can be erased; avoid features that generate JavaScript.
+
+A code frame represents a designed state rather than a running application. Complete asynchronous setup before exporting the scene, and add any lighting or environment the object needs.
+
+Create image frames from a public HTTP(S) URL through MCP. In the CLI, `frame create --image` accepts either an HTTP(S) URL or a local PNG, JPEG, or WebP file.
+
+```ts
+import * as THREE from "three";
+
+const root = new THREE.Scene();
+// Build the object or scene.
+
+export const scene: THREE.Object3D = root;
+
+const view = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
+view.position.set(4, 3, 5);
+view.lookAt(0, 0, 0);
+
+export const camera: THREE.Camera = view;
+```
+
+Read source before editing it. Prefer an exact edit for a small change, write one file when replacing that file, and replace the complete source only when the whole frame should change.
+
+After every meaningful visual change, take a frame screenshot and inspect it. Iterate until the rendered object, composition, and frame size satisfy the request.