skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
crafter-station/elements102 installs

tech-logos

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.

How do I install this agent skill?

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

Is this agent skill safe to install?

  • Gen Agent Trust Hubpass

    The skill facilitates the installation of UI brand logos using the shadcn CLI tool and the author's package registry. It provides convenient patterns for common tech stacks but relies on interpolating user-provided brand names directly into shell commands, which presents a surface for indirect prompt injection if inputs are not properly sanitized by the agent.

  • Socketpass

    No alerts

  • Snykwarn

    Risk: MEDIUM · 1 issue

  • Runlayerwarn

    1/1 file flagged

  • ZeroLeakspass

    Score: 93/100 · 2 sections analyzed

What does this agent skill do?

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

NeedCommand
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!"

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/crafter-station/elements/tech-logos">View tech-logos on skillZs</a>