Artifacts Builder
技能 活跃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.
To streamline the creation of complex, stateful HTML artifacts using modern frontend web technologies, ensuring a consistent and well-configured development environment.
功能
- 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
使用场景
- 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
非目标
- 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.
安装
npx skills add composiohq/awesome-claude-skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
类似扩展
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
100审计和修复 HTML 可访问性问题，包括 ARIA 标签、键盘导航、焦点管理、颜色对比度和表单错误。在添加交互式控件、表单、对话框或审查 WCAG 合规性时使用。
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.