---
name: "claude-artifacts-code-renderer"
description: "Generate self-contained, interactive React, SVG, and HTML artifacts with clean modularity."
metadata:
  author: "Anthropic"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "generate claude artifact"
  - "build interactive prototype react"
  - "create self-contained html tool"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Claude Code Artifacts & Interactive Sandbox

Authors Claude-style artifacts: self-contained Single-File Components (React, Tailwind, Lucide), inline SVG diagrams, interactive calculators, and clean copy-pasteable utility tools.

## When to Invoke
Invoke this skill whenever you need to:
- generate claude artifact
- build interactive prototype react
- create self-contained html tool

## Execution SOP & Rules
1. Package the complete implementation into a single standalone component without external local imports.
2. Use Tailwind CSS for styling and Lucide React icons for visual controls.
3. Ensure interactive components maintain clean internal state with useState and useEffect.
4. Avoid referring to artifact UI wrapper text; focus purely on the functional experience.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.