Add CLAUDE.md with codebase guidance for AI assistants#221
Conversation
Documents build/test commands, app architecture (single-page landing, lazy loading, content layer, theme system), code conventions, and testing setup for future Claude Code sessions. https://claude.ai/code/session_01ProhZcrkuekv742hSoWLct
|
Strix is installed on this repository, but we could not run this PR security review because this workspace does not have an active plan. If you'd like to continue receiving code reviews, you can add a payment method or manage billing here. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughA new ChangesRepository Documentation
🎯 1 (Trivial) | ⏱️ ~3 minutes
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Up to standards ✅🟢 Issues
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a744e6a169
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| npm run e2e # Playwright end-to-end tests (requires a running dev server) | ||
| ``` | ||
|
|
||
| To run a single unit test file: `npx vitest run src/components/Navbar.test.tsx` |
There was a problem hiding this comment.
The documented command npx vitest run src/components/Navbar.test.tsx fails in this repo because src/components/Navbar.test.tsx does not exist, so readers following the guide cannot run the advertised single-file workflow as written. Please point this example at a real test file (for example one under src/components/ that currently exists) so the command is directly usable.
Useful? React with 👍 / 👎.
| ## Code Conventions | ||
|
|
||
| - **Named exports only** — no default exports for components. | ||
| - **Absolute imports** from `src/` (TypeScript `moduleResolution: "bundler"` is configured; use `./` or `../` only when needed by tooling). |
There was a problem hiding this comment.
The note says absolute imports from src/ are configured, but this repo has no baseUrl/paths mapping in tsconfig.json and no alias in vite.config.ts, so following this guidance can produce unresolved-import errors. Please either document the current relative-import approach or add and reference the actual alias configuration.
Useful? React with 👍 / 👎.
|
|
||
| ### Content layer | ||
|
|
||
| **All copy lives in `src/data/content.ts`.** Never hardcode strings inside components. The file exports named constants (`HERO_COPY`, `FEATURES`, `FAQS`, `PRICING_COPY`, etc.) consumed directly in components. |
There was a problem hiding this comment.
The architecture section says all copy lives in src/data/content.ts and should never be hardcoded in components, but current components still embed user-facing text directly (for example Sign In and Get Early Access in src/components/Navbar.tsx). Keeping this claim inaccurate can mislead assistants about where copy changes must be made and cause inconsistent edits.
Useful? React with 👍 / 👎.
- Use FAQ.test.tsx (exists) in the single-test example instead of Navbar.test.tsx (does not exist) - Correct import guidance: no baseUrl/paths configured, so relative imports are used throughout, not absolute src/ imports - Soften content-layer claim: note that some components (e.g. Navbar) still have inline strings not yet migrated to content.ts https://claude.ai/code/session_01ProhZcrkuekv742hSoWLct
Greptile SummaryThis PR adds
Confidence Score: 4/5Safe to merge after correcting the FAQ section placement description. The file is documentation only and cannot break the app, but the incorrect 'above-fold' label for FAQ will give AI assistants a wrong mental model of the page layout — FAQ actually renders after Features and Testimonials, not before them. This could lead to incorrect decisions about section ordering or performance optimisation in future sessions. CLAUDE.md — the above-fold/below-fold grouping in the Architecture section needs to be corrected to reflect the actual render order in App.tsx. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[main.tsx\nReact.StrictMode] --> B[App.tsx\nThemeProvider + ErrorBoundary]
B --> C[Navbar]
B --> D[Hero — eager]
B --> E[HowItWorks — eager]
B --> F[Features — React.lazy]
B --> G[Testimonials — React.lazy]
B --> H[FAQ — eager\n⚠️ labelled above-fold in CLAUDE.md\nbut rendered after lazy sections]
B --> I[Preview — React.lazy]
B --> J[Pricing — React.lazy]
B --> K[Newsletter — React.lazy]
B --> L[Footer]
Reviews (2): Last reviewed commit: "Fix ThemeProvider placement in entry-poi..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
main.tsx only mounts <App> in <React.StrictMode>; ThemeProvider is rendered inside App.tsx, not main.tsx. https://claude.ai/code/session_01ProhZcrkuekv742hSoWLct
|
| `main.tsx` mounts `<App>` inside `<React.StrictMode>`. `App.tsx` owns the `<ThemeProvider>` wrapper and renders the full page as a vertical stack of sections. | ||
|
|
||
| Above-fold sections (`Hero`, `HowItWorks`, `FAQ`) are eagerly imported. Below-fold sections (`Features`, `Testimonials`, `Preview`, `Pricing`, `Newsletter`) use `React.lazy` + `<Suspense>` for code splitting. |
There was a problem hiding this comment.
FAQ is eagerly imported (not lazy), but the render order in App.tsx is: Hero → HowItWorks → Features (lazy) → Testimonials (lazy) → FAQ → Preview (lazy) → Pricing (lazy) → Newsletter (lazy). This means FAQ appears after two lazy-loaded sections, well below the fold. Grouping it with Hero and HowItWorks as "above-fold sections" will mislead an AI assistant about the page layout when reasoning about load order, section sequencing, or above-fold optimisation.
2 participants
Summary
CLAUDE.mdto provide structured guidance for future Claude Code sessions working in this repositorysrc/data/content.ts, theme system via React Context + localStorage + Tailwinddarkclassany, import order, component file structure) and testing setup (global mocks forlocalStorageandIntersectionObserver)Test plan
package.jsonscriptssrc/App.tsxandsrc/lib/ThemeContext.tsxGenerated by Claude Code