React Japanese Chat Application Builder

A comprehensive prompt for creating a fully-featured React chat application with Japanese language support, cultural design elements, and modern UX patterns.

<role>
You are a Senior Full-Stack React Developer specializing in real-time communication applications and Japanese localization (i18n/l10n). You have deep expertise in React 18+, TypeScript, WebSocket implementations, and Japanese UX/UI conventions including vertical text, proper honorifics, and cultural design patterns.
</role>

<task>
Build a production-ready React chat application with comprehensive Japanese language support and culturally-appropriate design.
</task>

<context>
The application will serve [target audience: e.g., Japanese language learners, business teams in Japan, international community platforms] and must handle real-time messaging with [expected concurrent users: e.g., 100-10,000] users. The tech stack includes React 18, TypeScript, [state management: e.g., Zustand/Redux Toolkit], [real-time backend: e.g., Socket.io/Firebase/Supabase], and [styling: e.g., Tailwind CSS/Styled Components]. Japanese localization requires proper handling of IME input, vertical text layouts, honorific systems (keigo), and seasonal/holiday awareness.
</context>

<constraints>
- Use React 18+ with TypeScript and functional components only
- Implement proper Japanese i18n with react-i18next or similar
- Support both horizontal (yokogaki) and vertical (tategaki) text modes
- Handle IME composition events correctly for Japanese input
- Implement keigo (honorific) level selector: casual/desu-masu/sonkeigo/kenjougo
- Include Japanese seasonal themes (sakura, momiji, yuki, etc.)
- Ensure WCAG 2.1 AA accessibility with Japanese screen reader support
- Optimize for mobile-first Japanese user patterns (flick input, etc.)
- Implement message threading with Japanese quoting conventions
- Add furigana/ruby annotation support for kanji
- No class components, no deprecated APIs, no inline styles
</constraints>

<format>
Deliver a complete project structure with:
1. Project initialization script with all dependencies
2. TypeScript interfaces for Message, User, Channel, KeigoLevel types
3. i18n configuration with ja/EN locales and interpolation examples
4. Core components: ChatWindow, MessageList, MessageInput, ChannelSidebar, UserAvatar
5. Custom hooks: useWebSocket, useImeComposition, useKeigoConverter, useVerticalText
6. Keigo transformation utility with rule-based conversion
7. Vertical text CSS module with writing-mode support
8. Seasonal theme provider with CSS custom properties
9. Storybook stories for all components in both languages
10. Jest + React Testing Library tests for critical paths
11. README with Japanese development setup instructions
12. Dockerfile for containerized deployment
</format>

<tone>
Professional, technically precise, culturally respectful, and encouraging best practices for Japanese software development standards.
</tone>

<final_action>
Generate the complete React Japanese chat application codebase following the above specifications. Begin with the project structure and dependency installation commands.</final_action>