composio-community/awesome-claude-plugins0°

artifacts-builder

仓库创建 2025年10月22日最近提交 1 天前SkillHot 收录 11 小时前

⬈ GitHub 仓库 ⬈ SKILL.md 原文件 ⬇ Raw 原始文件

▸ 精选理由

适合需要状态管理、路由或复用组件的高级 artifact 开发者，减少手工集成成本。

▸ 风险提示

初始化与打包脚本会拉取外部依赖并执行构建，注意网络与代码来源安全。

这个 Skill 做什么

为 claude.ai 构建复杂多组件前端 artifact 的脚手架与一键打包工具链（React/Tailwind/shadcn）。

为 claude.ai 构建复杂多组件前端 artifact 的项目脚手架和一键打包工具链，包含 React、Tailwind、shadcn/ui 等现代栈。当你的 artifact 需要状态管理、路由或复杂组件而不是单文件时用得上。特点是把开发/打包流程自动化（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.

开发编程前端构建Claude artifact打包脚本Claude Code

1.8k

Stars

518

Forks

仓库内 Skill

积累中

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/master/artifacts-builder/skills/artifacts-builder/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/master/artifacts-builder/skills/artifacts-builder/SKILL.md"

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

# 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 initializatio

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