diff --git a/line-segment-intersection/CLAUDE.md b/line-segment-intersection/CLAUDE.md
new file mode 100644
index 0000000..0d0014a
--- /dev/null
+++ b/line-segment-intersection/CLAUDE.md
@@ -0,0 +1,58 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Interactive visualization tool built with Svelte 5 and Vite that demonstrates line segment intersections and rectangle area calculations. The application features a canvas-based grid where users can move a point (B) and see real-time updates of two rectangles formed with fixed points A(1,1) and C(6,7), along with their calculated areas.
+
+## Development Commands
+
+```bash
+# Start development server with hot module replacement
+npm run dev
+
+# Build for production (outputs to dist/)
+npm run build
+
+# Preview production build locally
+npm run preview
+```
+
+## Architecture
+
+### Application Structure
+
+- **src/App.svelte**: Main application component containing all visualization logic
+  - Canvas rendering system with 40px grid cells (8x8 grid, 320x320px canvas)
+  - Coordinate system conversion between canvas (top-left origin) and Cartesian (bottom-left origin)
+  - Real-time mouse tracking to update point B position
+  - Reactive calculations for rectangle dimensions and areas using Svelte 5's `$:` syntax
+
+### Key Components
+
+**Coordinate Systems**: Two coordinate transformations are critical:
+- `toCanvasCoords(x, y)`: Converts Cartesian to canvas coordinates (inverts Y-axis)
+- `toCartesianCoords(canvasX, canvasY)`: Converts canvas to Cartesian coordinates
+
+**Canvas Drawing Functions**:
+- `drawGrid()`: Renders 40px grid, axes, and labels
+- `drawRectangle(x1, y1, x2, y2, color)`: Draws filled rectangles with opposite corners
+- `drawLineSegment(x1, y1, x2, y2, color)`: Draws line segment AC with endpoints
+- `drawUserPoint()`: Renders draggable point B with label
+- `redraw()`: Main render function called on mount and when userPoint changes
+
+**Reactive Calculations**: Rectangle areas update automatically using Svelte's reactive declarations when userPoint changes.
+
+### Configuration
+
+- **Vite**: Standard configuration with Svelte plugin
+- **Svelte**: Uses vitePreprocess for TypeScript/PostCSS support
+- **JavaScript**: ES modules with JSConfig enabling type checking in .js files
+
+## Technical Notes
+
+- Uses Svelte 5's `mount()` API (not legacy `new App()`)
+- Canvas uses 2D context with manual rendering (no framework canvas binding)
+- Styling is component-scoped with dynamic classes (`.largest` highlights larger rectangle)
+- No external state management - all state is local to App.svelte
diff --git a/line-segment-intersection/README.md b/line-segment-intersection/README.md
index 54a2631..c541f89 100644
--- a/line-segment-intersection/README.md
+++ b/line-segment-intersection/README.md
@@ -1,43 +1,65 @@
-# Svelte + Vite
+# Line Segment Intersection Visualizer
 
-This template should help get you started developing with Svelte in Vite.
+An interactive geometric visualization tool that demonstrates rectangle area calculations and their relationship to a line segment.
 
-## Recommended IDE Setup
+## Use Case
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+This tool provides a visual and interactive way to understand how moving a point affects the areas of rectangles formed with fixed anchor points. It's useful for:
 
-## Need an official Svelte framework?
+- **Educational purposes**: Teaching geometric concepts like area calculation and coordinate systems
+- **Visual exploration**: Understanding the relationship between point positions and resulting rectangle areas
+- **Interactive geometry**: Exploring how rectangular areas change as a shared vertex moves along different paths
 
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+## How It Works
 
-## Technical considerations
+The visualization displays:
+- **Point A** at (1, 1) - bottom-left anchor point
+- **Point C** at (6, 7) - top-right anchor point
+- **Point B** - movable point that follows your mouse cursor
+- **Line segment AC** - connecting the two fixed points
+- **Blue rectangle** - formed by points B and C
+- **Red rectangle** - formed by points B and A
 
-**Why use this over SvelteKit?**
+As you move your mouse over the canvas, point B follows the cursor, and the application:
+1. Calculates the width and height of both rectangles in real-time
+2. Computes and displays their areas with the calculation breakdown
+3. Highlights the larger rectangle with a glowing effect
 
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+## Getting Started
 
-This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+### Installation
 
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `checkJs` in the JS template?**
-
-It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```js
-// store.js
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
+```bash
+npm install
 ```
+
+### Running the Application
+
+```bash
+npm run dev
+```
+
+Open your browser to the URL shown in the terminal (typically `http://localhost:5173`).
+
+### Building for Production
+
+```bash
+npm run build
+npm run preview
+```
+
+## Technical Stack
+
+- **Svelte 5** - Reactive UI framework
+- **Vite** - Fast build tool and dev server
+- **HTML5 Canvas** - 2D graphics rendering
+
+## Interface
+
+The canvas displays an 8×8 grid where each cell is 40 pixels. Move your mouse over the grid to control point B and watch the rectangle areas update in real-time below the visualization.
+
+The calculation cards show:
+- Current position of point B
+- Dimensions (width and height) of each rectangle
+- Step-by-step area calculations
+- The larger rectangle is highlighted with a glowing border