使用 React、Tailwind 和 shadcn/ui 构建和打包丰富的单文件 Web 组件
The new --shadcn flag in Vite 5.1 allows you to scaffold and bundle rich single-file web artifacts with React, Tailwind, and shadcn/ui.
Vite 5.1 中新的 --shadcn 标志允许您使用 React、Tailwind 和 shadcn/ui 来构建和打包丰富的单文件 Web 组件。
npm create vite@latest my-app -- --shadcn
npm create vite@latest my-app -- --shadcn
This will scaffold a new Vite project with React and Tailwind, and install shadcn/ui components.
这将使用 React 和 Tailwind 构建一个新的 Vite 项目，并安装 shadcn/ui 组件。
For more information, see the Vite documentation.
有关更多信息，请参见 Vite 文档。
Use Anthropic's web-artifacts-builder skill to scaffold a React artifact project, build a richer interface with state or routing, and bundle everything into one shareable HTML file. It is for artifact-delivery workflows, not for listing React or Tailwind as standalone products.
Prerequisites
Node.js 18+, React, TypeScript, Vite, Parcel, Tailwind CSS, and shadcn/ui
Installation
Requirements and caveats from upstream:
- The frontmatter requires only two fields:
Basic usage or getting-started notes:
- Select document-skills or example-skills
- /plugin install example-skills@anthropic-agent-skills
- These example skills are all already available to paid plans in Claude.ai.
- Source: https://github.com/1991513ccie-png/skills
- Extracted from upstream docs: https://raw.githubusercontent.com/anthropics/skills/HEAD/README.md
Documentation
- https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
