skills.rest
DimonikRV
DimonikRVCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clerk-custom-ui

Build custom Clerk sign-in and sign-up flows and style authentication components.

Updated Jul 9, 2026
Search Tags:#theming#authentication#nextjs#mfa#clerk#appearance#custom sign-in
One-click install
npx skills add https://github.com/DimonikRV/ghost-pilot-project --skill clerk-custom-ui-dimonikrv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-custom-ui
Source: https://github.com/DimonikRV/ghost-pilot-project/tree/main/.agents/skills/clerk-custom-ui
Command: npx skills add https://github.com/DimonikRV/ghost-pilot-project --skill clerk-custom-ui-dimonikrv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/ui, and includes references (resource) components.

What problem does it solve? Developers often need authentication UI that matches their brand or requires custom logic beyond Clerk's pre-built components. This Skill provides version-aware guidance for building custom sign-in/sign-up flows with hooks and styling Clerk components via the appearance prop. ## Core Features & Use Cases - Custom Authentication Flows: Build sign-in and sign-up UI with useSignIn and useSignUp hooks, covering password, SSO, passkey, Web3, MFA, and password reset for both Core 2 and current SDK versions. - Appearance Customization: Apply themes (dark, neobrutalism, shadcn, simple), variables (colors, fonts, border radius), and options (logo, social buttons) to Clerk's pre-built components. - Conditional Rendering: Use the <Show> component to gate content by auth state, role, permission, plan, or feature. - Use Case: A Next.js app using shadcn/ui needs a branded login page with email/password plus TOTP MFA. The Skill detects the SDK version, applies the shadcn theme to ClerkProvider, and provides a complete custom sign-in component with MFA handling. ## Quick Start Ask the AI to build a custom Clerk sign-in page with email, password, and MFA support styled to match your app's theme.

Frequently Asked Questions about clerk-custom-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a custom sign-in page with Clerk?▼

Use the useSignIn hook to create a custom sign-in flow. In the current SDK, call signIn.password() with the identifier and password, handle MFA with signIn.mfa methods if needed, then call signIn.finalize() to activate the session.

How do I customize Clerk component colors and themes?▼

Pass an appearance prop to Clerk components or ClerkProvider with variables like colorPrimary and borderRadius, or apply pre-built themes such as dark, shadcn, or neobrutalism imported from @clerk/ui/themes.

Does Clerk theming work with shadcn/ui projects?▼

Yes. If the project has a components.json file, apply the shadcn theme from @clerk/ui/themes to ClerkProvider and import @clerk/ui/themes/shadcn.css in your global styles so Clerk components match the shadcn design system.

What is the difference between Clerk Core 2 and the current SDK for custom flows?▼

Core 2 uses signIn.create, attemptFirstFactor, and setActive, while the current SDK uses namespaced methods like signIn.password, signIn.mfa.verifyTOTP, and signIn.finalize. Themes also moved from @clerk/themes to @clerk/ui.

Why is my Clerk appearance customization not applying?▼

Common causes include using primaryColor instead of colorPrimary, placing logoImageUrl outside the options object, or using layout instead of options in the current SDK. Check your SDK version since property names differ between Core 2 and current.

How do I show content only to signed-in users with Clerk?▼

In the current SDK, use the Show component with when="signed-in", or pass conditions like role, permission, plan, or feature. In Core 2, use SignedIn, SignedOut, and Protect components instead.

Related Skills

Explore More Software Engineering Skills→
domhhvdomhhv
3

clerk-setup

Initialize Clerk SDK and link an application using publishable and secret keys.

Community
Basic
clerkclerk
66

clerk-nextjs-patterns

Implement Clerk authentication and authorization patterns for Next.js server components, middleware, and Server Actions.

Official
Advanced
harperaaharperaa
15

authentication-authorization-clerk

Authenticate users and authorize access via Clerk APIs.

Community
Intermediate
mihaicrisan04mihaicrisan04

clerk-custom-ui

Customize Clerk authentication components with themes, colors, fonts, and CSS.

Community
Intermediate