mediar-ai/clerk-custom-ui
packages/skills/skills/clerk-custom-ui/SKILL.md
Customize Clerk component appearance - themes, layout, colors, fonts, CSS. Use for appearance styling, visual customization, branding.
$ install --global
skillsauthnpx skillsauth add mediar-ai/skillhubz clerk-custom-uiInstall 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: Apr 18, 2026, 6:42 AM11.5s1 file scanned
SKILL.md
- name:
- clerk-custom-ui
- description:
- Customize Clerk component appearance - themes, layout, colors, fonts, CSS. Use for appearance styling, visual customization, branding.
- allowed-tools:
- WebFetch
- license:
- MIT
- author:
- clerk
- version:
- 1.0.0
Component Customization
Prerequisite: Ensure
ClerkProviderwraps your app. Seesetup/.
Component Customization Options
| Task | Documentation | |------|---------------| | Appearance prop overview | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/overview | | Layout (structure, logo, buttons) | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/layout | | Themes (pre-built dark/light) | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/themes | | Variables (colors, fonts, spacing) | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/variables | | CAPTCHA configuration | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/captcha | | Bring your own CSS | https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/bring-your-own-css |
Appearance Pattern
<SignIn
appearance={{
variables: {
colorPrimary: '#0000ff',
borderRadius: '0.5rem',
},
layout: {
logoImageUrl: '/logo.png',
socialButtonsVariant: 'iconButton',
},
}}
/>
variables (colors, typography, borders)
| Property | Description |
|----------|-------------|
| colorPrimary | Primary color throughout |
| colorBackground | Background color |
| borderRadius | Border radius (default: 0.375rem) |
layout (structure, logo, social buttons)
| Property | Description |
|----------|-------------|
| logoImageUrl | URL to custom logo |
| socialButtonsVariant | 'blockButton' | 'iconButton' | 'auto' |
| socialButtonsPlacement | 'top' | 'bottom' |
shadcn Theme
If the project has components.json (shadcn/ui installed), use the shadcn theme:
import { shadcn } from '@clerk/themes'
<ClerkProvider
appearance={{
theme: shadcn,
}}
/>
Also import shadcn CSS in your global.css:
@import 'tailwindcss';
@import '@clerk/themes/shadcn.css';
Workflow
- Identify customization needs (colors, layout, theme, CSS)
- WebFetch the appropriate documentation from table above
- Follow official code examples from the docs
- Apply appearance prop to your Clerk components
Common Pitfalls
| Issue | Solution |
|-------|----------|
| Colors not applying | Use colorPrimary not primaryColor |
| Logo not showing | Put logoImageUrl inside layout: {} |
| Social buttons wrong | Add socialButtonsVariant: 'iconButton' in layout |
| Styling not working | Use appearance prop, not direct CSS (unless with bring-your-own-css) |
Related Skills
mediar-ai/tui-ui
tools
VerifiedTrustedCommunity
Design web-like user interfaces in the terminal and inside tmux with a cell-grid Canvas, CSS-like box model, flexbox/grid layout, and 15 reusable widgets such as Panel, Table, Card, ProgressBar, Meter, Tabs, Tree, Badge, Banner, and a braille line chart. Use when an agent needs a dashboard, panel, table, status page, TUI layout, tmux dashboard, screenshot-driven CLI/TUI replica, ANSI frame, truecolor render, pyte PNG screenshot smoke test, wide-character alignment, or a new terminal widget.
7SKILL.mdUpdated Jul 11, 2026
mediar-ai/drive-tui
tools
VerifiedTrustedCommunity
Drive interactive terminal (TUI) programs — CLIs, REPLs, installers, menu apps, agent CLIs, and editors like vim — through a PTY, reading semantic screen snapshots. A pattern library classifies a screen (REPL, menu, pager, fzf search, confirm dialog, form, spinner, wizard) and drives it with a ready recipe. Use when a program expects a live terminal (arrow-key menus, prompts, spinners, password fields, curses UIs), or when a piped command hangs or prints nothing.
7SKILL.mdUpdated Jul 11, 2026
mediar-ai/cmd-art
tools
VerifiedTrustedCommunity
Design and render terminal/CMD visual effects and ASCII art from a one-line request via the pluggable `fx` engine (18 hot-swappable, themeable effects plus scripted shows). Effects include donut, matrix rain, plasma, fire, a spinning 3D ball, Game of Life, wireframe cube, 3D text banners, rainbow/lolcat gradient text, starfield, tunnel, fireworks, image-to-ASCII, and more. Use when the request is for a terminal animation, ANSI/CLI art, or a new console effect. Pure Python stdlib; truecolor.
7SKILL.mdUpdated Jul 11, 2026
mediar-ai/packages/skills/skills/x-twitter-scraper
tools
VerifiedTrustedCommunity
# X Twitter Scraper Use Xquik for X/Twitter tweet search, user lookup, profile tweets, follower export, media download, monitors, webhooks, posting workflows, and MCP-backed API exploration. ## Prerequisites - A Xquik API key in `XQUIK_API_KEY`. - Internet access to `https://xquik.com/api/v1`, `https://xquik.com/mcp`, and `https://docs.xquik.com`. - A clear user request that identifies the target tweets, users, accounts, keywords, media, monitor, webhook, or write action. ## Source Truth -
6SKILL.mdUpdated May 31, 2026