Artifacts Builder
Skill AktivSuite 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.
Funktionen
- 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
Anwendungsfälle
- 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
Nicht-Ziele
- 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-skillsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
Vertrauenssignale
Ähnliche Erweiterungen
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
100Prüft und behebt HTML-Barrierefreiheitsprobleme, einschließlich ARIA-Labels, Tastaturnavigation, Fokusverwaltung, Farbkontrast und Formularfehlern. Verwenden Sie dies beim Hinzufügen interaktiver Steuerelemente, Formulare, Dialogfelder oder bei der Überprüfung der WCAG-Konformität.
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.