web-artifacts-builder

仓库创建 2025年2月14日最近提交 8 小时前SkillHot 收录 20 天前

▸ 精选理由

适合需要交互丰富、多组件的前端工件，简化打包与集成流程。

▸ 风险提示

构建脚本可能会拉取第三方 npm 包及外部依赖。

这个 Skill 做什么

用现代前端栈构建并打包可在 claude.ai 中运行的复杂 HTML 工件。

用现代前端 stack（React + TypeScript + Tailwind/shadcn/ui）把复杂的交互组件打包成能在 claude.ai 里运行的单文件 HTML 工件。当你需要状态管理、路由或多组件 UI，而不是简单单页片段时用它，能生成工程脚手架、开发环境并把代码 bundle 成一个可嵌入的 HTML。特别在于自带 init 和 bundle 脚本，省去手动整合依赖和打包的麻烦。

▸ 展开 SKILL.md 英文原文

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.

开发编程前端构件打包工具ReactClaude Code

6.2k

Stars

707

Forks

仓库内 Skill

+70

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/ThinkInAIXYZ/deepchat/dev/resources/skills/web-artifacts-builder/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/ThinkInAIXYZ/deepchat/dev/resources/skills/web-artifacts-builder/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:
1. Initialize the frontend repo using `scripts/init-artifact.sh`
2. Develop your artifact by editing the generated code
3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`
4. Display artifact to user
5. (Optional) Test the artifact

**Stack**: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

## Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

## Quick Start

### Step 1: Initialize Project

Run the initializ

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有