跳转到主要内容
此内容尚未提供您的语言版本,正在以英文显示。

Artifacts Builder

技能 已验证 活跃
属于:Build with Claude

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 enable users to build and deploy complex, multi-component HTML artifacts using modern frontend web technologies within the Claude.ai environment.

功能

  • 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

使用场景

  • 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

非目标

  • 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

工作流

  1. Initialize the frontend repository using `scripts/init-artifact.sh`
  2. Develop the artifact by editing generated code
  3. Bundle the code into a single HTML file using `scripts/bundle-artifact.sh`
  4. Share the generated HTML artifact with the user
  5. Optionally, test the artifact

先决条件

  • 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.

安装

请先添加 Marketplace

/plugin marketplace add davepoon/buildwithclaude
/plugin install all-skills@buildwithclaude

质量评分

已验证
96 /100
1 day ago 分析

信任信号

最近提交6 days ago
GitHub 所有者 davepoon (opens in new tab)
星标2.9k
许可证Apache-2.0
网站buildwithclaude.com(opens in new tab)
状态
查看源代码

类似扩展

Fixing Accessibility

100

审计和修复 HTML 可访问性问题，包括 ARIA 标签、键盘导航、焦点管理、颜色对比度和表单错误。在添加交互式控件、表单、对话框或审查 WCAG 合规性时使用。

技能
ibelick

Type Audit

100

Typography-only audit covering font selection, type scale, readability, hierarchy, performance

技能
Aboudjem

Develop Web Game

100

Use 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.

技能
davila7

Setup Tailwind Typescript

100

Configure 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.

技能
pjt222

Sentry React Router Framework Sdk

100

Full 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.

技能
getsentry

Vue Router Best Practices

100

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

技能
hyf0