web-artifacts-builder
Web Artifacts Builder
To build powerful frontend claude.ai artifacts, follow these steps:
- Initialize the frontend repo using
/Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/web-artifacts-builder/scripts/init-artifact.sh - Develop your artifact by editing the generated code
- Bundle all code into a single HTML file using
/Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/web-artifacts-builder/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 sargupta/sahayakai
senior-software-engineer
Acts as a Senior Staff Engineer to enforce high-quality software development standards. Use this skill when the user asks for code implementation, architectural review, debugging, or technical design. It ensures all code is production-ready, typed, and architecturally sound.
92docx
Comprehensive document processing for SahayakAI. Use for (1) Generating worksheets and assignments, (2) Creating printable lesson plans, (3) Drafting study guides, or (4) Analyzing student submissions in .docx format.
25pptx
Presentation creation, editing, and analysis for SahayakAI educational flows. Use this for (1) Generating lesson plans as slides, (2) Creating teacher presentation decks, (3) Designing visual aids for micro-lessons, or (4) Analyzing existing educational decks.
16canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
15webapp-testing
Toolkit for interacting with and testing SahayakAI web applications using Playwright. Supports verifying educational flows (Quizzes, Micro-lessons), debugging UI behavior, and capturing browser state.
15frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
15