# New Example

> Create a new UX pattern example with all required files (index.ts, GoodExample.tsx, BadExample.tsx, README.md). Use when adding a new good/bad UX comparison or pattern to the project. Use when this capability is needed.

- Skill: `tomevault-io/new-example` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/new-example`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/new-example/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/new-example

---


# 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

```typescript
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

```typescript
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

```typescript
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

```markdown
# 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:

```typescript
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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/clementbouly) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->