Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
What it does
For simple claude.ai artifacts, a single JSX file is fine. For complex ones — multiple views, routing, state shared across components, shadcn/ui, Tailwind — Claude tries to put everything in one file and produces unmanageable code. This skill teaches Claude the correct multi-component artifact structure for claude.ai: how to split logic, how to handle routing within artifact constraints, and how to compose shadcn/ui correctly in the artifact environment where imports work differently than in a Next.js project.
Use case
Building complex interactive artifacts in claude.ai: multi-page apps, data dashboards, tools with significant state management. Not for simple single-component artifacts — those don't need it. Made by Anthropic.
"Build a project management tool with a kanban board, list view, and task detail panel." "Create a multi-step form wizard with validation and a review step." "Build a data dashboard with multiple chart types and a data table." "Create a flashcard app with a deck builder, study mode, and progress tracking." "Build a recipe manager with categories, search, and a step-by-step cooking view."
Use this for complex artifacts with multiple views, significant state, or shadcn/ui components.
Claude structures the artifact with correct component separation and state management for the claude.ai environment.
For simpler artifacts (single component, no routing), this skill adds unnecessary overhead — use frontend-design instead.
Input
A description of the multi-component artifact: what views it needs, what data it manages, and what interactions it supports.
Output
A correctly structured multi-component claude.ai artifact with clean component separation, working routing, shared state management, and shadcn/ui usage that works in the artifact environment.
npx skillsadd anthropics/skills/web-artifacts-builder
npx skillsadd anthropics/skills/web-artifacts-builder
Requires skills.sh CLI
Build Obsidian.md plugins following official API patterns, TypeScript best practices, and plugin review guidelines.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
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.