web-artifacts-builder
Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo
- Develop your artifact by editing the generated code
- Bundle all code into a single HTML file
- 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 forever-efficient/pitfal-solutions-website
optimize-images
Batch optimize images for web delivery. Converts to WebP, generates multiple sizes, and creates blur placeholders.
39gallery-manage
Organize, validate, and manage photo/video galleries. Create gallery structures, validate image files, and prepare content for upload.
35logs
View recent CloudWatch logs for Lambda functions and API Gateway.
30stripe-setup
Set up Stripe products, prices, and webhooks for Pitfal Solutions photography packages. Creates products for portrait sessions, event coverage, digital downloads, and prints. Use when configuring payment processing.
30deploy
Deploy the Pitfal Solutions website to AWS. Use when user says deploy, push to production, or update live site. Runs pre-checks, builds Next.js, deploys Terraform infrastructure, syncs to S3, and invalidates CloudFront cache.
29db-seed
Seed the DynamoDB database with sample data for development and testing. Populates galleries, inquiries, and admin tables. Use when setting up local dev environment or resetting test data. WARNING - never run in production.
29