techczech

Artifactsgallery — Development skill for Claude Code

Development community

Gallery and runtime for storing, organising and running Claude-generated artifacts in the browser.

How to install Artifactsgallery

This entry records only its repository, not the path inside it, so there is no exact command to give. Open techczech/artifactsgallery and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Artifactsgallery does

Gallery and runtime for storing, organising and running Claude-generated artifacts in the browser.

Alternatives in Development

Prompt Net Requests — I want to enhance the AsyncPlaywrightCrawlerStrategy to optionally capture network requests and console messag 85.8k ★
Petdex — A public gallery of animated pets for Codex, Claude Code, DeepSeek Harness, Hermes, OpenCode, Gemini CLI, and 4k ★
Gallery — Build a static, shareable gallery from your fidelity reports — an index of score cards plus a permalink page ( 3.6k ★

README

Artifacts Gallery

A comprehensive gallery and runtime environment for Claude AI-generated artifacts - store, organize, and run various types of artifacts in one place.

🚀 [Try Artifacts Gallery Now!](https://techczech.github.io/artifactsgallery/) - No installation required

![ArtifactVault Screenshot](./screenshot.png)

Overview

Artifacts Gallery allows you to:

Create and save artifacts generated by Claude AI
Organize them with tags and folders in a hierarchical structure
Run different types of artifacts:
- React components (with full reactivity)
- SVG images
- Mermaid diagrams
Filter and search to find exactly what you need
Import and export your artifact collections
Auto-detect artifact types based on content
Manage artifacts with edit and delete functionality

Origin

Artifacts Gallery was created by Dominik Lukeš ([@techczech](https://github.com/techczech)) using Claude AI. It is based on the original "Claude Artifact Runner" project by Claudio Silva ([original repository](https://github.com/claudio-silva/claude-artifact-runner)), which provided a foundation for running Claude-generated artifacts.

The original project was substantially extended with:

Support for multiple artifact types (SVG, Mermaid)
Organization features (tags, hierarchical folders)
Advanced filtering and search
Improved user interface
Automatic type detection
Artifact management features

This project maintains the MIT License of the original work.

Key Features

Live Component Rendering: Run React components with JSX syntax directly in the browser
SVG Rendering: Display and edit SVG images with proper sanitization
Mermaid Diagrams: Create and render Mermaid diagrams for flowcharts, sequence diagrams, etc.
Hierarchical Folder System: Navigate through folders like a file explorer
Organization System: Organize artifacts with folders and tags
Advanced Filtering: Filter art