汎用デザイン・クリエイティブ⭐ リポ 4品質スコア 61/100

artifacts-builder

React、Tailwind CSS、shadcn/uiなどの最新フロントエンド技術を使用して、複雑で多層的なclaude.ai HTMLアーティファクトを作成するためのツールスイートです。状態管理、ルーティング、またはshadcn/uiコンポーネントが必要な複雑なアーティファクトの構築に使用します。シンプルな単一ファイルのHTML/JSXアーティファクトには向きません。

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.

SKILL.md 本文

注意: このスキルのライセンスは ライセンス未確認 です。本サイトでは本文プレビューのみを表示しています。利用前に GitHub の原本でライセンス条件をご確認ください。

Artifacts Builder

強力なフロントエンド claude.ai アーティファクトを構築するには、以下の手順に従ってください:

scripts/init-artifact.sh を使用してフロントエンドリポジトリを初期化する
生成されたコードを編集してアーティファクトを開発する
scripts/bundle-artifact.sh を使用してすべてのコードを単一の HTML ファイルにバンドルする
ユーザーにアーティファクトを表示する
(オプション) アーティファクトをテストする

スタック: React 18 + TypeScript + Vite + Parcel (バンドリング) + Tailwind CSS + shadcn/ui

デザイン＆スタイルガイドライン

非常に重要: しばしば「AI slop」と呼ばれるものを避けるため、過度に中央に配置されたレイアウト、紫色のグラデーション、均一に丸められたコーナー、および Inter フォントの使用は避けてください。

クイックスタート

ステップ 1: プロジェクトの初期化

初期化スクリプトを実行して新しい React プロジェクトを作成します:

bash scripts/init-artifact.sh <project

...

全文を GitHub の原本で見る →リポジトリ

詳細情報

作者: nordeim
リポジトリ: nordeim/Prompt-Engineering
ライセンス: 不明
最終更新: 2026/4/14

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/nordeim/Prompt-Engineering / ライセンス: 未指定