西浩资源库开源软件 · AI 工具 · 中文教程

技能

复杂 Artifact 构建

React + Tailwind + shadcn/ui 多组件 artifact

web-artifacts-builder

打开网盘并填入提取码查看官方目录
适用宿主
Claude 技能格式（Anthropic 官方约定）
来源仓库
anthropics/skills
固定版本
34040c9c56
版本日期
2026-09-10
开源协议
Apache-2.0
Star
177,627
内容体积
5 个文件 · 45 KB
宿主目录结构为 Anthropic 官方技能格式（仓库内 skills/ 约定）。本站按路径推断适用宿主、未逐条实测：Claude Code 的技能目录是 .claude/skills/（或项目内 .claude/skills/）。用前请对照你所用宿主的文档确认。

这个技能做什么

用现代前端技术栈（React、Tailwind CSS、shadcn/ui）构建结构复杂的 claude.ai HTML artifact：需要状态管理、路由或 shadcn/ui 组件时用。简单的单文件 HTML/JSX 用不上它。

包含什么

  • React + Tailwind CSS + shadcn/ui 技术栈
  • 适合需要状态管理与路由的复杂 artifact
  • scripts/ 提供初始化与打包脚本
  • 自带 shadcn 组件包（tar.gz），离线可用

怎么用

  • 把 web-artifacts-builder 目录复制到宿主的技能目录（Claude Code 为 .claude/skills/）
  • scripts/init-artifact.sh 初始化项目，bundle-artifact.sh 打包产物

获取方式

百度网盘 · 需提取码
https://pan.baidu.com/s/1wLMYhUcqu9UujAGXlkcxyw
提取码pqb6

建议先转存到自己网盘：转存后再下载，不怕原分享链接失效。

本包内附 README.txt，写明来源仓库、固定 commit、开源协议与每个文件的 sha256，可自行校验。

目录内容（5 个文件）

  • LICENSE.txt11 KB
  • SKILL.md3 KB
  • scripts/bundle-artifact.sh1 KB
  • scripts/init-artifact.sh10 KB
  • scripts/shadcn-components.tar.gz19 KB

同源技能

Claude 官方学习资源指引 要学 Claude 怎么用，先对到官方那门课 Claude 技能有网盘包查看 算法艺术生成 用 p5.js 写生成艺术，同种子可复现 Claude 技能有网盘包查看 Anthropic 品牌规范 把官方配色与字体套到你的产物上 Claude 技能有网盘包查看 画布设计（海报与静态稿） 出 png / pdf 静态设计稿，自带字体 Claude 技能有网盘包查看 Claude API 参考手册 写 Claude 代码前，先查这份参考 Claude 技能有网盘包查看 结论自查提示 回答定稿前，追加几个该核对的问题 Claude 技能有网盘包查看
主题
卡片密度
分类色彩