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 中使用
這個 Skill 的原始碼在哪？
https://github.com/crafter-station/elements