Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.
中文简介正在准备中。当前显示英语简介。
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.
安装前可以查看交给 AI 代理的指令内容。
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
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.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Automate 21risk operations through Rube MCP, a connection for agent tools. The skill discovers available actions, checks the service connection, and uses current input requirements to carry out requested tasks.
中文简介正在准备中。当前显示英语简介。
Automate supported 2chat tasks through Rube MCP and Composio. The skill finds available tools, checks the service connection, and uses current input requirements to carry out the requested operations.
中文简介正在准备中。当前显示英语简介。
Automate Ably operations through Rube MCP and Composio. The skill discovers tools for your task, checks current input requirements, verifies an active connection, and guides execution of single operations or batches.
中文简介正在准备中。当前显示英语简介。
Automate Abstract tasks using Rube MCP, a connection for agent tools. The skill searches for available operations, confirms an active service connection, and runs actions according to their current input requirements.
中文简介正在准备中。当前显示英语简介。
Automate Abuselpdb operations through Rube MCP, a connection for agent tools. Discover available actions and their required inputs, verify the service connection, and execute tasks using the current tool definitions.
中文简介正在准备中。当前显示英语简介。
Automate Abyssale operations through Rube MCP, a connection for agent tools. The skill discovers available actions and their current input requirements, checks the service connection, and executes the tools returned by the search.
中文简介正在准备中。当前显示英语简介。