Create New UX Example

This skill helps you scaffold a complete UX pattern example following project conventions.

Structure to create

Each example requires 4 files in src/examples/{example-id}/:

src/examples/{example-id}/
├── index.ts          # Metadata and exports
├── GoodExample.tsx   # Correct implementation
├── BadExample.tsx    # Implementation to avoid
└── README.md         # Pattern documentation

Step-by-step process

1. Create the folder

Use kebab-case for the folder name: src/examples/my-new-pattern/

2. Create index.ts

import { GoodExample } from "./GoodExample";
import { BadExample } from "./BadExample";
import content from "./README.md?raw";

export { content };

export const meta = {
  id: "my-new-pattern",  // Must match folder name
  title: "Pattern Title",
  description: "Brief description of the pattern",
  category: "Forms",  // One of: Forms, Navigation, Feedback, Accessibility, Performance, Modals, Input
  tags: ["tag1", "tag2"],
  createdAt: "YYYY-MM-DD",  // Today's date in ISO format
  aiSummary: "Concise, actionable summary for AI assistants. Focus on WHEN to apply and HOW. Example: 'When building X, do Y. Don't do Z.'",
};

export const BadExamples = [
  { component: BadExample, label: "Without pattern" },
];

export const GoodExamples = [
  { component: GoodExample, label: "With pattern" },
];

3. Create GoodExample.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button";
// Import other UI components as needed from @/components/ui/

export function GoodExample() {
  // Implementation showing the CORRECT pattern
  return (
    <div>
      {/* Good UX implementation */}
    </div>
  );
}

4. Create BadExample.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button";

export function BadExample() {
  // Implementation showing the pattern to AVOID
  return (
    <div>
      {/* Bad UX implementation */}
    </div>
  );
}

5. Create README.md

# Pattern Title

## Description

Clear explanation of the UX pattern.

## Why it matters

- **Benefit 1**: Explanation
- **Benefit 2**: Explanation
- **Benefit 3**: Explanation

## When to apply

- Use case 1
- Use case 2

## When not to apply

- Exception 1
- Exception 2

6. Register in src/examples/index.ts

Add import and include in examples array:

import * as myNewPattern from "./my-new-pattern";

export const examples = [
  // ... existing examples
  myNewPattern,
];

Categories

Existing categories:

• Forms - Form inputs, validation, submission
• Navigation - Navigation patterns, scroll behavior
• Feedback - User feedback, notifications, loading states
• Accessibility - A11y patterns, focus management
• Performance - Perceived performance, loading optimization
• Modals - Modal dialogs, overlays, popups

You can create new categories if the pattern doesn't fit existing ones.

UI components

Existing components in @/components/ui/:

• button - Button component
• input - Input field
• label - Form label
• dialog - Modal dialog (Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger)

You can create new UI components in src/components/ui/ if needed (following shadcn/ui patterns).

Styling conventions

• Use Tailwind CSS classes
• Always support dark mode with dark: variants
• Use semantic color classes when possible
• Keep components self-contained