sbusso

Claude Artifact Viewer Template — Development skill for Claude Code

Development community

A modern web application for viewing and interacting with Claude-generated artifacts.

How to install Claude Artifact Viewer Template

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

What Claude Artifact Viewer Template does

A modern web application for viewing and interacting with Claude-generated artifacts.

Alternatives in Development

Web Artifacts Builder — Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui 94.1k ★
Axiom — Battle-tested Claude Code skills for modern xOS (iOS, iPadOS, watchOS, tvOS) development with 13 production-re 2.6k ★
SwiftUI Expert Skill — Modern SwiftUI best practices and iOS 26+ Liquid Glass adoption 2.3k ★

README

Claude Artifact Viewer - Template

A modern web application for viewing and interacting with Claude-generated artifacts. This project provides an automatic navigation system for artifacts uploaded to the `src/artifacts` folder, making it easy to showcase and interact with AI-generated content.

Features

Automatic Navigation: Components added to the src/artifacts folder are automatically included in the navigation
Modern UI: Built with React, TypeScript, Tailwind CSS, and shadcn/ui components
Data Visualization: Integration with Recharts for beautiful data visualizations
Responsive Design: Fully responsive layout that works well on all devices

Tech Stack

Frontend Framework: React 18
Router: React Router 7
Runtime: Bun
Language: TypeScript
Styling: Tailwind CSS
UI Components: shadcn/ui (with Radix UI primitives)
Charting: Recharts
Build Tool: Vite

Getting Started

Prerequisites

Bun (latest version)
Node.js (v18 or higher recommended)

Installation

Clone the repository:
```
git clone 
cd claude-artifact-viewer
```
Install dependencies:
```
bun install
```
Start the development server:
```
bun run dev
```
Build for production:
```
bun run build
```

Authentication

The application includes HTTP Basic Authentication via Cloudflare Pages Functions middleware. To configure authentication:

Copy `.env.example` to `.env`:
```
cp .env.example .env
```
Modify the username and password in the `.env` file (defaults are `claude`/`claude2025`)

The authentication middleware in `functions/_middleware.js` validates these credentials before allowing access to the application.

Project Structure

claude-artifact-viewer/
├── public/           # Static assets
├── src/
│   ├── artifacts/    # Claude-generated artifacts (add your components here)
│   ├── components/   #