logo-with-variants
✓複数のバリエーション (アイコン、ワードマーク、ロゴ) とライト/ダーク モードを備えたロゴ コンポーネントを作成します。ユーザーがロゴ SVG ファイルを提供し、Elements プロジェクトの Clerk パターンに従ってバリアント ベースのロゴ コンポーネントを作成したい場合に使用します。
SKILL.md
Creates logo components with variant support following the established pattern in Elements codebase.
Reference implementation: Check src/components/ui/logos/clerk.tsx for the exact pattern to follow.
CRITICAL: The variants array MUST list ALL combinations explicitly in {base}-{mode} format (e.g., "icon-dark", "logo-light"). This is what makes the variant count badge (e.g., "6") appear correctly in the UI. Do NOT just list base names like ["icon", "logo", "wordmark"].
複数のバリエーション (アイコン、ワードマーク、ロゴ) とライト/ダーク モードを備えたロゴ コンポーネントを作成します。ユーザーがロゴ SVG ファイルを提供し、Elements プロジェクトの Clerk パターンに従ってバリアント ベースのロゴ コンポーネントを作成したい場合に使用します。 ソース: crafter-station/elements。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/crafter-station/elements --skill logo-with-variants- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
logo-with-variants とは？
複数のバリエーション (アイコン、ワードマーク、ロゴ) とライト/ダーク モードを備えたロゴ コンポーネントを作成します。ユーザーがロゴ SVG ファイルを提供し、Elements プロジェクトの Clerk パターンに従ってバリアント ベースのロゴ コンポーネントを作成したい場合に使用します。 ソース: crafter-station/elements。
logo-with-variants のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/crafter-station/elements --skill logo-with-variants インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/crafter-station/elements