From 350f0ef203937a6340d21b38e69def555e197623 Mon Sep 17 00:00:00 2001
From: Tom <43104700+hzyu-hub@users.noreply.github.com>
Date: Thu, 7 May 2026 14:58:26 -0400
Subject: [PATCH] Add English translations for README and SKILL files
---
README_EN.md | 281 ++++++++++++++++++++++++++++++++++++
SKILL_EN.md | 391 +++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 672 insertions(+)
create mode 100644 README_EN.md
create mode 100644 SKILL_EN.md
diff --git a/README_EN.md b/README_EN.md
new file mode 100644
index 0000000..fd1810d
--- /dev/null
+++ b/README_EN.md
@@ -0,0 +1,281 @@
+# AetherViz Master
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+
+
+ Interactive Educational Visualization Architect
+ Instantly transform any teaching topic into immersive 3D interactive educational web pages
+
+
+---
+
+## 📖 Project Overview
+
+AetherViz Master is an AI-powered interactive educational visualization tool that transforms abstract teaching concepts into vivid, intuitive 3D interactive web pages. Whether you're a teacher, student, or educational content creator, simply input a topic and it generates a complete, interactive teaching page for you.
+
+### Core Capabilities
+
+- **One-Click Generation**: Input a topic → auto-generate a 3D interactive web page
+- **Smart Adaptation**: Automatically identifies the subject domain and matches the best color scheme and visualization approach
+- **Zero Barrier**: No programming required — generated HTML files work out of the box
+- **Professional Quality**: Three.js + SVG hybrid rendering at 60fps
+
+---
+
+## ✨ Key Features
+
+### 1. 3D Visualization Engine
+- Professional-grade 3D scenes based on Three.js r134
+- Supports physics simulation, particle systems, vector arrows
+- Built-in OrbitControls with mouse drag rotation and scroll zoom
+- Touch device support: touch rotation, pinch-to-zoom
+
+### 2. SVG Enhanced Rendering
+- Overlay SVG 2D charts on top of 3D scenes
+- Function graphs, coordinate systems, flowcharts
+- D3.js data-driven charts (optional)
+- Real-time 3D-2D coordinate synchronization
+
+### 3. Smart Auto-Detection
+
+| Detection Dimension | Description |
+|---------------------|-------------|
+| **Subject Recognition** | Physics / Chemistry / Biology / Math / Astronomy / Programming — auto-switches color theme |
+| **Rendering Scheme** | Auto-selects Three.js / SVG / Hybrid mode based on keywords |
+| **Language Adaptation** | Auto-detects Chinese / English and outputs in the corresponding language |
+
+### 4. Modern UI Design
+- Glassmorphism style
+- Cyber-education aesthetic + neon accent colors
+- Responsive layout for desktop / tablet / mobile
+- Sidebar + control panel + HUD data display
+
+### 5. Complete Teaching Features
+- Learning objectives (checkable tracking)
+- KaTeX math formula real-time rendering
+- Principle explanations (vivid analogies, high school to university level)
+- Collapsible quiz panel
+- Play / Pause / Step / Speed controls
+
+---
+
+## 🚀 Quick Start
+
+### Requirements
+
+- Modern browser (Chrome / Edge / Firefox / Safari)
+- WebGL support
+
+### Local Setup
+
+```bash
+# 1. Clone the repository
+git clone https://github.com/andyhuo520/aetherviz-master.git
+cd aetherviz-master
+
+# 2. Start a local server (choose one)
+python -m http.server 8080
+# or
+npx serve .
+# or
+php -S localhost:8080
+
+# 3. Visit http://localhost:8080
+```
+
+### Using with Claude Code
+
+```bash
+# 1. Start Claude Code
+claude
+
+# 2. Enter a topic
+/aetherviz-master
+# Or directly enter:
+Newton's Second Law
+# Or:
+Uniform Motion
+# Or:
+Photosynthesis
+```
+
+The system will automatically generate a complete HTML file.
+
+---
+
+## 📚 Supported Topic Domains
+
+### Physics
+- Newton's Second Law
+- Uniform Motion / Uniformly Accelerated Motion
+- Electromagnetic Induction
+- Relativistic Time Dilation
+- Quantum Tunneling Effect
+
+### Chemistry
+- Photosynthesis
+- Acid-Base Neutralization
+- Redox Reactions
+- Molecular Structure
+
+### Biology
+- DNA Replication
+- Cellular Respiration
+- Mitosis
+- Genetic Inheritance
+
+### Mathematics
+- Pythagorean Theorem
+- Trigonometric Functions
+- Sine Function Graph
+- Probability Distribution
+
+### Astronomy
+- Planetary Motion Laws
+- Cosmic Expansion
+- Black Holes
+- Solar and Lunar Eclipses
+
+### Programming
+- Algorithm Complexity
+- Data Structures
+- Sorting Algorithms
+- Design Patterns
+
+---
+
+## 🛠 Tech Stack
+
+| Technology | Purpose | Version |
+|------------|---------|--------|
+| Three.js | 3D Rendering Engine | r134 |
+| Tailwind CSS | UI Styling Framework | v3.4+ |
+| KaTeX | Math Formula Rendering | 0.16.11 |
+| D3.js | Data Visualization (optional) | v7 |
+| OrbitControls | 3D Scene Controls | Inline simplified version |
+
+### Rendering Mode Overview
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Topic Input Analysis │
+├─────────────────────────────────────────────────────────────┤
+│ Keyword Detection │
+│ ├── Motion/Particle/Molecule/Mechanics/Celestial → Pure Three.js 3D │
+│ ├── Function/Graph/Curve/Geometry → SVG 2D Chart │
+│ └── Newton/Wave/Energy/Electromagnetic → Three.js + SVG Hybrid │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 📁 Project Structure
+
+```
+aetherviz-master/
+├── README.md # Project documentation (Chinese)
+├── README_EN.md # Project documentation (English)
+├── LICENSE # MIT License
+├── SKILL.md # Claude Skill definition file
+└── docs/
+ └── skill.md # Detailed skill documentation
+```
+
+---
+
+## 💡 Usage Examples
+
+### Example 1: Uniform Motion
+
+After entering the topic, the system automatically:
+1. Identifies as "Physics" → Blue gradient theme
+2. Detects "motion" keyword → Three.js pure 3D mode
+3. Generates: ball motion simulation + velocity slider + displacement trajectory
+
+### Example 2: Trigonometric Functions
+
+After entering the topic, the system automatically:
+1. Identifies as "Mathematics" → Golden gradient theme
+2. Detects "function / graph" keywords → SVG mode
+3. Generates: function waveform SVG chart + parameter sliders + real-time drawing
+
+### Example 3: Waves and Oscillations
+
+After entering the topic, the system automatically:
+1. Identifies as "Physics"
+2. Detects "wave" keyword → Hybrid mode
+3. Generates: 3D spring oscillator + SVG waveform overlay
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and suggestions are welcome!
+
+```bash
+# 1. Fork this repository
+# 2. Create a feature branch
+git checkout -b feature/your-feature
+
+# 3. Commit changes
+git commit -m 'Add amazing feature'
+
+# 4. Push the branch
+git push origin feature/your-feature
+
+# 5. Open a Pull Request
+```
+
+### Contributors
+
+
+ 
+
+
+---
+
+## 📄 License
+
+MIT License - See [LICENSE](LICENSE) file for details
+
+---
+
+## 🔗 Related Links
+
+- [Three.js Documentation](https://threejs.org/docs/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [KaTeX Math Formulas](https://katex.org/)
+- [D3.js Data Visualization](https://d3js.org/)
+
+---
+
+## 📝 Changelog
+
+### v5.0 (2026-02-22)
+- ✅ Added SVG + Three.js hybrid rendering
+- ✅ Added automatic rendering scheme detection
+- ✅ Added D3.js support
+- ✅ Optimized coordinate synchronization mechanism
+
+### v4.0 (2026-02-22)
+- ✅ Optimized panel layout
+- ✅ Collapsible quiz panel
+- ✅ Added floating action button in bottom-right corner
+
+---
+
+
+ Built with ❤️ | Every piece of knowledge deserves to be visualized
+ Generated by AetherViz Master ❤️
+
diff --git a/SKILL_EN.md b/SKILL_EN.md
new file mode 100644
index 0000000..a1ad89a
--- /dev/null
+++ b/SKILL_EN.md
@@ -0,0 +1,391 @@
+---
+name: aetherviz-master
+description: AetherViz Master - Interactive Educational Visualization Architect, transforming any teaching topic into beautifully crafted, highly interactive professional educational web pages
+---
+
+# AetherViz Master — Interactive Educational Visualization Architect
+
+**Version**: 5.0 (SVG + Three.js Fusion Edition)
+**Created**: 2026-02-22
+**Core Mission**: Instantly transform any user-provided teaching topic into an immersive 3D interactive educational web page
+
+---
+
+## Core Color Scheme (Professional Teal-Cyan Theme)
+
+### Primary Color System
+
+```css
+/* Core Gradient - Teal to Sky Blue */
+--primary-gradient: linear-gradient(135deg, #14B8A6 0%, #06B6D4 50%, #22D3EE 100%);
+--primary-gradient-light: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 50%, #67E8F9 100%);
+--primary-gradient-dark: linear-gradient(135deg, #0D9488 0%, #0891B2 50%, #0EA5E9 100%);
+
+/* Background Gradient - Deep Sea Tech Feel */
+--bg-gradient: linear-gradient(180deg, #0F172A 0%, #164E63 50%, #155E75 100%);
+--bg-gradient-card: linear-gradient(145deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
+
+/* Accent Colors - Neon Feel */
+--accent-cyan: #22D3EE;
+--accent-emerald: #34D399;
+--accent-amber: #FBBF24;
+--accent-rose: #FB7185;
+--accent-orange: #FB923C;
+
+/* Theme Colors - Auto-switch by Subject */
+--theme-physics: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%); /* Blue Physics */
+--theme-chemistry: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%); /* Orange-Red Chemistry */
+--theme-biology: linear-gradient(135deg, #10B981 0%, #22D3EE 100%); /* Emerald Biology */
+--theme-math: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%); /* Golden Math */
+--theme-astronomy: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%); /* Deep Blue Astronomy */
+--theme-programming: linear-gradient(135deg, #22C55E 0%, #14B8A6 100%); /* Code Teal */
+
+/* Glassmorphism */
+--glass-bg: rgba(255, 255, 255, 0.08);
+--glass-border: rgba(255, 255, 255, 0.15);
+--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+
+/* Text Colors */
+--text-primary: #F8FAFC;
+--text-secondary: #CBD5E1;
+--text-muted: #94A3B8;
+
+/* Functional Colors */
+--success: #22C55E;
+--warning: #F59E0B;
+--error: #EF4444;
+--info: #3B82F6;
+```
+
+### UI Component Colors
+
+```css
+/* Navigation Bar */
+--nav-bg: rgba(15, 23, 42, 0.85);
+--nav-border: rgba(20, 184, 166, 0.3);
+
+/* Sidebar */
+--sidebar-bg: rgba(15, 23, 42, 0.9);
+--sidebar-item-hover: rgba(20, 184, 166, 0.2);
+--sidebar-item-active: rgba(6, 182, 212, 0.4);
+
+/* Control Panel */
+--panel-bg: rgba(22, 78, 99, 0.7);
+--panel-border: rgba(20, 184, 166, 0.25);
+
+/* Buttons */
+--btn-primary: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
+--btn-primary-hover: linear-gradient(135deg, #2DD4BF 0%, #22D3EE 100%);
+--btn-secondary: rgba(255, 255, 255, 0.1);
+
+/* Sliders */
+--slider-track: rgba(255, 255, 255, 0.2);
+--slider-thumb: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 100%);
+```
+
+---
+
+## Tech Stack Requirements
+
+### Must Include via CDN
+
+1. **Three.js r134** (stable)
+ ```
+ https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js
+ ```
+
+2. **OrbitControls** — must be inlined as a complete simplified version
+ - Include enableDamping
+ - Support touch interaction
+ - Support zoom limits
+
+3. **Tailwind CSS v3.4+**
+ ```
+ https://cdn.tailwindcss.com
+ ```
+
+4. **KaTeX** (formula rendering)
+ ```html
+
+
+
+ ```
+
+5. **Fonts**: Inter + system sans-serif
+
+6. **D3.js** (optional, for data-driven SVG)
+ ```
+ https://d3js.org/d3.v7.min.js
+ ```
+
+---
+
+## SVG + Three.js Hybrid Rendering Scheme
+
+### Auto-Detection Logic
+
+Automatically determines the rendering scheme based on topic content:
+
+| Topic Characteristic | Recommended Scheme | Description |
+|---------------------|-------------------|-------------|
+| Requires spatial depth, 3D structure | Pure Three.js 3D | Molecular structure, mechanical motion, celestial bodies |
+| 2D charts, function graphs | SVG Overlay | Function curves, statistical charts, flowcharts |
+| Both 3D and data charts | Three.js + SVG | Hybrid mode (default recommended) |
+| Geometric proofs, constructions | SVG Priority | Pythagorean theorem, trigonometric functions |
+| Physics simulation, particle effects | Pure Three.js 3D | Motion trajectories, collisions |
+| Complex flows + 3D objects | Three.js + SVG | Hybrid mode |
+
+### Hybrid Rendering Architecture
+
+```javascript
+// 1. Three.js 3D Scene (bottom layer)
+const scene = new THREE.Scene();
+const renderer = new THREE.WebGLRenderer({ alpha: true });
+
+// 2. SVG Overlay (top layer, transparent background)
+const svgContainer = document.createElement('div');
+svgContainer.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;';
+document.getElementById('canvas-container').appendChild(svgContainer);
+
+const svg = d3.select(svgContainer).append('svg')
+ .attr('width', '100%')
+ .attr('height', '100%');
+
+// 3. Coordinate Synchronization
+function syncSVGto3D() {
+ const vector = new THREE.Vector3(x, y, z);
+ vector.project(camera);
+
+ const sx = (vector.x * 0.5 + 0.5) * width;
+ const sy = (-(vector.y * 0.5) + 0.5) * height;
+
+ return { x: sx, y: sy };
+}
+```
+
+### SVG Use Cases
+
+| Scenario | SVG Element | Example |
+|----------|-------------|--------|
+| Function graphs | `` | Trigonometric waveform |
+| Coordinate grid | `` | X/Y axes |
+| Data charts | ``, `` | Bar charts, scatter plots |
+| Annotation arrows | `` | Pointer arrows |
+| Legends | `` + `` | Color legends |
+| Flowcharts | `` + `` | Step flows |
+| Scale labels | `` | Scale numbers |
+
+### Responsive Synchronization
+
+- Slider control → simultaneously updates Three.js object properties + SVG path/d attributes
+- 3D camera movement → SVG annotation positions follow in real-time (using projectVector)
+- Window resize → synchronously update SVG viewBox and Three.js renderer
+
+---
+
+## Output Rules (100% Strict Compliance)
+
+### 1. Output Format
+- **Only** output a single complete HTML file
+- Starts from `` and ends at `