|
| 1 | +# Claude Code Integration for React Mosaic |
| 2 | + |
| 3 | +This directory contains all the files for optimal Claude Code and LLM integration with the React Mosaic project. |
| 4 | + |
| 5 | +## Directory Contents |
| 6 | + |
| 7 | +### Configuration Files |
| 8 | +- **`settings.json`**: Claude Code project settings and preferences |
| 9 | +- **`.claudeignore`** (in root): Files/directories to exclude from LLM context |
| 10 | + |
| 11 | +### Documentation |
| 12 | +- **`../claude.md`**: Comprehensive project documentation for LLMs (in root) |
| 13 | +- **`../CONTRIBUTING_AI.md`**: AI/LLM-specific contribution guidelines (in root) |
| 14 | +- **`../QUICKREF.md`**: Quick reference guide for common operations (in root) |
| 15 | + |
| 16 | +### Slash Commands (`commands/`) |
| 17 | +Quick commands for common development tasks: |
| 18 | + |
| 19 | +- `/test` - Run tests and report failures |
| 20 | +- `/build` - Build the library |
| 21 | +- `/lint` - Run linting checks |
| 22 | +- `/type-check` - Run TypeScript type checking |
| 23 | +- `/analyze-tree` - Analyze tree manipulation utilities |
| 24 | +- `/review-component` - Review a specific component |
| 25 | +- `/explain-concept` - Explain core React Mosaic concepts |
| 26 | +- `/add-feature` - Plan and implement a new feature |
| 27 | +- `/fix-issue` - Debug and fix an issue |
| 28 | +- `/refactor` - Refactor code for better quality |
| 29 | +- `/update-deps` - Check for outdated dependencies |
| 30 | + |
| 31 | +### Prompt Templates (`prompts/`) |
| 32 | +Reusable templates for common scenarios: |
| 33 | + |
| 34 | +- **`tree-analysis.md`**: Template for analyzing tree structures |
| 35 | +- **`code-review.md`**: Template for reviewing code |
| 36 | +- **`feature-planning.md`**: Template for planning new features |
| 37 | +- **`debugging.md`**: Template for debugging issues |
| 38 | + |
| 39 | +## Quick Start for AI Assistants |
| 40 | + |
| 41 | +1. **Read `claude.md` first** - This provides comprehensive context about the project |
| 42 | +2. **Check `QUICKREF.md`** - Quick reference for common operations |
| 43 | +3. **Review `.claudeignore`** - Know what files to skip |
| 44 | +4. **Use slash commands** - Quick access to common tasks |
| 45 | +5. **Follow patterns in `CONTRIBUTING_AI.md`** - Guidelines for code contributions |
| 46 | + |
| 47 | +## Project Structure Overview |
| 48 | + |
| 49 | +``` |
| 50 | +react-mosaic/ |
| 51 | +├── .claude/ # Claude Code integration files |
| 52 | +│ ├── commands/ # Slash commands |
| 53 | +│ ├── prompts/ # Prompt templates |
| 54 | +│ ├── settings.json # Project settings |
| 55 | +│ └── README.md # This file |
| 56 | +├── libs/react-mosaic-component/ # Main library [PRIMARY FOCUS] |
| 57 | +│ └── src/lib/ # Source code |
| 58 | +│ ├── types.ts # Type definitions |
| 59 | +│ ├── contextTypes.ts # Context types |
| 60 | +│ └── util/ # Utility functions |
| 61 | +├── apps/demo-app/ # Demo application |
| 62 | +├── claude.md # LLM integration guide |
| 63 | +├── CONTRIBUTING_AI.md # AI contribution guidelines |
| 64 | +├── QUICKREF.md # Quick reference |
| 65 | +├── .claudeignore # Files to ignore |
| 66 | +└── README.md # User documentation |
| 67 | +``` |
| 68 | + |
| 69 | +## Key Concepts |
| 70 | + |
| 71 | +React Mosaic is a tiling window manager built on: |
| 72 | + |
| 73 | +1. **N-ary Tree Structure**: Layout represented as a tree with split nodes, tab nodes, and leaf nodes |
| 74 | +2. **Numeric Paths**: Nodes identified by array of indices (e.g., `[0, 1, 2]`) |
| 75 | +3. **Immutable Updates**: Tree modifications always create new instances |
| 76 | +4. **React Context**: Components communicate via context API |
| 77 | +5. **Drag & Drop**: Built on react-dnd with multi-backend support |
| 78 | + |
| 79 | +## Development Workflow |
| 80 | + |
| 81 | +```bash |
| 82 | +# Setup |
| 83 | +npm install |
| 84 | + |
| 85 | +# Development |
| 86 | +npm start # Start dev server |
| 87 | +npm test # Run tests |
| 88 | +npm run build:lib # Build library |
| 89 | + |
| 90 | +# Code Quality |
| 91 | +npm run lint # Lint code |
| 92 | +npm run format # Format code |
| 93 | +``` |
| 94 | + |
| 95 | +## Important Files |
| 96 | + |
| 97 | +| File | Description | |
| 98 | +|------|-------------| |
| 99 | +| `libs/react-mosaic-component/src/index.ts` | Public API exports | |
| 100 | +| `libs/react-mosaic-component/src/lib/types.ts` | Type definitions | |
| 101 | +| `libs/react-mosaic-component/src/lib/util/mosaicUtilities.ts` | Tree operations | |
| 102 | +| `libs/react-mosaic-component/src/lib/util/mosaicUpdates.ts` | Tree mutations | |
| 103 | + |
| 104 | +## Using Slash Commands |
| 105 | + |
| 106 | +Slash commands provide quick access to common tasks: |
| 107 | + |
| 108 | +``` |
| 109 | +/test # Run the test suite |
| 110 | +/build # Build the library |
| 111 | +/explain-concept # Learn about a core concept |
| 112 | +/add-feature # Plan and add a new feature |
| 113 | +``` |
| 114 | + |
| 115 | +## Using Prompt Templates |
| 116 | + |
| 117 | +Prompt templates help maintain consistency: |
| 118 | + |
| 119 | +1. Navigate to `.claude/prompts/` |
| 120 | +2. Choose appropriate template |
| 121 | +3. Follow the structure provided |
| 122 | +4. Adapt to your specific need |
| 123 | + |
| 124 | +## Best Practices for AI |
| 125 | + |
| 126 | +1. **Always read files before modifying** - Use Read tool first |
| 127 | +2. **Use utility functions** - Don't manually manipulate trees |
| 128 | +3. **Follow existing patterns** - Match code style and conventions |
| 129 | +4. **Write tests** - Add tests for new functionality |
| 130 | +5. **Check types** - Ensure TypeScript compilation passes |
| 131 | +6. **Use type guards** - Use `isSplitNode()` and `isTabsNode()` |
| 132 | +7. **Validate paths** - Check paths before tree operations |
| 133 | +8. **Handle edge cases** - Test with empty, single, and nested trees |
| 134 | + |
| 135 | +## Common Patterns |
| 136 | + |
| 137 | +### Tree Manipulation |
| 138 | +```typescript |
| 139 | +import { updateTree, createRemoveUpdate } from 'react-mosaic-component'; |
| 140 | + |
| 141 | +const newTree = updateTree(currentTree, [ |
| 142 | + createRemoveUpdate(path) |
| 143 | +]); |
| 144 | +``` |
| 145 | + |
| 146 | +### Type Checking |
| 147 | +```typescript |
| 148 | +import { isSplitNode, isTabsNode } from 'react-mosaic-component'; |
| 149 | + |
| 150 | +if (isSplitNode(node)) { |
| 151 | + // node is MosaicSplitNode<T> |
| 152 | +} |
| 153 | +``` |
| 154 | + |
| 155 | +### Context Access |
| 156 | +```typescript |
| 157 | +import { useContext } from 'react'; |
| 158 | +import { MosaicContext } from 'react-mosaic-component'; |
| 159 | + |
| 160 | +const { mosaicActions } = useContext(MosaicContext); |
| 161 | +mosaicActions.remove(path); |
| 162 | +``` |
| 163 | + |
| 164 | +## Resources |
| 165 | + |
| 166 | +- **Project Documentation**: `../claude.md` |
| 167 | +- **Quick Reference**: `../QUICKREF.md` |
| 168 | +- **AI Guidelines**: `../CONTRIBUTING_AI.md` |
| 169 | +- **User Documentation**: `../README.md` |
| 170 | +- **Live Demo**: https://nomcopter.github.io/react-mosaic/ |
| 171 | +- **GitHub**: https://github.com/nomcopter/react-mosaic |
| 172 | + |
| 173 | +## Contributing |
| 174 | + |
| 175 | +See `CONTRIBUTING_AI.md` for detailed guidelines on: |
| 176 | +- Code style and conventions |
| 177 | +- Testing requirements |
| 178 | +- Common patterns |
| 179 | +- Debugging strategies |
| 180 | +- Performance considerations |
| 181 | + |
| 182 | +## Support |
| 183 | + |
| 184 | +For issues or questions: |
| 185 | +- Check `claude.md` for comprehensive information |
| 186 | +- Use `/explain-concept` to understand core concepts |
| 187 | +- Review existing code for patterns |
| 188 | +- Ask specific questions about the codebase |
| 189 | + |
| 190 | +## Version |
| 191 | + |
| 192 | +This integration is designed for React Mosaic v0.20.0. |
| 193 | + |
| 194 | +Last updated: 2025-12-04 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments