ut-code · Yokomi422 · Nov 1, 2025
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,97 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+ut.code(); Learn is a web technology learning platform built with Docusaurus. It provides educational materials for web development, covering HTML, CSS, JavaScript, Node.js, React, and more advanced topics. The content is written in MDX format and automatically generates a documentation website.
+
+## Common Commands
+
+### Development
+
+```bash
+npm ci                  # Install dependencies (preferred over npm install)
+npm start              # Start development server with hot reload
+npm run build          # Build production site
+npm run serve          # Serve built site locally
+```
+
+### Code Quality
+
+```bash
+npm run format         # Format code with Prettier
+npm run format:check   # Check code formatting
+```
+
+### Before Committing
+
+Always run these commands before committing:
+
+```bash
+npm run format
+npm run build
+```
+
+## Architecture
+
+### Directory Structure
+
+- `docs/` - Main content directory with MDX files
+  - `1-trial-session/` - Beginner tutorials
+  - `2-browser-apps/` - Browser-based applications
+  - `3-web-servers/` - Server-side development
+  - `4-advanced/` - Advanced topics (TypeScript, React, bundlers)
+  - `5-team-development/` - Team development practices
+  - `_samples/` - Code examples within each section
+- `src/` - Docusaurus customizations
+  - `components/` - Custom React components for MDX
+  - `css/` - Custom styling
+  - `pages/` - Static pages
+  - `theme/` - Theme customizations
+- `static/` - Static assets (images, etc.)
+
+### Content Structure
+
+- All content files are `index.mdx` within their respective directories
+- Sidebar navigation is auto-generated based on directory structure
+- Each section contains practical code samples in `_samples/` subdirectories
+
+### Custom Components
+
+The following custom components are available for use in MDX files:
+
+- `<Term>` - Add popup explanations for technical terms
+- `<Answer>` - Collapsible answer sections for exercises
+- `<ViewSource>` - Buttons to view code on GitHub and CodeSandbox
+- `<ExternalVideoPlayer>` - Embed external videos
+- `<SlideShow>` - Create image slideshows
+
+### Sample Code Organization
+
+Code examples are organized in `_samples/` directories within each topic:
+
+- Each sample has its own `package.json` with dependencies
+- Samples are referenced from main content using `<ViewSource>` component
+- Many samples are runnable Node.js or browser applications
+
+## Development Notes
+
+### Content Editing
+
+- Edit `index.mdx` files in the appropriate `docs/` subdirectory
+- Use MDX syntax (Markdown + JSX components)
+- Math expressions supported via KaTeX (use `$$` for block math, `$` for inline)
+- Mermaid diagrams supported
+- Code highlighting with Prism.js
+
+### Node Version
+
+- Requires Node.js >= 18.0 (specified in `package.json`)
+- Uses `.nvmrc` file for version management
+
+### Formatting
+
+- Uses Prettier for code formatting
+- VSCode configured to use Prettier as default formatter
+- Empty `.prettierrc.json` uses default Prettier settings
diff --git a/docs/4-advanced/04-react/_samples/shopping-cart/eslint.config.js b/docs/4-advanced/04-react/_samples/shopping-cart/eslint.config.js
@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { globalIgnores } from "eslint/config";
+
+export default tseslint.config([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);
diff --git a/docs/4-advanced/04-react/_samples/shopping-cart/index.html b/docs/4-advanced/04-react/_samples/shopping-cart/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React ToDo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>