web-artifacts-builder
Description
Suite of tools for creating elaborate, multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui.
How to Use
- Visit the GitHub repository to get the SKILL.md file
- Copy the file to your project root or .cursor/rules directory
- Restart your AI assistant or editor to apply the new skill
Full Skill Documentation
name
web-artifacts-builder
description
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.
license
Complete terms in LICENSE.txt
Tags
Related Skills
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications.
react-modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features.
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching.
react-native-architecture
Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns.
react-state-management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.