{"owner":"datawhalechina","repo":"easy-vibe","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["AGENTS.md","CLAUDE.md"],"skills":{"AGENTS.md":"# Repository Guidelines\n\n## Project Structure & Module Organization\n\n- `docs/`: VitePress site source (Markdown content, sidebar/nav, assets referenced by docs).\n- `docs/.vitepress/theme/`: custom theme, global component registration in `index.js`, shared styles in `style.css`, layout in `Layout.vue`.\n- `docs/.vitepress/theme/components/appendix/*/`: interactive Vue demos used inside appendix pages (e.g. `web-basics/`, `deployment/`).\n- `assets/`: repo-level images/media (if referenced, prefer linking/copying into `docs/public/` or a doc-local folder when appropriate).\n- `scripts/`, `tools/`, `update_readmes.cjs`: utility scripts for maintaining docs.\n\n## Build, Test, and Development Commands\n\nThis repo is a VitePress (Vue 3) documentation project. Requires Node.js **>= 18**.\n\n```bash\nnpm install\nnpm run dev      # start local docs server (hot reload)\nnpm run build    # production build (use as CI-style check)\nnpm run preview  # preview the built site locally\nnpm run format   # run Prettier on the whole repo\n```\n\n## Coding Style & Naming Conventions\n\n- Formatting: Prettier (`npm run format`). Keep diffs small and avoid reformatting unrelated files.\n- Vue components: Vue 3 SFCs with `<script setup>`, PascalCase filenames (e.g. `SemanticTagsDemo.vue`).\n- CSS: prefer VitePress theme variables (`var(--vp-c-*)`) and keep components responsive (`@media (max-width: 720px)` when needed).\n- Docs: use clear headings and short paragraphs; components are referenced in Markdown as `<ComponentName />`.\n\n## Testing Guidelines\n\nThere is no dedicated test framework in this repo. Use `npm run build` as the primary correctness check, and manually verify interactive components in `npm run dev`.\n\n## Commit & Pull Request Guidelines\n\n- Commits follow a Conventional Commits style seen in history: `feat: ...`, `fix: ...`, `docs: ...` (optionally scoped like `feat(docs): ...`).\n- PRs should include: a short description, screenshots/GIFs for UI or component changes, and any relevant paths touched (e.g. `docs/zh-cn/appendix/...`, `docs/.vitepress/theme/...`).\n\n## Configuration & Deployment Notes\n\n- `vercel.json` is present; keep builds reproducible and avoid relying on local-only assets.\n","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\n**Easy-Vibe** is an educational curriculum for learning AI Vibe Coding from zero to advanced levels. It's a documentation-based project using **VitePress** to serve educational content about AI-assisted software development.\n\nThe curriculum follows a progressive four-stage structure:\n\n- **Stage 0 (幼儿园)**: Introduction to AI programming through games\n- **Stage 1 (AI 产品经理)**: Building AI-powered web application prototypes\n- **Stage 2 (初中级开发工程师)**: Full-stack development with databases and deployment\n- **Stage 3 (高级开发工程师)**: Cross-platform development (WeChat mini-programs, Android apps, MCP)\n\n## Development Commands\n\n### Start Local Documentation Server\n\n```bash\nnpm install      # Install dependencies (first time only)\nnpm run dev      # Start VitePress dev server\n```\n\nThe documentation will be available at `http://localhost:5173` (VitePress default port)\n\n### Build/Run Commands\n\n- `npm run dev` - Start VitePress development server with hot reload\n- `npm run build` - Build static site for production (outputs to `docs/.vitepress/dist`)\n- `npm run preview` - Preview production build locally\n- `npm run format` - Format code using Prettier\n\n### Node Version Requirement\n\n- Node.js >= 18.0.0 required (specified in package.json `engines`)\n\n## Project Architecture\n\n### VitePress Base Path Configuration\n\nThe site automatically configures its base path based on the deployment environment:\n\n- **Vercel**: Uses `/` as base (detected via `VERCEL` environment variable)\n- **GitHub Pages / Local**: Uses `/easy-vibe/` as base\n\nThis logic is in `docs/.vitepress/config.mjs:3-5`. When linking assets or configuring paths, the `${base}` variable is used to ensure compatibility across environments.\n\n### Directory Structure\n\n```\neasy-vibe/\n├── docs/                        # Main documentation content (served by VitePress)\n│   ├── .vitepress/             # VitePress configuration and theme\n│   │   ├── config.mjs          # Site configuration (nav, sidebar, plugins)\n│   │   ├── theme/              # Custom theme extensions\n│   │   │   ├── Layout.vue      # Override default layout with typewriter effect\n│   │   │   ├── index.js        # Theme setup (Viewer.js, TypeIt, image optimization)\n│   │   │   └── style.css       # Custom CSS overrides\n│   │   ├── dist/               # Production build output (generated)\n│   │   └── cache/              # VitePress cache (generated)\n│   ├── index.md                # Homepage\n│   ├── public/                 # Static assets (logo.png, etc.)\n│   ├── assets/                 # Symlink to ../assets\n│   ├── stage-1/                # Stage 1 content (AI 产品经理)\n│   ├── stage-2/                # Stage 2 content (初中级开发工程师)\n│   ├── stage-3/                # Stage 3 content (高级开发工程师)\n│   ├── appendix/               # Reference materials (AI capability dictionary)\n│   ├── examples/               # Practical examples and tutorials (legacy)\n│   ├── extra/                  # Additional knowledge (Git, API, RAG, etc.)\n│   ├── guide/                  # Course guide\n│   └── project/                # Legacy project documentation\n├── assets/                     # Images and static assets\n├── package.json                # Project dependencies and scripts\n├── vercel.json                 # Vercel deployment configuration\n└── README.md                   # Project overview and contribution guide\n```\n\n### Content Organization\n\nEach stage follows a numbered chapter structure:\n\n```\nstage-{N}/\n└── {category or chapter-dir}/\n    └── index.md          # Main content file (or .md file directly)\n```\n\nExamples:\n\n- `stage-1/introduction-to-ai-ide/index.md`\n- `stage-2/backend/what-is-api/extra2/extra2-what-is-api.md`\n\n**Note**: Content files may use either `index.md` or direct `.md` files depending on the chapter structure.\n\n### Documentation System (VitePress)\n\nThe project uses **VitePress 2.0.0-alpha.15** with these key features:\n\n**Configuration** (`docs/.vitepress/config.mjs`):\n\n- **Single Sidebar**: Route-based sidebars configured per path prefix (`/stage-1/`, etc.)\n- **Navigation**: Top nav with links to each stage and appendix\n- **Search**: Local search via `minisearch` (no external API required)\n- **Dark Mode**: Built-in VitePress theme with toggle\n\n**Custom Theme** (`docs/.vitepress/theme/`):\n\n- **Image Viewer**: Viewer.js integration for zoom/rotate/flip on all images\n- **Typewriter Effect**: TypeIt.js for homepage hero tagline animation\n- **Image Optimization**: Automatic image height classes based on aspect ratio\n- **Custom Layout**: Extends default theme with `Layout.vue` override\n- **Reading Settings**: Element Plus popover panel for adjusting font size (12-18px) and line height (1.25-1.8) with localStorage persistence\n\n**Key Theme Behaviors**:\n\n- Images with aspect ratio > 1.2 get height-limited classes (tall/very-tall/ultra-tall)\n- Viewer.js initialized on `.vp-doc` container on each route change\n- Typewriter effect only activates on homepage when `frontmatter.hero.tagline` is an array\n- Font size/line height adjustments use CSS custom properties `--ev-doc-font-size` and `--ev-doc-line-height`\n- Reading settings panel appears in nav bar after the search/home buttons (gear icon)\n\n### Sidebar Management\n\nThe sidebar is defined in `docs/.vitepress/config.mjs`. When adding new chapters:\n\n1. Locate the appropriate route prefix section (`/stage-1/`, etc.)\n2. Add a new object with `text` (display name) and `link` (relative path)\n3. For nested items, use `items` array with `collapsed: true|false`\n4. **Links should not include `.md` extension** - VitePress handles this\n5. Links should not include `index` - use directory path with trailing slash\n\nExample pattern:\n\n```javascript\n{\n  text: 'Chapter Title',\n  link: '/stage-1/chapter-directory/'  // Note: trailing slash, no .md\n}\n```\n\n### Asset Management\n\n- Root-level static assets are in `/assets/` at project root\n- Public files (favicon, logo) go in `docs/public/`\n- Images are referenced with relative paths from markdown file location\n- VitePress serves `docs/assets` as symlink to `../assets`\n- Image optimization is automatic via theme (height-limited classes based on aspect ratio)\n\n### Deployment\n\n**Vercel** (vercel.json):\n\n- Build command: `npm run build`\n- Output directory: `docs/.vitepress/dist`\n- Framework: vitepress\n\n**Preview Production Build**:\n\n```bash\nnpm run build\nnpm run preview  # Preview built site locally\n```\n\n### Legacy Content Structure\n\nThe project maintains three legacy sections for backward compatibility:\n\n1. **Project 文档** (`project/`): Older chapter-based tutorials (migrated to Stage 2)\n2. **Extra 扩展知识** (`extra/`): Supplementary topics - Git, APIs, RAG, deployment (migrated to Stage 2/3)\n3. **Examples 实战案例** (`examples/`): Practical tutorials (migrated to Stage 0/3)\n\nWhen updating content, prefer integrating into the stage structure over adding to legacy sections.\n\n## Content Guidelines\n\n### Writing New Chapters\n\n1. Create directory: `docs/stage-{N}/{chapter-directory}/`\n2. Create `index.md` or direct `.md` file with chapter content\n3. Update `docs/.vitepress/config.mjs` sidebar with the new entry\n4. Follow Chinese language conventions (this is a Chinese curriculum)\n\n### Content Status Markers\n\nIn README.md, use these status indicators:\n\n- ✅ Completed\n- 🚧 In progress/Under construction\n\n### File Naming Conventions\n\n- Use kebab-case for directories: `1.1-introduction-to-ai-ide`, `frontend`, `backend`\n- Content can be either `index.md` in a directory or a direct `.md` file\n- Images use descriptive names; can be in chapter subdirectories or root `/assets/`\n\n### Code Formatting\n\nPrettier configuration (`.prettierrc`):\n\n- No semicolons (`semi: false`)\n- Single quotes (`singleQuote: true`)\n- No trailing commas (`trailingComma: \"none\"`)\n\nRun `npm run format` before committing code changes.\n\n## Interactive Vue Components\n\n### Component Registration\n\nAll interactive Vue components for the documentation are registered in `docs/.vitepress/theme/index.js`. To add a new component:\n\n1. Create the `.vue` file in the appropriate subdirectory of `docs/.vitepress/theme/components/`\n2. Import the component in `docs/.vitepress/theme/index.js`\n3. Register the component using `app.component('ComponentName', ComponentName)` in the `enhanceApp` function\n\n### Component Categories\n\nComponents are organized by topic:\n\n- `appendix/llm-intro/` - Large Language Model interactive demos\n- `appendix/vlm-intro/` - Vision Language Model interactive demos\n- `appendix/git-intro/` - Git workflow visualizations\n- `appendix/terminal-intro/` - Terminal/CLI interactive demos\n- `appendix/web-basics/` - HTML/CSS/JavaScript fundamentals\n- `appendix/auth-design/` - Authentication/authorization demos\n- `appendix/cache-design/` - Caching strategy visualizations\n- `appendix/database-intro/` - Database fundamentals\n- `appendix/queue-design/` - Message queue demos\n- `appendix/operations/` - DevOps/monitoring demos\n- `appendix/deployment/` - Deployment architecture demos\n- `appendix/frontend-performance/` - Frontend performance demos\n- `appendix/frontend-evolution/` - Frontend history/evolution demos\n- `appendix/backend-evolution/` - Backend architecture evolution\n- `appendix/backend-languages/` - Backend language comparisons\n\n### Using Components in Markdown\n\nComponents can be used directly in markdown files:\n\n```markdown\n## LLM Basics\n\n<LLMQuickStartDemo />\n\n### Tokenization\n\n<TokenizationDemo />\n```\n\n### Component Development Best Practices\n\n1. **Props**: Use props for configurable demo parameters\n2. **Styling**: Use scoped CSS or Tailwind-like utility classes\n3. **Responsiveness**: Ensure components work on mobile and desktop\n4. **Accessibility**: Include aria labels where appropriate\n5. **i18n**: Keep text content minimal or use props for text\n\n## Multi-language Support\n\n### Supported Locales\n\nThe project supports 13 languages:\n\n- `zh-cn` - Simplified Chinese (primary)\n- `zh-tw` - Traditional Chinese\n- `en-us` - English (US)\n- `ja-jp` - Japanese\n- `ko-kr` - Korean\n- `es-es` - Spanish\n- `fr-fr` - French\n- `de-de` - German\n- `ar-sa` - Arabic\n- `vi-vn` - Vietnamese\n\n### Adding Multi-language Content\n\n1. Create content in `docs/{locale}/` following the same structure as `docs/zh-cn/`\n2. Add locale configuration in `docs/.vitepress/config.mjs` under `locales`\n3. Copy the sidebar structure from `zh-cn` and translate the text values\n\n### Content Translation Priority\n\n1. **Primary**: `zh-cn` (Simplified Chinese) - always complete this first\n2. **Secondary**: `en-us` (English) - for international reach\n3. **Tertiary**: Other languages based on contributor availability\n\n## Permissions\n\nThe project has configured bash permissions in `.claude/settings.local.json`:\n\n- File operations: `which`, `find`, `mv`, `tree`, `cat`, `curl`, `lsof`, `mkdir`, `cp`, `ls`\n- Process management: `xargs ps`, `kill`\n- Development: `npm run dev`, `npm run build`, `npm run preview`, `npm run format`\n\n## Key Context for Development\n\n- **Educational Focus**: This is curriculum content, not application code\n- **Target Audience**: Beginners to advanced developers learning AI-assisted programming\n- **Language**: Primary content is in Chinese\n- **Build Pipeline**: VitePress requires build step for production (`npm run build`)\n- **Git Workflow**: Content changes should preserve formatting and structure\n- **Asset Paths**: Always use relative paths from markdown file location\n\nWhen making changes:\n\n- Preserve the VitePress configuration in `docs/.vitepress/config.mjs`\n- Maintain sidebar structure consistency in config.mjs\n- Test locally with `npm run dev` before committing\n- Check that image links work correctly\n- Ensure theme customizations in `.vitepress/theme/` are not broken\n- Run `npm run format` before committing code changes (uses Prettier: no semicolons, single quotes)\n"},"files":{"AGENTS.md":"# Repository Guidelines\n\n## Project Structure & Module Organization\n\n- `docs/`: VitePress site source (Markdown content, sidebar/nav, assets referenced by docs).\n- `docs/.vitepress/theme/`: custom theme, global component registration in `index.js`, shared styles in `style.css`, layout in `Layout.vue`.\n- `docs/.vitepress/theme/components/appendix/*/`: interactive Vue demos used inside appendix pages (e.g. `web-basics/`, `deployment/`).\n- `assets/`: repo-level images/media (if referenced, prefer linking/copying into `docs/public/` or a doc-local folder when appropriate).\n- `scripts/`, `tools/`, `update_readmes.cjs`: utility scripts for maintaining docs.\n\n## Build, Test, and Development Commands\n\nThis repo is a VitePress (Vue 3) documentation project. Requires Node.js **>= 18**.\n\n```bash\nnpm install\nnpm run dev      # start local docs server (hot reload)\nnpm run build    # production build (use as CI-style check)\nnpm run preview  # preview the built site locally\nnpm run format   # run Prettier on the whole repo\n```\n\n## Coding Style & Naming Conventions\n\n- Formatting: Prettier (`npm run format`). Keep diffs small and avoid reformatting unrelated files.\n- Vue components: Vue 3 SFCs with `<script setup>`, PascalCase filenames (e.g. `SemanticTagsDemo.vue`).\n- CSS: prefer VitePress theme variables (`var(--vp-c-*)`) and keep components responsive (`@media (max-width: 720px)` when needed).\n- Docs: use clear headings and short paragraphs; components are referenced in Markdown as `<ComponentName />`.\n\n## Testing Guidelines\n\nThere is no dedicated test framework in this repo. Use `npm run build` as the primary correctness check, and manually verify interactive components in `npm run dev`.\n\n## Commit & Pull Request Guidelines\n\n- Commits follow a Conventional Commits style seen in history: `feat: ...`, `fix: ...`, `docs: ...` (optionally scoped like `feat(docs): ...`).\n- PRs should include: a short description, screenshots/GIFs for UI or component changes, and any relevant paths touched (e.g. `docs/zh-cn/appendix/...`, `docs/.vitepress/theme/...`).\n\n## Configuration & Deployment Notes\n\n- `vercel.json` is present; keep builds reproducible and avoid relying on local-only assets.\n","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\n**Easy-Vibe** is an educational curriculum for learning AI Vibe Coding from zero to advanced levels. It's a documentation-based project using **VitePress** to serve educational content about AI-assisted software development.\n\nThe curriculum follows a progressive four-stage structure:\n\n- **Stage 0 (幼儿园)**: Introduction to AI programming through games\n- **Stage 1 (AI 产品经理)**: Building AI-powered web application prototypes\n- **Stage 2 (初中级开发工程师)**: Full-stack development with databases and deployment\n- **Stage 3 (高级开发工程师)**: Cross-platform development (WeChat mini-programs, Android apps, MCP)\n\n## Development Commands\n\n### Start Local Documentation Server\n\n```bash\nnpm install      # Install dependencies (first time only)\nnpm run dev      # Start VitePress dev server\n```\n\nThe documentation will be available at `http://localhost:5173` (VitePress default port)\n\n### Build/Run Commands\n\n- `npm run dev` - Start VitePress development server with hot reload\n- `npm run build` - Build static site for production (outputs to `docs/.vitepress/dist`)\n- `npm run preview` - Preview production build locally\n- `npm run format` - Format code using Prettier\n\n### Node Version Requirement\n\n- Node.js >= 18.0.0 required (specified in package.json `engines`)\n\n## Project Architecture\n\n### VitePress Base Path Configuration\n\nThe site automatically configures its base path based on the deployment environment:\n\n- **Vercel**: Uses `/` as base (detected via `VERCEL` environment variable)\n- **GitHub Pages / Local**: Uses `/easy-vibe/` as base\n\nThis logic is in `docs/.vitepress/config.mjs:3-5`. When linking assets or configuring paths, the `${base}` variable is used to ensure compatibility across environments.\n\n### Directory Structure\n\n```\neasy-vibe/\n├── docs/                        # Main documentation content (served by VitePress)\n│   ├── .vitepress/             # VitePress configuration and theme\n│   │   ├── config.mjs          # Site configuration (nav, sidebar, plugins)\n│   │   ├── theme/              # Custom theme extensions\n│   │   │   ├── Layout.vue      # Override default layout with typewriter effect\n│   │   │   ├── index.js        # Theme setup (Viewer.js, TypeIt, image optimization)\n│   │   │   └── style.css       # Custom CSS overrides\n│   │   ├── dist/               # Production build output (generated)\n│   │   └── cache/              # VitePress cache (generated)\n│   ├── index.md                # Homepage\n│   ├── public/                 # Static assets (logo.png, etc.)\n│   ├── assets/                 # Symlink to ../assets\n│   ├── stage-1/                # Stage 1 content (AI 产品经理)\n│   ├── stage-2/                # Stage 2 content (初中级开发工程师)\n│   ├── stage-3/                # Stage 3 content (高级开发工程师)\n│   ├── appendix/               # Reference materials (AI capability dictionary)\n│   ├── examples/               # Practical examples and tutorials (legacy)\n│   ├── extra/                  # Additional knowledge (Git, API, RAG, etc.)\n│   ├── guide/                  # Course guide\n│   └── project/                # Legacy project documentation\n├── assets/                     # Images and static assets\n├── package.json                # Project dependencies and scripts\n├── vercel.json                 # Vercel deployment configuration\n└── README.md                   # Project overview and contribution guide\n```\n\n### Content Organization\n\nEach stage follows a numbered chapter structure:\n\n```\nstage-{N}/\n└── {category or chapter-dir}/\n    └── index.md          # Main content file (or .md file directly)\n```\n\nExamples:\n\n- `stage-1/introduction-to-ai-ide/index.md`\n- `stage-2/backend/what-is-api/extra2/extra2-what-is-api.md`\n\n**Note**: Content files may use either `index.md` or direct `.md` files depending on the chapter structure.\n\n### Documentation System (VitePress)\n\nThe project uses **VitePress 2.0.0-alpha.15** with these key features:\n\n**Configuration** (`docs/.vitepress/config.mjs`):\n\n- **Single Sidebar**: Route-based sidebars configured per path prefix (`/stage-1/`, etc.)\n- **Navigation**: Top nav with links to each stage and appendix\n- **Search**: Local search via `minisearch` (no external API required)\n- **Dark Mode**: Built-in VitePress theme with toggle\n\n**Custom Theme** (`docs/.vitepress/theme/`):\n\n- **Image Viewer**: Viewer.js integration for zoom/rotate/flip on all images\n- **Typewriter Effect**: TypeIt.js for homepage hero tagline animation\n- **Image Optimization**: Automatic image height classes based on aspect ratio\n- **Custom Layout**: Extends default theme with `Layout.vue` override\n- **Reading Settings**: Element Plus popover panel for adjusting font size (12-18px) and line height (1.25-1.8) with localStorage persistence\n\n**Key Theme Behaviors**:\n\n- Images with aspect ratio > 1.2 get height-limited classes (tall/very-tall/ultra-tall)\n- Viewer.js initialized on `.vp-doc` container on each route change\n- Typewriter effect only activates on homepage when `frontmatter.hero.tagline` is an array\n- Font size/line height adjustments use CSS custom properties `--ev-doc-font-size` and `--ev-doc-line-height`\n- Reading settings panel appears in nav bar after the search/home buttons (gear icon)\n\n### Sidebar Management\n\nThe sidebar is defined in `docs/.vitepress/config.mjs`. When adding new chapters:\n\n1. Locate the appropriate route prefix section (`/stage-1/`, etc.)\n2. Add a new object with `text` (display name) and `link` (relative path)\n3. For nested items, use `items` array with `collapsed: true|false`\n4. **Links should not include `.md` extension** - VitePress handles this\n5. Links should not include `index` - use directory path with trailing slash\n\nExample pattern:\n\n```javascript\n{\n  text: 'Chapter Title',\n  link: '/stage-1/chapter-directory/'  // Note: trailing slash, no .md\n}\n```\n\n### Asset Management\n\n- Root-level static assets are in `/assets/` at project root\n- Public files (favicon, logo) go in `docs/public/`\n- Images are referenced with relative paths from markdown file location\n- VitePress serves `docs/assets` as symlink to `../assets`\n- Image optimization is automatic via theme (height-limited classes based on aspect ratio)\n\n### Deployment\n\n**Vercel** (vercel.json):\n\n- Build command: `npm run build`\n- Output directory: `docs/.vitepress/dist`\n- Framework: vitepress\n\n**Preview Production Build**:\n\n```bash\nnpm run build\nnpm run preview  # Preview built site locally\n```\n\n### Legacy Content Structure\n\nThe project maintains three legacy sections for backward compatibility:\n\n1. **Project 文档** (`project/`): Older chapter-based tutorials (migrated to Stage 2)\n2. **Extra 扩展知识** (`extra/`): Supplementary topics - Git, APIs, RAG, deployment (migrated to Stage 2/3)\n3. **Examples 实战案例** (`examples/`): Practical tutorials (migrated to Stage 0/3)\n\nWhen updating content, prefer integrating into the stage structure over adding to legacy sections.\n\n## Content Guidelines\n\n### Writing New Chapters\n\n1. Create directory: `docs/stage-{N}/{chapter-directory}/`\n2. Create `index.md` or direct `.md` file with chapter content\n3. Update `docs/.vitepress/config.mjs` sidebar with the new entry\n4. Follow Chinese language conventions (this is a Chinese curriculum)\n\n### Content Status Markers\n\nIn README.md, use these status indicators:\n\n- ✅ Completed\n- 🚧 In progress/Under construction\n\n### File Naming Conventions\n\n- Use kebab-case for directories: `1.1-introduction-to-ai-ide`, `frontend`, `backend`\n- Content can be either `index.md` in a directory or a direct `.md` file\n- Images use descriptive names; can be in chapter subdirectories or root `/assets/`\n\n### Code Formatting\n\nPrettier configuration (`.prettierrc`):\n\n- No semicolons (`semi: false`)\n- Single quotes (`singleQuote: true`)\n- No trailing commas (`trailingComma: \"none\"`)\n\nRun `npm run format` before committing code changes.\n\n## Interactive Vue Components\n\n### Component Registration\n\nAll interactive Vue components for the documentation are registered in `docs/.vitepress/theme/index.js`. To add a new component:\n\n1. Create the `.vue` file in the appropriate subdirectory of `docs/.vitepress/theme/components/`\n2. Import the component in `docs/.vitepress/theme/index.js`\n3. Register the component using `app.component('ComponentName', ComponentName)` in the `enhanceApp` function\n\n### Component Categories\n\nComponents are organized by topic:\n\n- `appendix/llm-intro/` - Large Language Model interactive demos\n- `appendix/vlm-intro/` - Vision Language Model interactive demos\n- `appendix/git-intro/` - Git workflow visualizations\n- `appendix/terminal-intro/` - Terminal/CLI interactive demos\n- `appendix/web-basics/` - HTML/CSS/JavaScript fundamentals\n- `appendix/auth-design/` - Authentication/authorization demos\n- `appendix/cache-design/` - Caching strategy visualizations\n- `appendix/database-intro/` - Database fundamentals\n- `appendix/queue-design/` - Message queue demos\n- `appendix/operations/` - DevOps/monitoring demos\n- `appendix/deployment/` - Deployment architecture demos\n- `appendix/frontend-performance/` - Frontend performance demos\n- `appendix/frontend-evolution/` - Frontend history/evolution demos\n- `appendix/backend-evolution/` - Backend architecture evolution\n- `appendix/backend-languages/` - Backend language comparisons\n\n### Using Components in Markdown\n\nComponents can be used directly in markdown files:\n\n```markdown\n## LLM Basics\n\n<LLMQuickStartDemo />\n\n### Tokenization\n\n<TokenizationDemo />\n```\n\n### Component Development Best Practices\n\n1. **Props**: Use props for configurable demo parameters\n2. **Styling**: Use scoped CSS or Tailwind-like utility classes\n3. **Responsiveness**: Ensure components work on mobile and desktop\n4. **Accessibility**: Include aria labels where appropriate\n5. **i18n**: Keep text content minimal or use props for text\n\n## Multi-language Support\n\n### Supported Locales\n\nThe project supports 13 languages:\n\n- `zh-cn` - Simplified Chinese (primary)\n- `zh-tw` - Traditional Chinese\n- `en-us` - English (US)\n- `ja-jp` - Japanese\n- `ko-kr` - Korean\n- `es-es` - Spanish\n- `fr-fr` - French\n- `de-de` - German\n- `ar-sa` - Arabic\n- `vi-vn` - Vietnamese\n\n### Adding Multi-language Content\n\n1. Create content in `docs/{locale}/` following the same structure as `docs/zh-cn/`\n2. Add locale configuration in `docs/.vitepress/config.mjs` under `locales`\n3. Copy the sidebar structure from `zh-cn` and translate the text values\n\n### Content Translation Priority\n\n1. **Primary**: `zh-cn` (Simplified Chinese) - always complete this first\n2. **Secondary**: `en-us` (English) - for international reach\n3. **Tertiary**: Other languages based on contributor availability\n\n## Permissions\n\nThe project has configured bash permissions in `.claude/settings.local.json`:\n\n- File operations: `which`, `find`, `mv`, `tree`, `cat`, `curl`, `lsof`, `mkdir`, `cp`, `ls`\n- Process management: `xargs ps`, `kill`\n- Development: `npm run dev`, `npm run build`, `npm run preview`, `npm run format`\n\n## Key Context for Development\n\n- **Educational Focus**: This is curriculum content, not application code\n- **Target Audience**: Beginners to advanced developers learning AI-assisted programming\n- **Language**: Primary content is in Chinese\n- **Build Pipeline**: VitePress requires build step for production (`npm run build`)\n- **Git Workflow**: Content changes should preserve formatting and structure\n- **Asset Paths**: Always use relative paths from markdown file location\n\nWhen making changes:\n\n- Preserve the VitePress configuration in `docs/.vitepress/config.mjs`\n- Maintain sidebar structure consistency in config.mjs\n- Test locally with `npm run dev` before committing\n- Check that image links work correctly\n- Ensure theme customizations in `.vitepress/theme/` are not broken\n- Run `npm run format` before committing code changes (uses Prettier: no semicolons, single quotes)\n"},"items":[{"name":"AGENTS.md","path":"AGENTS.md","title":"AGENTS.md","content":"# Repository Guidelines\n\n## Project Structure & Module Organization\n\n- `docs/`: VitePress site source (Markdown content, sidebar/nav, assets referenced by docs).\n- `docs/.vitepress/theme/`: custom theme, global component registration in `index.js`, shared styles in `style.css`, layout in `Layout.vue`.\n- `docs/.vitepress/theme/components/appendix/*/`: interactive Vue demos used inside appendix pages (e.g. `web-basics/`, `deployment/`).\n- `assets/`: repo-level images/media (if referenced, prefer linking/copying into `docs/public/` or a doc-local folder when appropriate).\n- `scripts/`, `tools/`, `update_readmes.cjs`: utility scripts for maintaining docs.\n\n## Build, Test, and Development Commands\n\nThis repo is a VitePress (Vue 3) documentation project. Requires Node.js **>= 18**.\n\n```bash\nnpm install\nnpm run dev      # start local docs server (hot reload)\nnpm run build    # production build (use as CI-style check)\nnpm run preview  # preview the built site locally\nnpm run format   # run Prettier on the whole repo\n```\n\n## Coding Style & Naming Conventions\n\n- Formatting: Prettier (`npm run format`). Keep diffs small and avoid reformatting unrelated files.\n- Vue components: Vue 3 SFCs with `<script setup>`, PascalCase filenames (e.g. `SemanticTagsDemo.vue`).\n- CSS: prefer VitePress theme variables (`var(--vp-c-*)`) and keep components responsive (`@media (max-width: 720px)` when needed).\n- Docs: use clear headings and short paragraphs; components are referenced in Markdown as `<ComponentName />`.\n\n## Testing Guidelines\n\nThere is no dedicated test framework in this repo. Use `npm run build` as the primary correctness check, and manually verify interactive components in `npm run dev`.\n\n## Commit & Pull Request Guidelines\n\n- Commits follow a Conventional Commits style seen in history: `feat: ...`, `fix: ...`, `docs: ...` (optionally scoped like `feat(docs): ...`).\n- PRs should include: a short description, screenshots/GIFs for UI or component changes, and any relevant paths touched (e.g. `docs/zh-cn/appendix/...`, `docs/.vitepress/theme/...`).\n\n## Configuration & Deployment Notes\n\n- `vercel.json` is present; keep builds reproducible and avoid relying on local-only assets.\n","category":"root","tokens":550},{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\n**Easy-Vibe** is an educational curriculum for learning AI Vibe Coding from zero to advanced levels. It's a documentation-based project using **VitePress** to serve educational content about AI-assisted software development.\n\nThe curriculum follows a progressive four-stage structure:\n\n- **Stage 0 (幼儿园)**: Introduction to AI programming through games\n- **Stage 1 (AI 产品经理)**: Building AI-powered web application prototypes\n- **Stage 2 (初中级开发工程师)**: Full-stack development with databases and deployment\n- **Stage 3 (高级开发工程师)**: Cross-platform development (WeChat mini-programs, Android apps, MCP)\n\n## Development Commands\n\n### Start Local Documentation Server\n\n```bash\nnpm install      # Install dependencies (first time only)\nnpm run dev      # Start VitePress dev server\n```\n\nThe documentation will be available at `http://localhost:5173` (VitePress default port)\n\n### Build/Run Commands\n\n- `npm run dev` - Start VitePress development server with hot reload\n- `npm run build` - Build static site for production (outputs to `docs/.vitepress/dist`)\n- `npm run preview` - Preview production build locally\n- `npm run format` - Format code using Prettier\n\n### Node Version Requirement\n\n- Node.js >= 18.0.0 required (specified in package.json `engines`)\n\n## Project Architecture\n\n### VitePress Base Path Configuration\n\nThe site automatically configures its base path based on the deployment environment:\n\n- **Vercel**: Uses `/` as base (detected via `VERCEL` environment variable)\n- **GitHub Pages / Local**: Uses `/easy-vibe/` as base\n\nThis logic is in `docs/.vitepress/config.mjs:3-5`. When linking assets or configuring paths, the `${base}` variable is used to ensure compatibility across environments.\n\n### Directory Structure\n\n```\neasy-vibe/\n├── docs/                        # Main documentation content (served by VitePress)\n│   ├── .vitepress/             # VitePress configuration and theme\n│   │   ├── config.mjs          # Site configuration (nav, sidebar, plugins)\n│   │   ├── theme/              # Custom theme extensions\n│   │   │   ├── Layout.vue      # Override default layout with typewriter effect\n│   │   │   ├── index.js        # Theme setup (Viewer.js, TypeIt, image optimization)\n│   │   │   └── style.css       # Custom CSS overrides\n│   │   ├── dist/               # Production build output (generated)\n│   │   └── cache/              # VitePress cache (generated)\n│   ├── index.md                # Homepage\n│   ├── public/                 # Static assets (logo.png, etc.)\n│   ├── assets/                 # Symlink to ../assets\n│   ├── stage-1/                # Stage 1 content (AI 产品经理)\n│   ├── stage-2/                # Stage 2 content (初中级开发工程师)\n│   ├── stage-3/                # Stage 3 content (高级开发工程师)\n│   ├── appendix/               # Reference materials (AI capability dictionary)\n│   ├── examples/               # Practical examples and tutorials (legacy)\n│   ├── extra/                  # Additional knowledge (Git, API, RAG, etc.)\n│   ├── guide/                  # Course guide\n│   └── project/                # Legacy project documentation\n├── assets/                     # Images and static assets\n├── package.json                # Project dependencies and scripts\n├── vercel.json                 # Vercel deployment configuration\n└── README.md                   # Project overview and contribution guide\n```\n\n### Content Organization\n\nEach stage follows a numbered chapter structure:\n\n```\nstage-{N}/\n└── {category or chapter-dir}/\n    └── index.md          # Main content file (or .md file directly)\n```\n\nExamples:\n\n- `stage-1/introduction-to-ai-ide/index.md`\n- `stage-2/backend/what-is-api/extra2/extra2-what-is-api.md`\n\n**Note**: Content files may use either `index.md` or direct `.md` files depending on the chapter structure.\n\n### Documentation System (VitePress)\n\nThe project uses **VitePress 2.0.0-alpha.15** with these key features:\n\n**Configuration** (`docs/.vitepress/config.mjs`):\n\n- **Single Sidebar**: Route-based sidebars configured per path prefix (`/stage-1/`, etc.)\n- **Navigation**: Top nav with links to each stage and appendix\n- **Search**: Local search via `minisearch` (no external API required)\n- **Dark Mode**: Built-in VitePress theme with toggle\n\n**Custom Theme** (`docs/.vitepress/theme/`):\n\n- **Image Viewer**: Viewer.js integration for zoom/rotate/flip on all images\n- **Typewriter Effect**: TypeIt.js for homepage hero tagline animation\n- **Image Optimization**: Automatic image height classes based on aspect ratio\n- **Custom Layout**: Extends default theme with `Layout.vue` override\n- **Reading Settings**: Element Plus popover panel for adjusting font size (12-18px) and line height (1.25-1.8) with localStorage persistence\n\n**Key Theme Behaviors**:\n\n- Images with aspect ratio > 1.2 get height-limited classes (tall/very-tall/ultra-tall)\n- Viewer.js initialized on `.vp-doc` container on each route change\n- Typewriter effect only activates on homepage when `frontmatter.hero.tagline` is an array\n- Font size/line height adjustments use CSS custom properties `--ev-doc-font-size` and `--ev-doc-line-height`\n- Reading settings panel appears in nav bar after the search/home buttons (gear icon)\n\n### Sidebar Management\n\nThe sidebar is defined in `docs/.vitepress/config.mjs`. When adding new chapters:\n\n1. Locate the appropriate route prefix section (`/stage-1/`, etc.)\n2. Add a new object with `text` (display name) and `link` (relative path)\n3. For nested items, use `items` array with `collapsed: true|false`\n4. **Links should not include `.md` extension** - VitePress handles this\n5. Links should not include `index` - use directory path with trailing slash\n\nExample pattern:\n\n```javascript\n{\n  text: 'Chapter Title',\n  link: '/stage-1/chapter-directory/'  // Note: trailing slash, no .md\n}\n```\n\n### Asset Management\n\n- Root-level static assets are in `/assets/` at project root\n- Public files (favicon, logo) go in `docs/public/`\n- Images are referenced with relative paths from markdown file location\n- VitePress serves `docs/assets` as symlink to `../assets`\n- Image optimization is automatic via theme (height-limited classes based on aspect ratio)\n\n### Deployment\n\n**Vercel** (vercel.json):\n\n- Build command: `npm run build`\n- Output directory: `docs/.vitepress/dist`\n- Framework: vitepress\n\n**Preview Production Build**:\n\n```bash\nnpm run build\nnpm run preview  # Preview built site locally\n```\n\n### Legacy Content Structure\n\nThe project maintains three legacy sections for backward compatibility:\n\n1. **Project 文档** (`project/`): Older chapter-based tutorials (migrated to Stage 2)\n2. **Extra 扩展知识** (`extra/`): Supplementary topics - Git, APIs, RAG, deployment (migrated to Stage 2/3)\n3. **Examples 实战案例** (`examples/`): Practical tutorials (migrated to Stage 0/3)\n\nWhen updating content, prefer integrating into the stage structure over adding to legacy sections.\n\n## Content Guidelines\n\n### Writing New Chapters\n\n1. Create directory: `docs/stage-{N}/{chapter-directory}/`\n2. Create `index.md` or direct `.md` file with chapter content\n3. Update `docs/.vitepress/config.mjs` sidebar with the new entry\n4. Follow Chinese language conventions (this is a Chinese curriculum)\n\n### Content Status Markers\n\nIn README.md, use these status indicators:\n\n- ✅ Completed\n- 🚧 In progress/Under construction\n\n### File Naming Conventions\n\n- Use kebab-case for directories: `1.1-introduction-to-ai-ide`, `frontend`, `backend`\n- Content can be either `index.md` in a directory or a direct `.md` file\n- Images use descriptive names; can be in chapter subdirectories or root `/assets/`\n\n### Code Formatting\n\nPrettier configuration (`.prettierrc`):\n\n- No semicolons (`semi: false`)\n- Single quotes (`singleQuote: true`)\n- No trailing commas (`trailingComma: \"none\"`)\n\nRun `npm run format` before committing code changes.\n\n## Interactive Vue Components\n\n### Component Registration\n\nAll interactive Vue components for the documentation are registered in `docs/.vitepress/theme/index.js`. To add a new component:\n\n1. Create the `.vue` file in the appropriate subdirectory of `docs/.vitepress/theme/components/`\n2. Import the component in `docs/.vitepress/theme/index.js`\n3. Register the component using `app.component('ComponentName', ComponentName)` in the `enhanceApp` function\n\n### Component Categories\n\nComponents are organized by topic:\n\n- `appendix/llm-intro/` - Large Language Model interactive demos\n- `appendix/vlm-intro/` - Vision Language Model interactive demos\n- `appendix/git-intro/` - Git workflow visualizations\n- `appendix/terminal-intro/` - Terminal/CLI interactive demos\n- `appendix/web-basics/` - HTML/CSS/JavaScript fundamentals\n- `appendix/auth-design/` - Authentication/authorization demos\n- `appendix/cache-design/` - Caching strategy visualizations\n- `appendix/database-intro/` - Database fundamentals\n- `appendix/queue-design/` - Message queue demos\n- `appendix/operations/` - DevOps/monitoring demos\n- `appendix/deployment/` - Deployment architecture demos\n- `appendix/frontend-performance/` - Frontend performance demos\n- `appendix/frontend-evolution/` - Frontend history/evolution demos\n- `appendix/backend-evolution/` - Backend architecture evolution\n- `appendix/backend-languages/` - Backend language comparisons\n\n### Using Components in Markdown\n\nComponents can be used directly in markdown files:\n\n```markdown\n## LLM Basics\n\n<LLMQuickStartDemo />\n\n### Tokenization\n\n<TokenizationDemo />\n```\n\n### Component Development Best Practices\n\n1. **Props**: Use props for configurable demo parameters\n2. **Styling**: Use scoped CSS or Tailwind-like utility classes\n3. **Responsiveness**: Ensure components work on mobile and desktop\n4. **Accessibility**: Include aria labels where appropriate\n5. **i18n**: Keep text content minimal or use props for text\n\n## Multi-language Support\n\n### Supported Locales\n\nThe project supports 13 languages:\n\n- `zh-cn` - Simplified Chinese (primary)\n- `zh-tw` - Traditional Chinese\n- `en-us` - English (US)\n- `ja-jp` - Japanese\n- `ko-kr` - Korean\n- `es-es` - Spanish\n- `fr-fr` - French\n- `de-de` - German\n- `ar-sa` - Arabic\n- `vi-vn` - Vietnamese\n\n### Adding Multi-language Content\n\n1. Create content in `docs/{locale}/` following the same structure as `docs/zh-cn/`\n2. Add locale configuration in `docs/.vitepress/config.mjs` under `locales`\n3. Copy the sidebar structure from `zh-cn` and translate the text values\n\n### Content Translation Priority\n\n1. **Primary**: `zh-cn` (Simplified Chinese) - always complete this first\n2. **Secondary**: `en-us` (English) - for international reach\n3. **Tertiary**: Other languages based on contributor availability\n\n## Permissions\n\nThe project has configured bash permissions in `.claude/settings.local.json`:\n\n- File operations: `which`, `find`, `mv`, `tree`, `cat`, `curl`, `lsof`, `mkdir`, `cp`, `ls`\n- Process management: `xargs ps`, `kill`\n- Development: `npm run dev`, `npm run build`, `npm run preview`, `npm run format`\n\n## Key Context for Development\n\n- **Educational Focus**: This is curriculum content, not application code\n- **Target Audience**: Beginners to advanced developers learning AI-assisted programming\n- **Language**: Primary content is in Chinese\n- **Build Pipeline**: VitePress requires build step for production (`npm run build`)\n- **Git Workflow**: Content changes should preserve formatting and structure\n- **Asset Paths**: Always use relative paths from markdown file location\n\nWhen making changes:\n\n- Preserve the VitePress configuration in `docs/.vitepress/config.mjs`\n- Maintain sidebar structure consistency in config.mjs\n- Test locally with `npm run dev` before committing\n- Check that image links work correctly\n- Ensure theme customizations in `.vitepress/theme/` are not broken\n- Run `npm run format` before committing code changes (uses Prettier: no semicolons, single quotes)\n","category":"root","tokens":2976}]}