mcpField
T
tech-logos

tech-logos

github.com/crafter-stationデザイン・UI526103 回インストール11 週間前に更新
リポジトリ

tech-logos について

tech-logosは、Elementsレジストリからブランドロゴを導入する開発者向けスキルです。テーマ対応コンポーネントの導入方法やカテゴリ別の一括導入、未登録ロゴのリクエスト手順を案内します。

主な機能

  1. 01Elementsレジストリからロゴを導入
  2. 02アイコンとワードマークを選択
  3. 03ライト・ダークモードに対応
  4. 04カテゴリ別ロゴの一括導入
  5. 05未登録ロゴのリクエスト作成

活用シーン

  1. 01アプリの画面にブランドロゴを追加
  2. 02AIやソーシャル分野のロゴを導入
  3. 03レジストリにないロゴをリクエスト

インストール

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

$npx skills add https://github.com/crafter-station/elements --skill tech-logos

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

詳細

テクノロジーのロゴ

Elements レジストリから、公式のテーマ対応ブランドロゴをインストールします。

インストール方法

npx shadcn@latest add @elements/{name}-logo

例：clerk-logo、github-logo、openai-logo、vercel-logo

利用可能なロゴを探す

オプション A：レジストリをスキャンします（elements リポジトリ内の場合）

ls registry/default/blocks/logos/ | sed 's/-logo$//'

オプション B：https://tryelements.dev/docs/logos を参照します

インストール後

ロゴは components/logos/{name}.tsx にインストールされます：

import { ClerkLogo } from "@/components/logos/clerk"

<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />

共通の Props

  • variant："icon" | "wordmark"
  • mode："light" | "dark"（テーマを自動検出します）
  • className：標準の className prop

バンドル

必要なものコマンド
すべてのロゴ@elements/logos
AI プロバイダー@elements/ai-services
ソーシャルプラットフォーム@elements/social-media
パッケージマネージャー@elements/package-managers

クイックパターン

# Auth stack
npx shadcn@latest add @elements/clerk-logo @elements/better-auth-logo

# AI models
npx shadcn@latest add @elements/openai-logo @elements/anthropic-logo @elements/claude-logo

# Social footer
npx shadcn@latest add @elements/twitter-logo @elements/github-logo @elements/discord-logo

# Tech stack
npx shadcn@latest add @elements/vercel-logo @elements/supabase-logo @elements/stripe-logo

ロゴが見つからない場合

レジストリにロゴがない場合は、ユーザーがリクエストできるようサポートします：

入力済みの GitHub issue URL を生成する：

https://github.com/crafter-station/elements/issues/new?title=[Logo%20Request]%20Add%20{Name}%20logo&body=...&labels=enhancement,logo-request

「Neon」ロゴの場合の例：

https://github.com/crafter-station/elements/issues/new?title=%5BLogo%20Request%5D%20Add%20Neon%20logo&body=%23%23%20Logo%20Request%0A%0A**Company%2FService%3A**%20Neon%0A**Website%3A**%20https%3A%2F%2Fneon.tech%0A%0A%23%23%20Why%20this%20logo%3F%0A%3C!--%20Brief%20description%20--%3E%0A%0A---%0A*Auto-generated%20from%20tech-logos%20skill*&labels=enhancement,logo-request

ユーザーへの案内：

「{Name} のロゴはまだ利用できません。こちらをクリックしてリクエストしてください。issue には必要事項が入力済みです！」

コメント

Markdown 対応