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/valet
tools
VerifiedTrustedCommunity
Use when the user wants to manage Valet agents, channels, connectors, organizations, or environment variables (secrets and plain config) via the valet CLI. Handles creation, deployment, linking, teardown, and all multi-step workflows. Also use when asked to "create an agent", "deploy an agent", "design an agent", "build me an agent that...", "create a connector", "set up a webhook", or anything involving the Valet platform or any request to create and deploy AI agents. Also use when asked to "learn from this session", "capture this workflow", "save this as an agent", "make this repeatable", or when writing SOUL.md files.
8SKILL.mdUpdated Aug 25, 2026
mediar-ai/valet-publish
tools
VerifiedTrustedCommunity
Publish files, folders, and artifacts to the web. Static hosting for HTML sites, images, PDFs, reports, dashboards, and any file type. Use when asked to publish, host, upload, serve, or share work at a live URL. Also use to propose a rendered page when a report, comparison, chart, design document, or status page would work better than terminal text, but do not create or update a remote site until the user asks or agrees. Account publishing gives a permanent, private-by-default URL visible to org members; --anonymous gives a temporary public URL with no account. Use the valet CLI when available and its MCP server when the CLI cannot run. For deploying an AI agent rather than static files, use the `valet` skill instead.
8SKILL.mdUpdated Aug 25, 2026
mediar-ai/packages/skills/skills/faceless-so
testing
VerifiedTrustedCommunity
# Faceless.so Turn a script, prompt, Reddit post, or blog into a Remotion short with TTS, captions, and B-roll, then auto-post to YouTube, TikTok, Instagram, X, Facebook, LinkedIn, and Threads. ## Prerequisites - A Faceless.so account (from $24/mo) at https://faceless.so - Source material: script, prompt, Reddit URL, or blog URL - Destination social accounts to auto-post (YouTube, TikTok, Instagram, X, Facebook, LinkedIn, Threads) ## Instructions 1. Open https://faceless.so and start a new
8SKILL.mdUpdated Aug 25, 2026
mediar-ai/packages/skills/skills/bimi-svg-tiny-p-s-corpus-validator
testing
VerifiedTrustedCommunity
# BIMI SVG Tiny P/S Corpus Validator Use the public makeBIMI SVG Tiny P/S Test Corpus to evaluate an SVG against its evidence-bound fixture rules and to report the result clearly. ## Inputs Accept either an SVG file, an SVG URL, or raw SVG markup. If the source cannot be retrieved or parsed as XML, stop and report that limitation. ## Authoritative corpus 1. Retrieve the current manifest from `https://makebimi.com/public/test-corpus/v1/manifest.json`. 2. Record `schema_version`, `corpus_vers
8SKILL.mdUpdated Aug 25, 2026