clerk-custom-ui Skill for Claude: What It Does and How to Install It

Makes Claude build custom Clerk sign-in and sign-up forms and theme Clerk's prebuilt components.

Installs: 56.4K; on skills.sh
Stars: 89; on GitHub
Files: 5; besides SKILL.md
Updated: Oct 2026; last repo commit

This is Clerk's own skill for custom authentication UI. Claude checks your Clerk SDK version, then builds a sign-in or sign-up form with the useSignIn and useSignUp hooks, or styles Clerk's prebuilt components through the appearance prop, themes and your own CSS.

The folder holds SKILL.md and 5 reference files for the custom flows, and bundles no scripts. Core 2 and the current SDK use different APIs, so the skill keeps two sets of flow files.

Good for

Developers who want Clerk's sign-in screens to match their brand
Teams building their own sign-in or sign-up form with Clerk hooks
shadcn/ui users who want Clerk components to match their design system

Install clerk-custom-ui

Claude Code

Copy this prompt.

Install the clerk-custom-ui skill in Claude Code. Run this command:

/plugin marketplace add clerk/skills
/plugin install clerk@clerk-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The Clerk plugin installs all 20 skills in the repo plus the hosted Clerk MCP server (mcp.clerk.com/mcp) from its .mcp.json; the skills CLI routes install skills only. Per the README, the clerk plugin replaces the earlier clerk-skills@clerk Codex plugin and the earlier core, frameworks, features and mobile Copilot plugins, and Copilot may leave clerk@clerk-skills disabled until you run copilot plugin enable clerk@clerk-skills. This skill points to the clerk skill for the SDK version table, so the skills CLI command here installs both.

From the project README. Source.

What's in the skill

When it loads

Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in/sign-up flows, appearance styling, visual customization, branding.

Sections in SKILL.md

What Do You Need?
Custom Flow References
Appearance Customization
Component Customization Options
Appearance Pattern
variables (colors, typography, borders)
options (structure, logo, social buttons)
Themes
Workflow
Common Pitfalls
See Also

Key facts

Author: Clerk (vendor's own repo)
Repo: clerk/skills
License: MIT (README, plugin.json and the SKILL.md frontmatter say MIT; the repo has no LICENSE file)
Installs on skills.sh: 56,367 (Nov 2, 2026)
GitHub stars: 89 for the whole repo (Nov 2, 2026)
Last repo commit: Oct 30, 2026
Audits on skills.sh: Gen Agent Trust Hub: pass, Socket: pass, Snyk: warn
What it includes: 6 files including SKILL.md: 5 markdown reference files for custom flows. It bundles no scripts
Part of: Plugin clerk: 20 skills plus the Clerk MCP server
Needs: ClerkProvider already in place (clerk-setup); the clerk skill for the version table

What it includes

Reads package.json to choose Core 2 or current SDK references
The two generations have different useSignIn and useSignUp APIs.
Files · Version check
Builds your own sign-in form with the useSignIn hook
References: core-2/custom-sign-in.md and core-3/custom-sign-in.md.
Try: “Build a custom sign-in form”
Write · Custom sign-in flow
Builds your own sign-up form with the useSignUp hook
References: core-2/custom-sign-up.md and core-3/custom-sign-up.md.
Write · Custom sign-up flow
Conditional rendering by auth state for the current SDK
Reference: core-3/show-component.md. Core 2 uses SignedIn, SignedOut and Protect instead.
Write · Show component pattern
Sets variables (colors, fonts, radius) and options (logo, social buttons)
Six Clerk docs pages cover overview, options, themes, variables, CAPTCHA and your own CSS.
Write · Appearance prop
Applies dark, neobrutalism, shadcn or simple, alone or stacked
If components.json exists, SKILL.md says to apply the shadcn theme first.
Runs code · Themes
Five known mistakes, such as colorPrimary vs primaryColor
Common pitfalls table

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your UI code
Claude rewrites sign-in and sign-up components and the ClerkProvider appearance prop. Work on a git branch and read the diff. github.com
It installs a theme package
The Themes section tells Claude to run npm install @clerk/ui, or @clerk/themes on Core 2 projects. Check package.json afterwards. github.com
The Clerk plugin also adds an MCP server
The plugin bundles .mcp.json, which registers the hosted Clerk MCP server at mcp.clerk.com/mcp. plugin.json lists no hooks. The skills CLI and folder routes do not add it. github.com

Technical details

Turning on read-only	There is no read-only switch. Claude writes code into your project.
Talks to	clerk.com
Sign-in and keys	SKILL.md names no key. The custom flows it writes use Clerk's useSignIn and useSignUp hooks.
Scopes	Edits your sign-in, sign-up and layout code Runs npm install @clerk/ui (or @clerk/themes for Core 2) Fetches Clerk documentation pages with WebFetch

Questions

What does the clerk-custom-ui skill do?

It makes Claude build custom sign-in and sign-up forms with Clerk's hooks, and style Clerk's prebuilt components with themes, colors, fonts and your own CSS.

How do I install clerk-custom-ui?

Use the install box above. The Clerk plugin installs all 20 skills. With the skills CLI, name the clerk skill too, because this skill uses its version table.

Which Clerk SDK versions does it cover?

Two generations: Core 2 (the LTS line) and the current SDK (v7+). SKILL.md has separate custom-flow files for each, and notes where appearance options were renamed.

Does it support shadcn/ui?

Yes. If the project has a components.json, SKILL.md says to apply the shadcn theme first and import the shadcn CSS from @clerk/ui.

Does it need ClerkProvider set up first?

Yes. SKILL.md lists it as a prerequisite and points to the clerk-setup skill for that.

Is it safe?

It bundles no scripts, but it edits your UI code and may run npm install @clerk/ui. Our advice: review the diff on a branch before you merge.

Does it work in the Claude app?

The README documents Claude Code, Codex, Cursor, GitHub Copilot CLI and the skills CLI. It documents no Claude app upload route, so use one of those.

Is it an official Clerk skill?

It is in Clerk's own repo, and the repo's marketplace.json describes the plugin as "Official Clerk skills for AI coding agents".

Information

updated Nov 2, 2026

Repository: clerk/skills
Folder: skills/clerk-custom-ui

clerk/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

clerk/skills README · github.com
clerk/skills marketplace.json · github.com
clerk plugin.json · github.com
clerk/skills .mcp.json · github.com
clerk-custom-ui SKILL.md · github.com