mcpField
A
artifacts-builder

artifacts-builder

github.com/nexu-ioデザイン・UI104.6k2.8k 回インストール1 日前に更新
リポジトリ

artifacts-builder について

claude.ai 向けに、モダンなフロントエンド技術で複雑な複数コンポーネントの HTML 成果物を作るスキルです。React、Tailwind CSS、shadcn/ui を使用します。

主な機能

  1. 01複数コンポーネントの HTML 成果物を作成
  2. 02React の利用
  3. 03Tailwind CSS の利用
  4. 04shadcn/ui の利用

活用シーン

  1. 01claude.ai 向け HTML 成果物の作成
  2. 02複数コンポーネントによる画面構成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill artifacts-builder

インストール後、Claude Code で/artifacts-builderを入力して読み込まれたか確認します。

詳細

artifacts-builder

ComposioHQ awesome-claude-skills から厳選。

概要

最新のフロントエンド Web 技術（React、Tailwind CSS、shadcn/ui）を使用して、複雑で複数のコンポーネントから成る claude.ai HTML アーティファクトを作成するためのツール一式です。

ソース

使い方

このカタログエントリーは、エージェントが計画時にこのスキルを見つけられるよう、OpenDesign で紹介しています。元のアセット、スクリプト、リファレンスを含む上流のワークフロー全体を実行するには、上流のバンドルをアクティブなエージェントのスキルディレクトリにインストールしてください。

# Inspect the upstream README for exact paths
open https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder

その後、このスキル名（artifacts-builder）またはスキルの frontmatter に記載されているトリガーフレーズのいずれかを使って、このスキルを呼び出すようエージェントに依頼してください。

コメント

Markdown 対応