pedronauck/tech-logos
skills/mine/tech-logos/SKILL.md
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. Don't use for custom in-house logos, generic icon libraries (Lucide, Heroicons), or marketing image assets.
$ install --global
skillsauthnpx skillsauth add pedronauck/skills tech-logosInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 13, 2026, 6:27 AM145.7s1 file scanned
SKILL.md
- name:
- tech-logos
- description:
- 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. Don't use for custom in-house logos, generic icon libraries (Lucide, Heroicons), or marketing image assets.
- author:
- Pedro Nauck
- github:
- https://github.com/pedronauck
- repository:
- https://github.com/pedronauck/skills
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!"
Related Skills
pedronauck/deep-review
development
VerifiedTrustedCommunity
Deep review of branch diffs, working trees, or GitHub PRs at any size. Use when the user asks for CodeRabbit-grade review, an incremental re-review after new pushes, publication of findings to a PR, a cross-LLM peer-review verdict round, or conformance review against spec artifacts. Don't use for applying fixes, reviewing specs or PRDs as documents, or quick single-file feedback.
520SKILL.mdUpdated Jul 18, 2026
pedronauck/herdr-orchestration
tools
VerifiedTrustedCommunity
Orchestrate Claude and Codex worker TUIs from a controller agent through herdr panes and the herdr socket CLI. Use when delegating bounded tasks to herdr worker panes, running user-activated plan-first delegations (Claude Code plan mode, Codex Plan mode), waiting on native agent status (idle, working, blocked, done), or verifying worker reports. Workers launch as interactive TUIs via herdr agent start — never through headless runners (compozy exec, claude -p, codex exec). Not for cmux workspaces (see cmux-orchestration) and not for end-user herdr control.
520SKILL.mdUpdated Jul 11, 2026
pedronauck/tanstack
tools
VerifiedTrustedCommunity
TanStack Query, Router, and Form patterns for React. Use when writing useQuery/queryOptions, mutations, caching, file-based routes, search params, loaders, or TanStack Form validation. Don't use for TanStack Start, TanStack DB/collections, Zustand client state, or non-TanStack routing.
520SKILL.mdUpdated Jun 13, 2026
pedronauck/impeccable
development
VerifiedTrustedCommunity
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
520SKILL.mdUpdated May 14, 2026