Zum Hauptinhalt springen
Dieser Inhalt ist noch nicht in Ihrer Sprache verfügbar und wird auf Englisch angezeigt.

Web Artifacts Builder

Skill Aktiv
Teil von:Claude API and SDK Guide

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Zweck

To streamline the creation of complex, multi-component HTML artifacts using modern frontend web technologies.

Funktionen

  • Project initialization with React, TypeScript, Vite, Tailwind CSS, and shadcn/ui
  • Automated setup of path aliases and essential configurations
  • Bundling of the entire React application into a single, self-contained HTML file
  • Guidance on design and style principles to avoid common AI-generated UI pitfalls

Anwendungsfälle

  • Creating elaborate, multi-component HTML artifacts for Claude conversations.
  • Developing complex UI elements requiring state management, routing, or shadcn/ui components.
  • Generating self-contained web applications that can be shared directly.

Nicht-Ziele

  • Creating simple single-file HTML/JSX artifacts.
  • Handling backend development or deployment workflows.
  • Providing a general-purpose web development environment outside of artifact generation.

Workflow

  1. Initialize the frontend repo using `scripts/init-artifact.sh`
  2. Develop artifact by editing generated code
  3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
  4. Share artifact with user
  5. Optionally test the artifact

Voraussetzungen

  • Node.js 18+ installed
  • pnpm (will be installed if missing)
  • Bash-compatible shell

Documentation

  • info:Configuration & parameter referenceThe SKILL.md outlines the main scripts and their general usage, but specific parameters for these scripts are not explicitly documented or referenced.

Maintenance

  • warning:Dependency ManagementThe project relies on Node.js and npm/pnpm for its scripts. While `pnpm` is installed if missing, there are no explicit mechanisms for vulnerability scanning or automated updating of these dependencies mentioned or implemented.

Trust

  • warning:Issues AttentionIn the last 90 days, there have been 135 opened issues and only 11 closed issues, indicating a very low closure rate and potential for slow maintainer response.

Code Execution

  • warning:ValidationThe `init-artifact.sh` script validates the Node.js version and checks for the existence of `pnpm`, but the project name argument is not explicitly validated for safety or format.

Execution

  • warning:Pinned dependenciesWhile the script pins the Vite version for Node 18 compatibility, other dependencies installed via `pnpm install` are not explicitly pinned with a lockfile, and `pnpm` itself is installed globally, not pinned.

Installation

Zuerst Marketplace hinzufügen

/plugin marketplace add anthropics/skills
/plugin install skills@anthropic-agent-skills

Qualitätspunktzahl

77 /100
Analysiert 2 days ago

Vertrauenssignale

Letzter Commit6 days ago
GitHub-Inhaber anthropics (opens in new tab)
Sterne133.4k
LizenzApache-2.0
Status
Quellcode ansehen

Ähnliche Erweiterungen

Shadcn/ui Component Library

99

shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership

Skill
bobmatnyc

Artifacts Builder

79

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Skill
composiohq

Setup Tailwind Typescript

100

Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.

Skill
pjt222

Sentry React Router Framework Sdk

100

Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.

Skill
getsentry

Vue Router Best Practices

100

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

Skill
hyf0

Env Manager

99

Environment variable validation, security scanning, and management for Next.js, Vite, React, and Node.js applications

Skill
bobmatnyc