← ClaudeAtlas

cradle-artifactslisted

Use when creating or updating Cradle Agent Artifacts via write_artifact — interactive JSX dashboards, audits, review boards, charts, and tables rendered beside chat. Prefer this over dumping structured UI as markdown. Covers cradle/artifact imports, export default, component inventory, artifactId reuse, and ActionButton prompts.
wibus-wee/cradle-app · ★ 73 · AI & Automation · score 74
Install: claude install-skill wibus-wee/cradle-app
# Cradle Artifacts Use `write_artifact` to publish an interactive JSX view in the chat side panel (Cursor Canvas analogue). Prefer Artifacts when a structured UI is clearer than markdown prose. ## When To Use | Prefer `write_artifact` | Prefer markdown / chat text | | --- | --- | | Dashboards, audits, review boards | Short answers, prose explanations | | Charts, metric grids, comparison tables | Simple lists or one-off code snippets | | Click-through follow-ups via ActionButton | One-shot status updates | | Living docs the user revisits / refreshes | Throwaway notes | After writing, tell the user the Artifact is in the side panel. Do **not** dump the full JSX into chat. The tool result is **metadata-only** (`artifactId`, `sessionId`, `title`, `revision`, …). Full JSX is persisted server-side and loaded by the panel — do not expect `source` in the tool result. ## Tool ```text write_artifact title: string # panel tab + chat card label source: string # full JSX module artifactId?: string # omit to create; reuse to update (revision++) ``` Ambient session comes from `CRADLE_CHAT_SESSION_ID`. No separate session id arg. ## Authoring Rules 1. Import **only** from `cradle/artifact` (optionally `react`). No app modules, Electron, fs, network SDKs, or dynamic imports. 2. `export default` a React component (required). 3. Compose with the kit below — do not invent host components. ## Component Inventory | Component | Role | | --- | --- | | `Artifact`