chore: add config files for some code assistant #930
Conversation
Add CLAUDE.md with comprehensive guidance for Claude Code AI assistant including: - All development, build, and testing commands - Architecture overview (Graph class hierarchy, mixin pattern, plugin system) - Directory structure and important implementation patterns This file also serves as a useful reference for contributors.
WalkthroughTwo new documentation files added: Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested labels
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
.github/copilot-instructions.md (4)
195-212: Add language specifier to fenced code block.The CI build sequence code block on Line 207 is missing the
bashlanguage specifier. This affects markdown rendering and consistency.-### Complete CI Build Sequence (from repository root): - -```bash +### Complete CI Build Sequence (from repository root): + +```bashThis note also applies to similar unmarked code blocks throughout the file. All fenced code blocks should have language specifiers for consistency with markdown best practices.
289-301: Improve clarity in "Common Issues & Workarounds" section.The code block on Line 294 lacks a language specifier. More importantly, this section could be strengthened by moving the shell commands to properly formatted code blocks:
### Module Resolution Errors **Symptom:** Cannot find module errors after fresh clone **Solution:** Run `npm install` from the repository root. This repo uses npm workspaces. ### Build Failures **Symptom:** TypeScript compilation fails **Solution:** 1. Ensure Node.js version 20 is active 2. Run `npm run clean` in packages/core/, then rebuild 3. Check that lib/ directory is clean before build ### Test Failures **Symptom:** Jest tests fail to run **Solution:** 1. Build the core package first: `npm run build -w packages/core` 2. Tests require the jsdom environment (configured in jest.config.cjs) 3. Module resolution issues: Check moduleNameMapper in jest.config.cjs
315-321: Add language specifier to workspace error examples.Multiple code blocks in the "Making Changes" section (starting at Line 346, 353, 362, 374) are missing bash language specifiers. This is a linting violation that should be corrected:
### Workspace Command Errors **Issue:** "npm run dev" at root fails with MODULE_NOT_FOUND **Explanation:** There is no root `dev` script implementation. Use workspace-specific commands: -```bash +```bash npm run dev -w packages/core # Watch core npm run dev -w packages/html # Run Storybook -``` +```Apply this pattern to all code blocks in the file.
346-375: Fix markdown linting violations in "Making Changes" section.Lines 346-375 contain multiple fenced code blocks that are missing language specifiers. According to markdownlint (MD040), all fenced code blocks should specify a language:
Update each code block to include the language specifier:
-## Making Changes - -### Typical Development Workflow - -1. **Start development:** - ```bash +## Making Changes + +### Typical Development Workflow + +1. **Start development:** + ```bash cd packages/core npm run dev # Watch mode for core - ``` + ```
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.github/copilot-instructions.md(1 hunks)CLAUDE.md(1 hunks)
🧰 Additional context used
🧠 Learnings (8)
📓 Common learnings
Learnt from: tbouffard
PR: maxGraph/maxGraph#849
File: packages/html/stories/DragSource.stories.js:98-101
Timestamp: 2025-06-13T07:48:10.300Z
Learning: User tbouffard prefers answers in English; avoid switching to other languages in future replies.
📚 Learning: 2025-04-22T16:34:40.309Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#774
File: packages/ts-example-selected-features/package.json:11-13
Timestamp: 2025-04-22T16:34:40.309Z
Learning: In the maxGraph project, TypeScript is defined as a dependency in the root package.json (~5.8.2) and not in individual package.json files for example packages. The build scripts in example packages can use `tsc` commands because the TypeScript dependency is hoisted in the monorepo structure.
Applied to files:
.github/copilot-instructions.mdCLAUDE.md
📚 Learning: 2025-04-22T16:34:40.309Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#774
File: packages/ts-example-selected-features/package.json:11-13
Timestamp: 2025-04-22T16:34:40.309Z
Learning: In the maxGraph project, TypeScript is defined as a dependency in the root package.json and not in individual package.json files for example packages. The build scripts in example packages can use `tsc` because it's available through this hoisted dependency in the monorepo structure.
Applied to files:
.github/copilot-instructions.mdCLAUDE.md
📚 Learning: 2025-05-13T12:54:55.231Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#826
File: packages/js-example-nodejs/src/index.cjs:64-69
Timestamp: 2025-05-13T12:54:55.231Z
Learning: For example code in the maxGraph repository, maintainers prefer to keep scripts simple without error handling to focus on demonstrating core functionality, especially in demonstration scripts like those in packages/js-example-nodejs.
Applied to files:
.github/copilot-instructions.mdCLAUDE.md
📚 Learning: 2025-04-29T13:25:31.494Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#791
File: packages/ts-example/vite.config.js:30-30
Timestamp: 2025-04-29T13:25:31.494Z
Learning: In the maxGraph project, each example package (ts-example, ts-example-selected-features, ts-example-without-defaults) implements different use cases with varying features, resulting in different application sizes. Therefore, each package has its own specific chunkSizeWarningLimit value in its vite.config.js file, calibrated to its expected bundle size.
Applied to files:
.github/copilot-instructions.mdCLAUDE.md
📚 Learning: 2025-01-28T16:22:25.804Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#593
File: .github/workflows/create-github-release.yml:42-42
Timestamp: 2025-01-28T16:22:25.804Z
Learning: In the GitHub release notes template for maxGraph, TODO comments are intentionally included to mark sections that must be reviewed by maintainers before publishing the release. These TODOs should not be removed or converted to validation steps as they are part of the release review process.
Applied to files:
.github/copilot-instructions.mdCLAUDE.md
📚 Learning: 2025-04-29T13:29:45.122Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#791
File: packages/core/src/view/style/edge/Segment.ts:26-35
Timestamp: 2025-04-29T13:29:45.122Z
Learning: In the maxGraph project, JSDoc `{link}` references to symbols don't need to be imported in the current file to work correctly. TypeDoc can resolve symbols across the entire project namespace, not just within the current file, which is common in modern documentation systems and IDEs.
Applied to files:
CLAUDE.md
📚 Learning: 2025-04-28T08:24:39.831Z
Learnt from: tbouffard
PR: maxGraph/maxGraph#785
File: packages/core/src/view/style/register.ts:19-19
Timestamp: 2025-04-28T08:24:39.831Z
Learning: In the maxGraph project, the Perimeter namespace is defined in the 'builtin-style-elements.ts' file using the statement 'export * as Perimeter from './perimeter';'. To access the Perimeter namespace in other files, they must import from './builtin-style-elements' instead of directly from './perimeter', as part of the tree-shaking optimization.
Applied to files:
CLAUDE.md
🪛 LanguageTool
.github/copilot-instructions.md
[uncategorized] ~195-~195: The official name of this software platform is spelled with a capital “H”.
Context: ...# CI/CD Workflows ### Build Workflow (.github/workflows/build.yml) Triggers: Push...
(GITHUB)
[uncategorized] ~213-~213: The official name of this software platform is spelled with a capital “H”.
Context: ...kage ### Website Generation Workflow (.github/workflows/generate-website.yml) **Trigg...
(GITHUB)
[uncategorized] ~224-~224: The official name of this software platform is spelled with a capital “H”.
Context: ...main push only) ### Publish Workflow (.github/workflows/publish-npm-package.yml) **Tr...
(GITHUB)
🪛 markdownlint-cli2 (0.18.1)
.github/copilot-instructions.md
207-207: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
294-294: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
346-346: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
353-353: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
362-362: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
374-374: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (12)
.github/copilot-instructions.md (4)
1-15: Documentation provides valuable project overview.The repository overview clearly establishes context with specific metrics, build targets, and browser support. The emphasis on Node.js 20 and npm workspaces is appropriately placed early in the document.
54-58: Build process documentation is clear and accurate.The three-step build process and explicit mention of
generate-cjs-package-json.mjsscript provides developers with essential context for understanding dual build output.
132-168: CI validation sequence is well-structured.The complete 10-step validation sequence provides developers with confidence that they're running the same checks as CI/CD. Separating this from individual commands prevents confusion.
229-287: Project structure documentation is comprehensive.Both the workspace layout and core source structure provide essential navigation aids for developers exploring the codebase. The organization mirrors the actual repository structure.
CLAUDE.md (8)
1-8: Clear, concise project description for AI context.The project overview appropriately positions maxGraph as a TypeScript vector diagram library and its relationship to mxGraph. This provides essential context for Claude Code guidance.
9-86: Development commands are well-organized and accurate.The sections for setup, development, building, testing, and code quality provide a logical flow. Command descriptions clearly indicate the workspace context (
-w packages/core,-w packages/html), which is essential for monorepo navigation.
88-134: Architecture section provides valuable AI guidance.The three-tier Graph class hierarchy (AbstractGraph, BaseGraph, Graph) is well-explained with production vs. prototyping context. Mixin pattern documentation and plugin system overview give Claude Code essential understanding for code generation and modification tasks.
243-287: Usage patterns section is particularly valuable for Claude Code.The guidance on "Graph vs BaseGraph" choice, tree-shaking optimization, batch updates, and style configuration provides Claude Code with patterns to follow when generating or modifying code. The reference to
ts-example-selected-featuresis helpful.
288-376: Commit message conventions are clearly documented.Conventional Commits format with concrete examples from the repository (e.g., #914, #909, #922, #929, #913) gives developers clear guidance. The scopes, subject line guidelines, and body guidelines prevent ambiguity.
262-265: Batch updates guidance aligns with best practices.The
batchUpdate()pattern documentation directly supports optimal graph performance. Keeping this pattern guidance in the Claude file ensures AI-assisted code generation follows performance best practices.
254-260: BaseGraph production recommendation is well-positioned.The contrast between Graph (full-featured for prototyping) and BaseGraph (production-optimized) with explicit registration pattern helps Claude Code generate appropriate code for different use cases. This is valuable for production-grade code generation.
245-287: "Important Patterns" section bridges gap between architecture and implementation.Sections covering Graph vs BaseGraph, tree-shaking, batch updates, styles, and testing patterns provide Claude Code with concrete implementation guidance. References to example projects and configuration files help ground patterns in the codebase.
Add CLAUDE.md with comprehensive guidance for Claude Code AI assistant including:
Also add instructions for GitHub Copilot assistant.
This file also serves as a useful reference for contributors.
Summary by CodeRabbit