重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
tech-logos by crafter-station/elements
npx skills add https://github.com/crafter-station/elements --skill 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:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { ClerkLogo } from "@/components/logos/clerk"
<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />
variant: "icon" | "wordmark"mode: "light" | "dark"(自动检测主题)className: 标准的 className 属性| 需求 | 命令 |
|---|---|
| 所有徽标 | @elements/logos |
| AI 服务提供商 | @elements/ai-services |
| 社交平台 | @elements/social-media |
| 包管理器 | @elements/package-managers |
# 身份验证技术栈
npx shadcn@latest add @elements/clerk-logo @elements/better-auth-logo
# AI 模型
npx shadcn@latest add @elements/openai-logo @elements/anthropic-logo @elements/claude-logo
# 社交页脚
npx shadcn@latest add @elements/twitter-logo @elements/github-logo @elements/discord-logo
# 技术栈
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 已预填好!"
周安装量
41
仓库
GitHub 星标数
401
首次出现
2026年1月20日
安全审计
安装于
gemini-cli34
opencode29
codex29
claude-code28
github-copilot27
cursor25
Install official, theme-aware brand logos from the Elements registry.
npx shadcn@latest add @elements/{name}-logo
Examples: clerk-logo, github-logo, openai-logo, vercel-logo
Option A : Scan registry (if in elements repo)
ls registry/default/blocks/logos/ | sed 's/-logo$//'
Option B : Browse https://tryelements.dev/docs/logos
Logos install to components/logos/{name}.tsx:
import { ClerkLogo } from "@/components/logos/clerk"
<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />
variant: "icon" | "wordmark"mode: "light" | "dark" (auto-detects theme)className: Standard className prop| Need | Command |
|---|---|
| All logos | @elements/logos |
| AI providers | @elements/ai-services |
| Social platforms | @elements/social-media |
| Package managers | @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
If the logo doesn't exist in the registry, help the user request it:
Generate a pre-filled GitHub issue URL:
https://github.com/crafter-station/elements/issues/new?title=[Logo%20Request]%20Add%20{Name}%20logo&body=...&labels=enhancement,logo-request
Example for "Neon" logo:
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
Tell the user:
"The {Name} logo isn't available yet. Click here to request it - the issue is pre-filled!"
Weekly Installs
41
Repository
GitHub Stars
401
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
gemini-cli34
opencode29
codex29
claude-code28
github-copilot27
cursor25
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
125,600 周安装
视频摘要生成器 - 一键下载1800+平台视频并生成字幕、转录稿和摘要
282 周安装
Dodo Payments 结账集成指南:托管、覆盖式与支付链接三种支付方式实现
278 周安装
Kibana Vega 技能:使用 ES|QL 与 Vega 语法创建高度定制化 Kibana 仪表板和数据可视化
281 周安装
阿里云AI语音TTS测试技能 - 最小可行测试验证与安装指南
279 周安装
阿里云DataLake DLF测试指南:最小可行性测试步骤与预期结果
280 周安装
阿里云 ECS 最小可行性测试 Skill - 自动化云服务 API 连通性验证工具
279 周安装