最新のフロントエンド Web テクノロジー (React、Tailwind CSS、shadcn/ui) を使用して、精巧なマルチコンポーネント claude.ai HTML アーティファクトを作成するためのツール スイート。単純な単一ファイルの HTML/JSX アーティファクトではなく、状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。
コマンドラインで web-artifacts-builder AI スキルを開発環境にすばやくインストール
ソース: outlinedriven/odin-codex-plugin。
Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
最新のフロントエンド Web テクノロジー (React、Tailwind CSS、shadcn/ui) を使用して、精巧なマルチコンポーネント claude.ai HTML アーティファクトを作成するためのツール スイート。単純な単一ファイルの HTML/JSX アーティファクトではなく、状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。 ソース: outlinedriven/odin-codex-plugin。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/outlinedriven/odin-codex-plugin --skill web-artifacts-builder最新のフロントエンド Web テクノロジー (React、Tailwind CSS、shadcn/ui) を使用して、精巧なマルチコンポーネント claude.ai HTML アーティファクトを作成するためのツール スイート。単純な単一ファイルの HTML/JSX アーティファクトではなく、状態管理、ルーティング、または shadcn/ui コンポーネントを必要とする複雑なアーティファクトに使用します。 ソース: outlinedriven/odin-codex-plugin。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/outlinedriven/odin-codex-plugin --skill web-artifacts-builder インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/outlinedriven/odin-codex-plugin