Artifacts Builder
Skill 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 streamline the creation of complex, stateful HTML artifacts using modern frontend web technologies, ensuring a consistent and well-configured development environment.
Features
- Project initialization with React, TypeScript, and Vite
- Integration of Tailwind CSS and shadcn/ui components
- Automated dependency installation and configuration
- Bundling of the entire application into a single HTML file
- Node.js version compatibility checks
Use Cases
- Creating multi-component UI artifacts requiring state management and routing
- Developing complex web applications with a pre-configured, best-practice frontend stack
- Generating shareable, self-contained HTML artifacts for Claude conversations
- Quickly scaffolding new frontend projects based on React and shadcn/ui
Non-Goals
- Creating simple single-file HTML/JSX artifacts
- Handling backend logic or server-side rendering
- Providing a runtime environment for the bundled HTML artifact itself
Trust
- warning:Issues AttentionIn the last 90 days, 55 issues were opened and 2 were closed, indicating a very slow issue resolution rate.
Installation
npx skills add composiohq/awesome-claude-skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
Similar Extensions
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Web Artifacts Builder
77Suite 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.
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.
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.
React Modernization
99Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.