thinkinaixyz avatar

Web Artifacts Builder

This is for building complex React artifacts that need to run in Claude's artifact viewer, not simple HTML snippets. It scaffolds a full React + TypeScript + Vite project with Tailwind and 40+ pre-installed shadcn/ui components, then bundles everything into a single self-contained HTML file. The workflow is straightforward: initialize, develop, bundle, share. It includes opinionated styling advice to avoid generic AI aesthetics (no purple gradients, excessive centering, or overused Inter font). Best for artifacts that need state management, routing, or shadcn components. If you're just building a basic interactive page, this is overkill. But if you're creating a mini-app within Claude, it handles the entire toolchain.

GitHub stars
6K
last updated
Jun 11, 2026

Install

$ npx -y skills add thinkinaixyz/deepchat --skill web-artifacts-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

This is for building complex React artifacts that need to run in Claude's artifact viewer, not simple HTML snippets. It scaffolds a full React + TypeScript + Vite project with Tailwind and 40+ pre-installed shadcn/ui components, then bundles everything into a single self-contained HTML file. The workflow is straightforward: initialize, develop, bundle, share. It includes opinionated styling advice to avoid generic AI aesthetics (no purple gradients, excessive centering, or overused Inter font). Best for artifacts that need state management, routing, or shadcn components. If you're just building a basic interactive page, this is overkill. But if you're creating a mini-app within Claude, it handles the entire toolchain.

Browse the repository on GitHub

Sponsors

Details

Repository
github.com/thinkinaixyz/deepchat
Category
Frontend Development
License
Apache-2.0
First seen
Jun 11, 2026

More from thinkinaixyz/deepchat

All 19
1shadcn avatarimproveshadcn/improveSurvey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on s40Kskills.sh installs
2vercel avatarnext-dev-loopvercel/next.jsVerify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-c24.8Kskills.sh installs
3astro-han avatarkarpathy-llm-wikiastro-han/karpathy-llm-wikiUse when building or maintaining a personal LLM-powered knowledge base. Triggers: ingesting sources into a wiki, querying wiki knowledge, linting wiki quality, 8.6Kskills.sh installs
4nextlevelbuilder avatarckm%3Abrandnextlevelbuilder/ui-ux-pro-max-skill8.4Kskills.sh installs
5laguagu avataropenai-agents-sdklaguagu/claude-code-nextjs-skillsOpenAI Agents SDK (Python) development. Use when building AI agents, multi-agent handoffs, function tools, guardrails, sessions, streaming, or tracing with the 2.4Kskills.sh installs
6onmax avatarnuxthubonmax/nuxt-skillsUse when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers 2.3Kskills.sh installs