auth-components

# Clerk Auth Components Skill

This skill provides comprehensive templates and patterns for implementing and customizing Clerk authentication components including pre-built components, Clerk Elements for custom flows, and appearance theming.

## Overview

Clerk offers two approaches for authentication UI:

1. **Pre-built Components** - Ready-to-use `<SignIn />`, `<SignUp />`, `<UserButton />` with minimal configuration
2. **Clerk Elements** - Custom components with granular control for advanced use-cases

This skill covers both approaches with practical templates and customization patterns.

## Available Scripts

### 1. Generate Authentication UI Pages

**Script**: `scripts/generate-auth-ui.sh <output-dir> <component-type>`

**Purpose**: Generates complete authentication page templates

**Component Types**:
- `signin` - SignIn page with routing
- `signup` - SignUp page with routing
- `both` - Both SignIn and SignUp pages
- `profile` - User profile page
- `all` - Complete auth UI set

**Usage**:
```bash
# Generate sign-in page
./scripts/generate-auth-ui.sh ./app/sign-in signin

# Generate both sign-in and sign-up
./scripts/generate-auth-ui.sh ./app signup

# Generate complete auth UI
./scripts/generate-auth-ui.sh ./app all
```

**Generated Files**:
- `app/sign-in/[[...sign-in]]/page.tsx`
- `app/sign-up/[[...sign-up]]/page.tsx`
- `app/profile/[[...profile]]/page.tsx`
- `components/auth/protected-wrapper.tsx`

### 2. Customize Appearance and Theming

**Script**: `scripts/customize-appearance.sh <config-file> <theme-preset>`

**Purpose**: Generates appearance configuration for Clerk components

**Theme Presets**:
- `default` - Clerk default theme
- `dark` - Dark mode theme
- `neobrutalist` - Neobrutalist theme
- `shadesOfPurple` - Shades of Purple theme
- `custom` - Custom theme template

**Usage**:
```bash
# Generate dark theme config
./scripts/customize-appearance.sh ./lib/clerk-config.ts dark

# Generate custom theme template
./scripts/customize-appearance.sh ./lib/c