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 bobmatnyc/claude-mpm-skills
drizzle-orm
Type-safe SQL ORM for TypeScript with zero runtime overhead
4.2Kplaywright-e2e-testing
Playwright modern end-to-end testing framework with cross-browser automation, auto-wait, and built-in test runner
2.7Kpydantic
Python data validation using type hints and runtime type checking with Pydantic v2's Rust-powered core for high-performance validation in FastAPI, Django, and configuration management.
2.2Ktailwind-css
Tailwind CSS utility-first framework for rapid UI development with responsive design and dark mode
1.2Ktrpc-type-safety
tRPC end-to-end type-safe APIs for TypeScript with React Query integration and full-stack type safety
1.1Kpytest
pytest - Python's most powerful testing framework with fixtures, parametrization, plugins, and framework integration for FastAPI, Django, Flask
899