网络工件生成器
使用 shadcn 组件和自动化脚本将 React 和 Tailwind 工件捆绑到单个 HTML 输出中的代理技能。
来源:内容改编自人类/技能(麻省理工学院)。
要构建强大的前端 claude.ai 工件,请按照以下步骤操作:
- 使用
scripts/init-artifact.sh初始化前端存储库 - 通过编辑生成的代码来开发您的工件
- 使用
scripts/bundle-artifact.sh将所有代码捆绑到单个 HTML 文件中 - 向用户显示工件
- (可选)测试工件
堆栈:React 18 + TypeScript + Vite + Parcel(捆绑)+ Tailwind CSS + shadcn/ui
设计和风格指南
非常重要:为了避免通常所说的“AI slop”,请避免使用过多的居中布局、紫色渐变、统一圆角和 Inter 字体。
快速入门
第 1 步:初始化项目
运行初始化脚本来创建一个新的 React 项目:
bash scripts/init-artifact.sh <project-name>
cd <project-name>这将创建一个完全配置的项目:
- React + TypeScript(通过 Vite)
- Tailwind CSS 3.4.1 与 shadcn/ui 主题系统
- 已配置路径别名 (
@/) - 预装 40+ shadcn/ui 组件
- 包含所有 Radix UI 依赖项
- 配置用于捆绑的地块(通过.parcelrc)
- Node 18+ 兼容性(自动检测并固定 Vite 版本)
第 2 步:开发您的工件
要构建工件,请编辑生成的文件。请参阅下面的 常见开发任务 以获取指导。
第 3 步:捆绑到单个 HTML 文件
要将 React 应用程序捆绑到单个 HTML 工件中:
bash scripts/bundle-artifact.sh这将创建bundle.html- 一个内联所有 JavaScript、CSS 和依赖项的独立工件。该文件可以作为工件直接在 Claude 对话中共享。
要求:您的项目根目录中必须有index.html。
脚本的作用:
- 安装捆绑依赖项(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline)
- 创建具有路径别名支持的
.parcelrc配置 - 使用 Parcel 构建(无源映射)
- 使用 html-inline 将所有资源内联到单个 HTML 中
第 4 步:与用户共享工件
最后,在与用户的对话中共享捆绑的 HTML 文件,以便他们可以将其视为工件。
第 5 步:测试/可视化工件(可选)
注意:这是一个完全可选的步骤。仅在必要或要求时执行。
要测试/可视化工件,请使用可用的工具(包括其他技能或内置工具,例如 Playwright 或 Puppeteer)。一般来说,避免预先测试工件,因为它会增加请求和可以看到完成的工件之间的延迟。如果有要求或出现问题,请在展示工件后稍后进行测试。
参考
- shadcn/ui 组件:https://ui.shadcn.com/docs/components
资源文件
许可证.txt
二进制资源
脚本/bundle-artifact.sh
#!/bin/bash
set -e
echo "📦 Bundling React app to single HTML artifact..."
# Check if we're in a project directory
if [ ! -f "package.json" ]; then
echo "❌ Error: No package.json found. Run this script from your project root."
exit 1
fi
# Check if index.html exists
if [ ! -f "index.html" ]; then
echo "❌ Error: No index.html found in project root."
echo " This script requires an index.html entry point."
exit 1
fi
# Install bundling dependencies
echo "📦 Installing bundling dependencies..."
pnpm add -D parcel @parcel/config-default parcel-resolver-tspaths html-inline
# Create Parcel config with tspaths resolver
if [ ! -f ".parcelrc" ]; then
echo "🔧 Creating Parcel configuration with path alias support..."
cat > .parcelrc << 'EOF'
{
"extends": "@parcel/config-default",
"resolvers": ["parcel-resolver-tspaths", "..."]
}
EOF
fi
# Clean previous build
echo "🧹 Cleaning previous build..."
rm -rf dist bundle.html
# Build with Parcel
echo "🔨 Building with Parcel..."
pnpm exec parcel build index.html --dist-dir dist --no-source-maps
# Inline everything into single HTML
echo "🎯 Inlining all assets into single HTML file..."
pnpm exec html-inline dist/index.html > bundle.html
# Get file size
FILE_SIZE=$(du -h bundle.html | cut -f1)
echo ""
echo "✅ Bundle complete!"
echo "📄 Output: bundle.html ($FILE_SIZE)"
echo ""
echo "You can now use this single HTML file as an artifact in Claude conversations."
echo "To test locally: open bundle.html in your browser"脚本/init-artifact.sh
二进制资源
脚本/shadcn-components.tar.gz
二进制资源
claudeskills文档