feat: Add Storybook for component development

Description

Set up Storybook for isolated component development, documentation, and testing.

Problem

• No isolated environment for developing components
• Difficult to test components in different states
• No visual component documentation
• Hard to catch visual regressions
• New contributors need to understand component API

Benefits of Storybook

• Develop components in isolation
• Document component props and variations
• Visual testing and regression detection
• Accessibility testing integration
• Easier onboarding for contributors
• Component library showcase

Components to Document (Priority)

1. components/quizzes-hero.tsx - Animated hero
2. components/games/quiz-manager.tsx - Quiz cards
3. components/game-card.tsx - Game cards
4. components/code-block.tsx - Syntax highlighting
5. components/markdown-content.tsx - Markdown rendering
6. All shadcn/ui components in use

Acceptance Criteria

• Install and configure Storybook 8
• Configure for Next.js 15 and React 19
• Set up TypeScript support
• Configure Tailwind CSS
• Add stories for 5+ key components
• Add accessibility addon
• Add responsive viewport addon
• Document component props
• Add GitHub Actions workflow for Storybook build
• Optional: Deploy Storybook to Chromatic or GitHub Pages

Files to Create

• .storybook/main.ts - Storybook config
• .storybook/preview.ts - Global decorators
• stories/*.stories.tsx - Component stories
• .github/workflows/storybook.yml - CI workflow

Start by inspecting the five priority components, the shadcn/ui components in use, and the existing Next.js 15, React 19, TypeScript, and Tailwind CSS setup. Create .storybook/main.ts, .storybook/preview.ts, stories/*.stories.tsx, and .github/workflows/storybook.yml; done means Storybook builds with 5+ documented component stories, accessibility and viewport addons, and a passing CI workflow.