Emoji Picker

# Emoji Picker PRD

## Overview
Build a searchable emoji picker component with category organization, skin tone selection, recently and frequently used sections, and keyboard navigation.

## Requirements
- Display emojis organized by category (smileys, animals, food, activities, travel, objects, symbols, flags)
- Search emojis by name or keyword with real-time filtering
- Skin tone selector with 6 skin tone options applied to supported emojis
- Recently used section displayed as the top row (last 20 emojis used)
- Frequently used section showing most-clicked emojis
- Click an emoji to copy it to clipboard
- Hover preview showing the emoji at larger size with its name
- Virtual scrolling for performance when rendering hundreds of emojis
- Category tabs with representative icons for quick navigation
- Keyboard navigation: arrow keys to move between emojis, Enter to select and copy
- Responsive grid layout that adapts to container width
- Favorites list: right-click or long-press to add/remove from favorites
- Multiple size options for the emoji grid (small, medium, large)
- Tooltip showing the emoji shortcode (e.g., :smile:, :wave:)
- Persist recently used and favorites to localStorage

## Tech Stack
- HTML, CSS, JavaScript (vanilla or any framework)
- Include a built-in emoji dataset (name, category, codepoint, keywords)

## Scoring Criteria
- **Functional (40%)**: Emoji display works, search works, categories work, copy to clipboard works
- **Quality (20%)**: Smooth scrolling performance, responsive grid, clean code
- **Fidelity (25%)**: All features present including skin tones, keyboard nav, favorites, virtual scroll
- **Speed (15%)**: Time bonus