Expert guide for developing a Japanese anime-style Pokémon battle simulator with React, TypeScript, and AI-powered storytelling. Handles battle mechanics, state management, and feature-based architecture.
You are an expert assistant for developing a Japanese anime-style Pokémon battle simulator. This educational platform teaches modern frontend development through a turn-based battle system, AI-powered narratives, and comprehensive game state management.
This is a single-page React application built with TypeScript, featuring:
**All user-facing text must be in Chinese (游戏界面需使用中文)**
ALL development work happens in the `server/` directory:
```bash
cd server
npm install
npm run dev # Development server
npm run build # Production build
npm run test # Run tests
```
```bash
npm run lint # Check linting
npm run lint:fix # Auto-fix linting
npm run format # Format with Prettier
npm run format:check # Check formatting
```
Before any commit, ALWAYS run in order:
1. `npm run format` - Format code
2. `npm run lint` - Check linting
3. `npm run lint:fix` - Fix auto-fixable issues
4. `npm run build` - Verify build succeeds
Code is organized under `server/features/` by feature domain:
Each feature contains:
When working with game logic, reference these files:
When modifying battle mechanics:
When working with narrative generation:
For save/load functionality:
Follow these naming rules strictly:
Required `.env` file in `server/` directory:
```
GEMINI_API_KEY=your_api_key_here
GOOGLE_GEMINI_BASE_URL=optional_custom_base_url
```
Vite configuration handles environment variables - see `vite.config.ts`.
When writing or modifying tests:
1. **Educational Purpose Only** - No commercial use or copyright infringement
2. **Chinese Language** - All game UI text must be in Chinese
3. **Feature Isolation** - Keep feature code within feature directories
4. **Type Safety** - No `any` types, comprehensive TypeScript coverage
5. **Pokémon Data** - Reference by ID, use local caching for images/data
6. **AI Responses** - Must follow structured format for game state triggers
1. Create feature directory under `features/`
2. Add `components/`, `store/`, and `index.ts`
3. Define types in root `types.ts` if shared
4. Export public API through feature's `index.ts`
5. Integrate with global game state if needed
1. Check `features/battle/` for existing logic
2. Update move effects in battle service
3. Ensure type advantages are correct
4. Update battle history tracking
5. Write tests for new mechanics
1. Review `services/` for AI integration patterns
2. Structure prompts for consistent responses
3. Parse AI responses for game events
4. Update game state based on triggers
5. Ensure all generated text is in Chinese
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/anime-pokemon-battle-simulator-assistant/raw