artifacts-builder
Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
scripts/bundle-artifact.sh - Display artifact to user
- (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
More from arcanexis/alice-single
weibo
获取微博热搜榜实时数据。当需要查看微博热点、热门话题、实时舆情时使用该技能。
20akshare
使用 akshare 获取中国金融市场实时数据和历史数据。当需要查询A股、港股、美股、指数、基金、期货等金融产品的实时行情、历史数据、财务报表时使用该技能。
7weather
直接从专业天气API获取实时天气数据和历史天气信息。当需要查询任意城市的当前天气、未来预报、空气质量等精准气象数据时使用该技能。
5tavily
使用 Tavily API 进行互联网搜索。当需要获取实时新闻、技术研究、深度资料或限制特定域名搜索时使用该技能。
5fetch
使用 fetch 服务器获取网页内容并将内容转换为 Markdown。当需要从互联网获取实时信息或阅读特定网页内容时使用该技能。
4pptx
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks
4