Artifacts Builder
Skill Verified ActiveSuite 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.
To enable users to build and deploy complex, multi-component HTML artifacts using modern frontend web technologies within the Claude.ai environment.
Features
- Initializes React + TypeScript projects with Vite
- Integrates Tailwind CSS and shadcn/ui
- Bundles frontend code into a single HTML artifact
- Manages dependencies via pnpm and lockfiles
- Provides clear setup and build scripts
Use Cases
- Creating interactive dashboards and data visualizations as Claude artifacts
- Building custom UI components or small web applications for presentation
- Developing complex frontend structures requiring state management and routing
- Generating self-contained HTML files for sharing within Claude conversations
Non-Goals
- Creating simple, single-file HTML or JSX artifacts
- Managing backend services or API integrations
- Providing a full-fledged IDE or development environment
- Deploying artifacts to external web servers
Workflow
- Initialize the frontend repository using `scripts/init-artifact.sh`
- Develop the artifact by editing generated code
- Bundle the code into a single HTML file using `scripts/bundle-artifact.sh`
- Share the generated HTML artifact with the user
- Optionally, test the artifact
Prerequisites
- Node.js 18+ installed
- pnpm installed globally
Documentation
- info:Configuration & parameter referenceThe script arguments for `init-artifact.sh` are documented. However, environment variable usage or specific config file precedence beyond the immediate scripts is not detailed.
Installation
First, add the marketplace
/plugin marketplace add davepoon/buildwithclaude/plugin install all-skills@buildwithclaudeQuality Score
VerifiedTrust Signals
Similar Extensions
Fixing Accessibility
100Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.