web-artifacts-builder
Web 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 ttmouse/skills
twitter-image-downloader
|
18downloads-organizer
Automatically organize and clean up downloads folder by categorizing files, removing duplicates, and optimizing storage space
11requirements-clarifier
A generic requirement/problem clarification workflow. Use when a user/client request is ambiguous, underspecified, or hard to execute/verify. The skill reframes the request, defines scope, constraints, inputs, and acceptance criteria, then outputs a concise one-page definition and a minimal question set to close gaps. Suitable for product/feature requests, content requests, ops tasks, research asks, and decision-making prompts.
8intelligent-prompt-generator
智能提示词生成器 - 语义理解、常识推理、一致性检查，基于元素数据库生成完美提示词
6universal-learner
通用学习器 - 从任何领域的Prompt中自动提取可复用元素，持续学习和积累知识
5universal-writer
|
5