skills.rest
Ramadan-Elgamal
Ramadan-ElgamalCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

clerk-custom-ui

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

Updated Aug 7, 2026
Search Tags:#theming#authentication#nextjs#mfa#clerk#appearance#custom sign-in
One-click install
npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill clerk-custom-ui-ramadan-elgamal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-custom-ui
Source: https://github.com/Ramadan-Elgamal/Autobees/tree/main/.agents/skills/clerk-custom-ui
Command: npx skills add https://github.com/Ramadan-Elgamal/Autobees --skill clerk-custom-ui-ramadan-elgamal

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Developers using Clerk often need authentication UI that matches their brand or requires fully custom flows beyond the pre-built components. This Skill provides version-aware guidance for building custom sign-in/sign-up experiences with hooks and styling Clerk components via the appearance prop. ## Core Features & Use Cases - Custom Authentication Flows: Build your own sign-in and sign-up UI using useSignIn and useSignUp hooks, with separate references for Core 2 (v5–v6) and the current SDK (v7+), covering password, SSO, passkey, Web3, MFA, and password reset. - Appearance Customization: Theme, color, font, and layout customization of Clerk's pre-built components via the appearance prop, including pre-built themes like shadcn, dark, and neobrutalism. - Conditional Rendering: Use the <Show> component to render content based on auth state, roles, permissions, plans, and features. - Use Case: Your Next.js app uses shadcn/ui and needs a branded login page with email OTP and MFA. The Skill detects the shadcn setup, applies the matching theme, and walks you through the correct SDK-version custom flow. ## Quick Start Ask the AI to build a custom Clerk sign-in page with email and password that matches my app's shadcn 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 from @clerk/nextjs to build a custom sign-in flow. In the current SDK, call signIn.password() with the identifier and password, handle MFA via signIn.mfa methods, then call signIn.finalize() to activate the session.

How do I customize Clerk component colors and themes?▼

Pass the appearance prop to Clerk components with variables like colorPrimary and borderRadius, or use pre-built themes from @clerk/ui such as dark, shadcn, and neobrutalism. Themes can be stacked as an array where the last one takes precedence.

Does Clerk work with shadcn/ui?▼

Yes, Clerk provides an official shadcn theme in @clerk/ui. Import it with `import { shadcn } from '@clerk/ui/themes'`, pass it to ClerkProvider's appearance prop, and add `@import "@clerk/ui/themes/shadcn.css"` to your global styles.

What is the difference between Clerk Core 2 and the current SDK hooks?▼

Core 2 (v5–v6) uses signIn.create(), prepareFirstFactor, and setActive, while the current SDK (v7+) uses namespaced methods like signIn.password(), signIn.mfa.verifyTOTP(), and signIn.finalize(). Error handling also changed from try/catch to structured errors objects returned by the hooks.

Why is my Clerk appearance customization not applying?▼

Common causes include using primaryColor instead of colorPrimary, or placing logoImageUrl at the wrong level. In the current SDK, logoImageUrl and socialButtonsVariant go inside options, while Core 2 uses the layout property instead.

Is the Clerk Show component a security boundary?▼

No, the Show component only visually hides content and it remains in the browser source. For protecting sensitive data, always verify authentication server-side with auth() or use auth.protect() in middleware.

Related Skills

Explore More Software Engineering Skills→
JoshkovuJoshkovu
1

clerk-setup

Set up Clerk authentication for web applications by detecting the target framework.

Community
Intermediate
harperaaharperaa
15

security-prompts-auth

Implement RBAC and authorization scaffolding for Clerk-based Next.js and Convex applications.

Community
Intermediate
Yash-AwasthiYash-Awasthi

clerk-expo

Implement Clerk authentication in Expo and React Native apps using @clerk/expo.

Community
Advanced
DimonikRVDimonikRV

clerk-setup

Configure Clerk authentication in web projects using CLI provisioning and official quickstart guides.

Community
Intermediate