elements について
Elements Registryは、tryelements.devの本番向けコンポーネントを導入するためのスキルです。複数のプロバイダーとカテゴリを扱い、AIコーディングツール向けにプロバイダー別のスキルも用意されています。
主な機能
- 01shadcn CLIによるコンポーネント導入
- 02コーディングツール向けプロバイダー別スキル
- 03複数カテゴリのコンポーネント
- 04コンポーネント閲覧用ドキュメント
活用シーン
- 01プロジェクトへのコンポーネント追加
- 02インターフェース向けの特定プロバイダー製品の検索
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/elementsを入力して読み込まれたか確認します。
詳細
Elements Registry
tryelements.dev から本番環境対応のコンポーネントをインストールできます。
コンポーネントをインストール
npx shadcn@latest add @elements/{name}
スキルをインストール（AI コーディングツール向け）
npx skills add crafter-station/elements --skill {skill-name}
利用可能なスキル：ai-elements、sfx-elements、devtools-elements、uploadthing-elements、github-elements、theme-elements、polar-elements、upstash-elements、tech-logos
プロバイダー
| プロバイダー | 数 | カテゴリ | スキル | ドキュメント |
|---|---|---|---|---|
| AI Elements | 35 | AI | /ai-elements | tryelements.dev/docs/ai-elements |
| Brand Logos | 94+ | ブランド | /tech-logos | tryelements.dev/docs/logos |
| SFX | 17 | オーディオ（React + raw MP3） | /sfx-elements | tryelements.dev/docs/sfx |
| Dev Tools | 8 | 開発ツール | /devtools-elements | tryelements.dev/docs/devtools |
| UploadThing | 7 | ファイル | /uploadthing-elements | tryelements.dev/docs/uploadthing |
| GitHub | 7 | インテグレーション | /github-elements | tryelements.dev/docs/github |
| Theme Switcher | 6 | UI | /theme-elements | tryelements.dev/docs/theme |
| Polar | 5 | 収益化 | /polar-elements | tryelements.dev/docs/polar |
| Upstash | 5 | データベース | /upstash-elements | tryelements.dev/docs/upstash |
ユーザーから特定のプロバイダーについて質問された場合は、上記の対応するスキルを使用してください。
小規模なプロバイダー（専用スキルなし）
AI バッジ（3 コンポーネント）
npx shadcn@latest add @elements/ai-badge @elements/generate-badge @elements/use-ai-avatar
アニメーション（1 コンポーネント）
npx shadcn@latest add @elements/text-shimmer
Tinte（1 コンポーネント）
npx shadcn@latest add @elements/tinte-editor
すべてを閲覧
コメント
Markdown 対応