Skills
.Work. You
Rest

web-artifacts-builder Web 产物构建

Community

用现代前端栈打造 Claude HTML 产物。

Software Engineering#frontend#react#claude#tailwind#artifact#web#bundle
AuthorXIYBHK
Version1.0.0
Installs0

System Documentation

What problem does it solve?

在 Claude 的工作流中，设计并交付复杂的多组件前端产物常常需要稳定的打包、内联资源和可复用的组件库。本 Skill 提供一个以现代前端技术栈为核心的工作流模板，帮助你快速从零开始搭建可在 Claude 对话中直接展示的 HTML 产物。

Core Features & Use Cases

  • 使用 React + TypeScript + Tailwind CSS 构建复杂 UI，支持状态管理与路由
  • 将一套前端产物打包为单一可分享的 HTML 文件（bundle.html），便于在 Claude 对话中直接展示
  • 提供初始化、打包与内联依赖的完整工作流，降低重复工作成本
  • 适用于需要多组件、可复用 UI 组件库的 Claude 产物场景

Quick Start

Set up a new artifact project and begin editing generated code to craft your Claude HTML artifact.

Dependency Matrix

Required Modules

pnpmtar

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-artifacts-builder Web 产物构建
Download link: https://github.com/XIYBHK/claude-skills/archive/main.zip#web-artifacts-builder-web

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.