{explanation_text}
""" encoded = base64.b64encode(html_doc.encode('utf-8')).decode('utf-8') return json.dumps({ "artifact": { "filename": f"{title.lower().replace(' ', '-')}.html", "mime_type": "text/html", "content_base64": encoded } }) # Example usage html_payload = create_explanation_html( "Quantum Entanglement", "https://example.com/entanglement.png", "Quantum entanglement is a physical phenomenon where particles become correlated..." ) print(html_payload) ``` This pattern produces standalone HTML files that render correctly in any browser, preserving styling and external resource references. ## Consuming Artifacts in Downstream Skills Artifacts generated by one skill can serve as inputs for subsequent skills in multi-step workflows. The Claude runtime makes artifact file paths available to downstream processes, allowing skills to read, modify, or embed previous outputs. ```python import json def embed_svg_in_report(artifact_path): """Read a previously generated SVG artifact and embed it in markdown.""" # Read the artifact file provided by the runtime with open(artifact_path, "r") as f: svg_content = f.read() # Create markdown with embedded SVG markdown_output = f"""## Generated Diagram {svg_content} *Figure 1: Visualization generated by upstream skill* """ return json.dumps({ "content": markdown_output }) # The artifact_path is provided by Claude's runtime context ``` ## Summary - Claude skills generate artifacts by returning a JSON object with an `artifact` key containing `filename`, `mime_type`, and `content_base64`. - **SVG artifacts** use `image/svg+xml` MIME type and work for diagrams, icons, and vector graphics, as demonstrated in `quickdesign/.claude-plugin/icon.svg`. - **HTML artifacts** use `text/html` MIME type to deliver rich, styled documents with embedded media, following the pattern in [`eli5/skills/eli5/SKILL.md`](https://github.com/anthropics/claude-plugins-community/blob/main/eli5/skills/eli5/SKILL.md). - All artifact content must be **base64-encoded** to ensure safe JSON transport of binary and text data. - Downstream skills can consume artifacts by reading their file paths provided by the Claude runtime, enabling complex multi-step workflows. ## Frequently Asked Questions ### What MIME types are supported for Claude skill artifacts? The `anthropics/claude-plugins-community` repository primarily demonstrates `image/svg+xml` for vector graphics and `text/html` for web documents. The plugin configuration in [`.claude-plugin/marketplace.json`](https://github.com/anthropics/claude-plugins-community/blob/main/.claude-plugin/marketplace.json) suggests the architecture supports standard web formats, and the base64 encoding mechanism theoretically allows any file type, though implementations should validate against Claude's runtime whitelist. ### How do I reference an artifact in a subsequent skill? The Claude runtime makes artifact file paths available to downstream skills through the execution context. Skills receive the path as a parameter or environment reference, allowing them to open the file directly using standard file I/O operations, as shown in consumption patterns where `open(artifact_path, "r")` reads previously generated SVG content. ### Can skills generate binary artifacts like PNG or PDF? Yes, the base64 encoding requirement in the `content_base64` field supports binary formats. While the repository examples focus on text-based SVG and HTML, encoding binary bytes to base64 and setting the appropriate MIME type (such as `image/png` or `application/pdf`) follows the same JSON payload structure and will materialize correctly in the Claude interface. ### Where are artifacts stored when returned from a skill? Artifacts materialize within the Claude execution environment's file system, typically in paths accessible to the current session or downstream skills. The runtime handles temporary storage and cleanup, presenting the file to the user as a download link or inline preview while making the filesystem path available to subsequent skill invocations in the same conversation thread.