Community이미지github.com

clerk/clerk-custom-ui

사용자 정의 인증 흐름 및 컴포넌트 외관 - 훅(useSignIn, useSignUp), 테마, 색상, 폰트, CSS. 맞춤형 로그인/회원가입 흐름, 외관 스타일링, 시각적 사용자 정의, 브랜딩에 사용됩니다.

clerk-custom-ui란 무엇인가요?

clerk/clerk-custom-ui는 Clerk 라이브러리를 사용할 때 기본 제공되는 UI를 완전히 커스터마이징할 수 있는 스킬입니다. `useSignIn` 및 `useSignUp`과 같은 훅을 활용하여 개발자는 자체적인 인증 흐름을 구축하거나 외관을 자유롭게 변경할 수 있습니다. 이 스킬은 테마(theme), 색상(color), 폰트(font), CSS 변수 및 클래스 재정의를 지원하여 브랜드 아이덴티티에 맞는 시각적 일관성을 제공합니다. React 기반의 Clerk SDK와 함께 사용되며, SignIn 및 SignUp 컴포넌트의 사용자 정의가 가능합니다. 주요 사용 사례는 맞춤형 로그인/회원가입 페이지 디자인, 특정 스타일 가이드 적용, 그리고 기존 애플리케이션 UI와의 통합입니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/clerk/skills/tree/main/skills/clerk-custom-ui

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

clerk-custom-ui은(는) 무엇을 하나요?

사용자 정의 인증 흐름 및 컴포넌트 외관 - 훅(useSignIn, useSignUp), 테마, 색상, 폰트, CSS. 맞춤형 로그인/회원가입 흐름, 외관 스타일링, 시각적 사용자 정의, 브랜딩에 사용됩니다.

개요

이 스킬은 Clerk의 커스텀 UI 기능을 다룹니다. 이를 통해 기본 제공 UI를 완전히 제어하거나 대체할 수 있습니다.

주요 기능

  • 훅(Hooks): useSignIn 및 useSignUp을 사용하여 인증 흐름을 프로그래밍 방식으로 처리합니다.
  • 테마(Themes): appearance prop을 통해 전역 테마를 적용합니다.
  • 색상 및 폰트: 기본 색상, 폰트 패밀리, 크기를 변경합니다.
  • CSS 재정의: 클래스 이름이나 인라인 스타일을 통해 특정 컴포넌트 스타일을 변경합니다.

사용 방법 예시

import { SignIn } from "@clerk/nextjs";

<SignIn
  appearance={{
    theme: {
      colorPrimary: "#ff0000",
      borderRadius: "8px",
    },
    elements: {
      card: "bg-white shadow-md",
      formFieldInput: "border-2 border-gray-300",
    },
  }}
/>

지원 플랫폼

  • Clerk React SDK (Next.js, Remix, Gatsby, 일반 React)
  • Clerk JavaScript SDK

참고

  • 자세한 내용은 Clerk 공식 문서를 참조하세요.
  • 훅 사용 시 인증 상태와 에러 처리를 직접 관리해야 합니다.

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

clerk/clerk

Clerk authentication router. Use when user asks about adding authentication, setting up Clerk, custom sign-in flows, Swift or native iOS auth, native Android auth, Next.js patterns, React patterns, Vue patterns, Nuxt patterns, Astro patterns, TanStack Start patterns, Expo patterns, React Router patterns, Chrome Extension patterns, organizations, billing, subscriptions, payments, pricing, plans, seat-based pricing, feature entitlements, syncing users, or testing. Automatically routes to the specific skill based on their task.

clerk/clerk-android

Implement Clerk authentication for native Android apps using Kotlin and Jetpack Compose with clerk-android source-guided patterns. Use for prebuilt AuthView/UserButton or custom API-driven auth flows. Do not use for Expo or React Native projects.

clerk/clerk-astro-patterns

Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR rendering. Triggers on: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.

clerk/clerk-backend-api

Clerk Backend REST API explorer and executor. Browse tags, inspect endpoint schemas, and execute authenticated requests. Use when listing users, managing organizations, or calling any Clerk API endpoint.

clerk/clerk-billing

Clerk Billing for subscription management - render Clerk's PricingTable and in-app checkout drawer, configure subscription plans, seat-limit plans for B2B, feature entitlements with has(), and billing webhooks. Use for SaaS monetization, plan gating, checkout flows, trials, invoicing, and subscription lifecycle management.

clerk/clerk-chrome-extension-patterns

Chrome Extension auth with @clerk/chrome-extension -- popup/sidepanel setup, syncHost for OAuth/SAML via web app, createClerkClient for service workers and headless extensions, stable CRX ID. Triggers on: Chrome extension auth, Plasmo clerk, popup sign-in, syncHost, background service worker token, createClerkClient, headless extension.

clerk/clerk-expo

Implement Clerk authentication for Expo and React Native apps using @clerk/expo source-guided patterns. Use for prebuilt AuthView/UserButton or custom hook-driven auth flows. Do not use for native iOS/Swift, native Android/Kotlin, or web framework projects.

clerk/clerk-expo-patterns

Expo / React Native patterns with Clerk — SecureStore token cache, OAuth deep linking, useAuth in native, Expo Router protected routes, push notifications with user context. Triggers on: expo clerk, clerk react native, SecureStore token cache, expo router auth, OAuth deep link clerk, mobile auth clerk.

clerk/clerk-nextjs-patterns

Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.

clerk/clerk-nuxt-patterns

Nuxt 3 auth patterns with @clerk/nuxt - middleware, composables, server API routes, SSR. Triggers on: Nuxt auth, useAuth composable, clerkMiddleware Nuxt, server API Clerk, Nuxt route protection.

clerk/clerk-orgs

Clerk Organizations for B2B SaaS - create multi-tenant apps with org switching, role-based access, verified domains, and enterprise SSO. Use for team workspaces, RBAC, org-based routing, member management.

clerk/clerk-react-patterns

React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.

clerk/clerk-react-router-patterns

React Router v7 patterns with Clerk — rootAuthLoader, getAuth in loaders, clerkMiddleware, protected routes, SSR user data, org switching. Triggers on: react-router auth, rootAuthLoader, getAuth loader, react-router protected route, loader authentication, SSR auth react-router.

clerk/clerk-setup

Add Clerk authentication to any project by following the official quickstart guides.

clerk/clerk-swift

Implement Clerk authentication for native Swift and iOS apps using ClerkKit and ClerkKitUI source-guided patterns. Use for prebuilt AuthView or custom native flows. Do not use for Expo or React Native projects.

clerk/clerk-tanstack-patterns

TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.

clerk/clerk-testing

E2E testing for Clerk apps. Use with Playwright or Cypress for auth flow tests.

clerk/clerk-vue-patterns

Vue 3 patterns with Clerk — composables (useAuth, useUser, useClerk, useOrganization), Vue Router guards, Pinia auth store integration. Triggers on: vue clerk, useAuth vue, clerk composables, vue router clerk guard, pinia auth clerk. For Nuxt, use clerk-nuxt-patterns instead.

clerk/clerk-webhooks

Clerk webhooks for real-time events and data syncing. Verify with verifyWebhook from the framework-specific package. Handle user, session, organization, billing, and payment events. Build event-driven features like database sync, notifications, and integrations.

관련 스킬

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 이미지 skills