Logo
Agent Skills
  • Skills
  • Category
  • Publishers
  • Cookbook
  • Blog
Logo
Agent Skills
SkillsDevelopment Toolsartifacts-builder
Featuredtypescript

artifacts-builder

by Anthropic•Development Tools

Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui components

980downloads
95stars
~580tokens

Quick Install

One command to add this skill

Terminal
$ mkdir -p ~/.claude/skills/artifacts-builder && curl -L https://raw.githubusercontent.com/anthropics/skills/main/skills/artifacts-builder/SKILL.md > ~/.claude/skills/artifacts-builder/SKILL.md

Instructions

SKILL.md

Back

Prerequisites

  • React
  • Tailwind CSS
  • shadcn/ui

Security & Permissions

1 permission required

  • No network access required
  • Can modify files on disk
  • No shell command execution

Details

Published
2026/01/09
Language
typescript
Token Est.
~580

Resources

  • GitHub Repository

Tags

artifactsreacttailwindshadcn
Logo
Agent Skills

Discover and download skills for Claude Code and other AI agents

GitHub
Skills
  • Category
  • Publishers
  • Cookbook
Resources
  • Blog
  • GitHub
Legal
  • Privacy Policy
  • Terms of Service
Copyright © 2026 All Rights Reserved.

Artifacts Builder Skill

Build sophisticated HTML artifacts for claude.ai using modern web technologies.

Features

  • React Components: Build with React's component model
  • Tailwind CSS: Style with utility-first CSS
  • shadcn/ui: Use beautiful, accessible components
  • Interactive: Create fully interactive experiences

Example

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export default function App() {
  return (
    <Card className="p-6">
      <h1 className="text-2xl font-bold">Hello World</h1>
      <Button>Click me</Button>
    </Card>
  )
}