跳转到主要内容
此内容尚未提供您的语言版本,正在以英文显示。

Web Artifacts Builder

技能 活跃
属于: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.

目的

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

功能

  • 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

使用场景

  • 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.

非目标

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

工作流

  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

先决条件

  • 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.

安装

请先添加 Marketplace

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

质量评分

77 /100
1 day ago 分析

信任信号

最近提交6 days ago
GitHub 所有者 anthropics (opens in new tab)
星标133.4k
许可证Apache-2.0
状态
查看源代码

类似扩展

Shadcn/ui Component Library

99

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

技能
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.

技能
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.

技能
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.

技能
getsentry

Vue Router Best Practices

100

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

技能
hyf0

Env Manager

99

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

技能
bobmatnyc