tech-logos
Install and manage high-quality brand logos for tech companies and tools.
Install
mkdir -p .claude/skills/tech-logos && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9266" && unzip -o skill.zip -d .claude/skills/tech-logos && rm skill.zipInstalls to .claude/skills/tech-logos
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Install official tech brand logos from the Elements registry. Use when user needs logos for tech companies (Clerk, Vercel, GitHub, etc.), AI providers (OpenAI, Anthropic, Claude), social platforms, or any brand assets. Triggers on "logo", "brand", "icon for [company]", "add [company] logo", placeholder logo detection, or when building landing pages, auth UIs, or integrations showcases.Key capabilities
- →Install official tech brand logos
- →Add logos for AI providers and social platforms
- →Configure logo variants and themes
- →Generate logo request issues
How it works
The skill uses the shadcn CLI to pull brand assets from the Elements registry and install them as React components.
Inputs & outputs
When to use tech-logos
- →Add company logo to landing page
- →Configure auth icons
- →Showcase tech stack logos in UI
About this skill
Tech Logos
Install official, theme-aware brand logos from the Elements registry.
Install Pattern
npx shadcn@latest add @elements/{name}-logo
Examples: clerk-logo, github-logo, openai-logo, vercel-logo
Discover Available Logos
Option A: Scan registry (if in elements repo)
ls registry/default/blocks/logos/ | sed 's/-logo$//'
Option B: Browse https://tryelements.dev/docs/logos
After Install
Logos install to components/logos/{name}.tsx:
import { ClerkLogo } from "@/components/logos/clerk"
<ClerkLogo className="h-8 w-auto" />
<ClerkLogo variant="wordmark" mode="dark" />
Common Props
variant:"icon"|"wordmark"mode:"light"|"dark"(auto-detects theme)className: Standard className prop
Bundles
| Need | Command |
|---|---|
| All logos | @elements/logos |
| AI providers | @elements/ai-services |
| Social platforms | @elements/social-media |
| Package managers | @elements/package-managers |
Quick Patterns
# 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
Logo Not Found?
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!"
When not to use it
- →Projects not using the Elements registry
Prerequisites
Limitations
- →Limited to logos available in the Elements registry
- →Requires internet access to fetch registry assets
How it compares
It provides a standardized, theme-aware installation method instead of manually downloading and configuring image files.
Compared to similar skills
tech-logos side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tech-logos (this skill) | 2 | 7mo | Review | Beginner |
| ui-design | 1 | 2mo | Review | Intermediate |
| landing-page-guide | 1 | 9mo | Review | Intermediate |
| retro-css-architecture | 1 | 7mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by crafter-station
View all by crafter-station →You might also like
ui-design
TencentCloudBase
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.
landing-page-guide
bear2u
Comprehensive guide for creating effective landing pages using Next.js or React. This skill should be used when users request to create landing pages, marketing pages, or product pages that require the 11 essential elements for high-converting landing pages. Specifically designed for Next.js 14+ App Router with ShadCN UI components.
retro-css-architecture
TheOrcDev
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
clerk-custom-ui
clerk
Custom authentication flows and component appearance - hooks (useSignIn,
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.