+ )
+}
+```
+
+```tsx
+// src/components/ui/button-client.tsx
+"use client"
+
+import { Button } from "./button"
+
+export function ButtonClient(props: React.ComponentProps) {
+ return
+}
+```
+
+### Route Handlers with Forms
+
+Create API routes for form submissions:
+
+```tsx
+// app/api/contact/route.ts
+import { NextRequest, NextResponse } from "next/server"
+import { z } from "zod"
+
+const contactSchema = z.object({
+ name: z.string().min(2),
+ email: z.string().email(),
+ message: z.string().min(10),
+})
+
+export async function POST(request: NextRequest) {
+ try {
+ const body = await request.json()
+ const validated = contactSchema.parse(body)
+
+ // Process form data
+ console.log("Form submission:", validated)
+
+ return NextResponse.json({ success: true })
+ } catch (error) {
+ if (error instanceof z.ZodError) {
+ return NextResponse.json(
+ { errors: error.errors },
+ { status: 400 }
+ )
+ }
+
+ return NextResponse.json(
+ { error: "Internal server error" },
+ { status: 500 }
+ )
+ }
+}
+```
+
+### Form with Server Action
+
+Using Next.js 14+ Server Actions:
+
+```tsx
+// app/contact/page.tsx
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { Button } from "@/components/ui/button"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+
+const formSchema = z.object({
+ name: z.string().min(2),
+ email: z.string().email(),
+ message: z.string().min(10),
+})
+
+async function onSubmit(values: z.infer) {
+ try {
+ const response = await fetch("/api/contact", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(values),
+ })
+
+ if (!response.ok) throw new Error("Failed to submit")
+
+ toast({
+ title: "Success!",
+ description: "Your message has been sent.",
+ })
+ } catch (error) {
+ toast({
+ variant: "destructive",
+ title: "Error",
+ description: "Failed to send message. Please try again.",
+ })
+ }
+}
+
+export default function ContactPage() {
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ })
+
+ return (
+
+
+
+
+ )
+}
+```
+
+### Metadata with shadcn/ui
+
+Using shadcn/ui components in metadata:
+
+```tsx
+// app/layout.tsx
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+ title: {
+ default: "My App",
+ template: "%s | My App",
+ },
+ description: "Built with shadcn/ui and Next.js",
+}
+
+// app/about/page.tsx
+import { Metadata } from "next"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export const metadata: Metadata = {
+ title: "About Us",
+ description: "Learn more about our company",
+}
+
+export default function AboutPage() {
+ return (
+
+
+
+ About Our Company
+
+
+
We build amazing products with modern web technologies.
+
+
+
+ )
+}
+```
+
+### Font Optimization
+
+Optimize fonts with next/font:
+
+```tsx
+// app/layout.tsx
+import { Inter } from "next/font/google"
+import { Toaster } from "@/components/ui/toaster"
+import { cn } from "@/lib/utils"
+import "./globals.css"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+
+ )
+}
+```
+
+## Advanced Patterns
+
+### Form with Multiple Fields
+
+```tsx
+const formSchema = z.object({
+ username: z.string().min(2).max(50),
+ email: z.string().email(),
+ bio: z.string().max(160).min(4),
+ role: z.enum(["admin", "user", "guest"]),
+ notifications: z.boolean().default(false),
+})
+
+export function AdvancedForm() {
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ username: "",
+ email: "",
+ bio: "",
+ role: "user",
+ notifications: false,
+ },
+ })
+
+ function onSubmit(values: z.infer) {
+ console.log(values)
+ }
+
+ return (
+
+
+ )
+}
+```
+
+## Best Practices
+
+1. **Accessibility**: Components use Radix UI primitives for ARIA compliance
+2. **Customization**: Modify components directly in your codebase
+3. **Type Safety**: Use TypeScript for type-safe props and state
+4. **Validation**: Use Zod schemas for form validation
+5. **Styling**: Leverage Tailwind utilities and CSS variables
+6. **Consistency**: Use the same component patterns across your app
+7. **Testing**: Components are testable with React Testing Library
+8. **Performance**: Components are optimized and tree-shakeable
+
+## Common Component Combinations
+
+### Login Form
+
+```tsx
+
+
+ Login
+ Enter your credentials to continue
+
+
+
+
+
+
+```
+
+## References
+
+- Official Docs: https://ui.shadcn.com
+- Radix UI: https://www.radix-ui.com
+- React Hook Form: https://react-hook-form.com
+- Zod: https://zod.dev
+- Tailwind CSS: https://tailwindcss.com
+- Examples: https://ui.shadcn.com/examples
diff --git a/.agents/skills/shadcn-ui/learn.md b/.agents/skills/shadcn-ui/learn.md
new file mode 100644
index 0000000..24c38c0
--- /dev/null
+++ b/.agents/skills/shadcn-ui/learn.md
@@ -0,0 +1,145 @@
+# shadcn/ui Learning Guide
+
+This guide helps you learn shadcn/ui from basics to advanced patterns.
+
+## Learning Path
+
+### 1. Understanding the Philosophy
+
+shadcn/ui is different from traditional component libraries:
+
+- **Copy-paste components**: Components are copied into your project, not installed as packages
+- **Full customization**: You own the code and can modify it freely
+- **Built on Radix UI**: Provides accessibility primitives
+- **Styled with Tailwind**: Uses utility classes for consistent styling
+
+### 2. Core Concepts to Master
+
+#### Class Variance Authority (CVA)
+Most components use CVA for variant management:
+
+```tsx
+const buttonVariants = cva(
+ "base-classes",
+ {
+ variants: {
+ variant: {
+ default: "variant-classes",
+ destructive: "destructive-classes",
+ },
+ size: {
+ default: "size-classes",
+ sm: "small-classes",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+```
+
+#### cn Utility Function
+The `cn` function combines classes and resolves conflicts:
+
+```tsx
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+```
+
+### 3. Installation Checklist
+
+- [ ] Initialize a new project (Next.js, Vite, or Remix)
+- [ ] Install Tailwind CSS
+- [ ] Run `npx shadcn@latest init`
+- [ ] Configure CSS variables
+- [ ] Install first component: `npx shadcn@latest add button`
+
+### 4. Essential Components to Learn First
+
+1. **Button** - Learn variants and sizes
+2. **Input** - Form inputs with labels
+3. **Card** - Container components
+4. **Form** - Form handling with React Hook Form
+5. **Dialog** - Modal windows
+6. **Select** - Dropdown selections
+7. **Toast** - Notifications
+
+### 5. Common Patterns
+
+#### Form Pattern
+Every form follows this structure:
+
+```tsx
+1. Define Zod schema
+2. Create form with useForm
+3. Wrap with Form component
+4. Add FormField for each input
+5. Handle submission
+```
+
+#### Component Customization Pattern
+To customize a component:
+
+1. Copy component to your project
+2. Modify the variants
+3. Add new props if needed
+4. Update types
+
+### 6. Best Practices
+
+- Always use TypeScript
+- Follow the existing component structure
+- Use semantic HTML when possible
+- Test with screen readers for accessibility
+- Keep components small and focused
+
+### 7. Advanced Topics
+
+- Creating custom components from scratch
+- Building complex forms with validation
+- Implementing dark mode
+- Optimizing for performance
+- Testing components
+
+## Practice Exercises
+
+### Exercise 1: Basic Setup
+1. Create a new Next.js project
+2. Set up shadcn/ui
+3. Install and customize a Button component
+4. Add a new variant "gradient"
+
+### Exercise 2: Form Building
+1. Create a contact form with:
+ - Name input (required)
+ - Email input (email validation)
+ - Message textarea (min length)
+ - Submit button with loading state
+
+### Exercise 3: Component Combination
+1. Build a settings page using:
+ - Card for layout
+ - Sheet for mobile menu
+ - Select for dropdowns
+ - Switch for toggles
+ - Toast for notifications
+
+### Exercise 4: Custom Component
+1. Create a custom Badge component
+2. Support variants: default, secondary, destructive, outline
+3. Support sizes: sm, default, lg
+4. Add icon support
+
+## Resources
+
+- [Official Documentation](https://ui.shadcn.com)
+- [GitHub Repository](https://github.com/shadcn/ui)
+- [Examples Gallery](https://ui.shadcn.com/examples)
+- [Radix UI Primitives](https://www.radix-ui.com/primitives)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
\ No newline at end of file
diff --git a/.agents/skills/shadcn-ui/official-ui-reference.md b/.agents/skills/shadcn-ui/official-ui-reference.md
new file mode 100644
index 0000000..4eaa6ba
--- /dev/null
+++ b/.agents/skills/shadcn-ui/official-ui-reference.md
@@ -0,0 +1,1725 @@
+### Create TanStack Start Project with shadcn/ui
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+Initialize a new TanStack Start project with Tailwind CSS and shadcn/ui add-ons pre-configured. This command sets up the project structure and installs necessary dependencies in one command.
+
+```bash
+npm create @tanstack/start@latest --tailwind --add-ons shadcn
+```
+
+--------------------------------
+
+### Install All shadcn/ui Components
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+Bulk install all available shadcn/ui components into your project at once. This is useful when you want access to the entire component library without adding components individually.
+
+```bash
+npx shadcn@latest add --all
+```
+
+--------------------------------
+
+### Manually Install Radix UI Select Dependency
+
+Source: https://ui.shadcn.com/docs/components/select
+
+This command shows how to install the core `@radix-ui/react-select` primitive package. This manual installation is necessary if you prefer not to use the Shadcn UI CLI for component setup.
+
+```bash
+npm install @radix-ui/react-select
+```
+
+--------------------------------
+
+### Install Progress Component Dependencies
+
+Source: https://ui.shadcn.com/docs/components/progress
+
+This section provides instructions for installing the `Progress` component and its core dependencies. It covers both using the Shadcn UI CLI for automated setup and manual installation via npm for the underlying Radix UI component.
+
+```bash
+npx shadcn@latest add progress
+```
+
+```bash
+npm install @radix-ui/react-progress
+```
+
+--------------------------------
+
+### Serve shadcn Registry with Next.js Development Server
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This command starts the Next.js development server, which will serve your shadcn registry files if your project is configured with Next.js. The registry items will be accessible via specific URLs under `/r/` after the build process.
+
+```bash
+npm run dev
+```
+
+--------------------------------
+
+### Install shadcn CLI via npm
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This command installs the latest version of the shadcn command-line interface (CLI) globally or as a dev dependency in your project. The CLI is essential for building and managing shadcn component registries and components.
+
+```bash
+npm install shadcn@latest
+```
+
+--------------------------------
+
+### Create New Laravel Project with React
+
+Source: https://ui.shadcn.com/docs/installation/laravel
+
+Initialize a new Laravel project with Inertia and React using the Laravel installer. This command creates a fresh Laravel application with React pre-configured for use with Inertia.js.
+
+```bash
+laravel new my-app --react
+```
+
+--------------------------------
+
+### Install Shadcn UI Input OTP Component (CLI & Manual)
+
+Source: https://ui.shadcn.com/docs/components/input-otp
+
+Provides instructions for adding the Input OTP component to a project. Users can choose between the Shadcn UI CLI for automated setup or manual installation by adding the core `input-otp` dependency via npm and then integrating the component files.
+
+```bash
+npx shadcn@latest add input-otp
+```
+
+```bash
+npm install input-otp
+```
+
+--------------------------------
+
+### Install Aspect Ratio Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/aspect-ratio
+
+Installs the aspect-ratio component and its dependencies using the shadcn CLI. This is the quickest installation method that automatically handles dependency installation and file setup.
+
+```bash
+npx shadcn@latest add aspect-ratio
+```
+
+--------------------------------
+
+### Install Dropdown Menu Component with NPM
+
+Source: https://ui.shadcn.com/docs/components/dropdown-menu
+
+Installation command for adding the dropdown menu component to a project using shadcn/ui CLI tool. This is the recommended method for quick setup with automatic dependency management.
+
+```bash
+npx shadcn@latest add dropdown-menu
+```
+
+--------------------------------
+
+### Define Universal Registry Item for Multi-File Template (shadcn/ui)
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This JSON configuration defines a shadcn/ui registry item named 'my-custom-start-template' that installs multiple files. It includes two files, each with an explicit target path, demonstrating how to create a universal starter template that can be installed without framework detection or components.json.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "my-custom-start-template",
+ "type": "registry:item",
+ "dependencies": ["better-auth"],
+ "files": [
+ {
+ "path": "/path/to/file-01.json",
+ "type": "registry:file",
+ "target": "~/file-01.json",
+ "content": "..."
+ },
+ {
+ "path": "/path/to/file-02.vue",
+ "type": "registry:file",
+ "target": "~/pages/file-02.vue",
+ "content": "..."
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Add shadcn/ui Button Component
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+Install the Button component from shadcn/ui into your TanStack Start project. This command downloads and configures the component in your project's component directory.
+
+```bash
+npx shadcn@latest add button
+```
+
+--------------------------------
+
+### Install Form Component via Shadcn CLI
+
+Source: https://ui.shadcn.com/docs/components/form
+
+This command provides the recommended method for installing the Shadcn UI form component using its command-line interface. Executing this command automates the addition of the form component and its dependencies to your project, simplifying the setup process.
+
+```bash
+npx shadcn@latest add form
+```
+
+--------------------------------
+
+### Basic Navigation Menu Setup - React TSX
+
+Source: https://ui.shadcn.com/docs/components/navigation-menu
+
+Minimal example demonstrating the basic structure of a Navigation Menu with one menu item, trigger, and content link. Serves as a foundation for more complex navigation patterns.
+
+```typescript
+Item OneLink
+```
+
+--------------------------------
+
+### Multiple Registry Setup with Mixed Authentication
+
+Source: https://ui.shadcn.com/docs/components-json
+
+Complete example showing how to configure multiple registries with different authentication methods and parameters. Demonstrates public registries, private registries with bearer tokens, and team registries with versioning and environment variables.
+
+```json
+{
+ "registries": {
+ "@shadcn": "https://ui.shadcn.com/r/{name}.json",
+ "@company-ui": {
+ "url": "https://registry.company.com/ui/{name}.json",
+ "headers": {
+ "Authorization": "Bearer ${COMPANY_TOKEN}"
+ }
+ },
+ "@team": {
+ "url": "https://team.company.com/{name}.json",
+ "params": {
+ "team": "frontend",
+ "version": "${REGISTRY_VERSION}"
+ }
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Add Component Definition to shadcn registry.json
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This JSON snippet shows how to register a component, like `hello-world`, within the `registry.json` file. It includes metadata such as name, type, title, description, and defines the component's file path and type, ensuring it conforms to the registry item schema.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry.json",
+ "name": "acme",
+ "homepage": "https://acme.com",
+ "items": [
+ {
+ "name": "hello-world",
+ "type": "registry:block",
+ "title": "Hello World",
+ "description": "A simple hello world component.",
+ "files": [
+ {
+ "path": "registry/new-york/hello-world/hello-world.tsx",
+ "type": "registry:component"
+ }
+ ]
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Install Project Dependencies using npm
+
+Source: https://ui.shadcn.com/docs/installation/manual
+
+This bash command installs a set of essential npm packages for the project. These dependencies include utilities for styling (`class-variance-authority`, `clsx`, `tailwind-merge`), icon library (`lucide-react`), and animation effects (`tw-animate-css`).
+
+```bash
+npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
+```
+
+--------------------------------
+
+### Install React Resizable Panels Dependency Manually
+
+Source: https://ui.shadcn.com/docs/components/resizable
+
+This `npm` command installs the core `react-resizable-panels` library, which the `Resizable` component is built upon. It is a prerequisite for manual setup and provides the underlying functionality for resizable UI elements.
+
+```bash
+npm install react-resizable-panels
+```
+
+--------------------------------
+
+### Install Shadcn UI Skeleton component using CLI
+
+Source: https://ui.shadcn.com/docs/components/skeleton
+
+Provides the command-line instruction to add the `Skeleton` component to your project if you are using Shadcn UI's CLI. This automates the setup process for the component.
+
+```bash
+npx shadcn@latest add skeleton
+```
+
+--------------------------------
+
+### Install Dependencies with pnpm
+
+Source: https://ui.shadcn.com/docs/blocks
+
+Installs project dependencies using pnpm package manager. Required before starting development on the block.
+
+```bash
+pnpm install
+```
+
+--------------------------------
+
+### Install Pagination Component - Bash CLI
+
+Source: https://ui.shadcn.com/docs/components/pagination
+
+Command-line installation of the pagination component using the shadcn CLI tool. This is the recommended installation method for projects using shadcn/ui.
+
+```bash
+npx shadcn@latest add pagination
+```
+
+--------------------------------
+
+### Install Sonner Dependencies Manually
+
+Source: https://ui.shadcn.com/docs/components/sonner
+
+Manual installation command that installs Sonner and next-themes packages required for manual setup. Use this approach when you prefer to manually configure the component instead of using the CLI.
+
+```bash
+npm install sonner next-themes
+```
+
+--------------------------------
+
+### Install Radix UI Separator Dependency via npm
+
+Source: https://ui.shadcn.com/docs/components/separator
+
+Install the core Radix UI React Separator dependency required for manual setup. Use this command when manually installing the component instead of using the CLI.
+
+```bash
+npm install @radix-ui/react-separator
+```
+
+--------------------------------
+
+### Install Checkbox Component via CLI - Bash
+
+Source: https://ui.shadcn.com/docs/components/checkbox
+
+Command-line installation method for adding the checkbox component to a shadcn/ui project. Automatically handles component setup and dependency installation.
+
+```bash
+npx shadcn@latest add checkbox
+```
+
+--------------------------------
+
+### Install Aspect Ratio Dependencies Manually
+
+Source: https://ui.shadcn.com/docs/components/aspect-ratio
+
+Manually installs the required Radix UI aspect-ratio dependency. Use this approach when you prefer manual setup or when the CLI method is not suitable for your project.
+
+```bash
+npm install @radix-ui/react-aspect-ratio
+```
+
+--------------------------------
+
+### Install Input Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/input
+
+Install the Input component using the shadcn CLI tool. This command downloads and sets up the component in your project's components directory with all necessary dependencies.
+
+```bash
+npx shadcn@latest add input
+```
+
+--------------------------------
+
+### Create Remix Project with create-remix
+
+Source: https://ui.shadcn.com/docs/installation/remix
+
+Initialize a new Remix project using the create-remix command-line tool. This sets up the basic Remix application structure and dependencies.
+
+```bash
+npx create-remix@latest my-app
+```
+
+--------------------------------
+
+### Install Shadcn UI Context Menu component via CLI (Bash)
+
+Source: https://ui.shadcn.com/docs/components/context-menu
+
+This command demonstrates how to easily add the Shadcn UI Context Menu component to your project using the `npx shadcn@latest add` command-line utility. This method automates the setup and configuration of the component.
+
+```bash
+npx shadcn@latest add context-menu
+```
+
+--------------------------------
+
+### Install Vaul Dependency for Manual Setup
+
+Source: https://ui.shadcn.com/docs/components/drawer
+
+Manually install the Vaul package as a dependency when setting up the Drawer component without the CLI. Vaul is the underlying library that powers the Drawer functionality.
+
+```bash
+npm install vaul
+```
+
+--------------------------------
+
+### Install Recharts Dependency via npm
+
+Source: https://ui.shadcn.com/docs/components/chart
+
+Installs the Recharts library as a project dependency for manual setup. Required when not using the CLI installation method.
+
+```bash
+npm install recharts
+```
+
+--------------------------------
+
+### Install Shadcn UI Command Component
+
+Source: https://ui.shadcn.com/docs/components/command
+
+This section provides instructions for installing the Command menu component, offering both an automated CLI approach and a manual method. The CLI command automatically adds the component, while the manual installation requires installing the 'cmdk' package and then copying the component source code separately.
+
+```bash
+npx shadcn@latest add command
+```
+
+```bash
+npm install cmdk
+```
+
+--------------------------------
+
+### Install Components from Multiple Namespaced Registries
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Use the @registry/name format to install components from different namespaced registries in a single command. Components are automatically resolved and installed from the correct registry sources.
+
+```bash
+npx shadcn add @acme/button @internal/auth-system
+```
+
+--------------------------------
+
+### Install Block and Override Primitives in shadcn/ui
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Configure a registry item to install a block from shadcn/ui and override default primitives with custom implementations from remote registries. This enables centralized dependency management for component hierarchies.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "custom-login",
+ "type": "registry:block",
+ "registryDependencies": [
+ "login-01",
+ "https://example.com/r/button.json",
+ "https://example.com/r/input.json",
+ "https://example.com/r/label.json"
+ ]
+}
+```
+
+--------------------------------
+
+### Define Initial shadcn registry.json Structure
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This JSON snippet illustrates the basic structure for a `registry.json` file, which serves as the entry point for a shadcn component registry. It includes the schema reference, registry name, homepage URL, and an empty array for registry items, conforming to the specified registry schema.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry.json",
+ "name": "acme",
+ "homepage": "https://acme.com",
+ "items": [
+ // ...
+ ]
+}
+```
+
+--------------------------------
+
+### List All Components from a Registry
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Display all available components from a specified namespaced registry. Useful for discovering available components before installation.
+
+```bash
+npx shadcn list @acme
+```
+
+--------------------------------
+
+### Execute shadcn Registry Build Script
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This command runs the `registry:build` script defined in `package.json`. Executing this script triggers the shadcn CLI to generate the registry JSON files, typically placed in a `public/r` directory by default.
+
+```bash
+npm run registry:build
+```
+
+--------------------------------
+
+### Install Shadcn UI Select Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/select
+
+This command illustrates the quickest way to add the Shadcn UI Select component to your project. It utilizes the `npx shadcn@latest add` utility to automatically install dependencies and configure the component.
+
+```bash
+npx shadcn@latest add select
+```
+
+--------------------------------
+
+### Configure shadcn Build Script in package.json
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This JSON snippet updates the `package.json` file by adding a `registry:build` script. This script executes the `shadcn build` command, which is used to generate the necessary JSON files for the component registry.
+
+```json
+{
+ "scripts": {
+ "registry:build": "shadcn build"
+ }
+}
+```
+
+--------------------------------
+
+### Install Resources from Namespaced Registries
+
+Source: https://ui.shadcn.com/docs/components-json
+
+Install components and resources using the namespace syntax after configuring registries. Supports installing from public registries, private authenticated registries, and multiple resources in a single command.
+
+```bash
+# Install from a configured registry
+npx shadcn@latest add @v0/dashboard
+
+# Install from private registry
+npx shadcn@latest add @private/button
+
+# Install multiple resources
+npx shadcn@latest add @acme/header @internal/auth-utils
+```
+
+--------------------------------
+
+### Install Kbd Component via CLI (shadcn/ui)
+
+Source: https://ui.shadcn.com/docs/components/kbd
+
+Provides the command-line interface instruction to add the `Kbd` component to a project using `shadcn@latest`. This is the recommended and easiest method for integrating the component.
+
+```bash
+npx shadcn@latest add kbd
+```
+
+--------------------------------
+
+### Handle `shadcn/ui` Initialization with React 19 Peer Dependency Prompt (npm)
+
+Source: https://ui.shadcn.com/docs/react-19
+
+This `bash` snippet illustrates the interactive prompt from the `shadcn/ui` CLI when initializing a project (`npx shadcn@latest init -d`) while using React 19 with `npm`. It guides users to select a resolution strategy, either `--force` or `--legacy-peer-deps`, to address potential peer dependency conflicts during the shadcn/ui installation process.
+
+```bash
+It looks like you are using React 19.
+Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
+
+? How would you like to proceed? › - Use arrow-keys. Return to submit.
+❯ Use --force
+ Use --legacy-peer-deps
+```
+
+--------------------------------
+
+### Install shadcn/ui Label Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/label
+
+This `bash` command uses the `shadcn/ui` CLI to quickly add the `Label` component to your project. It automates the process of fetching and integrating the component's files and dependencies, streamlining setup.
+
+```bash
+npx shadcn@latest add label
+```
+
+--------------------------------
+
+### Add Components to Monorepo Workspace
+
+Source: https://ui.shadcn.com/docs/monorepo
+
+Add shadcn/ui components to your monorepo application by navigating to the app directory and running the add command. The CLI automatically determines component type and installs files to correct paths with proper import handling.
+
+```bash
+cd apps/web
+npx shadcn@latest add [COMPONENT]
+```
+
+--------------------------------
+
+### Install Shadcn UI Spinner Component via CLI (Bash)
+
+Source: https://ui.shadcn.com/docs/components/spinner
+
+Provides the command-line interface (CLI) instruction to add the Shadcn UI Spinner component to your project. This command automates the setup, including creating the component file and configuring necessary dependencies. Ensure you have the Shadcn UI CLI installed globally or locally before running this command.
+
+```bash
+npx shadcn@latest add spinner
+```
+
+--------------------------------
+
+### Install Drawer Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/drawer
+
+Install the shadcn Drawer component using the CLI tool. This is the recommended installation method that automatically sets up all dependencies and copies necessary files to your project.
+
+```bash
+npx shadcn@latest add drawer
+```
+
+--------------------------------
+
+### Install Navigation Menu via CLI - shadcn/ui
+
+Source: https://ui.shadcn.com/docs/components/navigation-menu
+
+Quick installation command for adding the navigation-menu component to a shadcn/ui project using the CLI tool. Requires Node.js and npm to be installed.
+
+```bash
+npx shadcn@latest add navigation-menu
+```
+
+--------------------------------
+
+### View Registry Component Before Installation
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Preview a component from a namespaced registry without installing it. Displays component code and all dependencies upfront for review.
+
+```bash
+npx shadcn view @acme/auth-system
+```
+
+--------------------------------
+
+### Install Shadcn Hover Card Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/hover-card
+
+This command-line interface (CLI) snippet demonstrates how to add the Shadcn UI Hover Card component to your project using `npx shadcn@latest add`. This method automates the installation and setup process for the component, including copying necessary files and updating configurations.
+
+```bash
+npx shadcn@latest add hover-card
+```
+
+--------------------------------
+
+### Install Toggle Group Dependencies via npm
+
+Source: https://ui.shadcn.com/docs/components/toggle-group
+
+Install the required Radix UI toggle group dependency manually using npm. Required for projects that prefer manual component setup.
+
+```bash
+npm install @radix-ui/react-toggle-group
+```
+
+--------------------------------
+
+### Import and Use Button Component in TanStack Start
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+Import the Button component from the components/ui directory and render it in your application. This example shows basic usage within a React functional component in the app/routes/index.tsx file.
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+function App() {
+ return (
+
+
+Click me
+
+ )
+}
+```
+
+--------------------------------
+
+### Install Carousel Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/carousel
+
+shadcn/ui CLI command to automatically install and configure the carousel component with all dependencies and file setup. Simplest method for adding the carousel to your project.
+
+```bash
+npx shadcn@latest add carousel
+```
+
+--------------------------------
+
+### Install Resizable Component using Shadcn CLI
+
+Source: https://ui.shadcn.com/docs/components/resizable
+
+This command-line interface (CLI) snippet shows how to add the `resizable` component to a project using the `shadcn` utility. It simplifies the installation process by automatically configuring the component and its dependencies.
+
+```bash
+npx shadcn@latest add resizable
+```
+
+--------------------------------
+
+### Install Menubar via CLI - Bash
+
+Source: https://ui.shadcn.com/docs/components/menubar
+
+Command to install the menubar component using the shadcn package manager CLI. This is the quickest installation method that automatically downloads and configures the component for your project.
+
+```bash
+npx shadcn@latest add menubar
+```
+
+--------------------------------
+
+### Install Radio Group via CLI - Bash
+
+Source: https://ui.shadcn.com/docs/components/radio-group
+
+Command-line interface installation method for adding the radio-group component to a shadcn/ui project. This is the recommended approach as it automatically handles file copying and setup.
+
+```bash
+npx shadcn@latest add radio-group
+```
+
+--------------------------------
+
+### Define reusable registry block with components
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Create a registry block item that bundles multiple related files (pages and components) with their dependencies. This block specifies registry dependencies on other components and defines file paths with content references for installation into target locations in the project structure.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "login-01",
+ "type": "registry:block",
+ "description": "A simple login form.",
+ "registryDependencies": ["button", "card", "input", "label"],
+ "files": [
+ {
+ "path": "blocks/login-01/page.tsx",
+ "content": "import { LoginForm } ...",
+ "type": "registry:page",
+ "target": "app/login/page.tsx"
+ },
+ {
+ "path": "blocks/login-01/components/login-form.tsx",
+ "content": "...",
+ "type": "registry:component"
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Install Radix UI Context Menu dependency manually (Bash)
+
+Source: https://ui.shadcn.com/docs/components/context-menu
+
+This command is part of the manual installation process, showing how to install the core `@radix-ui/react-context-menu` dependency using npm. This dependency provides the fundamental building blocks for the Shadcn UI Context Menu.
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
+--------------------------------
+
+### Install Native Select component via CLI
+
+Source: https://ui.shadcn.com/docs/components/native-select
+
+Use the shadcn CLI to easily add the Native Select component to your project. This command will scaffold the necessary files and update dependencies automatically, streamlining the setup process.
+
+```bash
+npx shadcn@latest add native-select
+```
+
+--------------------------------
+
+### Install Empty Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/empty
+
+Command to install the Empty component using the shadcn package manager. Automatically adds the component and its dependencies to the project.
+
+```bash
+npx shadcn@latest add empty
+```
+
+--------------------------------
+
+### Install shadcn Table component and TanStack React Table
+
+Source: https://ui.shadcn.com/docs/components/data-table
+
+Installation commands to add the Table component from shadcn and the TanStack React Table dependency to your project. These are prerequisites for building data tables with this guide.
+
+```bash
+npx shadcn@latest add table
+```
+
+```bash
+npm install @tanstack/react-table
+```
+
+--------------------------------
+
+### Install Switch Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/switch
+
+Command-line installation method for adding the Switch component to a shadcn/ui project. Uses the official CLI tool to automatically download and configure the component with all required dependencies.
+
+```bash
+npx shadcn@latest add switch
+```
+
+--------------------------------
+
+### Start Development Server with pnpm
+
+Source: https://ui.shadcn.com/docs/blocks
+
+Starts the development server for the www application at http://localhost:3333. Enables live preview of blocks during development.
+
+```bash
+pnpm www:dev
+```
+
+--------------------------------
+
+### Install Shadcn UI Badge component via CLI (Bash)
+
+Source: https://ui.shadcn.com/docs/components/badge
+
+This command line interface snippet demonstrates how to add the Shadcn UI Badge component to a project using the `npx shadcn` utility. It simplifies the setup process by automating the component file generation.
+
+```bash
+npx shadcn@latest add badge
+```
+
+--------------------------------
+
+### Interactive Configuration Questions for shadcn init
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Configuration prompts displayed during the shadcn init setup process. Users answer questions about style, base color, CSS file location, CSS variables usage, Tailwind config path, component/utils import aliases, and React Server Components support.
+
+```text
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › › app/globals.css
+Do you want to use CSS variables for colors? › no / yes
+Where is your tailwind.config.js located? › tailwind.config.js
+Configure the import alias for components: › @/components
+Configure the import alias for utils: › @/lib/utils
+Are you using React Server Components? › no / yes
+```
+
+--------------------------------
+
+### Item Component Installation - Bash
+
+Source: https://ui.shadcn.com/docs/components/item
+
+CLI command to install the Item component from shadcn. Requires Node.js and npm/pnpm package manager.
+
+```bash
+npx shadcn@latest add item
+```
+
+--------------------------------
+
+### CLI Command: Initialize Project from Local File
+
+Source: https://ui.shadcn.com/docs/changelog
+
+The `shadcn` CLI now supports initializing projects from local JSON files. This command allows users to set up a project using a local `template.json`, enabling zero-setup development and local testing of registry items.
+
+```bash
+npx shadcn init ./template.json
+```
+
+--------------------------------
+
+### Install Tailwind CSS and Autoprefixer
+
+Source: https://ui.shadcn.com/docs/installation/remix
+
+Install Tailwind CSS and Autoprefixer as development dependencies to enable styling support for shadcn/ui components in your Remix project.
+
+```bash
+npm install -D tailwindcss@latest autoprefixer@latest
+```
+
+--------------------------------
+
+### Install Tooltip Dependencies via npm
+
+Source: https://ui.shadcn.com/docs/components/tooltip
+
+Manual installation of the Radix UI tooltip dependency. Required when not using the shadcn CLI installation method. Install this package before copying the tooltip component source.
+
+```bash
+npm install @radix-ui/react-tooltip
+```
+
+--------------------------------
+
+### Install Shadcn UI Dialog component using CLI or npm
+
+Source: https://ui.shadcn.com/docs/components/dialog
+
+Instructions for installing the Shadcn UI Dialog component. Provides options for using the Shadcn CLI to add the component or manually installing the underlying Radix UI dependency.
+
+```bash
+npx shadcn@latest add dialog
+```
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+--------------------------------
+
+### Install Toggle Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/toggle
+
+Install the Toggle component using the shadcn CLI tool. This command downloads and sets up the component with all dependencies in your project.
+
+```bash
+npx shadcn@latest add toggle
+```
+
+--------------------------------
+
+### Install Sheet Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/sheet
+
+Command to install the Sheet component and its dependencies using the shadcn CLI. This is the recommended installation method for projects using shadcn/ui.
+
+```bash
+npx shadcn@latest add sheet
+```
+
+--------------------------------
+
+### Install Shadcn UI Popover component
+
+Source: https://ui.shadcn.com/docs/components/popover
+
+These commands provide two methods for installing the Popover component into your project. The CLI method uses `npx shadcn` to add the component automatically, while the manual method involves installing the core Radix UI dependency via npm and then copying the component source code. Ensure your project is set up to use shadcn/ui before installing components.
+
+```bash
+npx shadcn@latest add popover
+```
+
+```bash
+npm install @radix-ui/react-popover
+```
+
+--------------------------------
+
+### Install Sonner via CLI
+
+Source: https://ui.shadcn.com/docs/components/sonner
+
+Command-line installation method using shadcn-cli to add the Sonner component to a project. This is the quickest way to set up Sonner with all necessary dependencies.
+
+```bash
+npx shadcn@latest add sonner
+```
+
+--------------------------------
+
+### Complete Bar Chart with XAxis Implementation
+
+Source: https://ui.shadcn.com/docs/components/chart
+
+Full React component example using the 'use client' directive for client-side rendering. Demonstrates a complete bar chart setup with sample data for desktop and mobile metrics across six months, including XAxis configuration with custom tick formatting.
+
+```tsx
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import { ChartConfig, ChartContainer } from "@/components/ui/chart"
+
+const chartData = [
+ { month: "January", desktop: 186, mobile: 80 },
+ { month: "February", desktop: 305, mobile: 200 },
+ { month: "March", desktop: 237, mobile: 120 },
+ { month: "April", desktop: 73, mobile: 190 },
+ { month: "May", desktop: 209, mobile: 130 },
+ { month: "June", desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "#2563eb",
+ },
+ mobile: {
+ label: "Mobile",
+ color: "#60a5fa",
+ },
+} satisfies ChartConfig
+
+export function Component() {
+ return (
+ value.slice(0, 3)}
+ />
+
+ )
+}
+```
+
+--------------------------------
+
+### Environment Variables Setup
+
+Source: https://ui.shadcn.com/docs/registry/authentication
+
+Set registry authentication token in .env.local file. This stores the secret token that will be used for Bearer authentication when accessing private component registries.
+
+```bash
+REGISTRY_TOKEN=your_secret_token_here
+```
+
+--------------------------------
+
+### Install Table Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/table
+
+CLI command to install the shadcn/ui Table component using npx. This automatically adds the component to your project.
+
+```bash
+npx shadcn@latest add table
+```
+
+--------------------------------
+
+### Install next-themes package
+
+Source: https://ui.shadcn.com/docs/dark-mode/next
+
+This command installs the `next-themes` package, a crucial dependency for implementing dark mode functionality in Next.js applications.
+
+```bash
+npm install next-themes
+```
+
+--------------------------------
+
+### Install Separator Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/separator
+
+Install the Separator component using the shadcn CLI tool. This command automatically downloads and sets up the component in your project with all required dependencies.
+
+```bash
+npx shadcn@latest add separator
+```
+
+--------------------------------
+
+### Install Menubar Dependencies - Bash
+
+Source: https://ui.shadcn.com/docs/components/menubar
+
+Manual installation command for the Radix UI menubar dependency. Use this when manually setting up the component instead of using the CLI. Requires Node.js package manager (npm).
+
+```bash
+npm install @radix-ui/react-menubar
+```
+
+--------------------------------
+
+### Install Tooltip via shadcn CLI
+
+Source: https://ui.shadcn.com/docs/components/tooltip
+
+Command-line installation method for adding the Tooltip component to a shadcn/ui project. This is the recommended approach for quickly adding pre-configured component files.
+
+```bash
+npx shadcn@latest add tooltip
+```
+
+--------------------------------
+
+### Install Slider Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/slider
+
+Command-line installation method for adding the Slider component to a shadcn/ui project. This is the quickest way to install the component and its dependencies.
+
+```bash
+npx shadcn@latest add slider
+```
+
+--------------------------------
+
+### Install Shadcn Alert component via CLI
+
+Source: https://ui.shadcn.com/docs/components/alert
+
+This command provides a quick way to add the Shadcn Alert component to your project using the command-line interface. It leverages `npx` to execute the `shadcn` utility for component installation.
+
+```bash
+npx shadcn@latest add alert
+```
+
+--------------------------------
+
+### Create a Basic shadcn Component in TSX
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+This TypeScript React (TSX) code defines a simple `HelloWorld` component that renders a button with 'Hello World' text. It imports the `Button` component from a local UI library, demonstrating how to structure a component intended for the shadcn registry.
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+export function HelloWorld() {
+ return Hello World
+}
+```
+
+--------------------------------
+
+### Install Radix UI Switch Dependency
+
+Source: https://ui.shadcn.com/docs/components/switch
+
+NPM installation command for the Radix UI switch primitive dependency. Required when manually installing the Switch component without using the shadcn CLI tool.
+
+```bash
+npm install @radix-ui/react-switch
+```
+
+--------------------------------
+
+### Button Size Variants Example
+
+Source: https://ui.shadcn.com/docs/components/button
+
+Comprehensive example showing all Button size options: sm, icon-sm, default, icon, lg, and icon-lg. Demonstrates text and icon buttons at different sizes.
+
+```typescript
+import { ArrowUpRightIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+export function ButtonSize() {
+ return (
+
+
+Small
+
+
+Default
+
+Large
+
+
+ )
+}
+```
+
+--------------------------------
+
+### Create custom style extending shadcn/ui
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Define a custom registry style that extends shadcn/ui by installing dependencies, adding registry dependencies (components and remote blocks), and configuring CSS variables for fonts and brand colors in light and dark modes. This configuration is applied when running `npx shadcn init`.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "example-style",
+ "type": "registry:style",
+ "dependencies": ["@tabler/icons-react"],
+ "registryDependencies": [
+ "login-01",
+ "calendar",
+ "https://example.com/r/editor.json"
+ ],
+ "cssVars": {
+ "theme": {
+ "font-sans": "Inter, sans-serif"
+ },
+ "light": {
+ "brand": "20 14.3% 4.1%"
+ },
+ "dark": {
+ "brand": "20 14.3% 4.1%"
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Example Shadcn UI Registry Configuration (JSON)
+
+Source: https://ui.shadcn.com/docs/registry/registry-index
+
+This JSON configuration demonstrates a valid structure for a Shadcn UI registry. It includes a schema reference, the registry's name and homepage, and an array of items, each representing a component or example with its type, title, description, and associated file paths. This structure adheres to the specified registry schema requirements.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry.json",
+ "name": "acme",
+ "homepage": "https://acme.com",
+ "items": [
+ {
+ "name": "login-form",
+ "type": "registry:component",
+ "title": "Login Form",
+ "description": "A login form component.",
+ "files": [
+ {
+ "path": "registry/new-york/auth/login-form.tsx",
+ "type": "registry:component"
+ }
+ ]
+ },
+ {
+ "name": "example-login-form",
+ "type": "registry:component",
+ "title": "Example Login Form",
+ "description": "An example showing how to use the login form component.",
+ "files": [
+ {
+ "path": "registry/new-york/examples/example-login-form.tsx",
+ "type": "registry:component"
+ }
+ ]
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Manually install Radix UI Alert Dialog dependency with npm
+
+Source: https://ui.shadcn.com/docs/components/alert-dialog
+
+This `bash` command is used for manual installation of the Shadcn UI Alert Dialog component, specifically for installing its underlying Radix UI primitive. It adds the `@radix-ui/react-alert-dialog` package as a dependency to your project. This step is required before copying the component source code.
+
+```bash
+npm install @radix-ui/react-alert-dialog
+```
+
+--------------------------------
+
+### Component Diff Output Example
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Example output showing differences in a component's code. The diff displays additions and removals, showing what has changed in the upstream repository.
+
+```diff
+const alertVariants = cva(
+- "relative w-full rounded-lg border",
++ "relative w-full pl-12 rounded-lg border"
+)
+```
+
+--------------------------------
+
+### Install Button Dependencies via npm
+
+Source: https://ui.shadcn.com/docs/components/button
+
+Manual installation of required dependencies for the Button component. Install the @radix-ui/react-slot package which provides slot composition functionality.
+
+```bash
+npm install @radix-ui/react-slot
+```
+
+--------------------------------
+
+### CLI Error: Missing Registry Environment Variables
+
+Source: https://ui.shadcn.com/docs/changelog
+
+This example demonstrates the CLI's helpful error for missing environment variables required by a registry. It explicitly lists the necessary variables, like `REGISTRY_TOKEN`, and instructs users to set them in `.env` or `.env.local` files.
+
+```txt
+Registry "@private" requires the following environment variables:
+ • REGISTRY_TOKEN
+
+Set the required environment variables to your .env or .env.local file.
+```
+
+--------------------------------
+
+### Install Multiple Resources from Different Namespaces
+
+Source: https://ui.shadcn.com/docs/registry/namespace
+
+Install multiple resources from different namespaced registries in a single command. Supports combining resources from UI components, libraries, and AI prompts across various registries.
+
+```bash
+npx shadcn@latest add @acme/header @lib/auth-utils @ai/chatbot-rules
+```
+
+--------------------------------
+
+### Define Universal Registry Item for ESLint Configuration (shadcn/ui)
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This JSON configuration defines a shadcn/ui registry item named 'my-eslint-config' for a custom ESLint configuration. It specifies a single file with an explicit target path (~/.eslintrc.json), enabling universal installation of the ESLint config file without framework dependencies.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "my-eslint-config",
+ "type": "registry:item",
+ "files": [
+ {
+ "path": "/path/to/your/registry/default/custom-eslint.json",
+ "type": "registry:file",
+ "target": "~/.eslintrc.json",
+ "content": "..."
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Configure Plugin with NPM Dependencies in shadcn UI
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Shows how to include external npm packages as dependencies when using Tailwind CSS plugins. The `dependencies` array declares required packages, while the `css` object configures both the plugin and custom CSS layers. This pattern ensures all required packages are installed before the component is used.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "typography-component",
+ "type": "registry:item",
+ "dependencies": ["@tailwindcss/typography"],
+ "css": {
+ "@plugin "@tailwindcss/typography"": {},
+ "@layer components": {
+ ".prose": {
+ "max-width": "65ch"
+ }
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Install Shadcn Accordion Component (bash)
+
+Source: https://ui.shadcn.com/docs/components/accordion
+
+This snippet provides two methods for installing the Shadcn UI Accordion component. Users can either add the component directly using the Shadcn CLI or manually install the underlying Radix UI dependency via npm. Both methods prepare the project for using the Accordion component by adding necessary files and packages.
+
+```bash
+npx shadcn@latest add accordion
+```
+
+```bash
+npm install @radix-ui/react-accordion
+```
+
+--------------------------------
+
+### Install Navigation Menu Dependencies - npm
+
+Source: https://ui.shadcn.com/docs/components/navigation-menu
+
+Manual installation of required Radix UI navigation menu dependency. Use this approach when manually setting up the component instead of using the CLI.
+
+```bash
+npm install @radix-ui/react-navigation-menu
+```
+
+--------------------------------
+
+### Configure Secure Custom Registry with Authorization Headers (JSON)
+
+Source: https://ui.shadcn.com/docs/registry/namespace
+
+Provides an example of configuring a custom company registry in `components.json`, including a URL and authorization headers with an environment variable. This setup demonstrates best practices for securely connecting to private registries, requiring explicit authentication.
+
+```json
+{
+ "@company": {
+ "url": "https://registry.company.com/v1/{name}.json",
+ "headers": {
+ "Authorization": "Bearer ${COMPANY_TOKEN}",
+ "X-Registry-Version": "1.0"
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Create components.json Configuration File for shadcn/ui
+
+Source: https://ui.shadcn.com/docs/installation/manual
+
+This JSON configuration file sets up the shadcn/ui component library with New York style, TypeScript/TSX support, Tailwind CSS styling with CSS variables, and path aliases for easier imports. Place this file in the root of your project directory to enable component scaffolding and configuration.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": false,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "src/styles/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "iconLibrary": "lucide"
+}
+```
+
+--------------------------------
+
+### Install Button Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/button
+
+Quick installation of the Button component using the shadcn CLI tool. Automatically adds the button component and its dependencies to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+--------------------------------
+
+### Install Tabs Dependencies via NPM - Bash
+
+Source: https://ui.shadcn.com/docs/components/tabs
+
+Manual npm installation of the Radix UI Tabs dependency. Use this method when manually adding the tabs component instead of using the CLI installer.
+
+```bash
+npm install @radix-ui/react-tabs
+```
+
+--------------------------------
+
+### Install Checkbox Dependencies - Bash
+
+Source: https://ui.shadcn.com/docs/components/checkbox
+
+Manual installation command for the Radix UI checkbox dependency. Required when manually setting up the checkbox component without using the CLI.
+
+```bash
+npm install @radix-ui/react-checkbox
+```
+
+--------------------------------
+
+### Add Components with add Command
+
+Source: https://ui.shadcn.com/docs/cli
+
+The add command installs specific components and their dependencies into your project. It supports single or multiple component installation, file overwriting, and path customization.
+
+```bash
+npx shadcn@latest add [component]
+```
+
+```bash
+Usage: shadcn add [options] [components...]
+
+add a component to your project
+
+Arguments:
+ components name, url or local path to component
+
+Options:
+ -y, --yes skip confirmation prompt. (default: false)
+ -o, --overwrite overwrite existing files. (default: false)
+ -c, --cwd the working directory. defaults to the current directory.
+ -a, --all add all available components (default: false)
+ -p, --path the path to add the component to.
+ -s, --silent mute output. (default: false)
+ --src-dir use the src directory when creating a new project. (default: false)
+ --no-src-dir do not use the src directory when creating a new project.
+ --css-variables use css variables for theming. (default: true)
+ --no-css-variables do not use css variables for theming.
+ -h, --help display help for command
+```
+
+--------------------------------
+
+### Create new React project with Vite
+
+Source: https://ui.shadcn.com/docs/installation/vite
+
+Initializes a new React project using Vite. This command uses the latest version of Vite and allows selecting the 'React + TypeScript' template during the interactive setup process.
+
+```bash
+npm create vite@latest
+```
+
+--------------------------------
+
+### Manually Install Radix UI Label npm Dependency
+
+Source: https://ui.shadcn.com/docs/components/label
+
+For manual installation of the `shadcn/ui` Label component, this `npm` command installs its core dependency, `@radix-ui/react-label`. This step is followed by copying the component's source code into your project and updating import paths.
+
+```bash
+npm install @radix-ui/react-label
+```
+
+--------------------------------
+
+### Install Single Resource from Namespaced Registry
+
+Source: https://ui.shadcn.com/docs/registry/namespace
+
+Install a single resource from a configured namespace using the shadcn CLI. The syntax uses @namespace/resource-name format to specify which registry and resource to install.
+
+```bash
+npx shadcn@latest add @v0/dashboard
+```
+
+--------------------------------
+
+### Add UI Components with add Command
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Use the add command to install UI components from shadcn into your project. The CLI automatically resolves dependencies, formats components based on your components.json configuration, and installs them with correct import paths and styling methods.
+
+```bash
+npx shadcn@latest add
+```
+
+--------------------------------
+
+### Install Button Group via CLI - Bash
+
+Source: https://ui.shadcn.com/docs/components/button-group
+
+Command-line installation script for the Button Group component using the shadcn package manager. This is the recommended installation method that automatically sets up the component with dependencies.
+
+```bash
+npx shadcn@latest add button-group
+```
+
+--------------------------------
+
+### Radix UI Migration: Import Path Update Example
+
+Source: https://ui.shadcn.com/docs/changelog
+
+This `diff` example illustrates the effect of the `radix` migration command on component files. It shows how an import for `AlertDialogPrimitive` is changed from `@radix-ui/react-dialog` to the new `radix-ui` package.
+
+```diff
+- import * as AlertDialogPrimitive from "@radix-ui/react-dialog"
++ import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+```
+
+--------------------------------
+
+### Initialize shadcn Project with init Command
+
+Source: https://ui.shadcn.com/docs/cli
+
+The init command sets up a new shadcn project by installing dependencies, adding the cn utility, and configuring CSS variables. It supports template selection, base color configuration, and directory structure options.
+
+```bash
+npx shadcn@latest init
+```
+
+```bash
+Usage: shadcn init [options] [components...]
+
+initialize your project and install dependencies
+
+Arguments:
+ components name, url or local path to component
+
+Options:
+ -t, --template the template to use. (next, next-monorepo)
+ -b, --base-color the base color to use. (neutral, gray, zinc, stone, slate)
+ -y, --yes skip confirmation prompt. (default: true)
+ -f, --force force overwrite of existing configuration. (default: false)
+ -c, --cwd the working directory. defaults to the current directory.
+ -s, --silent mute output. (default: false)
+ --src-dir use the src directory when creating a new project. (default: false)
+ --no-src-dir do not use the src directory when creating a new project.
+ --css-variables use css variables for theming. (default: true)
+ --no-css-variables do not use css variables for theming.
+ --no-base-style do not install the base shadcn style
+ -h, --help display help for command
+```
+
+--------------------------------
+
+### Install Dropdown Menu Dependencies
+
+Source: https://ui.shadcn.com/docs/components/dropdown-menu
+
+NPM installation command for the Radix UI dropdown menu primitive dependency. Required when manually adding the component without using the shadcn/ui CLI tool.
+
+```bash
+npm install @radix-ui/react-dropdown-menu
+```
+
+--------------------------------
+
+### Install Toggle Component Dependencies Manually
+
+Source: https://ui.shadcn.com/docs/components/toggle
+
+Install the required Radix UI toggle dependency manually for projects that don't use the shadcn CLI. This is the first step when manually setting up the Toggle component.
+
+```bash
+npm install @radix-ui/react-toggle
+```
+
+--------------------------------
+
+### Add Components with Shadcn CLI
+
+Source: https://ui.shadcn.com/docs/changelog
+
+This command demonstrates how to use the Shadcn CLI to add a specific component from a registry to your project. It automatically handles installation and updates the project's 'components.json' file.
+
+```bash
+npx shadcn add @ai-elements/prompt-input
+```
+
+--------------------------------
+
+### Initialize MCP Server for shadcn Registries
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Set up MCP (Model Context Protocol) server for all configured registries with zero configuration. Enables integration with MCP clients for AI-assisted component discovery and installation.
+
+```bash
+npx shadcn@latest mcp init
+```
+
+--------------------------------
+
+### Install Chart Component via CLI
+
+Source: https://ui.shadcn.com/docs/components/chart
+
+Installs the chart.tsx component using shadcn's CLI tool. This command automatically sets up the chart component file in the project structure.
+
+```bash
+npx shadcn@latest add chart
+```
+
+--------------------------------
+
+### Install Card Component via CLI - shadcn
+
+Source: https://ui.shadcn.com/docs/components/card
+
+Install the Card component using the shadcn CLI tool. This command downloads and integrates the Card component into your project's components directory.
+
+```bash
+npx shadcn@latest add card
+```
\ No newline at end of file
diff --git a/.agents/skills/shadcn-ui/reference.md b/.agents/skills/shadcn-ui/reference.md
new file mode 100644
index 0000000..ad4b59f
--- /dev/null
+++ b/.agents/skills/shadcn-ui/reference.md
@@ -0,0 +1,586 @@
+# shadcn.io Component Library
+
+shadcn.io is a comprehensive React UI component library built on shadcn/ui principles, providing developers with production-ready, composable components for modern web applications. The library serves as a centralized resource for React developers who need high-quality UI components with TypeScript support, ranging from basic interactive elements to advanced AI-powered integrations. Unlike traditional component libraries that require package installations, shadcn.io components are designed to be copied directly into your project, giving you full control and customization capabilities.
+
+The library encompasses four major categories: composable UI components (terminal, dock, credit cards, QR codes, color pickers), chart components built with Recharts, animation components with Tailwind CSS integration, and custom React hooks for state management and lifecycle operations. Each component follows best practices for accessibility, performance, and developer experience, with comprehensive TypeScript definitions and Next.js compatibility. The platform emphasizes flexibility and customization, allowing developers to modify components at the source level rather than being constrained by package APIs.
+
+## Core Components
+
+### Terminal Component
+Interactive terminal emulator with typing animations and command execution simulation for developer-focused interfaces.
+
+```tsx
+import { Terminal } from "@/components/ui/terminal"
+
+export default function DemoTerminal() {
+ return (
+ npm install @repo/terminalInstalling dependencies...npm start
+ )
+}
+```
+
+### Dock Component
+macOS-style application dock with smooth magnification effects on hover, perfect for navigation menus.
+
+```tsx
+import { Dock, DockIcon } from "@/components/ui/dock"
+import { Home, Settings, User, Mail } from "lucide-react"
+
+export default function AppDock() {
+ return (
+
+ )
+}
+```
+
+### Credit Card Component
+Interactive 3D credit card component with flip animations for payment forms and card displays.
+
+```tsx
+import { CreditCard } from "@/components/ui/credit-card"
+import { useState } from "react"
+
+export default function PaymentForm() {
+ const [cardData, setCardData] = useState({
+ number: "4532 1234 5678 9010",
+ holder: "JOHN DOE",
+ expiry: "12/28",
+ cvv: "123"
+ })
+
+ return (
+ console.log("Card flipped:", flipped)}
+ />
+ )
+}
+```
+
+### Image Zoom Component
+Zoomable image component with smooth modal transitions for image galleries and product displays.
+
+```tsx
+import { ImageZoom } from "@/components/ui/image-zoom"
+
+export default function ProductGallery() {
+ return (
+
+
+ )
+}
+```
+
+### QR Code Component
+Generate and display customizable QR codes with styling options for links, contact information, and authentication.
+
+```tsx
+import { QRCode } from "@/components/ui/qr-code"
+
+export default function ShareDialog() {
+ const shareUrl = "https://shadcn.io"
+
+ return (
+
+
+Scan to visit shadcn.io
+
+
+ )
+}
+```
+
+### Color Picker Component
+Advanced color selection component supporting multiple color formats (HEX, RGB, HSL) with preview.
+
+```tsx
+import { ColorPicker } from "@/components/ui/color-picker"
+import { useState } from "react"
+
+export default function ThemeCustomizer() {
+ const [color, setColor] = useState("#3b82f6")
+
+ return (
+
+
+Selected: {color}
+
+)
+}
+```
+
+## Chart Components
+
+### Bar Chart Component
+Clean bar chart component for data comparison and categorical analysis using Recharts.
+
+```tsx
+import { BarChart } from "@/components/ui/bar-chart"
+
+export default function SalesChart() {
+const data = [
+{ month: "Jan", sales: 4000, revenue: 2400 },
+{ month: "Feb", sales: 3000, revenue: 1398 },
+{ month: "Mar", sales: 2000, revenue: 9800 },
+{ month: "Apr", sales: 2780, revenue: 3908 },
+{ month: "May", sales: 1890, revenue: 4800 },
+{ month: "Jun", sales: 2390, revenue: 3800 }
+]
+
+return (
+`$${value.toLocaleString()}`}
+yAxisWidth={60}
+/>
+)
+}
+```
+
+### Line Chart Component
+Smooth line chart for visualizing trends and time-series data with multiple data series support.
+
+```tsx
+import { LineChart } from "@/components/ui/line-chart"
+
+export default function MetricsChart() {
+const data = [
+{ date: "2024-01", users: 1200, sessions: 3400 },
+{ date: "2024-02", users: 1800, sessions: 4200 },
+{ date: "2024-03", users: 2400, sessions: 5800 },
+{ date: "2024-04", users: 3100, sessions: 7200 },
+{ date: "2024-05", users: 3800, sessions: 8900 }
+]
+
+return (
+
+)
+}
+```
+
+### Pie Chart Component
+Donut chart component for displaying proportional data and percentage distributions.
+
+```tsx
+import { PieChart } from "@/components/ui/pie-chart"
+
+export default function MarketShareChart() {
+const data = [
+{ name: "Product A", value: 400, fill: "#3b82f6" },
+{ name: "Product B", value: 300, fill: "#10b981" },
+{ name: "Product C", value: 300, fill: "#f59e0b" },
+{ name: "Product D", value: 200, fill: "#ef4444" }
+]
+
+return (
+`${entry.name}: ${entry.value}`}
+/>
+)
+}
+```
+
+### Area Chart Component
+Stacked area chart for visualizing volume changes over time with multiple data series.
+
+```tsx
+import { AreaChart } from "@/components/ui/area-chart"
+
+export default function TrafficChart() {
+const data = [
+{ month: "Jan", mobile: 2000, desktop: 3000, tablet: 1000 },
+{ month: "Feb", mobile: 2200, desktop: 3200, tablet: 1100 },
+{ month: "Mar", mobile: 2800, desktop: 3800, tablet: 1300 },
+{ month: "Apr", mobile: 3200, desktop: 4200, tablet: 1500 },
+{ month: "May", mobile: 3800, desktop: 4800, tablet: 1800 }
+]
+
+return (
+
+)
+}
+```
+
+### Radar Chart Component
+Multi-axis chart for comparing multiple variables across different categories simultaneously.
+
+```tsx
+import { RadarChart } from "@/components/ui/radar-chart"
+
+export default function SkillsChart() {
+const data = [
+{ skill: "JavaScript", score: 85, industry: 75 },
+{ skill: "TypeScript", score: 80, industry: 70 },
+{ skill: "React", score: 90, industry: 80 },
+{ skill: "Node.js", score: 75, industry: 72 },
+{ skill: "CSS", score: 88, industry: 78 }
+]
+
+return (
+
+)
+}
+```
+
+### Mixed Chart Component
+Combined bar and line chart for displaying multiple data types with different visualization methods.
+
+```tsx
+import { MixedChart } from "@/components/ui/mixed-chart"
+
+export default function PerformanceChart() {
+const data = [
+{ month: "Jan", revenue: 4000, growth: 5.2 },
+{ month: "Feb", revenue: 4200, growth: 5.0 },
+{ month: "Mar", revenue: 4800, growth: 14.3 },
+{ month: "Apr", revenue: 5200, growth: 8.3 },
+{ month: "May", revenue: 5800, growth: 11.5 }
+]
+
+return (
+
+)
+}
+```
+
+## Animation Components
+
+### Magnetic Effect Component
+Magnetic hover effect that smoothly follows cursor movement for interactive buttons and cards.
+
+```tsx
+import { Magnetic } from "@/components/ui/magnetic"
+
+export default function InteractiveButton() {
+return (
+
+Hover me
+
+)
+}
+```
+
+### Animated Cursor Component
+Custom animated cursor with interactive effects and particle trails for immersive experiences.
+
+```tsx
+import { AnimatedCursor } from "@/components/ui/animated-cursor"
+
+export default function Layout({ children }) {
+return (
+<>
+
+{children}
+
+)
+}
+```
+
+### Apple Hello Effect Component
+Recreation of Apple's iconic "hello" animation with multi-language text transitions.
+
+```tsx
+import { AppleHello } from "@/components/ui/apple-hello"
+
+export default function WelcomeScreen() {
+const greetings = [
+{ text: "Hello", lang: "en" },
+{ text: "Bonjour", lang: "fr" },
+{ text: "こんにちは", lang: "ja" },
+{ text: "Hola", lang: "es" },
+{ text: "你好", lang: "zh" }
+]
+
+return (
+
+)
+}
+```
+
+### Liquid Button Component
+Button with fluid liquid animation effect on hover for engaging call-to-action elements.
+
+```tsx
+import { LiquidButton } from "@/components/ui/liquid-button"
+
+export default function CTASection() {
+return (
+console.log("CTA clicked")}
+>
+Get Started
+
+)
+}
+```
+
+### Rolling Text Component
+Text animation that creates a rolling effect with smooth character transitions.
+
+```tsx
+import { RollingText } from "@/components/ui/rolling-text"
+
+export default function AnimatedHeading() {
+return (
+
+)
+}
+```
+
+### Shimmering Text Component
+Text with animated shimmer effect for attention-grabbing headings and highlights.
+
+```tsx
+import { ShimmeringText } from "@/components/ui/shimmering-text"
+
+export default function Hero() {
+return (
+
+)
+}
+```
+
+## React Hooks
+
+### useBoolean Hook
+Enhanced boolean state management with toggle, enable, and disable methods for cleaner component logic.
+
+```tsx
+import { useBoolean } from "@/hooks/use-boolean"
+
+export default function TogglePanel() {
+const modal = useBoolean(false)
+const loading = useBoolean(false)
+
+const handleSubmit = async () => {
+loading.setTrue()
+try {
+await submitForm()
+modal.setFalse()
+} finally {
+loading.setFalse()
+}
+}
+
+return (
+<>
+Toggle Modal
+{modal.value && (
+
+
+Status: {loading.value ? "Saving..." : "Ready"}
+
+Submit
+
+
+)}
+
+)
+}
+```
+
+### useCounter Hook
+Counter hook with increment, decrement, reset, and set functionality for numeric state management.
+
+```tsx
+import { useCounter } from "@/hooks/use-counter"
+
+export default function CartCounter() {
+const quantity = useCounter(0, { min: 0, max: 99 })
+
+return (
+
+
+ -
+{quantity.value}
++
+
+Reset
+
+
+)
+}
+```
+
+### useLocalStorage Hook
+Persist state in browser localStorage with automatic serialization and deserialization.
+
+```tsx
+import { useLocalStorage } from "@/hooks/use-local-storage"
+
+export default function UserPreferences() {
+const [theme, setTheme] = useLocalStorage("theme", "light")
+const [settings, setSettings] = useLocalStorage("settings", {
+notifications: true,
+emailUpdates: false
+})
+
+return (
+
+
+setTheme(e.target.value)}>
+LightDark setSettings({
+...settings,
+notifications: e.target.checked
+})}
+/>
+Enable Notifications
+
+
+)
+}
+```
+
+### useDebounceValue Hook
+Debounce values to prevent excessive updates and API calls during rapid user input.
+
+```tsx
+import { useDebounceValue } from "@/hooks/use-debounce-value"
+import { useState, useEffect } from "react"
+
+export default function SearchBox() {
+const [search, setSearch] = useState("")
+const debouncedSearch = useDebounceValue(search, 500)
+const [results, setResults] = useState([])
+const [apiCalls, setApiCalls] = useState(0)
+
+useEffect(() => {
+if (debouncedSearch) {
+setApiCalls(prev => prev + 1)
+fetch(`/api/search?q=${encodeURIComponent(debouncedSearch)}`)
+.then(res => res.json())
+.then(setResults)
+}
+}, [debouncedSearch])
+
+return (
+
+
+setSearch(e.target.value)}
+placeholder="Search..."
+/>
+
+
+API calls: {apiCalls}
+
+
+)
+}
+```
+
+### useHover Hook
+Track hover state on elements with customizable enter and leave delays for tooltip and preview functionality.
+
+```tsx
+import { useHover } from "@/hooks/use-hover"
+import { useRef } from "react"
+
+export default function ImagePreview() {
+const hoverRef = useRef(null)
+const isHovering = useHover(hoverRef, {
+enterDelay: 200,
+leaveDelay: 100
+})
+
+return (
+
+
+
+{isHovering && (
+
+
+
+
+)}
+
+
+)
+}
+```
+
+### useCountdown Hook
+Countdown timer with play, pause, reset controls and completion callbacks for time-limited features.
+
+```tsx
+import { useCountdown } from "@/hooks/use-countdown"
+
+export default function OTPTimer() {
+const countdown = useCountdown({
+initialSeconds: 60,
+onComplete: () => alert("OTP expired! Request a new code.")
+})
+
+return (
+
+
+{countdown.seconds}s
+
+{!countdown.isRunning ? (
+Start
+) : (
+Pause
+)}
+Reset
+
+Status: {countdown.isComplete ? "Expired" : countdown.isRunning ? "Active" : "Paused"}
+
+
+)
+}
+```
+
+## Installation and Usage
+
+### CLI Installation
+Install components directly into your project using the shadcn CLI for instant integration.
+
+```bash
+# Initialize shadcn in your project
+npx shadcn@latest init
+
+# Add individual components
+npx shadcn@latest add terminal
+npx shadcn@latest add dock
+npx shadcn@latest add credit-card
+
+# Add multiple components at once
+npx shadcn@latest add bar-chart line-chart pie-chart
+
+# Add hooks
+npx shadcn@latest add use-boolean use-counter use-local-storage
+```
+
+### Project Configuration
+Configure your project to work with shadcn.io components using TypeScript and Tailwind CSS.
+
+```typescript
+// tailwind.config.ts
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+darkMode: ["class"],
+content: [
+"./pages/**/*.{ts,tsx}",
+"./components/**/*.{ts,tsx}",
+"./app/**/*.{ts,tsx}",
+],
+theme: {
+extend: {
+colors: {
+border: "hsl(var(--border))",
+input: "hsl(var(--input))",
+ring: "hsl(var(--ring))",
+background: "hsl(var(--background))",
+foreground: "hsl(var(--foreground))",
+primary: {
+DEFAULT: "hsl(var(--primary))",
+foreground: "hsl(var(--primary-foreground))",
+},
+},
+},
+},
+plugins: [require("tailwindcss-animate")],
+}
+
+export default config
+```
+
+## Summary
+
+The shadcn.io component library serves as a comprehensive toolkit for React developers building modern web applications with Next.js and TypeScript. The library's primary use cases include rapid prototyping of user interfaces, building data-rich dashboards with interactive charts, creating engaging user experiences with animations and effects, and implementing common UI patterns without writing boilerplate code. The copy-paste approach gives developers complete ownership of their components, allowing for deep customization while maintaining consistency with shadcn/ui design principles. Components are particularly well-suited for SaaS applications, admin panels, marketing websites, and e-commerce platforms that require professional, accessible UI elements.
+
+Integration patterns center around composability and customization rather than rigid package dependencies. Developers can cherry-pick individual components using the CLI, modify them at the source level to match their design system, and combine them with existing shadcn/ui components for a cohesive interface. The library supports both light and dark themes through CSS variables, integrates seamlessly with Tailwind CSS utility classes, and follows React best practices for performance and accessibility. Custom hooks provide reusable logic patterns that complement the visual components, creating a complete ecosystem for building feature-rich applications. The TypeScript-first approach ensures type safety throughout the development process, while the Recharts integration for data visualization provides powerful charting capabilities without additional configuration overhead.
\ No newline at end of file
diff --git a/.agents/skills/shadcn-ui/ui-reference.md b/.agents/skills/shadcn-ui/ui-reference.md
new file mode 100644
index 0000000..6ae8712
--- /dev/null
+++ b/.agents/skills/shadcn-ui/ui-reference.md
@@ -0,0 +1,1578 @@
+### Add All shadcn/ui Components using CLI
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+This command installs all available shadcn/ui components into your TanStack Start project using the shadcn/ui CLI. It requires a package manager like pnpm, npm, yarn, or bun.
+
+```shell
+pnpm dlx shadcn@latest add --all
+```
+
+--------------------------------
+
+### Create TanStack Start Project with shadcn/ui
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+This command initializes a new TanStack Start project and integrates shadcn/ui, including Tailwind CSS. It requires pnpm, npm, yarn, or bun to run.
+
+```shell
+pnpm create @tanstack/start@latest --tailwind --add-ons shadcn
+```
+
+--------------------------------
+
+### Custom Block Installation
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Specifies a custom block to be installed from the shadcn/ui registry. In this example, it installs the 'login-01' block.
+
+```json
+{
+ "$schema": "https://u"
+}
+```
+
+--------------------------------
+
+### Example: Multiple Registry Setup in components.json
+
+Source: https://ui.shadcn.com/docs/components-json
+
+Demonstrates a complex `components.json` configuration with multiple registries, including public, private with authentication, and team-specific resources. This setup allows for flexible installation of components and utilities from diverse sources.
+
+```json
+{
+ "registries": {
+ "@shadcn": "https://ui.shadcn.com/r/{name}.json",
+ "@company-ui": {
+ "url": "https://registry.company.com/ui/{name}.json",
+ "headers": {
+ "Authorization": "Bearer ${COMPANY_TOKEN}"
+ }
+ },
+ "@team": {
+ "url": "https://team.company.com/{name}.json",
+ "params": {
+ "team": "frontend",
+ "version": "${REGISTRY_VERSION}"
+ }
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Universal Item with Multiple Files (JSON)
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+An example of a universal registry item that installs multiple files, including dependencies. This is useful for starter templates or comprehensive configurations, with explicit `target` paths for each file.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "my-custom-start-template",
+ "type": "registry:item",
+ "dependencies": [
+ "better-auth"
+ ],
+ "files": [
+ {
+ "path": "/path/to/file-01.json",
+ "type": "registry:file",
+ "target": "~/file-01.json",
+ "content": "..."
+ },
+ {
+ "path": "/path/to/file-02.vue",
+ "type": "registry:file",
+ "target": "~/pages/file-02.vue",
+ "content": "..."
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Create Gatsby Project using npm
+
+Source: https://ui.shadcn.com/docs/installation/gatsby
+
+Initializes a new Gatsby project using the npm command. This command is the starting point for setting up a new Gatsby application.
+
+```bash
+npm init gatsby
+```
+
+--------------------------------
+
+### Create React Project with Vite (TypeScript)
+
+Source: https://ui.shadcn.com/docs/installation/vite
+
+Command to create a new React project using Vite with the TypeScript template. This is the initial step for setting up the project.
+
+```bash
+pnpm create vite@latest
+ --template react-ts
+```
+
+--------------------------------
+
+### Install Component from Private Registry
+
+Source: https://ui.shadcn.com/docs/components-json
+
+Command-line instruction to install a component from a private registry using its alias. This example, `@private/button`, demonstrates fetching resources from a protected registry defined in `components.json`.
+
+```bash
+npx shadcn@latest add @private/button
+```
+
+--------------------------------
+
+### Install Component from Configured Registry
+
+Source: https://ui.shadcn.com/docs/components-json
+
+Command-line instruction to install a component using a configured registry alias. The `@v0/dashboard` syntax specifies the registry and the resource name, leveraging the `components.json` setup.
+
+```bash
+npx shadcn@latest add @v0/dashboard
+```
+
+--------------------------------
+
+### Install Tailwind CSS
+
+Source: https://ui.shadcn.com/docs/installation/remix
+
+Commands to install Tailwind CSS and Autoprefixer as development dependencies in a Remix project using pnpm, npm, or yarn.
+
+```bash
+pnpm add -D tailwindcss@latest autoprefixer@latest
+```
+
+--------------------------------
+
+### Universal Item for ESLint Configuration (JSON)
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This example shows a universal registry item for installing a custom ESLint configuration. It uses an explicit `target` to place the `.eslintrc.json` file in the user's home directory, ensuring framework independence.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "my-eslint-config",
+ "type": "registry:item",
+ "files": [
+ {
+ "path": "/path/to/your/registry/default/custom-eslint.json",
+ "type": "registry:file",
+ "target": "~/.eslintrc.json",
+ "content": "..."
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Install Switch Component (Manual)
+
+Source: https://ui.shadcn.com/docs/components/switch
+
+Manual installation instructions for the Switch component, providing alternative methods using pnpm, npm, or yarn. This approach is useful if the CLI method is not preferred or feasible.
+
+```bash
+pnpm add switch
+npm install switch
+yarn add switch
+```
+
+--------------------------------
+
+### Installing shadcn/ui Spinner Component
+
+Source: https://ui.shadcn.com/docs/components/spinner
+
+Shows how to add the Spinner component to your project using the shadcn-ui CLI. This command-line installation method simplifies dependency management and setup.
+
+```bash
+pnpm dlx shadcn@latest add spinner
+```
+
+--------------------------------
+
+### Install Switch Component (CLI)
+
+Source: https://ui.shadcn.com/docs/components/switch
+
+Instructions for installing the Switch component using the shadcn-ui CLI. This is the recommended method for adding components to your project. Ensure you have the shadcn-ui CLI installed and configured.
+
+```bash
+pnpm dlx shadcn@latest add switch
+```
+
+--------------------------------
+
+### shadcn/ui Select Component Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/select
+
+Instructions for installing the shadcn/ui Select component using the pnpm, npm, or yarn package managers. This command-line interface method simplifies the process of adding the component to your project. Ensure you have the shadcn/ui CLI installed globally.
+
+```bash
+pnpm dlx shadcn@latest add select
+npx shadcn@latest add select
+yarn dlx shadcn@latest add select
+```
+
+--------------------------------
+
+### Installing Components from Namespaced Registries
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Demonstrates how to install components using the shadcn CLI from different registered namespaces. This enables decentralized component distribution and management.
+
+```shell
+pnpm dlx shadcn add @acme/button @internal/auth-system
+```
+
+--------------------------------
+
+### Custom Style from Scratch
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Creates a custom style from scratch without extending shadcn/ui. It installs specific npm packages and registry items, and defines new CSS variables for theme colors.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "extends": "none",
+ "name": "new-style",
+ "type": "registry:style",
+ "dependencies": [
+ "tailwind-merge",
+ "clsx"
+ ],
+ "registryDependencies": [
+ "utils",
+ "https://example.com/r/button.json",
+ "https://example.com/r/input.json",
+ "https://example.com/r/label.json",
+ "https://example.com/r/select.json"
+ ],
+ "cssVars": {
+ "theme": {
+ "font-sans": "Inter, sans-serif"
+ },
+ "light": {
+ "main": "#88aaee",
+ "bg": "#dfe5f2",
+ "border": "#000",
+ "text": "#000",
+ "ring": "#000"
+ },
+ "dark": {
+ "main": "#88aaee",
+ "bg": "#272933",
+ "border": "#000",
+ "text": "#e6e6e6",
+ "ring": "#fff"
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Import and Use Button Component in React
+
+Source: https://ui.shadcn.com/docs/installation/vite
+
+Example of importing the 'Button' component from shadcn/ui and using it within a React component. Assumes the Button component has been added via the CLI.
+
+```typescript
+import { Button } from "@/components/ui/button"
+
+function App() {
+ return (
+ Click me
+ )
+}
+
+export default App
+```
+
+--------------------------------
+
+### Add Dependencies to Project (npm, pnpm, yarn, bun)
+
+Source: https://ui.shadcn.com/docs/installation/manual
+
+Installs the required dependencies for shadcn/ui using package managers. Ensure Tailwind CSS is already set up in your project.
+
+```bash
+pnpm add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
+```
+
+--------------------------------
+
+### shadcn/ui Tooltip Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/tooltip
+
+This command installs the shadcn/ui Tooltip component using the shadcn CLI. This is the recommended method for adding components to your project, ensuring proper dependency management.
+
+```bash
+pnpm dlx shadcn@latest add tooltip
+```
+
+--------------------------------
+
+### Install Multiple Resources from Different Registries
+
+Source: https://ui.shadcn.com/docs/components-json
+
+Command-line instruction to install multiple resources from various configured registries simultaneously. This showcases the flexibility of installing components like `@acme/header` and `@internal/auth-utils` in one go.
+
+```bash
+npx shadcn@latest add @acme/header @internal/auth-utils
+```
+
+--------------------------------
+
+### shadcn/ui Alert Component Import Example
+
+Source: https://ui.shadcn.com/docs/components/alert
+
+Example of how to import the Alert, AlertDescription, and AlertTitle components from shadcn/ui after installation. This allows you to use them in your React components.
+
+```jsx
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+```
+
+--------------------------------
+
+### Initialize shadcn/ui Project with CLI
+
+Source: https://ui.shadcn.com/docs/cli
+
+Initializes your project with shadcn/ui, installing necessary dependencies and configuring the project. This command sets up the `cn` utility and CSS variables.
+
+```bash
+pnpm dlx shadcn@latest init
+```
+
+--------------------------------
+
+### shadcn/ui CLI Installation Commands
+
+Source: https://ui.shadcn.com/docs/cli
+
+Shows the commands for installing shadcn/ui dependencies using different package managers (PNPM, NPM, Yarn, Bun).
+
+```bash
+pnpm dlx shadcn@latest init
+```
+
+```bash
+npm dlx shadcn@latest init
+```
+
+```bash
+yarn dlx shadcn@latest init
+```
+
+```bash
+bun dlx shadcn@latest init
+```
+
+--------------------------------
+
+### shadcn/ui Empty Component Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/empty
+
+Shows how to install the Empty component using the shadcn/ui CLI. This involves running a specific command to add the component to your project.
+
+```bash
+pnpm dlx shadcn@latest add empty
+```
+
+--------------------------------
+
+### Add Tailwind CSS and Vite Plugin
+
+Source: https://ui.shadcn.com/docs/installation/vite
+
+Installs Tailwind CSS and its Vite plugin. These are necessary for styling components with Tailwind utility classes.
+
+```bash
+pnpm add -D tailwindcss postcss autoprefixer
+pnpm add -D @tailwindcss/vite
+```
+
+--------------------------------
+
+### Import and Use 'Button' Component in React
+
+Source: https://ui.shadcn.com/docs/installation/tanstack
+
+Demonstrates how to import and use the 'Button' component from shadcn/ui within a React component in a TanStack Start application. Assumes the 'Button' component has been added via the CLI.
+
+```jsx
+import { Button } from "@/components/ui/button"
+
+function App() {
+ return (
+ Click me
+ )
+}
+```
+
+--------------------------------
+
+### shadcn/ui Alert Component Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/alert
+
+Instructions for installing the Alert component using the shadcn/ui CLI. This command adds the necessary dependencies and component files to your project.
+
+```bash
+pnpm dlx shadcn@latest add alert
+```
+
+--------------------------------
+
+### Universal Item for Python Rules (JSON)
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+An example of a universal registry item designed to install custom Python rules for the Cursor editor. It specifies an explicit target path for the rule file, making it framework-agnostic.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "python-rules",
+ "type": "registry:item",
+ "files": [
+ {
+ "path": "/path/to/your/registry/default/custom-python.mdc",
+ "type": "registry:file",
+ "target": "~/.cursor/rules/custom-python.mdc",
+ "content": "..."
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Calendar Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/calendar
+
+Provides commands for installing the Calendar component using different package managers like pnpm, npm, yarn, and bun. This is a prerequisite for using the component in your project.
+
+```bash
+pnpm dlx shadcn@latest add calendar
+```
+
+--------------------------------
+
+### Dropdown Menu Basic Usage (JavaScript/React)
+
+Source: https://ui.shadcn.com/docs/components/dropdown-menu
+
+This snippet shows the minimal setup for a dropdown menu component. It requires importing the necessary components from shadcn/ui and defining a trigger and content. This is a foundational example for integrating dropdown menus.
+
+```javascript
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"
+
+```
+
+```javascript
+OpenMy Account
+ Profile
+ ⇧⌘P
+ Billing
+ ⌘B
+ Settings
+ ⌘S
+ Keyboard shortcuts
+ ⌘K
+ Team
+
+ Invite users
+
+ New Team...
+ ⌘+T
+ GitHub
+
+ Support
+
+ API
+
+ Log out
+ ⇧⌘Q
+
+```
+
+--------------------------------
+
+### Install Progress Component using CLI
+
+Source: https://ui.shadcn.com/docs/components/progress
+
+Command to add the Progress component to your project using the shadcn-ui CLI. This is the recommended way to install components.
+
+```bash
+pnpm dlx shadcn@latest add progress
+```
+
+--------------------------------
+
+### Separator Component Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/separator
+
+Shows the command to install the Separator component using the shadcn-ui CLI. This is the recommended method for adding components.
+
+```bash
+pnpm dlx shadcn@latest add separator
+```
+
+--------------------------------
+
+### Add CSS Import with URL Syntax
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This example demonstrates importing CSS files using the `url()` syntax, including importing from external sources like Google Fonts and local files.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "font-import",
+ "type": "registry:item",
+ "css": {
+ "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap\")": {},
+ "@import url('./local-styles.css')": {}
+ }
+}
+```
+
+--------------------------------
+
+### React Card Component Example (shadcn/ui)
+
+Source: https://ui.shadcn.com/docs/components/card
+
+This code snippet demonstrates how to use the Card component from shadcn/ui in a React application. It includes examples for header, title, description, content, footer, and action elements. Ensure you have the 'card' component installed via the shadcn/ui CLI or manually imported.
+
+```jsx
+import { Button } from "@/components/ui/button"
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export function CardDemo() {
+ return (
+ Login to your accountEnter your email below to login to your account
+
+Name
+
+Framework
+
+CancelDeploy
+ )
+}
+```
+
+--------------------------------
+
+### Install shadcn/ui Toggle Component
+
+Source: https://ui.shadcn.com/docs/components/toggle
+
+Instructions for installing the shadcn/ui Toggle component using pnpm. This command adds the necessary package and dependencies to your project.
+
+```bash
+pnpm dlx shadcn@latest add toggle
+```
+
+--------------------------------
+
+### Create a Simple Component (TypeScript/React)
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+An example of a basic component file, `hello-world.tsx`, intended to be part of a registry. This component uses a Button from `@/components/ui/button`. It should be placed within a structured directory like `registry/[NAME]/[COMPONENT_NAME]/`.
+
+```tsx
+import { Button } from "@/components/ui/button"
+
+export function HelloWorld() {
+ return (
+ Hello World
+ )
+}
+```
+
+--------------------------------
+
+### shadcn/ui Alert Dialog Installation
+
+Source: https://ui.shadcn.com/docs/components/alert-dialog
+
+Instructions for installing the Alert Dialog component using the shadcn-ui CLI. This command adds the necessary component files to your project, allowing you to import and use them.
+
+```bash
+pnpm dlx shadcn@latest add alert-dialog
+```
+
+--------------------------------
+
+### Install Remote Component using URL (CLI)
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Installs a remote component by providing its registry URL to the shadcn CLI. This allows for easy integration of components from external sources. It requires the shadcn CLI to be installed.
+
+```bash
+npx shadcn add https://acme.com/registry/navbar.json
+```
+
+--------------------------------
+
+### Add Functional CSS Utilities
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This example demonstrates functional CSS utilities using a wildcard. The 'tab-*' utility allows for dynamic application of 'tab-size' based on the value provided.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "custom-component",
+ "type": "registry:component",
+ "css": {
+ "@utility tab-*": {
+ "tab-size": "var(--tab-size-)"
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Install shadcn/ui Registry Item via CLI
+
+Source: https://ui.shadcn.com/docs/registry/getting-started
+
+Installs a registry item using the shadcn CLI by providing the URL of the registry item. This command allows developers to easily add components from a remote registry to their project.
+
+```Shell
+pnpm dlx shadcn@latest add http://localhost:3000/r/hello-world.json
+```
+
+--------------------------------
+
+### shadcn/ui Drawer Component Usage Example
+
+Source: https://ui.shadcn.com/docs/components/drawer
+
+Provides a basic import statement for using the Drawer component and its associated sub-components from shadcn/ui. This snippet is intended for developers who have installed the component and need to integrate it into their React application.
+
+```javascript
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer"
+
+```
+
+--------------------------------
+
+### Toggle Group Component Documentation
+
+Source: https://ui.shadcn.com/docs/components/toggle-group
+
+This section details the Toggle Group component, its installation, usage, and various examples demonstrating its functionality and appearance.
+
+```APIDOC
+## Toggle Group Component
+
+### Description
+A set of two-state buttons that can be toggled on or off. Provides "single" and "multiple" selection modes.
+
+### Installation
+Use the shadcn-ui CLI to add the component to your project:
+```bash
+pnpm dlx shadcn@latest add toggle-group
+```
+
+### Usage
+Import the necessary components and use them in your React application.
+
+```javascript
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+function MyToggleGroup() {
+ return (
+
+ A
+
+ B
+
+ C
+
+ );
+}
+```
+
+### Examples
+
+#### Outline
+```javascript
+import { Bold, Italic, Underline } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ToggleGroupOutline() {
+ return (
+
+ );
+}
+```
+
+#### Single
+```javascript
+import { Bold, Italic, Underline } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ToggleGroupSingle() {
+ return (
+
+ );
+}
+```
+
+#### Small
+```javascript
+import { Bold, Italic, Underline } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ToggleGroupSmall() {
+ return (
+
+ );
+}
+```
+
+#### Large
+```javascript
+import { Bold, Italic, Underline } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ToggleGroupLarge() {
+ return (
+
+ );
+}
+```
+
+#### Disabled
+```javascript
+import { Bold, Italic, Underline } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ToggleGroupDisabled() {
+ return (
+
+ );
+}
+```
+
+#### Spacing
+Use `spacing={2}` to add spacing between toggle group items.
+```javascript
+import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+export function ToggleGroupSpacing() {
+ return (
+
+ );
+}
+```
+
+### API Reference
+
+#### ToggleGroup
+The main component that wraps toggle group items.
+
+| Prop | Type | Default |
+|------------|-------------------------------------|-------------|
+| `type` | `"single" | "multiple"` | `"single"` |
+| `variant` | `"default" | "outline"` | `"default"` |
+| `size` | `"default" | "sm" | "lg"` | `"default"` |
+| `spacing` | `number` | `0` |
+| `className`| `string` | `''` |
+
+#### ToggleGroupItem
+Individual toggle items within a toggle group. Remember to add an `aria-label` to each item for accessibility.
+
+| Prop | Type | Default |
+|------------|----------|-----------|
+| `value` | `string` | Required |
+| `className`| `string` | `''` |
+```
+
+--------------------------------
+
+### Use shadcn/ui Button Component in Remix
+
+Source: https://ui.shadcn.com/docs/installation/remix
+
+Example of importing and using the shadcn/ui Button component within a Remix route component. Demonstrates basic component integration.
+
+```typescript
+import { Button } from "~/components/ui/button"
+
+export default function Home() {
+ return (
+ Click me
+ )
+}
+```
+
+--------------------------------
+
+### Override Primitives with a Block
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Demonstrates how to define a custom login block that overrides existing primitives like 'button', 'input', and 'label' with remote versions. This allows for customization during installation.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "custom-login",
+ "type": "registry:block",
+ "registryDependencies": [
+ "login-01",
+ "https://example.com/r/button.json",
+ "https://example.com/r/input.json",
+ "https://example.com/r/label.json"
+ ]
+}
+```
+
+--------------------------------
+
+### Initialize Project with shadcn CLI
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Initializes a new project with shadcn/ui components. The command automatically detects the project's framework and can even set up a new Next.js application. It is a convenient way to start integrating shadcn/ui.
+
+```bash
+npx shadcn init
+pnpm dlx shadcn init sidebar-01 login-01
+```
+
+--------------------------------
+
+### shadcn CLI Commands
+
+Source: https://ui.shadcn.com/docs/changelog
+
+Demonstrates the usage of the shadcn CLI for managing UI components. The commands shown are 'init' for project setup and 'add' for incorporating new components, along with an experimental 'diff' command. These are essential for integrating and managing shadcn/ui within a project.
+
+```bash
+npx shadcn-ui@latest init
+npx shadcn-ui@latest add
+npx shadcn-ui@latest diff (experimental)
+```
+
+--------------------------------
+
+### Install shadcn/ui Tabs Component
+
+Source: https://ui.shadcn.com/docs/components/tabs
+
+Instructions for installing the Tabs component using pnpm and the shadcn-ui CLI. This ensures the component is correctly added to your project's dependencies and configuration.
+
+```bash
+pnpm dlx shadcn@latest add tabs
+```
+
+--------------------------------
+
+### Install shadcn/ui Badge Component (CLI)
+
+Source: https://ui.shadcn.com/docs/components/badge
+
+Command-line instructions for adding the shadcn/ui Badge component to your project using pnpm. This command fetches and installs the necessary component files.
+
+```bash
+pnpm dlx shadcn@latest add badge
+```
+
+--------------------------------
+
+### Define a Login Block
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This example shows how to define a 'login-01' block, specifying its type, description, dependencies, and the files it comprises. The 'page.tsx' and 'login-form.tsx' are included as part of the block.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "login-01",
+ "type": "registry:block",
+ "description": "A simple login form.",
+ "registryDependencies": [
+ "button",
+ "card",
+ "input",
+ "label"
+ ],
+ "files": [
+ {
+ "path": "blocks/login-01/page.tsx",
+ "content": "import { LoginForm } ...",
+ "type": "registry:page",
+ "target": "app/login/page.tsx"
+ },
+ {
+ "path": "blocks/login-01/components/login-form.tsx",
+ "content": "...",
+ "type": "registry:component"
+ }
+ ]
+}
+```
+
+--------------------------------
+
+### Menubar Component Installation (pnpm)
+
+Source: https://ui.shadcn.com/docs/components/menubar
+
+Instructions for installing the Menubar component from shadcn/ui using the pnpm package manager. This command-line interface (CLI) command fetches and adds the necessary component files to your project.
+
+```bash
+pnpm dlx shadcn@latest add menubar
+```
+
+--------------------------------
+
+### shadcn/ui Card Component - Installation
+
+Source: https://ui.shadcn.com/docs/components/card
+
+Instructions for installing the Card component in your project using the shadcn/ui CLI. This command automates the process of adding the necessary files to your components directory.
+
+```bash
+pnpm dlx shadcn@latest add card
+```
+
+--------------------------------
+
+### Custom Theme Example
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Defines a custom theme with specific color variables for both light and dark modes. This allows for a unique color palette across the application.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "custom-theme",
+ "type": "registry:theme",
+ "cssVars": {
+ "light": {
+ "background": "oklch(1 0 0)",
+ "foreground": "oklch(0.141 0.005 285.823)",
+ "primary": "oklch(0.546 0.245 262.881)",
+ "primary-foreground": "oklch(0.97 0.014 254.604)",
+ "ring": "oklch(0.746 0.16 232.661)",
+ "sidebar-primary": "oklch(0.546 0.245 262.881)",
+ "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+ "sidebar-ring": "oklch(0.746 0.16 232.661)"
+ },
+ "dark": {
+ "background": "oklch(1 0 0)",
+ "foreground": "oklch(0.141 0.005 285.823)",
+ "primary": "oklch(0.707 0.165 254.624)",
+ "primary-foreground": "oklch(0.97 0.014 254.604)",
+ "ring": "oklch(0.707 0.165 254.624)",
+ "sidebar-primary": "oklch(0.707 0.165 254.624)",
+ "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+ "sidebar-ring": "oklch(0.707 0.165 254.624)"
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Install Form Component - CLI
+
+Source: https://ui.shadcn.com/docs/components/form
+
+Command to add the Form component to your project using the shadcn-ui CLI. This command installs the necessary dependencies and component files.
+
+```bash
+pnpm dlx shadcn@latest add form
+```
+
+--------------------------------
+
+### Navigation Menu Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/navigation-menu
+
+Provides instructions for adding the Navigation Menu component to your project using the shadcn/ui CLI with pnpm, npm, or yarn package managers.
+
+```bash
+pnpm dlx shadcn@latest add navigation-menu
+```
+
+--------------------------------
+
+### shadcn/ui Popover Installation Commands
+
+Source: https://ui.shadcn.com/docs/components/popover
+
+Provides commands for installing the shadcn/ui Popover component. It includes instructions for pnpm, npm, and yarn package managers, as well as a command to add the Popover component using the shadcn CLI.
+
+```bash
+pnpm
+npm
+yarn
+bun
+```
+
+```bash
+pnpm dlx shadcn@latest add popover
+```
+
+--------------------------------
+
+### Install Calendar Blocks using shadcn-ui CLI
+
+Source: https://ui.shadcn.com/docs/components/calendar
+
+Instructions to install the latest version of the calendar blocks using the shadcn-ui CLI. This command fetches and adds the necessary calendar components to your project.
+
+```bash
+pnpm dlx shadcn@latest add calendar-02
+```
+
+--------------------------------
+
+### Initialize Project from Local File using shadcn CLI
+
+Source: https://ui.shadcn.com/docs/changelog
+
+This command initializes a project using a local JSON file as a template. It's useful for zero-setup workflows and testing registry items locally.
+
+```bash
+npx shadcn init ./template.json
+```
+
+--------------------------------
+
+### Avatar Component Installation
+
+Source: https://ui.shadcn.com/docs/components/avatar
+
+Provides instructions for installing the Avatar component using the shadcn/ui CLI. This typically involves running a command like 'pnpm dlx shadcn@latest add avatar' after setting up the project.
+
+```bash
+pnpm dlx shadcn@latest add avatar
+```
+
+--------------------------------
+
+### shadcn/ui Slider Component Installation
+
+Source: https://ui.shadcn.com/docs/components/slider
+
+Instructions for installing the shadcn/ui Slider component. This includes methods using pnpm, npm, yarn, and bun, as well as a command-line instruction to add the slider dependency using the shadcn CLI.
+
+```bash
+pnpm dlx shadcn@latest add slider
+```
+
+--------------------------------
+
+### Install shadcn/ui Button Component
+
+Source: https://ui.shadcn.com/docs/components/button
+
+Instructions for installing the shadcn/ui Button component using package managers like pnpm, npm, or yarn. It also includes the command to add the button component to your project.
+
+```bash
+pnpm dlx shadcn@latest add button
+```
+
+--------------------------------
+
+### Install Sidebar Component using PNPM
+
+Source: https://ui.shadcn.com/docs/components/sidebar
+
+Installs the 'sidebar.tsx' component using the pnpm package manager. This is the recommended method for adding the component to your project.
+
+```bash
+pnpm dlx shadcn@latest add sidebar
+```
+
+--------------------------------
+
+### Custom Style Extending shadcn/ui
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+Defines a custom style that extends shadcn/ui, installing specific dependencies and components. It also sets custom CSS variables for fonts and a brand color in both light and dark modes.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "example-style",
+ "type": "registry:style",
+ "dependencies": [
+ "@tabler/icons-react"
+ ],
+ "registryDependencies": [
+ "login-01",
+ "calendar",
+ "https://example.com/r/editor.json"
+ ],
+ "cssVars": {
+ "theme": {
+ "font-sans": "Inter, sans-serif"
+ },
+ "light": {
+ "brand": "20 14.3% 4.1%"
+ },
+ "dark": {
+ "brand": "20 14.3% 4.1%"
+ }
+ }
+}
+```
+
+--------------------------------
+
+### Install shadcn/ui Table Component (CLI)
+
+Source: https://ui.shadcn.com/docs/components/table
+
+This command installs the Table component and its dependencies into your shadcn/ui project using the pnpm package manager. Ensure you have shadcn/ui CLI set up.
+
+```bash
+pnpm dlx shadcn@latest add table
+```
+
+--------------------------------
+
+### Install Textarea Component with shadcn/ui
+
+Source: https://ui.shadcn.com/docs/components/textarea
+
+Instructions for installing the Textarea component using different package managers (pnpm, npm, yarn, bun). This is a prerequisite for using the Textarea component in your project.
+
+```bash
+pnpm dlx shadcn@latest add textarea
+```
+
+--------------------------------
+
+### Create Remix Project
+
+Source: https://ui.shadcn.com/docs/installation/remix
+
+Command to create a new Remix project using pnpm, npm, or yarn. Ensures a fresh project structure for integration.
+
+```bash
+pnpm dlx create-remix@latest my-app
+```
+
+--------------------------------
+
+### Sheet Component Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/sheet
+
+Provides instructions for installing the Sheet component using the shadcn-ui CLI. This command-line approach simplifies the process of adding the component to your project, ensuring all necessary dependencies are handled.
+
+```bash
+pnpm dlx shadcn@latest add sheet
+```
+
+--------------------------------
+
+### SidebarHeader Component Example
+
+Source: https://ui.shadcn.com/docs/components/sidebar
+
+Shows how to incorporate the SidebarHeader component to add a sticky header. The example includes a dropdown menu for workspace selection.
+
+```typescript
+import { SidebarHeader } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return (
+
+
+
+
+
+ Acme Inc.
+ Acme Corp.
+
+
+ )
+}
+```
+
+--------------------------------
+
+### shadcn/ui Drawer Component Installation Command
+
+Source: https://ui.shadcn.com/docs/components/drawer
+
+Shows the command-line interface (CLI) command to install the Drawer component into a shadcn/ui project. This command uses `pnpm dlx` to execute the `shadcn@latest add drawer` command, ensuring the latest version is added.
+
+```bash
+pnpm dlx shadcn@latest add drawer
+
+```
+
+--------------------------------
+
+### Add CSS Import with Media Queries
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This configuration shows how to use CSS imports with media queries, allowing for conditional loading of styles based on print or screen size.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "responsive-import",
+ "type": "registry:item",
+ "css": {
+ "@import \"print-styles.css\" print": {},
+ "@import url(\"mobile.css\") screen and (max-width: 768px)": {}
+ }
+}
+```
+
+--------------------------------
+
+### SidebarFooter Component Example
+
+Source: https://ui.shadcn.com/docs/components/sidebar
+
+Demonstrates the use of the SidebarFooter component for adding a sticky footer. This example includes user account and billing links, and a sign-out option.
+
+```typescript
+import { SidebarFooter } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return (
+
+
+CN
+
+shadcnm@example.com
+
+More optionsAccountBillingSettingsSign out
+ )
+}
+```
+
+--------------------------------
+
+### shadcn/ui Dialog Component Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/dialog
+
+Provides the command to install the Dialog component using the shadcn/ui CLI with pnpm. This command adds the necessary files and dependencies for the Dialog component to your project. It's a prerequisite for using the component in your application.
+
+```bash
+pnpm dlx shadcn@latest add dialog
+```
+
+--------------------------------
+
+### shadcn CLI init Command Usage
+
+Source: https://ui.shadcn.com/docs/cli
+
+Illustrates the usage of the `shadcn init` command, including its arguments for specifying component names, URLs, or local paths, and available options like `--template`. This command is crucial for setting up the project's components and configuration.
+
+```bash
+Usage: shadcn init [options] [components...]
+
+initialize your project and install dependencies
+
+Arguments:
+ components name, url or local path to component
+
+Options:
+ -t, --template
+```
+
+--------------------------------
+
+### Install shadcn/ui Accordion Component
+
+Source: https://ui.shadcn.com/docs/components/accordion
+
+Provides commands for installing the Accordion component using different package managers (pnpm, yarn, bun). It also shows the command to add the component using the shadcn-ui CLI.
+
+```bash
+pnpm dlx shadcn@latest add accordion
+```
+
+--------------------------------
+
+### SidebarMenuAction - DropdownMenu Example
+
+Source: https://ui.shadcn.com/docs/components/sidebar
+
+An example of integrating a DropdownMenu with the SidebarMenuAction component. This allows for contextual actions or sub-options.
+
+```javascript
+[Home](#)
+Edit Project
+Delete Project
+```
+
+--------------------------------
+
+### shadcn/ui Checkbox Installation
+
+Source: https://ui.shadcn.com/docs/components/checkbox
+
+Provides instructions for installing the Checkbox component using different package managers (pnpm, npm, yarn, bun). It also includes the command to add the component using the shadcn-ui CLI.
+
+```bash
+pnpm dlx shadcn@latest add checkbox
+```
+
+--------------------------------
+
+### Install Hover Card Component using pnpm
+
+Source: https://ui.shadcn.com/docs/components/hover-card
+
+Command to install the Hover Card component and its dependencies into your project using pnpm and the shadcn-ui CLI.
+
+```bash
+pnpm dlx shadcn@latest add hover-card
+```
+
+--------------------------------
+
+### Create React Router Project
+
+Source: https://ui.shadcn.com/docs/installation/react-router
+
+This command initializes a new React Router project using pnpm. It's the first step in setting up your application before integrating shadcn/ui.
+
+```bash
+pnpm dlx create-react-router@latest my-app
+```
+
+--------------------------------
+
+### Create Astro Project with Tailwind CSS
+
+Source: https://ui.shadcn.com/docs/installation/astro
+
+Command to create a new Astro project with Tailwind CSS, React integration, package installation, and Git initialization.
+
+```bash
+pnpm dlx create-astro@latest astro-app --template with-tailwindcss --install --add react --git
+```
+
+--------------------------------
+
+### Express.js Example for Registry Authentication
+
+Source: https://ui.shadcn.com/docs/registry/authentication
+
+Example of an Express.js route handler for registry authentication, checking the Authorization header for a Bearer token.
+
+```APIDOC
+## Express.js Example
+
+### Description
+This Express.js example demonstrates a basic route handler for authenticating requests to your component registry. It checks the `Authorization` header for a Bearer token.
+
+### Method
+GET
+
+### Endpoint
+`/registry/:name.json`
+
+### Parameters
+#### Path Parameters
+- **name** (string) - Required - The name of the component to retrieve.
+
+#### Query Parameters
+N/A
+
+#### Request Body
+N/A
+
+### Request Example
+N/A (GET request)
+
+### Response
+#### Success Response (200)
+- **component** (object) - The requested component data.
+
+#### Error Responses
+- **401 Unauthorized**: If the provided token is invalid.
+- **404 Not Found**: If the component is not found.
+
+### Code Example
+```javascript
+app.get("/registry/:name.json", (req, res) => {
+ const token = req.headers.authorization?.replace("Bearer ", "")
+
+ if (!isValidToken(token)) {
+ return res.status(401).json({ error: "Unauthorized" })
+ }
+
+ const component = getComponent(req.params.name)
+ if (!component) {
+ return res.status(404).json({ error: "Component not found" })
+ }
+
+ res.json(component)
+})
+
+function isValidToken(token) {
+ // Add your token validation logic here.
+ // Example: return token === process.env.VALID_TOKEN;
+ return true; // Placeholder
+}
+
+function getComponent(componentName) {
+ // Replace with your actual logic to fetch the component.
+ // Example: return { name: componentName, data: "component data" };
+ return null; // Placeholder
+}
+```
+```
+
+--------------------------------
+
+### shadcn/ui Context Menu Installation (CLI)
+
+Source: https://ui.shadcn.com/docs/components/context-menu
+
+Instructions for adding the shadcn/ui Context Menu component to your project using the command-line interface. This command will automatically download and update the necessary dependencies for the component.
+
+```bash
+pnpm dlx shadcn@latest add context-menu
+```
+
+--------------------------------
+
+### Add Complex CSS Utility
+
+Source: https://ui.shadcn.com/docs/registry/examples
+
+This example defines a more complex CSS utility called 'scrollbar-hidden'. It targets the scrollbar pseudo-elements to hide them.
+
+```json
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "custom-component",
+ "type": "registry:component",
+ "css": {
+ "@utility scrollbar-hidden": {
+ "scrollbar-hidden": {
+ "&::-webkit-scrollbar": {
+ "display": "none"
+ }
+ }
+ }
+ }
+}
+```
+
+--------------------------------
+
+### shadcn/ui Label Component Installation
+
+Source: https://ui.shadcn.com/docs/components/label
+
+Provides instructions for installing the Label component into a shadcn/ui project using different package managers like pnpm, npm, yarn, and bun. It also shows the command to add the component using the shadcn CLI.
+
+```bash
+pnpm dlx shadcn@latest add label
+```
+
+--------------------------------
+
+### Install Aspect Ratio Component using pnpm
+
+Source: https://ui.shadcn.com/docs/components/aspect-ratio
+
+Command to install the Aspect Ratio component using the pnpm package manager. This command adds the component to your project, making it available for use.
+
+```bash
+pnpm dlx shadcn@latest add aspect-ratio
+```
+
+--------------------------------
+
+### React ButtonGroup Installation using pnpm
+
+Source: https://ui.shadcn.com/docs/components/button-group
+
+Provides the command to install the 'button-group' component from shadcn/ui using the pnpm package manager. This command downloads and integrates the necessary files into your project.
+
+```bash
+pnpm dlx shadcn@latest add button-group
+```
+
+--------------------------------
+
+### Switch Component Usage Example (React)
+
+Source: https://ui.shadcn.com/docs/components/switch
+
+This code snippet demonstrates how to use the Switch component in a React application. It requires the Label and Switch components from '@/components/ui/label' and '@/components/ui/switch' respectively. The example shows a basic implementation with a label and the switch itself.
+
+```jsx
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+
+export function SwitchDemo() {
+ return (
+
+
+Airplane Mode
+
+ )
+}
+```
\ No newline at end of file
diff --git a/.agents/skills/skill-creator/LICENSE.txt b/.agents/skills/skill-creator/LICENSE.txt
new file mode 100644
index 0000000..7a4a3ea
--- /dev/null
+++ b/.agents/skills/skill-creator/LICENSE.txt
@@ -0,0 +1,202 @@
+
+ Apache License
+ Version 2.0, January 2004
+ http://www.apache.org/licenses/
+
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+ 1. Definitions.
+
+ "License" shall mean the terms and conditions for use, reproduction,
+ and distribution as defined by Sections 1 through 9 of this document.
+
+ "Licensor" shall mean the copyright owner or entity authorized by
+ the copyright owner that is granting the License.
+
+ "Legal Entity" shall mean the union of the acting entity and all
+ other entities that control, are controlled by, or are under common
+ control with that entity. For the purposes of this definition,
+ "control" means (i) the power, direct or indirect, to cause the
+ direction or management of such entity, whether by contract or
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ outstanding shares, or (iii) beneficial ownership of such entity.
+
+ "You" (or "Your") shall mean an individual or Legal Entity
+ exercising permissions granted by this License.
+
+ "Source" form shall mean the preferred form for making modifications,
+ including but not limited to software source code, documentation
+ source, and configuration files.
+
+ "Object" form shall mean any form resulting from mechanical
+ transformation or translation of a Source form, including but
+ not limited to compiled object code, generated documentation,
+ and conversions to other media types.
+
+ "Work" shall mean the work of authorship, whether in Source or
+ Object form, made available under the License, as indicated by a
+ copyright notice that is included in or attached to the work
+ (an example is provided in the Appendix below).
+
+ "Derivative Works" shall mean any work, whether in Source or Object
+ form, that is based on (or derived from) the Work and for which the
+ editorial revisions, annotations, elaborations, or other modifications
+ represent, as a whole, an original work of authorship. For the purposes
+ of this License, Derivative Works shall not include works that remain
+ separable from, or merely link (or bind by name) to the interfaces of,
+ the Work and Derivative Works thereof.
+
+ "Contribution" shall mean any work of authorship, including
+ the original version of the Work and any modifications or additions
+ to that Work or Derivative Works thereof, that is intentionally
+ submitted to Licensor for inclusion in the Work by the copyright owner
+ or by an individual or Legal Entity authorized to submit on behalf of
+ the copyright owner. For the purposes of this definition, "submitted"
+ means any form of electronic, verbal, or written communication sent
+ to the Licensor or its representatives, including but not limited to
+ communication on electronic mailing lists, source code control systems,
+ and issue tracking systems that are managed by, or on behalf of, the
+ Licensor for the purpose of discussing and improving the Work, but
+ excluding communication that is conspicuously marked or otherwise
+ designated in writing by the copyright owner as "Not a Contribution."
+
+ "Contributor" shall mean Licensor and any individual or Legal Entity
+ on behalf of whom a Contribution has been received by Licensor and
+ subsequently incorporated within the Work.
+
+ 2. Grant of Copyright License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ copyright license to reproduce, prepare Derivative Works of,
+ publicly display, publicly perform, sublicense, and distribute the
+ Work and such Derivative Works in Source or Object form.
+
+ 3. Grant of Patent License. Subject to the terms and conditions of
+ this License, each Contributor hereby grants to You a perpetual,
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ (except as stated in this section) patent license to make, have made,
+ use, offer to sell, sell, import, and otherwise transfer the Work,
+ where such license applies only to those patent claims licensable
+ by such Contributor that are necessarily infringed by their
+ Contribution(s) alone or by combination of their Contribution(s)
+ with the Work to which such Contribution(s) was submitted. If You
+ institute patent litigation against any entity (including a
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
+ or a Contribution incorporated within the Work constitutes direct
+ or contributory patent infringement, then any patent licenses
+ granted to You under this License for that Work shall terminate
+ as of the date such litigation is filed.
+
+ 4. Redistribution. You may reproduce and distribute copies of the
+ Work or Derivative Works thereof in any medium, with or without
+ modifications, and in Source or Object form, provided that You
+ meet the following conditions:
+
+ (a) You must give any other recipients of the Work or
+ Derivative Works a copy of this License; and
+
+ (b) You must cause any modified files to carry prominent notices
+ stating that You changed the files; and
+
+ (c) You must retain, in the Source form of any Derivative Works
+ that You distribute, all copyright, patent, trademark, and
+ attribution notices from the Source form of the Work,
+ excluding those notices that do not pertain to any part of
+ the Derivative Works; and
+
+ (d) If the Work includes a "NOTICE" text file as part of its
+ distribution, then any Derivative Works that You distribute must
+ include a readable copy of the attribution notices contained
+ within such NOTICE file, excluding those notices that do not
+ pertain to any part of the Derivative Works, in at least one
+ of the following places: within a NOTICE text file distributed
+ as part of the Derivative Works; within the Source form or
+ documentation, if provided along with the Derivative Works; or,
+ within a display generated by the Derivative Works, if and
+ wherever such third-party notices normally appear. The contents
+ of the NOTICE file are for informational purposes only and
+ do not modify the License. You may add Your own attribution
+ notices within Derivative Works that You distribute, alongside
+ or as an addendum to the NOTICE text from the Work, provided
+ that such additional attribution notices cannot be construed
+ as modifying the License.
+
+ You may add Your own copyright statement to Your modifications and
+ may provide additional or different license terms and conditions
+ for use, reproduction, or distribution of Your modifications, or
+ for any such Derivative Works as a whole, provided Your use,
+ reproduction, and distribution of the Work otherwise complies with
+ the conditions stated in this License.
+
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
+ any Contribution intentionally submitted for inclusion in the Work
+ by You to the Licensor shall be under the terms and conditions of
+ this License, without any additional terms or conditions.
+ Notwithstanding the above, nothing herein shall supersede or modify
+ the terms of any separate license agreement you may have executed
+ with Licensor regarding such Contributions.
+
+ 6. Trademarks. This License does not grant permission to use the trade
+ names, trademarks, service marks, or product names of the Licensor,
+ except as required for reasonable and customary use in describing the
+ origin of the Work and reproducing the content of the NOTICE file.
+
+ 7. Disclaimer of Warranty. Unless required by applicable law or
+ agreed to in writing, Licensor provides the Work (and each
+ Contributor provides its Contributions) on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ implied, including, without limitation, any warranties or conditions
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ PARTICULAR PURPOSE. You are solely responsible for determining the
+ appropriateness of using or redistributing the Work and assume any
+ risks associated with Your exercise of permissions under this License.
+
+ 8. Limitation of Liability. In no event and under no legal theory,
+ whether in tort (including negligence), contract, or otherwise,
+ unless required by applicable law (such as deliberate and grossly
+ negligent acts) or agreed to in writing, shall any Contributor be
+ liable to You for damages, including any direct, indirect, special,
+ incidental, or consequential damages of any character arising as a
+ result of this License or out of the use or inability to use the
+ Work (including but not limited to damages for loss of goodwill,
+ work stoppage, computer failure or malfunction, or any and all
+ other commercial damages or losses), even if such Contributor
+ has been advised of the possibility of such damages.
+
+ 9. Accepting Warranty or Additional Liability. While redistributing
+ the Work or Derivative Works thereof, You may choose to offer,
+ and charge a fee for, acceptance of support, warranty, indemnity,
+ or other liability obligations and/or rights consistent with this
+ License. However, in accepting such obligations, You may act only
+ on Your own behalf and on Your sole responsibility, not on behalf
+ of any other Contributor, and only if You agree to indemnify,
+ defend, and hold each Contributor harmless for any liability
+ incurred by, or claims asserted against, such Contributor by reason
+ of your accepting any such warranty or additional liability.
+
+ END OF TERMS AND CONDITIONS
+
+ APPENDIX: How to apply the Apache License to your work.
+
+ To apply the Apache License to your work, attach the following
+ boilerplate notice, with the fields enclosed by brackets "[]"
+ replaced with your own identifying information. (Don't include
+ the brackets!) The text should be enclosed in the appropriate
+ comment syntax for the file format. We also recommend that a
+ file or class name and description of purpose be included on the
+ same "printed page" as the copyright notice for easier
+ identification within third-party archives.
+
+ Copyright [yyyy] [name of copyright owner]
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
\ No newline at end of file
diff --git a/.agents/skills/skill-creator/SKILL.md b/.agents/skills/skill-creator/SKILL.md
new file mode 100644
index 0000000..b7f8659
--- /dev/null
+++ b/.agents/skills/skill-creator/SKILL.md
@@ -0,0 +1,356 @@
+---
+name: skill-creator
+description: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
+license: Complete terms in LICENSE.txt
+---
+
+# Skill Creator
+
+This skill provides guidance for creating effective skills.
+
+## About Skills
+
+Skills are modular, self-contained packages that extend Claude's capabilities by providing
+specialized knowledge, workflows, and tools. Think of them as "onboarding guides" for specific
+domains or tasks—they transform Claude from a general-purpose agent into a specialized agent
+equipped with procedural knowledge that no model can fully possess.
+
+### What Skills Provide
+
+1. Specialized workflows - Multi-step procedures for specific domains
+2. Tool integrations - Instructions for working with specific file formats or APIs
+3. Domain expertise - Company-specific knowledge, schemas, business logic
+4. Bundled resources - Scripts, references, and assets for complex and repetitive tasks
+
+## Core Principles
+
+### Concise is Key
+
+The context window is a public good. Skills share the context window with everything else Claude needs: system prompt, conversation history, other Skills' metadata, and the actual user request.
+
+**Default assumption: Claude is already very smart.** Only add context Claude doesn't already have. Challenge each piece of information: "Does Claude really need this explanation?" and "Does this paragraph justify its token cost?"
+
+Prefer concise examples over verbose explanations.
+
+### Set Appropriate Degrees of Freedom
+
+Match the level of specificity to the task's fragility and variability:
+
+**High freedom (text-based instructions)**: Use when multiple approaches are valid, decisions depend on context, or heuristics guide the approach.
+
+**Medium freedom (pseudocode or scripts with parameters)**: Use when a preferred pattern exists, some variation is acceptable, or configuration affects behavior.
+
+**Low freedom (specific scripts, few parameters)**: Use when operations are fragile and error-prone, consistency is critical, or a specific sequence must be followed.
+
+Think of Claude as exploring a path: a narrow bridge with cliffs needs specific guardrails (low freedom), while an open field allows many routes (high freedom).
+
+### Anatomy of a Skill
+
+Every skill consists of a required SKILL.md file and optional bundled resources:
+
+```
+skill-name/
+├── SKILL.md (required)
+│ ├── YAML frontmatter metadata (required)
+│ │ ├── name: (required)
+│ │ └── description: (required)
+│ └── Markdown instructions (required)
+└── Bundled Resources (optional)
+ ├── scripts/ - Executable code (Python/Bash/etc.)
+ ├── references/ - Documentation intended to be loaded into context as needed
+ └── assets/ - Files used in output (templates, icons, fonts, etc.)
+```
+
+#### SKILL.md (required)
+
+Every SKILL.md consists of:
+
+- **Frontmatter** (YAML): Contains `name` and `description` fields. These are the only fields that Claude reads to determine when the skill gets used, thus it is very important to be clear and comprehensive in describing what the skill is, and when it should be used.
+- **Body** (Markdown): Instructions and guidance for using the skill. Only loaded AFTER the skill triggers (if at all).
+
+#### Bundled Resources (optional)
+
+##### Scripts (`scripts/`)
+
+Executable code (Python/Bash/etc.) for tasks that require deterministic reliability or are repeatedly rewritten.
+
+- **When to include**: When the same code is being rewritten repeatedly or deterministic reliability is needed
+- **Example**: `scripts/rotate_pdf.py` for PDF rotation tasks
+- **Benefits**: Token efficient, deterministic, may be executed without loading into context
+- **Note**: Scripts may still need to be read by Claude for patching or environment-specific adjustments
+
+##### References (`references/`)
+
+Documentation and reference material intended to be loaded as needed into context to inform Claude's process and thinking.
+
+- **When to include**: For documentation that Claude should reference while working
+- **Examples**: `references/finance.md` for financial schemas, `references/mnda.md` for company NDA template, `references/policies.md` for company policies, `references/api_docs.md` for API specifications
+- **Use cases**: Database schemas, API documentation, domain knowledge, company policies, detailed workflow guides
+- **Benefits**: Keeps SKILL.md lean, loaded only when Claude determines it's needed
+- **Best practice**: If files are large (>10k words), include grep search patterns in SKILL.md
+- **Avoid duplication**: Information should live in either SKILL.md or references files, not both. Prefer references files for detailed information unless it's truly core to the skill—this keeps SKILL.md lean while making information discoverable without hogging the context window. Keep only essential procedural instructions and workflow guidance in SKILL.md; move detailed reference material, schemas, and examples to references files.
+
+##### Assets (`assets/`)
+
+Files not intended to be loaded into context, but rather used within the output Claude produces.
+
+- **When to include**: When the skill needs files that will be used in the final output
+- **Examples**: `assets/logo.png` for brand assets, `assets/slides.pptx` for PowerPoint templates, `assets/frontend-template/` for HTML/React boilerplate, `assets/font.ttf` for typography
+- **Use cases**: Templates, images, icons, boilerplate code, fonts, sample documents that get copied or modified
+- **Benefits**: Separates output resources from documentation, enables Claude to use files without loading them into context
+
+#### What to Not Include in a Skill
+
+A skill should only contain essential files that directly support its functionality. Do NOT create extraneous documentation or auxiliary files, including:
+
+- README.md
+- INSTALLATION_GUIDE.md
+- QUICK_REFERENCE.md
+- CHANGELOG.md
+- etc.
+
+The skill should only contain the information needed for an AI agent to do the job at hand. It should not contain auxilary context about the process that went into creating it, setup and testing procedures, user-facing documentation, etc. Creating additional documentation files just adds clutter and confusion.
+
+### Progressive Disclosure Design Principle
+
+Skills use a three-level loading system to manage context efficiently:
+
+1. **Metadata (name + description)** - Always in context (~100 words)
+2. **SKILL.md body** - When skill triggers (<5k words)
+3. **Bundled resources** - As needed by Claude (Unlimited because scripts can be executed without reading into context window)
+
+#### Progressive Disclosure Patterns
+
+Keep SKILL.md body to the essentials and under 500 lines to minimize context bloat. Split content into separate files when approaching this limit. When splitting out content into other files, it is very important to reference them from SKILL.md and describe clearly when to read them, to ensure the reader of the skill knows they exist and when to use them.
+
+**Key principle:** When a skill supports multiple variations, frameworks, or options, keep only the core workflow and selection guidance in SKILL.md. Move variant-specific details (patterns, examples, configuration) into separate reference files.
+
+**Pattern 1: High-level guide with references**
+
+```markdown
+# PDF Processing
+
+## Quick start
+
+Extract text with pdfplumber:
+[code example]
+
+## Advanced features
+
+- **Form filling**: See [FORMS.md](FORMS.md) for complete guide
+- **API reference**: See [REFERENCE.md](REFERENCE.md) for all methods
+- **Examples**: See [EXAMPLES.md](EXAMPLES.md) for common patterns
+```
+
+Claude loads FORMS.md, REFERENCE.md, or EXAMPLES.md only when needed.
+
+**Pattern 2: Domain-specific organization**
+
+For Skills with multiple domains, organize content by domain to avoid loading irrelevant context:
+
+```
+bigquery-skill/
+├── SKILL.md (overview and navigation)
+└── reference/
+ ├── finance.md (revenue, billing metrics)
+ ├── sales.md (opportunities, pipeline)
+ ├── product.md (API usage, features)
+ └── marketing.md (campaigns, attribution)
+```
+
+When a user asks about sales metrics, Claude only reads sales.md.
+
+Similarly, for skills supporting multiple frameworks or variants, organize by variant:
+
+```
+cloud-deploy/
+├── SKILL.md (workflow + provider selection)
+└── references/
+ ├── aws.md (AWS deployment patterns)
+ ├── gcp.md (GCP deployment patterns)
+ └── azure.md (Azure deployment patterns)
+```
+
+When the user chooses AWS, Claude only reads aws.md.
+
+**Pattern 3: Conditional details**
+
+Show basic content, link to advanced content:
+
+```markdown
+# DOCX Processing
+
+## Creating documents
+
+Use docx-js for new documents. See [DOCX-JS.md](DOCX-JS.md).
+
+## Editing documents
+
+For simple edits, modify the XML directly.
+
+**For tracked changes**: See [REDLINING.md](REDLINING.md)
+**For OOXML details**: See [OOXML.md](OOXML.md)
+```
+
+Claude reads REDLINING.md or OOXML.md only when the user needs those features.
+
+**Important guidelines:**
+
+- **Avoid deeply nested references** - Keep references one level deep from SKILL.md. All reference files should link directly from SKILL.md.
+- **Structure longer reference files** - For files longer than 100 lines, include a table of contents at the top so Claude can see the full scope when previewing.
+
+## Skill Creation Process
+
+Skill creation involves these steps:
+
+1. Understand the skill with concrete examples
+2. Plan reusable skill contents (scripts, references, assets)
+3. Initialize the skill (run init_skill.py)
+4. Edit the skill (implement resources and write SKILL.md)
+5. Package the skill (run package_skill.py)
+6. Iterate based on real usage
+
+Follow these steps in order, skipping only if there is a clear reason why they are not applicable.
+
+### Step 1: Understanding the Skill with Concrete Examples
+
+Skip this step only when the skill's usage patterns are already clearly understood. It remains valuable even when working with an existing skill.
+
+To create an effective skill, clearly understand concrete examples of how the skill will be used. This understanding can come from either direct user examples or generated examples that are validated with user feedback.
+
+For example, when building an image-editor skill, relevant questions include:
+
+- "What functionality should the image-editor skill support? Editing, rotating, anything else?"
+- "Can you give some examples of how this skill would be used?"
+- "I can imagine users asking for things like 'Remove the red-eye from this image' or 'Rotate this image'. Are there other ways you imagine this skill being used?"
+- "What would a user say that should trigger this skill?"
+
+To avoid overwhelming users, avoid asking too many questions in a single message. Start with the most important questions and follow up as needed for better effectiveness.
+
+Conclude this step when there is a clear sense of the functionality the skill should support.
+
+### Step 2: Planning the Reusable Skill Contents
+
+To turn concrete examples into an effective skill, analyze each example by:
+
+1. Considering how to execute on the example from scratch
+2. Identifying what scripts, references, and assets would be helpful when executing these workflows repeatedly
+
+Example: When building a `pdf-editor` skill to handle queries like "Help me rotate this PDF," the analysis shows:
+
+1. Rotating a PDF requires re-writing the same code each time
+2. A `scripts/rotate_pdf.py` script would be helpful to store in the skill
+
+Example: When designing a `frontend-webapp-builder` skill for queries like "Build me a todo app" or "Build me a dashboard to track my steps," the analysis shows:
+
+1. Writing a frontend webapp requires the same boilerplate HTML/React each time
+2. An `assets/hello-world/` template containing the boilerplate HTML/React project files would be helpful to store in the skill
+
+Example: When building a `big-query` skill to handle queries like "How many users have logged in today?" the analysis shows:
+
+1. Querying BigQuery requires re-discovering the table schemas and relationships each time
+2. A `references/schema.md` file documenting the table schemas would be helpful to store in the skill
+
+To establish the skill's contents, analyze each concrete example to create a list of the reusable resources to include: scripts, references, and assets.
+
+### Step 3: Initializing the Skill
+
+At this point, it is time to actually create the skill.
+
+Skip this step only if the skill being developed already exists, and iteration or packaging is needed. In this case, continue to the next step.
+
+When creating a new skill from scratch, always run the `init_skill.py` script. The script conveniently generates a new template skill directory that automatically includes everything a skill requires, making the skill creation process much more efficient and reliable.
+
+Usage:
+
+```bash
+scripts/init_skill.py --path
+```
+
+The script:
+
+- Creates the skill directory at the specified path
+- Generates a SKILL.md template with proper frontmatter and TODO placeholders
+- Creates example resource directories: `scripts/`, `references/`, and `assets/`
+- Adds example files in each directory that can be customized or deleted
+
+After initialization, customize or remove the generated SKILL.md and example files as needed.
+
+### Step 4: Edit the Skill
+
+When editing the (newly-generated or existing) skill, remember that the skill is being created for another instance of Claude to use. Include information that would be beneficial and non-obvious to Claude. Consider what procedural knowledge, domain-specific details, or reusable assets would help another Claude instance execute these tasks more effectively.
+
+#### Learn Proven Design Patterns
+
+Consult these helpful guides based on your skill's needs:
+
+- **Multi-step processes**: See references/workflows.md for sequential workflows and conditional logic
+- **Specific output formats or quality standards**: See references/output-patterns.md for template and example patterns
+
+These files contain established best practices for effective skill design.
+
+#### Start with Reusable Skill Contents
+
+To begin implementation, start with the reusable resources identified above: `scripts/`, `references/`, and `assets/` files. Note that this step may require user input. For example, when implementing a `brand-guidelines` skill, the user may need to provide brand assets or templates to store in `assets/`, or documentation to store in `references/`.
+
+Added scripts must be tested by actually running them to ensure there are no bugs and that the output matches what is expected. If there are many similar scripts, only a representative sample needs to be tested to ensure confidence that they all work while balancing time to completion.
+
+Any example files and directories not needed for the skill should be deleted. The initialization script creates example files in `scripts/`, `references/`, and `assets/` to demonstrate structure, but most skills won't need all of them.
+
+#### Update SKILL.md
+
+**Writing Guidelines:** Always use imperative/infinitive form.
+
+##### Frontmatter
+
+Write the YAML frontmatter with `name` and `description`:
+
+- `name`: The skill name
+- `description`: This is the primary triggering mechanism for your skill, and helps Claude understand when to use the skill.
+ - Include both what the Skill does and specific triggers/contexts for when to use it.
+ - Include all "when to use" information here - Not in the body. The body is only loaded after triggering, so "When to Use This Skill" sections in the body are not helpful to Claude.
+ - Example description for a `docx` skill: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. Use when Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks"
+
+Do not include any other fields in YAML frontmatter.
+
+##### Body
+
+Write instructions for using the skill and its bundled resources.
+
+### Step 5: Packaging a Skill
+
+Once development of the skill is complete, it must be packaged into a distributable .skill file that gets shared with the user. The packaging process automatically validates the skill first to ensure it meets all requirements:
+
+```bash
+scripts/package_skill.py
+```
+
+Optional output directory specification:
+
+```bash
+scripts/package_skill.py ./dist
+```
+
+The packaging script will:
+
+1. **Validate** the skill automatically, checking:
+
+ - YAML frontmatter format and required fields
+ - Skill naming conventions and directory structure
+ - Description completeness and quality
+ - File organization and resource references
+
+2. **Package** the skill if validation passes, creating a .skill file named after the skill (e.g., `my-skill.skill`) that includes all files and maintains the proper directory structure for distribution. The .skill file is a zip file with a .skill extension.
+
+If validation fails, the script will report the errors and exit without creating a package. Fix any validation errors and run the packaging command again.
+
+### Step 6: Iterate
+
+After testing the skill, users may request improvements. Often this happens right after using the skill, with fresh context of how the skill performed.
+
+**Iteration workflow:**
+
+1. Use the skill on real tasks
+2. Notice struggles or inefficiencies
+3. Identify how SKILL.md or bundled resources should be updated
+4. Implement changes and test again
diff --git a/.agents/skills/skill-creator/references/output-patterns.md b/.agents/skills/skill-creator/references/output-patterns.md
new file mode 100644
index 0000000..073ddda
--- /dev/null
+++ b/.agents/skills/skill-creator/references/output-patterns.md
@@ -0,0 +1,82 @@
+# Output Patterns
+
+Use these patterns when skills need to produce consistent, high-quality output.
+
+## Template Pattern
+
+Provide templates for output format. Match the level of strictness to your needs.
+
+**For strict requirements (like API responses or data formats):**
+
+```markdown
+## Report structure
+
+ALWAYS use this exact template structure:
+
+# [Analysis Title]
+
+## Executive summary
+[One-paragraph overview of key findings]
+
+## Key findings
+- Finding 1 with supporting data
+- Finding 2 with supporting data
+- Finding 3 with supporting data
+
+## Recommendations
+1. Specific actionable recommendation
+2. Specific actionable recommendation
+```
+
+**For flexible guidance (when adaptation is useful):**
+
+```markdown
+## Report structure
+
+Here is a sensible default format, but use your best judgment:
+
+# [Analysis Title]
+
+## Executive summary
+[Overview]
+
+## Key findings
+[Adapt sections based on what you discover]
+
+## Recommendations
+[Tailor to the specific context]
+
+Adjust sections as needed for the specific analysis type.
+```
+
+## Examples Pattern
+
+For skills where output quality depends on seeing examples, provide input/output pairs:
+
+```markdown
+## Commit message format
+
+Generate commit messages following these examples:
+
+**Example 1:**
+Input: Added user authentication with JWT tokens
+Output:
+```
+feat(auth): implement JWT-based authentication
+
+Add login endpoint and token validation middleware
+```
+
+**Example 2:**
+Input: Fixed bug where dates displayed incorrectly in reports
+Output:
+```
+fix(reports): correct date formatting in timezone conversion
+
+Use UTC timestamps consistently across report generation
+```
+
+Follow this style: type(scope): brief description, then detailed explanation.
+```
+
+Examples help Claude understand the desired style and level of detail more clearly than descriptions alone.
diff --git a/.agents/skills/skill-creator/references/workflows.md b/.agents/skills/skill-creator/references/workflows.md
new file mode 100644
index 0000000..a350c3c
--- /dev/null
+++ b/.agents/skills/skill-creator/references/workflows.md
@@ -0,0 +1,28 @@
+# Workflow Patterns
+
+## Sequential Workflows
+
+For complex tasks, break operations into clear, sequential steps. It is often helpful to give Claude an overview of the process towards the beginning of SKILL.md:
+
+```markdown
+Filling a PDF form involves these steps:
+
+1. Analyze the form (run analyze_form.py)
+2. Create field mapping (edit fields.json)
+3. Validate mapping (run validate_fields.py)
+4. Fill the form (run fill_form.py)
+5. Verify output (run verify_output.py)
+```
+
+## Conditional Workflows
+
+For tasks with branching logic, guide Claude through decision points:
+
+```markdown
+1. Determine the modification type:
+ **Creating new content?** → Follow "Creation workflow" below
+ **Editing existing content?** → Follow "Editing workflow" below
+
+2. Creation workflow: [steps]
+3. Editing workflow: [steps]
+```
\ No newline at end of file
diff --git a/.agents/skills/skill-creator/scripts/init_skill.py b/.agents/skills/skill-creator/scripts/init_skill.py
new file mode 100755
index 0000000..3697ff6
--- /dev/null
+++ b/.agents/skills/skill-creator/scripts/init_skill.py
@@ -0,0 +1,355 @@
+#!/usr/bin/env python3
+"""
+Skill Initializer - Creates a new skill from template
+
+Usage:
+ init_skill.py --path
+
+Examples:
+ init_skill.py my-new-skill --path skills/public
+ init_skill.py my-api-helper --path skills/private
+ init_skill.py custom-skill --path /custom/location
+"""
+
+import re
+import sys
+from pathlib import Path
+
+# Validation constants
+MAX_SKILL_NAME_LENGTH = 40
+SKILL_NAME_PATTERN = re.compile(r'^[a-z][a-z0-9]*(-[a-z0-9]+)*$')
+
+
+def validate_skill_name(skill_name: str) -> tuple[bool, str]:
+ """
+ Validate that the skill name meets all requirements.
+
+ Requirements:
+ - Hyphen-case identifier (e.g., 'data-analyzer')
+ - Lowercase letters, digits, and hyphens only
+ - Must start with a letter
+ - No consecutive hyphens, no leading/trailing hyphens
+ - Max 40 characters
+ - No path traversal sequences
+
+ Args:
+ skill_name: The skill name to validate
+
+ Returns:
+ Tuple of (is_valid, error_message)
+ """
+ # Check for empty name
+ if not skill_name:
+ return False, "Skill name cannot be empty"
+
+ # Check for path traversal attempts
+ if '..' in skill_name or '/' in skill_name or '\\' in skill_name:
+ return False, "Skill name cannot contain path separators or '..' sequences"
+
+ # Check length
+ if len(skill_name) > MAX_SKILL_NAME_LENGTH:
+ return False, f"Skill name exceeds maximum length of {MAX_SKILL_NAME_LENGTH} characters"
+
+ # Check pattern (lowercase letters, digits, hyphens in hyphen-case format)
+ if not SKILL_NAME_PATTERN.match(skill_name):
+ return False, (
+ "Skill name must be in hyphen-case format: "
+ "start with a lowercase letter, contain only lowercase letters, digits, and hyphens, "
+ "with no consecutive hyphens or trailing hyphens (e.g., 'my-skill', 'data-analyzer-2')"
+ )
+
+ return True, ""
+
+
+SKILL_TEMPLATE = """---
+name: {skill_name}
+description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.]
+---
+
+# {skill_title}
+
+## Overview
+
+[TODO: 1-2 sentences explaining what this skill enables]
+
+## Structuring This Skill
+
+[TODO: Choose the structure that best fits this skill's purpose. Common patterns:
+
+**1. Workflow-Based** (best for sequential processes)
+- Works well when there are clear step-by-step procedures
+- Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → "Editing"
+- Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2...
+
+**2. Task-Based** (best for tool collections)
+- Works well when the skill offers different operations/capabilities
+- Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract Text"
+- Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 2...
+
+**3. Reference/Guidelines** (best for standards or specifications)
+- Works well for brand guidelines, coding standards, or requirements
+- Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → "Features"
+- Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage...
+
+**4. Capabilities-Based** (best for integrated systems)
+- Works well when the skill provides multiple interrelated features
+- Example: Product Management with "Core Capabilities" → numbered capability list
+- Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. Feature...
+
+Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations).
+
+Delete this entire "Structuring This Skill" section when done - it's just guidance.]
+
+## [TODO: Replace with the first main section based on chosen structure]
+
+[TODO: Add content here. See examples in existing skills:
+- Code samples for technical skills
+- Decision trees for complex workflows
+- Concrete examples with realistic user requests
+- References to scripts/templates/references as needed]
+
+## Resources
+
+This skill includes example resource directories that demonstrate how to organize different types of bundled resources:
+
+### scripts/
+Executable code (Python/Bash/etc.) that can be run directly to perform specific operations.
+
+**Examples from other skills:**
+- PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities for PDF manipulation
+- DOCX skill: `document.py`, `utilities.py` - Python modules for document processing
+
+**Appropriate for:** Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations.
+
+**Note:** Scripts may be executed without loading into context, but can still be read by Claude for patching or environment adjustments.
+
+### references/
+Documentation and reference material intended to be loaded into context to inform Claude's process and thinking.
+
+**Examples from other skills:**
+- Product management: `communication.md`, `context_building.md` - detailed workflow guides
+- BigQuery: API reference documentation and query examples
+- Finance: Schema documentation, company policies
+
+**Appropriate for:** In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Claude should reference while working.
+
+### assets/
+Files not intended to be loaded into context, but rather used within the output Claude produces.
+
+**Examples from other skills:**
+- Brand styling: PowerPoint template files (.pptx), logo files
+- Frontend builder: HTML/React boilerplate project directories
+- Typography: Font files (.ttf, .woff2)
+
+**Appropriate for:** Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output.
+
+---
+
+**Any unneeded directories can be deleted.** Not every skill requires all three types of resources.
+"""
+
+EXAMPLE_SCRIPT = '''#!/usr/bin/env python3
+"""
+Example helper script for {skill_name}
+
+This is a placeholder script that can be executed directly.
+Replace with actual implementation or delete if not needed.
+
+Example real scripts from other skills:
+- pdf/scripts/fill_fillable_fields.py - Fills PDF form fields
+- pdf/scripts/convert_pdf_to_images.py - Converts PDF pages to images
+"""
+
+def main():
+ print("This is an example script for {skill_name}")
+ # TODO: Add actual script logic here
+ # This could be data processing, file conversion, API calls, etc.
+
+if __name__ == "__main__":
+ main()
+'''
+
+EXAMPLE_REFERENCE = """# Reference Documentation for {skill_title}
+
+This is a placeholder for detailed reference documentation.
+Replace with actual reference content or delete if not needed.
+
+Example real reference docs from other skills:
+- product-management/references/communication.md - Comprehensive guide for status updates
+- product-management/references/context_building.md - Deep-dive on gathering context
+- bigquery/references/ - API references and query examples
+
+## When Reference Docs Are Useful
+
+Reference docs are ideal for:
+- Comprehensive API documentation
+- Detailed workflow guides
+- Complex multi-step processes
+- Information too lengthy for main SKILL.md
+- Content that's only needed for specific use cases
+
+## Structure Suggestions
+
+### API Reference Example
+- Overview
+- Authentication
+- Endpoints with examples
+- Error codes
+- Rate limits
+
+### Workflow Guide Example
+- Prerequisites
+- Step-by-step instructions
+- Common patterns
+- Troubleshooting
+- Best practices
+"""
+
+EXAMPLE_ASSET = """# Example Asset File
+
+This placeholder represents where asset files would be stored.
+Replace with actual asset files (templates, images, fonts, etc.) or delete if not needed.
+
+Asset files are NOT intended to be loaded into context, but rather used within
+the output Claude produces.
+
+Example asset files from other skills:
+- Brand guidelines: logo.png, slides_template.pptx
+- Frontend builder: hello-world/ directory with HTML/React boilerplate
+- Typography: custom-font.ttf, font-family.woff2
+- Data: sample_data.csv, test_dataset.json
+
+## Common Asset Types
+
+- Templates: .pptx, .docx, boilerplate directories
+- Images: .png, .jpg, .svg, .gif
+- Fonts: .ttf, .otf, .woff, .woff2
+- Boilerplate code: Project directories, starter files
+- Icons: .ico, .svg
+- Data files: .csv, .json, .xml, .yaml
+
+Note: This is a text placeholder. Actual assets can be any file type.
+"""
+
+
+def title_case_skill_name(skill_name):
+ """Convert hyphenated skill name to Title Case for display."""
+ return ' '.join(word.capitalize() for word in skill_name.split('-'))
+
+
+def init_skill(skill_name, path):
+ """
+ Initialize a new skill directory with template SKILL.md.
+
+ Args:
+ skill_name: Name of the skill
+ path: Path where the skill directory should be created
+
+ Returns:
+ Path to created skill directory, or None if error
+ """
+ # Determine skill directory path
+ skill_dir = Path(path).resolve() / skill_name
+
+ # Check if directory already exists
+ if skill_dir.exists():
+ print(f"❌ Error: Skill directory already exists: {skill_dir}")
+ return None
+
+ # Create skill directory
+ try:
+ skill_dir.mkdir(parents=True, exist_ok=False)
+ print(f"✅ Created skill directory: {skill_dir}")
+ except Exception as e:
+ print(f"❌ Error creating directory: {e}")
+ return None
+
+ # Create SKILL.md from template
+ skill_title = title_case_skill_name(skill_name)
+ skill_content = SKILL_TEMPLATE.format(
+ skill_name=skill_name,
+ skill_title=skill_title
+ )
+
+ skill_md_path = skill_dir / 'SKILL.md'
+ try:
+ skill_md_path.write_text(skill_content)
+ print("✅ Created SKILL.md")
+ except Exception as e:
+ print(f"❌ Error creating SKILL.md: {e}")
+ return None
+
+ # Create resource directories with example files
+ try:
+ # Create scripts/ directory with example script
+ scripts_dir = skill_dir / 'scripts'
+ scripts_dir.mkdir(exist_ok=True)
+ example_script = scripts_dir / 'example.py'
+ example_script.write_text(EXAMPLE_SCRIPT.format(skill_name=skill_name))
+ example_script.chmod(0o755)
+ print("✅ Created scripts/example.py")
+
+ # Create references/ directory with example reference doc
+ references_dir = skill_dir / 'references'
+ references_dir.mkdir(exist_ok=True)
+ example_reference = references_dir / 'api_reference.md'
+ example_reference.write_text(EXAMPLE_REFERENCE.format(skill_title=skill_title))
+ print("✅ Created references/api_reference.md")
+
+ # Create assets/ directory with example asset placeholder
+ assets_dir = skill_dir / 'assets'
+ assets_dir.mkdir(exist_ok=True)
+ example_asset = assets_dir / 'example_asset.txt'
+ example_asset.write_text(EXAMPLE_ASSET)
+ print("✅ Created assets/example_asset.txt")
+ except Exception as e:
+ print(f"❌ Error creating resource directories: {e}")
+ return None
+
+ # Print next steps
+ print(f"\n✅ Skill '{skill_name}' initialized successfully at {skill_dir}")
+ print("\nNext steps:")
+ print("1. Edit SKILL.md to complete the TODO items and update the description")
+ print("2. Customize or delete the example files in scripts/, references/, and assets/")
+ print("3. Run the validator when ready to check the skill structure")
+
+ return skill_dir
+
+
+def main():
+ if len(sys.argv) < 4 or sys.argv[2] != '--path':
+ print("Usage: init_skill.py --path ")
+ print("\nSkill name requirements:")
+ print(" - Hyphen-case identifier (e.g., 'data-analyzer')")
+ print(" - Lowercase letters, digits, and hyphens only")
+ print(" - Max 40 characters")
+ print(" - Must match directory name exactly")
+ print("\nExamples:")
+ print(" init_skill.py my-new-skill --path skills/public")
+ print(" init_skill.py my-api-helper --path skills/private")
+ print(" init_skill.py custom-skill --path /custom/location")
+ sys.exit(1)
+
+ skill_name = sys.argv[1]
+ path = sys.argv[3]
+
+ # Validate skill name before proceeding
+ is_valid, error_message = validate_skill_name(skill_name)
+ if not is_valid:
+ print(f"❌ Invalid skill name '{skill_name}': {error_message}")
+ sys.exit(1)
+
+ print(f"🚀 Initializing skill: {skill_name}")
+ print(f" Location: {path}")
+ print()
+
+ result = init_skill(skill_name, path)
+
+ if result:
+ sys.exit(0)
+ else:
+ sys.exit(1)
+
+
+if __name__ == "__main__":
+ main()
diff --git a/.agents/skills/skill-creator/scripts/package_skill.py b/.agents/skills/skill-creator/scripts/package_skill.py
new file mode 100755
index 0000000..5cd36cb
--- /dev/null
+++ b/.agents/skills/skill-creator/scripts/package_skill.py
@@ -0,0 +1,110 @@
+#!/usr/bin/env python3
+"""
+Skill Packager - Creates a distributable .skill file of a skill folder
+
+Usage:
+ python utils/package_skill.py [output-directory]
+
+Example:
+ python utils/package_skill.py skills/public/my-skill
+ python utils/package_skill.py skills/public/my-skill ./dist
+"""
+
+import sys
+import zipfile
+from pathlib import Path
+from quick_validate import validate_skill
+
+
+def package_skill(skill_path, output_dir=None):
+ """
+ Package a skill folder into a .skill file.
+
+ Args:
+ skill_path: Path to the skill folder
+ output_dir: Optional output directory for the .skill file (defaults to current directory)
+
+ Returns:
+ Path to the created .skill file, or None if error
+ """
+ skill_path = Path(skill_path).resolve()
+
+ # Validate skill folder exists
+ if not skill_path.exists():
+ print(f"❌ Error: Skill folder not found: {skill_path}")
+ return None
+
+ if not skill_path.is_dir():
+ print(f"❌ Error: Path is not a directory: {skill_path}")
+ return None
+
+ # Validate SKILL.md exists
+ skill_md = skill_path / "SKILL.md"
+ if not skill_md.exists():
+ print(f"❌ Error: SKILL.md not found in {skill_path}")
+ return None
+
+ # Run validation before packaging
+ print("🔍 Validating skill...")
+ valid, message = validate_skill(skill_path)
+ if not valid:
+ print(f"❌ Validation failed: {message}")
+ print(" Please fix the validation errors before packaging.")
+ return None
+ print(f"✅ {message}\n")
+
+ # Determine output location
+ skill_name = skill_path.name
+ if output_dir:
+ output_path = Path(output_dir).resolve()
+ output_path.mkdir(parents=True, exist_ok=True)
+ else:
+ output_path = Path.cwd()
+
+ skill_filename = output_path / f"{skill_name}.skill"
+
+ # Create the .skill file (zip format)
+ try:
+ with zipfile.ZipFile(skill_filename, 'w', zipfile.ZIP_DEFLATED) as zipf:
+ # Walk through the skill directory
+ for file_path in skill_path.rglob('*'):
+ if file_path.is_file():
+ # Calculate the relative path within the zip
+ arcname = file_path.relative_to(skill_path.parent)
+ zipf.write(file_path, arcname)
+ print(f" Added: {arcname}")
+
+ print(f"\n✅ Successfully packaged skill to: {skill_filename}")
+ return skill_filename
+
+ except Exception as e:
+ print(f"❌ Error creating .skill file: {e}")
+ return None
+
+
+def main():
+ if len(sys.argv) < 2:
+ print("Usage: python utils/package_skill.py [output-directory]")
+ print("\nExample:")
+ print(" python utils/package_skill.py skills/public/my-skill")
+ print(" python utils/package_skill.py skills/public/my-skill ./dist")
+ sys.exit(1)
+
+ skill_path = sys.argv[1]
+ output_dir = sys.argv[2] if len(sys.argv) > 2 else None
+
+ print(f"📦 Packaging skill: {skill_path}")
+ if output_dir:
+ print(f" Output directory: {output_dir}")
+ print()
+
+ result = package_skill(skill_path, output_dir)
+
+ if result:
+ sys.exit(0)
+ else:
+ sys.exit(1)
+
+
+if __name__ == "__main__":
+ main()
diff --git a/.agents/skills/skill-creator/scripts/quick_validate.py b/.agents/skills/skill-creator/scripts/quick_validate.py
new file mode 100755
index 0000000..a3b50a5
--- /dev/null
+++ b/.agents/skills/skill-creator/scripts/quick_validate.py
@@ -0,0 +1,97 @@
+#!/usr/bin/env python3
+"""
+Quick validation script for skills - minimal version
+"""
+
+import sys
+import os
+import re
+import yaml
+from pathlib import Path
+
+def validate_skill(skill_path):
+ """Basic validation of a skill"""
+ skill_path = Path(skill_path)
+
+ # Check SKILL.md exists
+ skill_md = skill_path / 'SKILL.md'
+ if not skill_md.exists():
+ return False, "SKILL.md not found"
+
+ # Read and validate frontmatter
+ content = skill_md.read_text()
+ if not content.startswith('---'):
+ return False, "No YAML frontmatter found"
+
+ # Extract frontmatter
+ match = re.match(r'^---\n(.*?)\n---', content, re.DOTALL)
+ if not match:
+ return False, "Invalid frontmatter format"
+
+ frontmatter_text = match.group(1)
+
+ # Parse YAML frontmatter
+ try:
+ frontmatter = yaml.safe_load(frontmatter_text)
+ if not isinstance(frontmatter, dict):
+ return False, "Frontmatter must be a YAML dictionary"
+ except yaml.YAMLError as e:
+ return False, f"Invalid YAML in frontmatter: {e}"
+
+ # Define allowed properties
+ ALLOWED_PROPERTIES = {'name', 'description', 'license', 'allowed-tools', 'metadata'}
+
+ # Check for unexpected properties (excluding nested keys under metadata)
+ unexpected_keys = set(frontmatter.keys()) - ALLOWED_PROPERTIES
+ if unexpected_keys:
+ return False, (
+ f"Unexpected key(s) in SKILL.md frontmatter: {', '.join(sorted(unexpected_keys))}. "
+ f"Allowed properties are: {', '.join(sorted(ALLOWED_PROPERTIES))}"
+ )
+
+ # Check required fields
+ if 'name' not in frontmatter:
+ return False, "Missing 'name' in frontmatter"
+ if 'description' not in frontmatter:
+ return False, "Missing 'description' in frontmatter"
+
+ # Extract name for validation
+ name = frontmatter.get('name', '')
+ if not isinstance(name, str):
+ return False, f"Name must be a string, got {type(name).__name__}"
+ name = name.strip()
+ if not name:
+ return False, "Name cannot be empty"
+ # Check naming convention (hyphen-case: lowercase with hyphens)
+ if not re.match(r'^[a-z0-9-]+$', name):
+ return False, f"Name '{name}' should be hyphen-case (lowercase letters, digits, and hyphens only)"
+ if name.startswith('-') or name.endswith('-') or '--' in name:
+ return False, f"Name '{name}' cannot start/end with hyphen or contain consecutive hyphens"
+ # Check name length (max 64 characters per spec)
+ if len(name) > 64:
+ return False, f"Name is too long ({len(name)} characters). Maximum is 64 characters."
+
+ # Extract and validate description
+ description = frontmatter.get('description', '')
+ if not isinstance(description, str):
+ return False, f"Description must be a string, got {type(description).__name__}"
+ description = description.strip()
+ if not description:
+ return False, "Description cannot be empty"
+ # Check for angle brackets
+ if '<' in description or '>' in description:
+ return False, "Description cannot contain angle brackets (< or >)"
+ # Check description length (max 1024 characters per spec)
+ if len(description) > 1024:
+ return False, f"Description is too long ({len(description)} characters). Maximum is 1024 characters."
+
+ return True, "Skill is valid!"
+
+if __name__ == "__main__":
+ if len(sys.argv) != 2:
+ print("Usage: python quick_validate.py ")
+ sys.exit(1)
+
+ valid, message = validate_skill(sys.argv[1])
+ print(message)
+ sys.exit(0 if valid else 1)
\ No newline at end of file
diff --git a/.agents/skills/sync-agent-skills/SKILL.md b/.agents/skills/sync-agent-skills/SKILL.md
new file mode 100644
index 0000000..97b2f6d
--- /dev/null
+++ b/.agents/skills/sync-agent-skills/SKILL.md
@@ -0,0 +1,50 @@
+---
+name: sync-agent-skills
+description: Sync skills from .agents/skills/ to tool-specific directories (.cursor/, .claude/, .codex/). Use after manually adding skills to .agents/skills/ or when symlinks are missing.
+---
+
+# Sync Agent Skills
+
+Ensures all skills in `.agents/skills/` have symlinks in tool-specific directories.
+
+## When to Use
+
+Run the sync script after:
+- Manually adding a new skill to `.agents/skills/`
+- Cloning the repo (symlinks may not be tracked in git)
+- Noticing a skill isn't being picked up by a tool
+
+## Quick Sync
+
+```bash
+./scripts/sync-skills.sh
+```
+
+Or from project root:
+
+```bash
+./.agents/skills/sync-agent-skills/scripts/sync-skills.sh
+```
+
+## What It Does
+
+1. Creates tool directories if missing (`.cursor/skills/`, `.claude/skills/`, `.codex/skills/`)
+2. Creates symlinks from each tool directory to `.agents/skills/`
+3. Removes broken symlinks (skills that were deleted)
+4. Reports what was created/removed
+
+## Target Directories
+
+| Directory | Tool |
+|-----------|------|
+| `.cursor/skills/` | Cursor |
+| `.claude/skills/` | Claude Code |
+| `.codex/skills/` | OpenAI Codex |
+
+## Adding New Tool Directories
+
+Edit `scripts/sync-skills.sh` and add to the `TOOL_DIRS` array:
+
+```bash
+TOOL_DIRS=(".cursor/skills" ".claude/skills" ".codex/skills" ".your-tool/skills")
+```
diff --git a/.agents/skills/sync-agent-skills/scripts/sync-skills.sh b/.agents/skills/sync-agent-skills/scripts/sync-skills.sh
new file mode 100755
index 0000000..b0315d3
--- /dev/null
+++ b/.agents/skills/sync-agent-skills/scripts/sync-skills.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+# Sync skills from .agents/skills/ to tool-specific directories
+# Run from project root: ./.agents/skills/sync-agent-skills/scripts/sync-skills.sh
+
+set -e
+
+# Find project root (directory containing .agents/)
+find_project_root() {
+ local dir="$PWD"
+ while [[ "$dir" != "/" ]]; do
+ if [[ -d "$dir/.agents/skills" ]]; then
+ echo "$dir"
+ return 0
+ fi
+ dir="$(dirname "$dir")"
+ done
+ echo "Error: Could not find .agents/skills/ directory" >&2
+ exit 1
+}
+
+PROJECT_ROOT=$(find_project_root)
+cd "$PROJECT_ROOT"
+
+AGENTS_SKILLS=".agents/skills"
+TOOL_DIRS=(".cursor/skills" ".claude/skills" ".codex/skills")
+
+echo "🔄 Syncing skills from $AGENTS_SKILLS/"
+echo ""
+
+# Create tool directories if they don't exist
+for tool_dir in "${TOOL_DIRS[@]}"; do
+ mkdir -p "$tool_dir"
+done
+
+# Track changes
+created=0
+removed=0
+skipped=0
+
+# Create symlinks for each skill
+for skill_path in "$AGENTS_SKILLS"/*/; do
+ # Skip if no skills exist
+ [[ -d "$skill_path" ]] || continue
+
+ skill_name=$(basename "$skill_path")
+
+ # Skip the sync-agent-skills skill itself (avoid circular reference issues)
+ # Actually, we should include it so it's available to all tools
+
+ for tool_dir in "${TOOL_DIRS[@]}"; do
+ link_path="$tool_dir/$skill_name"
+ target="../../$AGENTS_SKILLS/$skill_name"
+
+ if [[ -L "$link_path" ]]; then
+ # Symlink exists, check if it points to the right place
+ current_target=$(readlink "$link_path")
+ if [[ "$current_target" == "$target" ]]; then
+ skipped=$((skipped + 1))
+ continue
+ fi
+ # Wrong target, remove and recreate
+ rm "$link_path"
+ elif [[ -e "$link_path" ]]; then
+ # Something else exists (file/dir), skip with warning
+ echo "⚠️ Skipping $link_path (not a symlink)"
+ continue
+ fi
+
+ ln -s "$target" "$link_path"
+ echo "✅ Created: $link_path -> $target"
+ created=$((created + 1))
+ done
+done
+
+# Remove broken symlinks
+for tool_dir in "${TOOL_DIRS[@]}"; do
+ for link in "$tool_dir"/*; do
+ [[ -L "$link" ]] || continue
+ if [[ ! -e "$link" ]]; then
+ echo "🗑️ Removed broken: $link"
+ rm "$link"
+ removed=$((removed + 1))
+ fi
+ done
+done
+
+echo ""
+echo "Done! Created: $created, Removed: $removed, Unchanged: $skipped"
diff --git a/.agents/skills/tailwind-v4-shadcn/README.md b/.agents/skills/tailwind-v4-shadcn/README.md
new file mode 100644
index 0000000..1dfb15a
--- /dev/null
+++ b/.agents/skills/tailwind-v4-shadcn/README.md
@@ -0,0 +1,205 @@
+# Tailwind v4 + shadcn/ui Skill
+
+**Status**: Production Ready ✅
+**Last Updated**: 2026-01-03
+**Production Tested**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
+
+---
+
+## Auto-Trigger Keywords
+
+This skill should be invoked when user mentions ANY of:
+
+### Primary Triggers:
+- `tailwind v4`
+- `tailwind css v4`
+- `shadcn/ui`
+- `shadcn ui`
+- `vite + react + tailwind`
+- `@tailwindcss/vite`
+
+### Secondary Triggers:
+- `dark mode setup`
+- `theme provider`
+- `theme switching`
+- `@theme inline`
+- `css variables not working`
+- `colors not applying`
+- `tailwind utilities missing`
+
+### Error-Based Triggers:
+- `tw-animate-css` (common error)
+- `@apply deprecated`
+- `dark: variant not working`
+- `colors all black/white`
+- `bg-primary doesn't work`
+- `@import typography` (wrong v4 syntax)
+- `require @tailwindcss/typography` (v3 syntax in v4)
+- `prose class not working`
+- `@plugin directive`
+
+---
+
+## What This Skill Does
+
+Sets up **production-ready** Vite + React + Tailwind CSS v4 + shadcn/ui with:
+
+✅ **Correct v4 architecture** - @theme inline pattern, no config file
+✅ **Dark mode** - ThemeProvider with system/light/dark support
+✅ **Error prevention** - Fixes tw-animate-css, duplicate @layer, @apply deprecation
+✅ **Semantic colors** - Full color palette with proper CSS variables
+✅ **Path aliases** - @/* imports configured
+✅ **TypeScript** - Full type safety
+✅ **Templates** - Proven file templates ready to copy
+
+---
+
+## Known Issues This Skill Prevents
+
+| Issue | Why It Happens | How Skill Fixes It |
+|-------|---------------|-------------------|
+| `tw-animate-css` import error | shadcn init adds non-existent import | Provides clean CSS template |
+| Duplicate `@layer base` | shadcn init adds second block with @apply | Single clean @layer block |
+| Colors don't work | Missing `@theme inline` mapping | Complete mapping provided |
+| Dark mode broken | No ThemeProvider or wrong setup | Full ThemeProvider template |
+| Wrong config | `tailwind.config.ts` used for theme | Empty config, CSS-only theme |
+| Double hsl() wrapping | Common pattern mistake | Correct variable usage |
+| Wrong plugin syntax | Using @import or require() for plugins | Correct @plugin directive documented |
+
+---
+
+## When to Use This Skill
+
+### ✅ Use When:
+- Starting a new Vite + React project with Tailwind v4
+- Adding Tailwind v4 to existing Vite project
+- Migrating from Tailwind v3 to v4
+- Integrating shadcn/ui components
+- Setting up dark mode with theme switching
+- Debugging Tailwind v4 color/theme issues
+- Need production-tested v4 patterns
+
+### ❌ Don't Use When:
+- Using Tailwind v3 (different architecture)
+- Using Next.js (different setup, use Next.js skill instead)
+- Using PostCSS instead of Vite plugin
+- Building pure CSS library (no React needed)
+- User specifically requests manual setup for learning
+
+---
+
+## Template Structure
+
+```
+~/.claude/skills/tailwind-v4-shadcn/
+├── README.md # This file - auto-trigger keywords
+├── SKILL.md # Complete documentation (623 lines)
+├── templates/ # Ready-to-copy file templates
+│ ├── index.css # v4 CSS architecture
+│ ├── components.json # shadcn/ui v4 config
+│ ├── vite.config.ts # Vite + Tailwind plugin
+│ ├── tsconfig.app.json # TypeScript with aliases
+│ ├── theme-provider.tsx # Dark mode provider
+│ └── utils.ts # cn() utility
+└── reference/ # Deep-dive docs
+ ├── architecture.md
+ ├── dark-mode.md
+ ├── common-gotchas.md
+ └── migration-guide.md
+```
+
+---
+
+## Quick Usage
+
+When Claude detects trigger keywords, it should:
+
+1. **Confirm with user**: "I found the `tailwind-v4-shadcn` skill. Use it?"
+2. **Explain benefits**: "This prevents tw-animate-css errors and includes dark mode"
+3. **Use templates**: Copy from `templates/` directory
+4. **Follow SKILL.md**: Complete step-by-step in SKILL.md
+5. **Verify**: Test dev server, check dark mode toggle
+
+---
+
+## Token Efficiency
+
+| Approach | Tokens Used | Errors |
+|----------|------------|--------|
+| Manual setup (no skill) | ~65,000 | 2-3 common errors |
+| With this skill | ~20,000 | 0 (prevented) |
+| **Savings** | **~70%** | **100% reduction** |
+
+---
+
+## Dependencies Installed
+
+```json
+{
+ "dependencies": {
+ "tailwindcss": "^4.1.18",
+ "@tailwindcss/vite": "^4.1.18",
+ "clsx": "^2.1.1",
+ "tailwind-merge": "^3.4.0",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0"
+ },
+ "devDependencies": {
+ "@types/node": "^25.0.3",
+ "@vitejs/plugin-react": "^5.1.2",
+ "vite": "^7.3.0",
+ "typescript": "~5.9.0",
+ "tw-animate-css": "^1.4.0"
+ }
+}
+```
+
+---
+
+## Example Skill Invocation
+
+```
+User: "Set up a new Vite + React project with Tailwind v4"
+↓
+Claude: [Checks ~/.claude/skills/tailwind-v4-shadcn/]
+↓
+Claude: "I found the tailwind-v4-shadcn skill. Use it?
+ (Prevents tw-animate-css error, includes dark mode)"
+↓
+User: "Yes"
+↓
+Claude: [Uses templates/ + follows SKILL.md]
+↓
+Result: Working project in ~1 minute, 0 errors
+```
+
+---
+
+## Skill Metadata
+
+```yaml
+name: tailwind-v4-shadcn
+version: 2.0.1
+category: frontend-setup
+stack: [vite, react, tailwind-v4, shadcn-ui]
+confidence: high # Production-tested pattern
+auto_invoke_threshold: 0.7 # Invoke if 70%+ match
+maintained_by: jeremy@jezweb.net
+last_tested: 2026-01-03
+```
+
+---
+
+## Related Skills
+
+- `react-vite-base` - Vite + React without Tailwind
+- `cloudflare-react-full-stack` - Adds Cloudflare Workers
+- `react-form-zod` - React Hook Form + Zod validation
+
+---
+
+## Support
+
+- **Full Documentation**: See `SKILL.md` (623 lines)
+- **Troubleshooting**: See `reference/common-gotchas.md`
+- **Official Docs**: https://ui.shadcn.com/docs/tailwind-v4
diff --git a/.agents/skills/tailwind-v4-shadcn/SKILL.md b/.agents/skills/tailwind-v4-shadcn/SKILL.md
new file mode 100644
index 0000000..5ac9022
--- /dev/null
+++ b/.agents/skills/tailwind-v4-shadcn/SKILL.md
@@ -0,0 +1,665 @@
+---
+name: tailwind-v4-shadcn
+description: |
+ Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors.
+
+ Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
+user-invocable: true
+---
+
+# Tailwind v4 + shadcn/ui Production Stack
+
+**Production-tested**: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev)
+**Last Updated**: 2026-01-20
+**Versions**: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18
+**Status**: Production Ready ✅
+
+---
+
+## Quick Start (Follow This Exact Order)
+
+```bash
+# 1. Install dependencies
+pnpm add tailwindcss @tailwindcss/vite
+pnpm add -D @types/node tw-animate-css
+pnpm dlx shadcn@latest init
+
+# 2. Delete v3 config if exists
+rm tailwind.config.ts # v4 doesn't use this file
+```
+
+**vite.config.ts**:
+```typescript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
+
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: { alias: { '@': path.resolve(__dirname, './src') } }
+})
+```
+
+**components.json** (CRITICAL):
+```json
+{
+ "tailwind": {
+ "config": "", // ← Empty for v4
+ "css": "src/index.css",
+ "baseColor": "slate",
+ "cssVariables": true
+ }
+}
+```
+
+---
+
+## The Four-Step Architecture (MANDATORY)
+
+Skipping steps will break your theme. Follow exactly:
+
+### Step 1: Define CSS Variables at Root
+
+```css
+/* src/index.css */
+@import "tailwindcss";
+@import "tw-animate-css"; /* Required for shadcn/ui animations */
+
+:root {
+ --background: hsl(0 0% 100%); /* ← hsl() wrapper required */
+ --foreground: hsl(222.2 84% 4.9%);
+ --primary: hsl(221.2 83.2% 53.3%);
+ /* ... all light mode colors */
+}
+
+.dark {
+ --background: hsl(222.2 84% 4.9%);
+ --foreground: hsl(210 40% 98%);
+ --primary: hsl(217.2 91.2% 59.8%);
+ /* ... all dark mode colors */
+}
+```
+
+**Critical**: Define at root level (NOT inside `@layer base`). Use `hsl()` wrapper.
+
+### Step 2: Map Variables to Tailwind Utilities
+
+```css
+@theme inline {
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-primary: var(--primary);
+ /* ... map ALL CSS variables */
+}
+```
+
+**Why**: Generates utility classes (`bg-background`, `text-primary`). Without this, utilities won't exist.
+
+### Step 3: Apply Base Styles
+
+```css
+@layer base {
+ body {
+ background-color: var(--background); /* NO hsl() wrapper here */
+ color: var(--foreground);
+ }
+}
+```
+
+**Critical**: Reference variables directly. Never double-wrap: `hsl(var(--background))`.
+
+### Step 4: Result - Automatic Dark Mode
+
+```tsx
+
- Registry Starter is a free, open-source template built with Next.js and Shadcn/ui Registry to accelerate your AI-Native Design System.
+ A shadcn/ui component registry for building usage meters, quota indicators, and resource consumption visualizations.
-
-## Deploy Your Own
+
-You can deploy your own version of the Next.js Registry Starter to Vercel with one click:
+## Overview
-[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fregistry-starter&project-name=my-registry&repository-name=my-registry&demo-title=Registry%20Starter&demo-description=Registry%20Starter%20is%20a%20free%2C%20open-source%20template%20built%20with%20Next.js%20and%20Shadcn%2Fui%20Registry%20to%20accelerate%20your%20AI-Native%20Design%20System.&demo-url=https%3A%2F%2Fregistry-starter.vercel.app&demo-image=%2F%2Fregistry-starter.vercel.app%2Fpreview.png)
+Usage UI is a **shadcn-style component registry** (not an npm package) focused on usage meters and quota visualization. Built as a **monorepo** using pnpm workspaces and Turborepo, components are distributed via the shadcn CLI and copied directly into your project—you own and modify the code.
-## Open in v0
+### Key Features
-[](https://v0.dev/chat/api/open?title=Dashboard+Kit&prompt=These+are+existing+design+system+styles+and+files.+Please+utilize+them+alongside+base+components+to+build.&url=https%3A%2F%2Fregistry-starter.vercel.app%2Fr%2Fdashboard.json)
+- **Usage-focused components**: Linear meters, circular gauges, quota cards, and more
+- **Full shadcn/ui compatibility**: Works with the shadcn CLI and theming system
+- **Dual primitive support**: Both Radix-based (accessible) and lightweight base versions
+- **Monorepo architecture**: Clean separation between docs site and component library
+- **Modern stack**: Next.js 16+, React 19, TypeScript, Tailwind CSS v4
+- **OKLCH color space**: Modern color system with semantic CSS variables
-This registry application also exposes `Open in v0` buttons for each component. Once this application is deployed, the
-`Open in v0` button redirects to [`v0.dev`](https://v0.dev) with a prepopulated prompt and a URL pointing back to this
-registry's `/r/${component_name}.json` endpoint. This endpoint will provide v0 the necessary file information, content,
-and metadata to start your v0 chat with your component, theme, and other related code.
+## Installation
-These `/r/${component_name}.json` files are generated using `shadcn/ui` during the `build` and `dev` based on the
-repository's [`registry.json`](./registry.json). For more information, refer to the
-[documentation](https://ui.shadcn.com/docs/registry/registry-json).
+Install components using the shadcn CLI:
-## Theming
+```bash
+# Add a single component
+npx shadcn add https://usage-ui.vercel.app/r/usage-meter.json
-To use a custom theme for all the components, all you need to do is modify the CSS tokens in
-[`globals.css`](./src/app/globals.css). More information on these practices can be found
-on [ui.shadcn.com/docs](https://ui.shadcn.com/docs).
+# Or configure the registry in your components.json for cleaner installs
+```
-#### Fonts
+### Registry Setup (Optional)
-To use custom fonts, you can either use [
-`next/font/google`](https://nextjs.org/docs/pages/getting-started/fonts#google-fonts) or the
-[`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) CSS rule in your
-[`globals.css`](./src/app/globals.css).
+Add to your `components.json` for namespaced installs:
-```css
-@font-face {
- font-family: 'Montserrat';
- font-style: normal;
- font-weight: 400;
- src: url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbi49c.woff2') format('woff2'),
- url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbj49c.woff') format('woff');
+```json
+{
+ "registries": {
+ "usage-ui": {
+ "url": "https://usage-ui.vercel.app/r"
+ }
+ }
}
```
-If you use `@font-face`, ensure you modify [`globals.css`](src/app/globals.css) tailwind configuration to map
-your custom font variables to Tailwind fonts. Refer to this
-[Tailwind documentation](https://tailwindcss.com/docs/font-family#customizing-your-theme)
+Then install with:
+
+```bash
+npx shadcn add @usage-ui/usage-meter
+```
+
+## Components
-## MCP
+### Planned Component Library
-To use this registry with MCP, you must also edit [`registry.json`](./registry.json)'s first
-`registry-item` named `theme`. This `registry:theme` item not only contains the tailwind configuration, but it also
-contains your design tokens / CSS variables.
+| Category | Components |
+|----------|------------|
+| **Core Meters** | `usage-meter`, `circular-meter`, `segmented-meter`, `stacked-meter`, `gradient-meter`, `stepped-meter` |
+| **Cards** | `quota-card`, `usage-summary`, `storage-card`, `plan-usage-card`, `resource-card` |
+| **Indicators** | `usage-badge`, `threshold-indicator`, `limit-warning`, `overage-indicator` |
+| **Data Viz** | `usage-chart`, `usage-breakdown`, `comparison-bar` |
+| **Utilities** | `usage-tooltip`, `usage-legend` |
-The `shadcn/ui` CLI's MCP command will use the entire `registy.json` file, so it must be put in the `/public` folder
-with all of your `registry:item`s. This will enable you to use your registry in tools like Cursor & Windsurf.
+> **Note**: This project is in active development. See [ARCHITECTURE.md](./ARCHITECTURE.md) for the full roadmap.
-## Authentication
+## Tech Stack
-To protect your registry, you must first protect your `registry.json` and all `registry:item` JSON files.
-This is made possible with an environment variable and basic Next.js Middleware.
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| **Monorepo** | pnpm 9+ + Turborepo | Workspace management |
+| Next.js | 16+ | Framework (App Router, RSC) |
+| React | 19 | UI Library |
+| TypeScript | 5.4+ | Type Safety |
+| Tailwind CSS | 4.1+ | Styling (OKLCH colors) |
+| Radix UI | 1.4+ | Accessible Primitives |
+| Recharts | 2.15+ | Charts |
+| Biome | 1.9+ | Linting & Formatting |
+| Changesets | 2.27+ | Version Management |
-1. Create new `REGISTRY_AUTH_TOKEN`. For example, you can generate one:
+## Running Locally
- ```bash
- node -e "console.log(crypto.randomBytes(32).toString('base64url'))"
- ```
+```bash
+# Install dependencies
+pnpm install
-2. Add new `middleware.ts` file to protect `/r/:path` routes
+# Start all development servers
+pnpm dev
- ```ts
- // src/middleware.ts
- import { NextResponse } from "next/server";
- import type { NextRequest } from "next/server";
-
- export const config = { matcher: "/r/:path*" };
-
- export function middleware(request: NextRequest) {
- const token = request.nextUrl.searchParams.get("token");
-
- if (token == null || token !== process.env.REGISTRY_AUTH_TOKEN) {
- return new NextResponse("Unauthorized", { status: 401 });
- }
-
- return NextResponse.next();
- }
-
- ```
+# Start only the docs site
+pnpm dev --filter=@usage-ui/www
+
+# Build all packages
+pnpm build
+
+# Build only the UI package
+pnpm build --filter=@usage-ui/ui
-When using `Open in v0`, the v0 platform will use the `token` search parameter to authenticate with your Registry:
+# Lint all packages
+pnpm lint
-```ts
-const v0Url = `https://v0.dev/chat/api/open?url=https%3A%2F%2Fregistry-starter.vercel.app%2Fr%2Faccordion.json&token=${process.env.REGISTRY_AUTH_TOKEN}`
+# Type check all packages
+pnpm typecheck
```
-> [!NOTE]
-> This method only protects the `/r/:path` routes, this does NOT protect the Registry's UI / component previews. If you
-> choose to protect the UI / component preview, you must ensure the `registry.json` and all `registry:item`s are
-> publicly accessible or protected using the `token` search parameter. This ensures v0 and other AI Tools have access to
-> use the registry
-
+Your docs site will be running at [localhost:3000](http://localhost:3000).
-## Running locally
+## Monorepo Structure
-```bash
-pnpm install
-pnpm dev
```
+usage-ui/
+├── apps/
+│ └── www/ # Documentation + demo site (@usage-ui/www)
+│ ├── src/
+│ │ ├── app/ # Next.js pages
+│ │ └── components/ # Site-specific components
+│ └── public/r/ # Generated registry JSON (do not edit)
+│
+├── packages/
+│ └── ui/ # Component registry (@usage-ui/ui)
+│ ├── src/
+│ │ ├── components/
+│ │ │ ├── ui/ # Base shadcn components (do not modify)
+│ │ │ └── registry/ # YOUR meter components go here
+│ │ ├── hooks/ # Shared hooks
+│ │ ├── lib/ # Utilities (cn, etc.)
+│ │ └── styles/ # CSS variables
+│ ├── registry.json # Component manifest (CRITICAL)
+│ └── components.json # shadcn CLI config
+│
+├── tooling/
+│ └── typescript/ # Shared TypeScript configs
+│
+├── turbo.json # Build orchestration
+├── pnpm-workspace.yaml # Workspace definition
+└── lefthook.yml # Git hooks
+```
+
+### Package Names
+
+| Package | Name | Location |
+|---------|------|----------|
+| Documentation Site | `@usage-ui/www` | `apps/www/` |
+| Component Library | `@usage-ui/ui` | `packages/ui/` |
+
+### Key Files
+
+| File | Location | Purpose |
+|------|----------|---------|
+| `registry.json` | `packages/ui/` | Component manifest for shadcn CLI |
+| `components.json` | `packages/ui/` | shadcn CLI configuration |
+| `globals.css` | `packages/ui/src/styles/` | Meter CSS variables |
+| `public/r/*.json` | `apps/www/` | Generated registry files (do not edit) |
+
+## Theming
+
+Customize the theme by modifying CSS variables in `packages/ui/src/styles/globals.css`. This project uses OKLCH color space for modern color management.
+
+```css
+:root {
+ --meter-success: oklch(0.723 0.191 142.5);
+ --meter-warning: oklch(0.795 0.184 86.047);
+ --meter-danger: oklch(0.637 0.237 25.331);
+ --meter-info: oklch(0.623 0.214 259.1);
+}
+```
+
+## Open in v0
+
+Components support the "Open in v0" workflow for AI-assisted development:
-Your app should now be running on [localhost:3000](http://localhost:3000).
+[](https://v0.dev/chat/api/open?title=Usage+UI&prompt=These+are+existing+design+system+styles+and+files.+Please+utilize+them+alongside+base+components+to+build.&url=https%3A%2F%2Fusage-ui.vercel.app%2Fr%2Ftheme.json)
-## File Structure
+## MCP Support
-`app/(registry)` routes contains the registry pages.
+This registry works with AI coding tools (Cursor, Windsurf) via MCP. The `registry.json` includes theme and component definitions that AI tools can use to understand your design system.
-`app/demo` routes contains various UI primitives, Components, or Blocks (based on `registry.json`)
+## Contributing
-`@/components` contains all components used in the registry
+1. Clone the repository
+2. Install dependencies: `pnpm install`
+3. Create components in `packages/ui/src/components/registry/`
+4. Add entries to `packages/ui/registry.json`
+5. Test locally: `pnpm dev`
+6. Create a changeset: `pnpm changeset`
+7. Submit a PR
-`@/components/ui` contains all `shadcn/ui` UI Primitives used in the registry
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
-`@/components/registry` contains all components for this Registry Starter application
+## Documentation
-`@/hooks` contains all React hooks
+- [ARCHITECTURE.md](./ARCHITECTURE.md) - Full architecture guide and component roadmap
+- [CONTRIBUTING.md](./CONTRIBUTING.md) - Contribution guidelines
+- [CLAUDE.md](./CLAUDE.md) - AI agent context file
+- [AGENTS.md](./AGENTS.md) - Quick reference for AI coding assistants
+- [shadcn/ui Registry Docs](https://ui.shadcn.com/docs/registry) - Official registry documentation
-`@/lib` contains all business logic & utils
+## License
-`@/layouts` contains all v0 layouts used in `registry.json`
\ No newline at end of file
+MIT
\ No newline at end of file
diff --git a/apps/www/components.json b/apps/www/components.json
new file mode 100644
index 0000000..20ca7c5
--- /dev/null
+++ b/apps/www/components.json
@@ -0,0 +1,20 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "../../packages/ui/src/styles/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true
+ },
+ "iconLibrary": "lucide",
+ "aliases": {
+ "components": "@/components",
+ "hooks": "@/hooks",
+ "lib": "@/lib",
+ "utils": "@usage-ui/ui/lib/utils",
+ "ui": "@usage-ui/ui/components"
+ }
+}
diff --git a/next.config.ts b/apps/www/next.config.ts
similarity index 100%
rename from next.config.ts
rename to apps/www/next.config.ts
diff --git a/apps/www/package.json b/apps/www/package.json
new file mode 100644
index 0000000..056549d
--- /dev/null
+++ b/apps/www/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "@usage-ui/www",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "dev": "next dev --turbopack",
+ "build": "pnpm exec shadcn build ./src/registry.json && next build",
+ "build:registry": "pnpm exec shadcn build ./src/registry.json",
+ "start": "next start",
+ "lint": "biome check src/",
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@usage-ui/ui": "workspace:*",
+ "@hookform/resolvers": "^5.2.2",
+ "@tanstack/react-table": "^8.21.3",
+ "@vercel/analytics": "^1.6.1",
+ "@vercel/speed-insights": "^1.3.1",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
+ "cmdk": "^1.1.1",
+ "date-fns": "^4.1.0",
+ "embla-carousel-react": "^8.6.0",
+ "input-otp": "^1.4.2",
+ "lucide-react": "^0.506.0",
+ "next": "^16.0.10",
+ "next-themes": "^0.4.6",
+ "radix-ui": "^1.4.3",
+ "react": "^19.2.3",
+ "react-day-picker": "^9.12.0",
+ "react-dom": "^19.2.3",
+ "react-hook-form": "^7.68.0",
+ "react-resizable-panels": "^3.0.6",
+ "recharts": "^2.15.4",
+ "sonner": "^2.0.7",
+ "tailwind-merge": "^3.4.0",
+ "vaul": "^1.1.2",
+ "zod": "^3.25.76"
+ },
+ "devDependencies": {
+ "shadcn": "3.7.0",
+ "@tailwindcss/postcss": "^4.1.18",
+ "@types/node": "^22.19.3",
+ "@types/react": "^19.2.7",
+ "@types/react-dom": "^19.2.3",
+ "postcss": "^8.5.6",
+ "tailwindcss": "^4.1.18",
+ "tw-animate-css": "^1.4.0",
+ "typescript": "^5.4.5"
+ }
+}
diff --git a/postcss.config.mjs b/apps/www/postcss.config.mjs
similarity index 100%
rename from postcss.config.mjs
rename to apps/www/postcss.config.mjs
diff --git a/public/favicon.svg b/apps/www/public/favicon.svg
similarity index 100%
rename from public/favicon.svg
rename to apps/www/public/favicon.svg
diff --git a/apps/www/public/llms.txt b/apps/www/public/llms.txt
new file mode 100644
index 0000000..697330a
--- /dev/null
+++ b/apps/www/public/llms.txt
@@ -0,0 +1,67 @@
+# Registry Starter
+
+> Registry Starter is a custom shadcn/ui component registry for building branded React applications. It provides themed UI components, blocks, and layouts with a nature theme using oklch colors. Built with Next.js 16, React 19, TypeScript, Tailwind CSS v4, and Radix UI primitives. Components are distributed via the shadcn CLI and copied into user projects for full code ownership.
+
+## Theme
+
+- [Nature Theme](https://registry-starter.vercel.app/r/theme.json): Green and brown color palette using oklch color space with shadcn/ui CSS variable names. Includes light and dark mode support.
+
+## Blocks
+
+- [Blank](https://registry-starter.vercel.app/r/blank.json): A minimal starter template with all brand components and code. Uses minimal layout.
+- [Dashboard](https://registry-starter.vercel.app/r/dashboard.json): A dashboard application layout with brand-themed sidebar and header components. Uses shell layout with collapsible sidebar.
+- [Store](https://registry-starter.vercel.app/r/store.json): An e-commerce store layout with product grid and minimal layout.
+
+## Brand Components
+
+- [Brand Header](https://registry-starter.vercel.app/r/brand-header.json): A styled, reusable header with navigation, search input, avatar, and sidebar trigger. Includes shell layout.
+- [Brand Sidebar](https://registry-starter.vercel.app/r/brand-sidebar.json): A styled, collapsible sidebar navigation with badge support and icon menu items.
+- [Login](https://registry-starter.vercel.app/r/login.json): Username and password login section with customer quote and branding.
+- [Logo](https://registry-starter.vercel.app/r/logo.json): A styled, reusable brand logo component.
+- [Hero](https://registry-starter.vercel.app/r/hero.json): Attention-grabbing hero section for landing pages with badge, heading, description, and CTA buttons.
+- [Promo](https://registry-starter.vercel.app/r/promo.json): Promotional banner section to display current deals and offers.
+- [Product Grid](https://registry-starter.vercel.app/r/product-grid.json): Product grid displaying all products with API to fetch data. Includes products data utility.
+
+## Form & Input Components
+
+- [Button](https://registry-starter.vercel.app/r/button.json): Allows users to take actions with a single click or tap.
+- [Checkbox](https://registry-starter.vercel.app/r/checkbox.json): Allows users to select multiple items from a list of options.
+- [Input](https://registry-starter.vercel.app/r/input.json): Displays a form input field or a component that looks like an input field.
+- [Select](https://registry-starter.vercel.app/r/select.json): Displays a list of options for the user to pick from, triggered by a button.
+- [Slider](https://registry-starter.vercel.app/r/slider.json): An input where the user selects a value from within a given range.
+- [Switch](https://registry-starter.vercel.app/r/switch.json): A control that allows the user to toggle between checked and not checked.
+- [Calendar](https://registry-starter.vercel.app/r/calendar.json): A date field component that allows users to enter and edit dates.
+- [Date Picker](https://registry-starter.vercel.app/r/date-picker.json): Date picker component combining input and calendar for date selection.
+
+## Layout & Navigation Components
+
+- [Accordion](https://registry-starter.vercel.app/r/accordion.json): A vertically stacked set of interactive headings that each reveal a section of content.
+- [Breadcrumb](https://registry-starter.vercel.app/r/breadcrumb.json): Displays the path to the current resource using a hierarchy of links.
+- [Menu Bar](https://registry-starter.vercel.app/r/menu-bar.json): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+- [Tabs](https://registry-starter.vercel.app/r/tabs.json): A set of layered sections of content, known as tab panels, displayed one at a time.
+- [Separator](https://registry-starter.vercel.app/r/separator.json): Visually or semantically separates content.
+
+## Overlays & Menus
+
+- [Dialog](https://registry-starter.vercel.app/r/dialog.json): A modal dialog that interrupts the user with important content and expects a response.
+- [Dropdown Menu](https://registry-starter.vercel.app/r/dropdown-menu.json): Displays a menu to the user triggered by a button.
+- [Tooltip](https://registry-starter.vercel.app/r/tooltip.json): A popup that displays information related to an element on hover or keyboard focus.
+
+## Feedback & Status Components
+
+- [Alert](https://registry-starter.vercel.app/r/alert.json): Displays a callout for user attention.
+- [Badge](https://registry-starter.vercel.app/r/badge.json): Displays a small count or status indicator.
+- [Skeleton](https://registry-starter.vercel.app/r/skeleton.json): Use to show a placeholder while content is loading.
+- [Sonner](https://registry-starter.vercel.app/r/sonner.json): An opinionated toast notification component for React.
+
+## Display & Data Components
+
+- [Avatar](https://registry-starter.vercel.app/r/avatar.json): An image element with a fallback for representing the user.
+- [Card](https://registry-starter.vercel.app/r/card.json): Containers for displaying content and actions about a single subject.
+- [Table](https://registry-starter.vercel.app/r/table.json): A responsive table component for displaying tabular data.
+- [Chart](https://registry-starter.vercel.app/r/chart.json): Beautiful charts built using Recharts. Copy and paste into your apps.
+
+## Optional
+
+- [Data Table](https://registry-starter.vercel.app/r/data-table.json): Powerful table and datagrids built using TanStack Table with sorting, filtering, and pagination.
+- [Toggle Group](https://registry-starter.vercel.app/r/toggle-group.json): A group of toggle buttons for selecting one or multiple options.
diff --git a/public/open-in-v0.svg b/apps/www/public/open-in-v0.svg
similarity index 100%
rename from public/open-in-v0.svg
rename to apps/www/public/open-in-v0.svg
diff --git a/public/preview.png b/apps/www/public/preview.png
similarity index 100%
rename from public/preview.png
rename to apps/www/public/preview.png
diff --git a/apps/www/public/r/accordion.json b/apps/www/public/r/accordion.json
new file mode 100644
index 0000000..5a2f08a
--- /dev/null
+++ b/apps/www/public/r/accordion.json
@@ -0,0 +1,19 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "accordion",
+ "title": "Accordion",
+ "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
+ "registryDependencies": [
+ "accordion",
+ "https://registry-starter.vercel.app/r/theme.json"
+ ],
+ "files": [
+ {
+ "path": "src/layouts/minimal-layout.tsx",
+ "content": "import { Geist, Geist_Mono, Montserrat } from \"next/font/google\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\n\nconst GeistSans = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\n\nconst GeistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nconst MontserratSerif = Montserrat({\n subsets: [\"latin\"],\n variable: \"--font-serif\",\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return (\n \n \n \n
{children}
\n \n \n \n );\n}\n",
+ "type": "registry:file",
+ "target": "app/layout.tsx"
+ }
+ ],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/alert.json b/apps/www/public/r/alert.json
new file mode 100644
index 0000000..252fd16
--- /dev/null
+++ b/apps/www/public/r/alert.json
@@ -0,0 +1,19 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "alert",
+ "title": "Alert",
+ "description": "Displays a callout for user attention.",
+ "registryDependencies": [
+ "alert",
+ "https://registry-starter.vercel.app/r/theme.json"
+ ],
+ "files": [
+ {
+ "path": "src/layouts/minimal-layout.tsx",
+ "content": "import { Geist, Geist_Mono, Montserrat } from \"next/font/google\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\n\nconst GeistSans = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\n\nconst GeistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nconst MontserratSerif = Montserrat({\n subsets: [\"latin\"],\n variable: \"--font-serif\",\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return (\n \n \n \n
{children}
\n \n \n \n );\n}\n",
+ "type": "registry:file",
+ "target": "app/layout.tsx"
+ }
+ ],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/avatar.json b/apps/www/public/r/avatar.json
new file mode 100644
index 0000000..316cdc5
--- /dev/null
+++ b/apps/www/public/r/avatar.json
@@ -0,0 +1,19 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "avatar",
+ "title": "Avatar",
+ "description": "An image element with a fallback for representing the user.",
+ "registryDependencies": [
+ "avatar",
+ "https://registry-starter.vercel.app/r/theme.json"
+ ],
+ "files": [
+ {
+ "path": "src/layouts/minimal-layout.tsx",
+ "content": "import { Geist, Geist_Mono, Montserrat } from \"next/font/google\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\n\nconst GeistSans = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\n\nconst GeistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nconst MontserratSerif = Montserrat({\n subsets: [\"latin\"],\n variable: \"--font-serif\",\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return (\n \n \n \n
{children}
\n \n \n \n );\n}\n",
+ "type": "registry:file",
+ "target": "app/layout.tsx"
+ }
+ ],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/badge.json b/apps/www/public/r/badge.json
new file mode 100644
index 0000000..d088975
--- /dev/null
+++ b/apps/www/public/r/badge.json
@@ -0,0 +1,19 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "badge",
+ "title": "Badge",
+ "description": "Displays a small count or status indicator.",
+ "registryDependencies": [
+ "badge",
+ "https://registry-starter.vercel.app/r/theme.json"
+ ],
+ "files": [
+ {
+ "path": "src/layouts/minimal-layout.tsx",
+ "content": "import { Geist, Geist_Mono, Montserrat } from \"next/font/google\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\n\nconst GeistSans = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\n\nconst GeistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nconst MontserratSerif = Montserrat({\n subsets: [\"latin\"],\n variable: \"--font-serif\",\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return (\n \n \n \n
{children}
\n \n \n \n );\n}\n",
+ "type": "registry:file",
+ "target": "app/layout.tsx"
+ }
+ ],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/blank.json b/apps/www/public/r/blank.json
new file mode 100644
index 0000000..0b2054b
--- /dev/null
+++ b/apps/www/public/r/blank.json
@@ -0,0 +1,27 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "blank",
+ "title": "Blank",
+ "description": "A blank application with all brand components and code",
+ "registryDependencies": [
+ "https://registry-starter.vercel.app/r/brand-header.json",
+ "https://registry-starter.vercel.app/r/brand-sidebar.json",
+ "https://registry-starter.vercel.app/r/product-grid.json",
+ "https://registry-starter.vercel.app/r/theme.json"
+ ],
+ "files": [
+ {
+ "path": "src/layouts/minimal-layout.tsx",
+ "content": "import { Geist, Geist_Mono, Montserrat } from \"next/font/google\";\nimport React, { type ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport \"@/app/globals.css\";\n\nconst GeistSans = Geist({\n subsets: [\"latin\"],\n variable: \"--font-sans\",\n});\n\nconst GeistMono = Geist_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n});\n\nconst MontserratSerif = Montserrat({\n subsets: [\"latin\"],\n variable: \"--font-serif\",\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: ReactNode;\n}>) {\n return (\n \n \n \n