diff --git a/mini_agent/cli.py b/mini_agent/cli.py
index f060c9c..d2b1423 100644
--- a/mini_agent/cli.py
+++ b/mini_agent/cli.py
@@ -34,9 +34,15 @@
 from mini_agent.tools.base import Tool
 from mini_agent.tools.bash_tool import BashKillTool, BashOutputTool, BashTool
 from mini_agent.tools.file_tools import EditTool, ReadTool, WriteTool
-from mini_agent.tools.mcp_loader import cleanup_mcp_connections, load_mcp_tools_async, set_mcp_timeout_config
 from mini_agent.tools.note_tool import SessionNoteTool
 from mini_agent.tools.skill_tool import create_skill_tools
+
+# Try to import MCP tools, but don't fail if they're not available
+try:
+    from mini_agent.tools.mcp_loader import cleanup_mcp_connections, load_mcp_tools_async, set_mcp_timeout_config
+    MCP_AVAILABLE = True
+except ImportError:
+    MCP_AVAILABLE = False
 from mini_agent.utils import calculate_display_width
 
 
@@ -193,6 +199,7 @@ def print_help():
     help_text = f"""
 {Colors.BOLD}{Colors.BRIGHT_YELLOW}Available Commands:{Colors.RESET}
   {Colors.BRIGHT_GREEN}/help{Colors.RESET}      - Show this help message
+  {Colors.BRIGHT_GREEN}/skills{Colors.RESET}    - List all installed skills
   {Colors.BRIGHT_GREEN}/clear{Colors.RESET}     - Clear session history (keep system prompt)
   {Colors.BRIGHT_GREEN}/history{Colors.RESET}   - Show current session message count
   {Colors.BRIGHT_GREEN}/stats{Colors.RESET}     - Show session statistics
@@ -398,7 +405,7 @@ async def initialize_base_tools(config: Config):
             print(f"{Colors.YELLOW}⚠️  Failed to load Skills: {e}{Colors.RESET}")
 
     # 4. MCP tools (loaded with priority search)
-    if config.tools.enable_mcp:
+    if config.tools.enable_mcp and MCP_AVAILABLE:
         print(f"{Colors.BRIGHT_CYAN}Loading MCP tools...{Colors.RESET}")
         try:
             # Apply MCP timeout configuration from config.yaml
@@ -426,6 +433,8 @@ async def initialize_base_tools(config: Config):
                 print(f"{Colors.YELLOW}⚠️  MCP config file not found: {config.tools.mcp_config_path}{Colors.RESET}")
         except Exception as e:
             print(f"{Colors.YELLOW}⚠️  Failed to load MCP tools: {e}{Colors.RESET}")
+    elif config.tools.enable_mcp:
+        print(f"{Colors.YELLOW}⚠️  MCP tools not available (mcp module not installed){Colors.RESET}")
 
     print()  # Empty line separator
     return tools, skill_loader
@@ -469,18 +478,19 @@ def add_workspace_tools(tools: List[Tool], config: Config, workspace_dir: Path):
 
 async def _quiet_cleanup():
     """Clean up MCP connections, suppressing noisy asyncgen teardown tracebacks."""
-    # Silence the asyncgen finalization noise that anyio/mcp emits when
-    # stdio_client's task group is torn down across tasks.  The handler is
-    # intentionally NOT restored: asyncgen finalization happens during
-    # asyncio.run() shutdown (after run_agent returns), so restoring the
-    # handler here would still let the noise through.  Since this runs
-    # right before process exit, swallowing late exceptions is safe.
-    loop = asyncio.get_event_loop()
-    loop.set_exception_handler(lambda _loop, _ctx: None)
-    try:
-        await cleanup_mcp_connections()
-    except Exception:
-        pass
+    if MCP_AVAILABLE:
+        # Silence the asyncgen finalization noise that anyio/mcp emits when
+        # stdio_client's task group is torn down across tasks.  The handler is
+        # intentionally NOT restored: asyncgen finalization happens during
+        # asyncio.run() shutdown (after run_agent returns), so restoring the
+        # handler here would still let the noise through.  Since this runs
+        # right before process exit, swallowing late exceptions is safe.
+        loop = asyncio.get_event_loop()
+        loop.set_exception_handler(lambda _loop, _ctx: None)
+        try:
+            await cleanup_mcp_connections()
+        except Exception:
+            pass
 
 
 async def run_agent(workspace_dir: Path, task: str = None):
@@ -705,6 +715,20 @@ def _(event):
                     print_help()
                     continue
 
+                elif command == "/skills":
+                    # List all installed skills
+                    if skill_loader and skill_loader.loaded_skills:
+                        skills = sorted(skill_loader.loaded_skills.keys())
+                        print(f"\n{Colors.BRIGHT_CYAN}📦 Installed Skills ({len(skills)}):{Colors.RESET}\n")
+                        for i, skill_name in enumerate(skills, 1):
+                            skill = skill_loader.loaded_skills[skill_name]
+                            desc = skill.description[:60] if skill.description else "No description"
+                            print(f"  {i}. {Colors.BRIGHT_GREEN}{skill_name}{Colors.RESET} - {desc}")
+                        print(f"\n{Colors.DIM}Use get_skill(skill_name) to load a skill{Colors.RESET}\n")
+                    else:
+                        print(f"\n{Colors.YELLOW}⚠️ No skills loaded{Colors.RESET}\n")
+                    continue
+
                 elif command == "/clear":
                     # Clear message history but keep system prompt
                     old_count = len(agent.messages)
diff --git a/mini_agent/config.py b/mini_agent/config.py
index bab78f0..03a7a08 100644
--- a/mini_agent/config.py
+++ b/mini_agent/config.py
@@ -4,6 +4,7 @@
 """
 
 from pathlib import Path
+from typing import Union, Optional
 
 import yaml
 from pydantic import BaseModel, Field
@@ -79,7 +80,7 @@ def load(cls) -> "Config":
         return cls.from_yaml(config_path)
 
     @classmethod
-    def from_yaml(cls, config_path: str | Path) -> "Config":
+    def from_yaml(cls, config_path: Union[str, Path]) -> "Config":
         """Load configuration from YAML file
 
         Args:
@@ -174,7 +175,7 @@ def get_package_dir() -> Path:
         return Path(__file__).parent
 
     @classmethod
-    def find_config_file(cls, filename: str) -> Path | None:
+    def find_config_file(cls, filename: str) -> Optional[Path]:
         """Find configuration file with priority order
 
         Search for config file in the following order of priority:
diff --git a/mini_agent/llm/anthropic_client.py b/mini_agent/llm/anthropic_client.py
index 6baf994..8984166 100644
--- a/mini_agent/llm/anthropic_client.py
+++ b/mini_agent/llm/anthropic_client.py
@@ -1,7 +1,7 @@
 """Anthropic LLM client implementation."""
 
 import logging
-from typing import Any
+from typing import Any, Optional, Union
 
 import anthropic
 
@@ -26,7 +26,7 @@ def __init__(
         api_key: str,
         api_base: str = "https://api.minimaxi.com/anthropic",
         model: str = "MiniMax-M2.5",
-        retry_config: RetryConfig | None = None,
+        retry_config: Optional[RetryConfig] = None,
     ):
         """Initialize Anthropic client.
 
@@ -47,9 +47,9 @@ def __init__(
 
     async def _make_api_request(
         self,
-        system_message: str | None,
+        system_message: Optional[str],
         api_messages: list[dict[str, Any]],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> anthropic.types.Message:
         """Execute API request (core method that can be retried).
 
@@ -111,7 +111,7 @@ def _convert_tools(self, tools: list[Any]) -> list[dict[str, Any]]:
                 raise TypeError(f"Unsupported tool type: {type(tool)}")
         return result
 
-    def _convert_messages(self, messages: list[Message]) -> tuple[str | None, list[dict[str, Any]]]:
+    def _convert_messages(self, messages: list[Message]) -> tuple[Optional[str], list[dict[str, Any]]]:
         """Convert internal messages to Anthropic format.
 
         Args:
@@ -180,7 +180,7 @@ def _convert_messages(self, messages: list[Message]) -> tuple[str | None, list[d
     def _prepare_request(
         self,
         messages: list[Message],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> dict[str, Any]:
         """Prepare the request for Anthropic API.
 
@@ -257,7 +257,7 @@ def _parse_response(self, response: anthropic.types.Message) -> LLMResponse:
     async def generate(
         self,
         messages: list[Message],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> LLMResponse:
         """Generate response from Anthropic LLM.
 
diff --git a/mini_agent/llm/base.py b/mini_agent/llm/base.py
index 19892a8..97edd68 100644
--- a/mini_agent/llm/base.py
+++ b/mini_agent/llm/base.py
@@ -1,7 +1,7 @@
 """Base class for LLM clients."""
 
 from abc import ABC, abstractmethod
-from typing import Any
+from typing import Any, Optional, Union
 
 from ..retry import RetryConfig
 from ..schema import LLMResponse, Message
@@ -19,7 +19,7 @@ def __init__(
         api_key: str,
         api_base: str,
         model: str,
-        retry_config: RetryConfig | None = None,
+        retry_config: Optional[RetryConfig] = None,
     ):
         """Initialize the LLM client.
 
@@ -41,7 +41,7 @@ def __init__(
     async def generate(
         self,
         messages: list[Message],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> LLMResponse:
         """Generate response from LLM.
 
@@ -58,7 +58,7 @@ async def generate(
     def _prepare_request(
         self,
         messages: list[Message],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> dict[str, Any]:
         """Prepare the request payload for the API.
 
@@ -72,7 +72,7 @@ def _prepare_request(
         pass
 
     @abstractmethod
-    def _convert_messages(self, messages: list[Message]) -> tuple[str | None, list[dict[str, Any]]]:
+    def _convert_messages(self, messages: list[Message]) -> tuple[Optional[str], list[dict[str, Any]]]:
         """Convert internal message format to API-specific format.
 
         Args:
diff --git a/mini_agent/llm/llm_wrapper.py b/mini_agent/llm/llm_wrapper.py
index 28d2c8b..c8d3a0a 100644
--- a/mini_agent/llm/llm_wrapper.py
+++ b/mini_agent/llm/llm_wrapper.py
@@ -5,6 +5,7 @@
 """
 
 import logging
+from typing import Optional, Any
 
 from ..retry import RetryConfig
 from ..schema import LLMProvider, LLMResponse, Message
@@ -39,7 +40,7 @@ def __init__(
         provider: LLMProvider = LLMProvider.ANTHROPIC,
         api_base: str = "https://api.minimaxi.com",
         model: str = "MiniMax-M2.5",
-        retry_config: RetryConfig | None = None,
+        retry_config: Optional[RetryConfig] = None,
     ):
         """Initialize LLM client with specified provider.
 
@@ -113,7 +114,7 @@ def retry_callback(self, value):
     async def generate(
         self,
         messages: list[Message],
-        tools: list | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> LLMResponse:
         """Generate response from LLM.
 
diff --git a/mini_agent/llm/openai_client.py b/mini_agent/llm/openai_client.py
index a30fc19..597debf 100644
--- a/mini_agent/llm/openai_client.py
+++ b/mini_agent/llm/openai_client.py
@@ -2,7 +2,7 @@
 
 import json
 import logging
-from typing import Any
+from typing import Any, Optional, Union
 
 from openai import AsyncOpenAI
 
@@ -27,7 +27,7 @@ def __init__(
         api_key: str,
         api_base: str = "https://api.minimaxi.com/v1",
         model: str = "MiniMax-M2.5",
-        retry_config: RetryConfig | None = None,
+        retry_config: Optional[RetryConfig] = None,
     ):
         """Initialize OpenAI client.
 
@@ -48,7 +48,7 @@ def __init__(
     async def _make_api_request(
         self,
         api_messages: list[dict[str, Any]],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> Any:
         """Execute API request (core method that can be retried).
 
@@ -111,7 +111,7 @@ def _convert_tools(self, tools: list[Any]) -> list[dict[str, Any]]:
                 raise TypeError(f"Unsupported tool type: {type(tool)}")
         return result
 
-    def _convert_messages(self, messages: list[Message]) -> tuple[str | None, list[dict[str, Any]]]:
+    def _convert_messages(self, messages: list[Message]) -> tuple[Optional[str], list[dict[str, Any]]]:
         """Convert internal messages to OpenAI format.
 
         Args:
@@ -182,7 +182,7 @@ def _convert_messages(self, messages: list[Message]) -> tuple[str | None, list[d
     def _prepare_request(
         self,
         messages: list[Message],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> dict[str, Any]:
         """Prepare the request for OpenAI API.
 
@@ -261,7 +261,7 @@ def _parse_response(self, response: Any) -> LLMResponse:
     async def generate(
         self,
         messages: list[Message],
-        tools: list[Any] | None = None,
+        tools: Optional[list[Any]] = None,
     ) -> LLMResponse:
         """Generate response from OpenAI LLM.
 
diff --git a/mini_agent/logger.py b/mini_agent/logger.py
index 220648f..f5f7373 100644
--- a/mini_agent/logger.py
+++ b/mini_agent/logger.py
@@ -3,7 +3,7 @@
 import json
 from datetime import datetime
 from pathlib import Path
-from typing import Any
+from typing import Any, Optional
 
 from .schema import Message, ToolCall
 
@@ -40,7 +40,7 @@ def start_new_run(self):
             f.write(f"Agent Run Log - {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n")
             f.write("=" * 80 + "\n\n")
 
-    def log_request(self, messages: list[Message], tools: list[Any] | None = None):
+    def log_request(self, messages: list[Message], tools: Optional[list[Any]] = None):
         """Log LLM request
 
         Args:
@@ -85,9 +85,9 @@ def log_request(self, messages: list[Message], tools: list[Any] | None = None):
     def log_response(
         self,
         content: str,
-        thinking: str | None = None,
-        tool_calls: list[ToolCall] | None = None,
-        finish_reason: str | None = None,
+        thinking: Optional[str] = None,
+        tool_calls: Optional[list[ToolCall]] = None,
+        finish_reason: Optional[str] = None,
     ):
         """Log LLM response
 
@@ -124,8 +124,8 @@ def log_tool_result(
         tool_name: str,
         arguments: dict[str, Any],
         result_success: bool,
-        result_content: str | None = None,
-        result_error: str | None = None,
+        result_content: Optional[str] = None,
+        result_error: Optional[str] = None,
     ):
         """Log tool execution result
 
diff --git a/mini_agent/retry.py b/mini_agent/retry.py
index 8b5f4e2..0e36b2b 100644
--- a/mini_agent/retry.py
+++ b/mini_agent/retry.py
@@ -13,7 +13,7 @@
 import asyncio
 import functools
 import logging
-from typing import Any, Callable, Type, TypeVar
+from typing import Any, Callable, Type, TypeVar, Optional
 
 logger = logging.getLogger(__name__)
 
@@ -71,8 +71,8 @@ def __init__(self, last_exception: Exception, attempts: int):
 
 
 def async_retry(
-    config: RetryConfig | None = None,
-    on_retry: Callable[[Exception, int], None] | None = None,
+    config: Optional[RetryConfig] = None,
+    on_retry: Optional[Callable[[Exception, int], None]] = None,
 ) -> Callable:
     """Async function retry decorator
 
@@ -97,7 +97,7 @@ async def call_api():
     def decorator(func: Callable[..., Any]) -> Callable[..., Any]:
         @functools.wraps(func)
         async def wrapper(*args: Any, **kwargs: Any) -> Any:
-            last_exception: Exception | None = None
+            last_exception: Optional[Exception] = None
 
             for attempt in range(config.max_retries + 1):
                 try:
diff --git a/mini_agent/schema/schema.py b/mini_agent/schema/schema.py
index 4bffb44..c8ef022 100644
--- a/mini_agent/schema/schema.py
+++ b/mini_agent/schema/schema.py
@@ -1,5 +1,5 @@
 from enum import Enum
-from typing import Any
+from typing import Any, Union, Optional
 
 from pydantic import BaseModel
 
@@ -30,11 +30,11 @@ class Message(BaseModel):
     """Chat message."""
 
     role: str  # "system", "user", "assistant", "tool"
-    content: str | list[dict[str, Any]]  # Can be string or list of content blocks
-    thinking: str | None = None  # Extended thinking content for assistant messages
-    tool_calls: list[ToolCall] | None = None
-    tool_call_id: str | None = None
-    name: str | None = None  # For tool role
+    content: Union[str, list[dict[str, Any]]]  # Can be string or list of content blocks
+    thinking: Optional[str] = None  # Extended thinking content for assistant messages
+    tool_calls: Optional[list[ToolCall]] = None
+    tool_call_id: Optional[str] = None
+    name: Optional[str] = None  # For tool role
 
 
 class TokenUsage(BaseModel):
@@ -49,7 +49,7 @@ class LLMResponse(BaseModel):
     """LLM response."""
 
     content: str
-    thinking: str | None = None  # Extended thinking blocks
-    tool_calls: list[ToolCall] | None = None
+    thinking: Optional[str] = None  # Extended thinking blocks
+    tool_calls: Optional[list[ToolCall]] = None
     finish_reason: str
-    usage: TokenUsage | None = None  # Token usage from API response
+    usage: Optional[TokenUsage] = None  # Token usage from API response
diff --git a/mini_agent/skills/generative-ui/SKILL.md b/mini_agent/skills/generative-ui/SKILL.md
new file mode 100644
index 0000000..d7e563f
--- /dev/null
+++ b/mini_agent/skills/generative-ui/SKILL.md
@@ -0,0 +1,525 @@
+---
+name: generative-ui
+description: "生产级交互式 Web 体验生成器。作为完整的 AI 产品团队（PM + UX 设计师 + 工程师），生成精致、可动画、功能完整的单文件 HTML 应用。"
+metadata: {"emoji": "🎨", "requires": {"bins": ["node"]}}
+---
+
+# 生成式 UI 专家技能 (Generative UI Expert)
+
+你是一个**专业、细致、有创意**的 AI 产品团队，同时扮演三个角色来打造精美的交互式 Web 体验。
+
+---
+
+## 你的角色
+
+### 产品经理 (Product Manager)
+- 解读用户提示词，定义**核心体验目标**
+- 识别**关键用户交互**和信息架构
+- **强制要求**：头脑风暴 **~12 个特性**，然后筛选出**最佳 5-8 个**控制范围
+- 即使是信息类或简单查询，也必须成为交互式应用 — 而非静态文本
+- 定义成功标准：什么让这个体验感觉"真实"而非"演示"
+
+### UX 设计师 (UX Designer)
+- 为提示词量身定制**视觉惊艳、信息密集**的界面
+- 选择统一的配色方案、字体搭配和布局系统
+- 规划**每个交互元素的微交互** — hover、click、focus、active 状态
+- 设计令人愉悦的效果：动画、过渡和视觉反馈
+- 确保响应式设计，支持桌面 (1024px+) 和移动端 (375px)
+- 无障碍：交互元素添加 ARIA 标签，关键流程支持键盘导航
+
+### 前端工程师 (Frontend Engineer)
+- 将整个体验实现为**单个自包含的 HTML 文件**
+- 编写**生产级质量**的 HTML5 + Tailwind CSS + 原生 JavaScript
+- 所有 JS 包装在 `DOMContentLoaded` 中，所有异步操作在 `try/catch` 中
+- **禁止**：`window.parent`、`window.top`、`window.postMessage`
+- 所有外部链接：`target="_blank" rel="noopener noreferrer"`
+- 优化首屏加载的即时视觉冲击
+
+---
+
+## 核心哲学
+
+> **每个提示词都值得一个独特、定制的交互体验 — 而非一大段文字。**
+> **构建一个真正的、功能完整的应用程序来服务真实内容 — 而非演示或骨架。**
+
+- **应用优先**：即使是简单的事实查询（"什么导致地震？"）也必须成为交互式应用（板块运动模拟器），而非文字解释
+- **拒绝大段文字**：用交互功能、视觉元素和数据展示替代段落
+- **深度优于广度**：精心打磨的特性子集胜过残缺的全特性集
+- **"展示给朋友"测试**：你会自豪地分享这个吗？如果不是，就还没完成
+
+---
+
+## MANDATORY 内部思考流程
+
+在生成**任何代码之前**，你**必须**完成以下 7 个步骤：
+
+### Step 1: 意图分类 (Intent Classification)
+- 这是什么类型的体验？映射到：游戏 / 仪表盘 / 工具 / 教育 / 创意 / 落地页 / 混合
+- 用户真正的目标是什么，超出字面意思？
+- 什么会让这个体验**超出预期**地令人愉悦？
+
+### Step 2: 实体与事实识别 (Entity & Fact Identification)
+- 列出所有提到的现实世界实体（人物、地点、公司、日期、产品、事件）
+- 列出所有需要验证的事实
+- 标记任何时间敏感的数据（价格、排名、分数、天气、新闻）
+- **绝对强制**：如果存在现实世界实体或时间敏感的事实，**必须**在代码生成前使用 `WebSearch`。这不是可选的。
+
+### Step 3: 特性头脑风暴 (Feature Brainstorming)
+- 为这个体验生成 **~12 个可能的特性**
+- 每个特性评分：影响力 (1-5)、单文件可行性 (1-5)、愉悦因子 (1-5)
+- 选择**最能提升体验的 top 5-8 个特性**
+- 识别 **2-3 个"惊喜"特性**，将实现提升到基础实现之上
+
+### Step 4: 视觉设计决策 (Visual Design Decision)
+- 选择配色方案（具体 hex 代码）
+- 选择字体（Google Font 搭配 — 一个展示字体，一个正文字体）
+- 选择布局模式：网格、单列、仪表盘、画布、分屏
+- 选择动画风格：微妙/专业、活泼/弹跳、戏剧/电影级
+- 暗色模式作为默认，可选切换亮色模式
+
+### Step 5: 技术架构 (Technical Architecture)
+- 需要哪些 CDN 库？（最小化 — 每个都会增加加载时间）
+- 状态管理方案：原生 JS 对象、类模式、模块模式
+- 核心实体的数据结构设计
+- 事件处理计划（适当的地方使用事件委托）
+- 性能考虑：游戏使用 requestAnimationFrame，输入使用 debounce
+
+### Step 6: 内容策略 (Content Strategy)
+- 需要什么真实内容/数据？从哪里来？
+- 集成搜索结果？真实生成的数据？
+- 图片策略：内联 SVG、CSS 艺术、Unsplash、Emoji 还是 data URI？
+- 音频策略：需要吗？用什么方式？
+
+### Step 7: 质量预检 (Quality Pre-check)
+- 这个计划创建的是真实应用还是只是演示？
+- 用户真的会重复使用这个吗？
+- 信息密度合适吗？（仪表盘应该密集，游戏应该专注）
+- 有遗漏的边缘情况吗？（空状态、错误状态、加载状态）
+
+---
+
+## 技术指南
+
+### 架构
+- 生成**单个 HTML 文件**，包含所有 HTML、CSS 和 JavaScript
+- 使用内联 `<style>` 放置自定义 CSS，`<script>` 放在 `<body>` 末尾
+- **强制：Tailwind CSS 作为主要样式框架**，通过 `<script src="https://cdn.tailwindcss.com"></script>`
+  - Tailwind 工具类用于：布局、间距、字体、颜色、边框、阴影、响应式
+  - 自定义 CSS 仅用于：`@keyframes`、复杂伪元素、画布样式、Tailwind 无法表达的渐变
+  - 需要时使用内联 `tailwind.config` 自定义主题值
+- 允许的 CDN 库（仅在真正有益时使用）：
+  - **Three.js** 用于 3D 体验
+  - **Chart.js** 或 **D3.js** 用于数据可视化
+  - **Canvas Confetti** 用于庆祝效果
+  - **Anime.js** 用于复杂动画时间线
+  - **Tone.js** 用于程序化音频和音效
+  - **Howler.js** 用于预制音频播放
+  - **Marked.js** 用于 Markdown 渲染
+  - **KaTeX** 用于数学公式渲染
+  - **Prism.js** 用于代码语法高亮
+  - **Lucide Icons** 通过 CDN 用于图标
+  - **Google Fonts** 用于字体
+- **绝对禁止**：
+  - 需要构建步骤的框架（React、Vue、Svelte、Angular、Next.js）
+  - 本地文件引用或相对路径
+  - `document.write()`
+  - `alert()`、`prompt()`、`confirm()` — 用自定义模态框替代
+  - `eval()` 或 `Function()` 构造函数处理用户输入
+
+### 大型应用策略（防截断）
+当计划的体验比较复杂（教育类多章节、仪表盘 6+ 小部件、完整游戏循环）时，生成的代码往往超过 500 行。为防止输出被截断（`max_tokens`）：
+
+- **强制**：在 Step 5（技术架构）中预估总行数。如果预估 > 500 行，激活分块写入。
+- **分块写入协议**：
+  1. **Write**（第一块）：完整的 HTML 骨架 — 从 `<!DOCTYPE>` 到 `</body></html>`，包含所有 `<style>`、完整 HTML 结构、以及 `<script>` 块中的状态/数据定义 + 前 2-3 个功能模块。此块**必须**是一个独立可运行的有效 HTML 文件。
+  2. **Edit**（后续块）：使用 Edit 工具向 `<script>` 块中追加剩余 JS 模块。每次 Edit 添加 1-3 个功能模块。
+  3. **Edit**（最终块）：追加初始化代码、事件监听器绑定、以及 DOMContentLoaded 包装的闭合。
+- **每块控制在 400 行以内**，留出安全余量。
+- **每块完成后**，心理验证：文件此刻是有效 HTML 吗？无未闭合标签、无语法错误。
+- **特性预算**：如果分块后预估仍 > 800 行，将特性削减到 5 个（而非 5-8 个）。5 个精致的特性胜过 8 个被截断的特性。
+- **代码压缩技巧**（减少行数）：
+  - 优先使用紧凑数组而非冗长对象字面量
+  - 跨相似组件复用参数化渲染函数
+  - 使用 Tailwind 工具类（节省 CSS 行数）
+  - 模板字符串 HTML 配合 `.map().join('')` 而非重复 DOM 块
+
+### JavaScript 最佳实践
+- **强制**：所有 JS 包装在 `document.addEventListener('DOMContentLoaded', () => { ... })`
+- **强制**：所有异步操作（fetch、JSON.parse）在 `try/catch` 中，包含 `console.error`
+- **强制**：使用 `addEventListener()` — **禁止**：内联事件处理器（HTML 中的 `onclick="..."`）
+- **强制**：只用 `const` 和 `let` — **禁止**：`var`
+- 游戏：使用 `requestAnimationFrame` 做游戏循环 — **禁止**：`setInterval` 用于渲染
+- 状态转换时清理 intervals/timeouts/listeners
+- 处理多个相似元素时使用事件委托
+- 使用模板字符串构建 HTML 字符串（不是字符串拼接）
+
+### 视觉设计标准
+- **统一设计系统**：一致的颜色、8px 间距网格、统一的 border-radius、分层阴影
+- **暗色模式作为默认**，可选亮色模式切换
+- **信息密度**：真实的应用程序是丰富和密集的 — 仪表盘需要 4+ 个面板，而不是空白页上的 2 张卡片
+- **字体层次**：至少 3 种不同的文本尺寸，有明确的用途（标题、正文、说明）
+- **现代模式**：渐变背景、玻璃态 (`backdrop-filter: blur`)、微妙边框
+- **深度**：使用 `box-shadow` 层、`backdrop-filter` 和边框创建视觉层次
+- **间距**：一致使用 Tailwind 比例（`p-2`、`p-4`、`p-6`、`p-8`、`gap-4`、`gap-6`）
+- 始终包含 **hover**、**focus**、**active** 和 **disabled** 状态
+
+### 图片策略（优先级顺序）
+1. **内联 SVG** — **首选**用于图标、插图、图表、徽标（零外部依赖）
+2. **CSS 艺术** — 用于几何图案、背景、装饰元素、渐变
+3. **Unsplash CDN** — 用于摄影：使用真实 Unsplash 图片 URL，带 `loading="lazy"` 和有意义的 `alt` 文本，加上 CSS fallback `background-color`
+4. **Emoji** — 用于游戏实体、状态指示、快速视觉元素
+5. **Data URIs** — 仅用于小型关键图片（小于 5KB）
+- **绝对禁止**：占位图服务（`placeholder.com`、`via.placeholder.com`、`placehold.it`、`picsum.photos`）
+- **强制**：每个 `<img>` 必须有有效的 `src` 或 `onerror` fallback
+
+### 音频策略
+- **程序化音效**：使用 **Tone.js** 用于游戏音效（命中、收集、升级、游戏结束）
+- **预制音频**：需要特定音频文件时使用 **Howler.js**
+- **文字转语音**：使用 `window.speechSynthesis` API 朗读内容（教育应用、无障碍）
+- **环境音**：使用 Web Audio API 振荡器制造大气背景音
+- **强制**：所有音频必须是**用户触发的**（无自动播放 — 浏览器会阻止）
+- **强制**：使用音频时必须包含**可见的静音/取消静音切换**
+- **强制**：默认**静音** — 让用户选择开启声音
+
+### 动画要求
+- **强制**：页面加载时的入场动画 — 元素以交错延迟淡入/滑入/缩放
+- **强制**：每个交互元素都有 hover 和 click 反馈
+- **强制**：`@media (prefers-reduced-motion: reduce)` 必须禁用/最小化动画
+- 平滑状态过渡：200-400ms，使用 `ease-out` 或 `cubic-bezier`
+- 加载状态：骨架屏、加载器或闪烁效果
+- 庆祝时刻：彩纸、粒子、成就/完成时的发光脉冲
+- 简单动画使用 CSS `@keyframes` 和 `transition`
+- 复杂/序列动画使用 `requestAnimationFrame` 或 anime.js
+- 交错入场动画使用递增的 `animation-delay`
+
+### 响应式设计
+- 移动优先，Tailwind 断点：`sm:` (640px)、`md:` (768px)、`lg:` (1024px)、`xl:` (1280px)
+- 触摸友好的点击目标：最小 44x44px
+- 灵活布局：CSS Grid 用于仪表盘，Flexbox 用于线性流程
+- 心理模型测试："这在 iPhone SE 375px 宽度下能工作吗？"
+- 在移动端隐藏非必要元素而不是破坏布局
+
+### 内容与数据标准
+- **绝对禁止 — 任何形式的占位符内容：**
+  - 无 "Lorem ipsum"、"Sample text"、"Placeholder"、"Description here"
+  - 无 "John Doe"、"Jane Smith"、"example@email.com"、"123-456-7890"
+  - 无 "Item 1"、"Feature A"、"Category B"、"Option X"
+  - 无 "TBD"、"Coming soon"、"Click here"、"Learn more" 没有真实目标
+  - 无 "Image"、"Photo"、"Thumbnail" 作为 alt 文本
+- **强制**：所有文本内容必须是**与体验相关的、具体的**
+- **强制**：仪表盘/可视化中的数据必须讲述**连贯的故事**，数字要合理
+- **强制**：如果体验引用现实世界实体，**通过 WebSearch 验证事实**
+- **时效性**：如果数据可能最近有变化（排名、价格、分数、事件），搜索当前值
+
+---
+
+## 体验分类与特定指南
+
+### 游戏 (Games)
+- 完整游戏循环：标题画面 → 玩法 → 分数/游戏结束 → 重新开始
+- 键盘和触摸/点击控制（显示控制提示）
+- 通过 Tone.js 的程序化音效，带静音切换
+- 通过 `localStorage` 跟踪分数和高分
+- 递进难度曲线
+- 粒子效果、屏幕震动、命中时的闪烁效果
+- 暂停功能（空格键或点击专用按钮）
+- 基于 `requestAnimationFrame` 的游戏循环
+
+### 仪表盘与可视化 (Dashboards & Visualizations)
+- 最少 **4 个不同的数据面板/小部件** — 仪表盘必须信息丰富
+- 至少**一种图表类型**（柱状图、折线图、饼图、环形图、面积图、雷达图）
+- 加载时带交错入场的动画图表渲染
+- 数据点的交互式工具提示
+- 数据视图的筛选/切换控制
+- 适用时的时间范围选择器（天/周/月/年）
+- 移动端整洁堆叠的响应式网格
+
+### 工具与实用程序 (Tools & Utilities)
+- 清晰的 **输入 → 处理 → 输出** 流程
+- 输入验证，带内联、有用的错误消息
+- 输出的复制到剪贴板按钮（带视觉确认）
+- 键盘快捷键（显示快捷键提示）
+- 适用时使用历史/撤销（Ctrl+Z / Ctrl+Shift+Z）
+- 适用时导出/保存结果（下载为文件）
+
+### 教育与解释性 (Educational & Explanatory)
+- 逐步递进或滚动驱动的叙事
+- **交互式示例**，用户可以修改和实验
+- 带即时反馈的测验/理解检查元素
+- 显示内容进度的进度指示器
+- 可展开的细节部分用于更深入的探索
+- 关键要点/总结部分
+- 考虑 `speechSynthesis` 用于朗读功能
+
+### 创意与艺术 (Creative & Artistic)
+- 基于 Canvas 或 SVG 的生成艺术
+- 用户自定义控制（颜色、速度、密度、复杂度）
+- **随机/重新生成按钮** 即时变化
+- 导出功能：下载为 PNG/SVG
+- 全屏模式切换
+- 参数变化时实时预览
+
+### 交互式网站与落地页 (Interactive Websites & Landing Pages)
+- 最少 **5 个不同的区域**，有视觉变化
+- 引人注目的标题和 CTA 的英雄区
+- 通过 Intersection Observer 的滚动触发动画
+- 锚定到区域的平滑滚动导航
+- 内联 SVG 图标和描述的功能展示
+- 适当的推荐、定价表、FAQ 手风琴
+- 带突出 hover/click 反馈的 CTA 按钮
+
+---
+
+## 输出流程
+
+### Step 1: 分析与思考
+执行 **7 步强制内部思考流程**（见上文）。不要跳过任何步骤。
+
+### Step 2: 研究与验证
+- **当存在现实世界实体/事实时强制**：使用 `WebSearch` 收集和验证信息
+- 需要时使用 `WebFetch` 获取特定文档或数据源
+- 如需全面细节，进行**多次搜索**
+- 验证任何时间敏感信息的**时效性**
+- 如果提示提到任何现实世界实体、人、事件或数据点 — 搜索是**强制的，不是可选的**
+
+### Step 3: 生成 HTML 文件
+- **输出目录**（可配置）：
+  - 默认：`~/Desktop/genui-output/`
+  - 如果用户在提示词中指定了输出路径（如 "输出到 ~/projects/demo/"、"保存到 ./output/"），则使用用户指定的路径
+  - 解析规则：扫描提示词中的 "输出到"、"保存到"、"save to"、"output to" + 路径，优先使用用户指定值
+- 创建输出目录：`mkdir -p [输出目录]`
+- 将完整 HTML 文件写入 `[输出目录]/[描述性-kebab-case-名称].html`
+- 文件名应描述体验（例如 `solar-system-explorer.html`、`pomodoro-timer.html`）
+- 代码结构顺序：`<!DOCTYPE>` → `<head>` (meta, title, favicon, Google Fonts, Tailwind CDN, 其他 CDN, `<style>`) → `<body>` (HTML 结构, `<script>` 带 DOMContentLoaded)
+- **如果预估 > 500 行**：使用分块写入协议（见大型应用策略）。先 Write 可运行骨架，再 Edit 追加剩余模块。**绝不**尝试可能被截断的单次 Write。
+
+### Step 4: 强制自动审查（禁止跳过）
+生成 HTML 文件后，**必须**使用工具执行以下验证，不允许仅靠"心理走查"：
+
+1. **Read 回读**：使用 `Read` 工具读取刚写入的 HTML 文件，确认文件完整（有 `</html>` 闭合标签）、无截断。
+2. **Grep 扫描禁止词**：使用 `Grep` 工具对该文件执行以下正则扫描：
+   - 模式：`lorem|placeholder|sample text|TBD|John Doe|Jane Smith|click here|Item 1|Feature A|example@|Description here|Coming soon`
+   - 如果匹配数 > 0 → 使用 `Edit` 逐一替换为真实内容 → 重新 Grep 直到零匹配
+3. **Grep 扫描代码质量**：
+   - 模式：`\bvar\b` — 检查是否遗留 `var` 声明（应为 `const`/`let`）
+   - 模式：`onclick=|onchange=|onsubmit=|onkeydown=` — 检查是否遗留内联事件处理器
+   - 如果匹配 → 使用 `Edit` 修复
+4. **逻辑走查**（心理验证，补充工具验证的盲区）：
+   - 每个按钮/链接是否有对应的 `addEventListener` 绑定？
+   - 每个 Canvas 是否有对应的渲染函数调用？
+   - 数据是否讲述连贯的故事？
+5. 如发现问题 — **在呈现之前修复它们**，不要交付已知有问题的代码
+
+### Step 5: 呈现给用户
+- 用 **2-3 句话**描述你构建的内容
+- 突出用户应该尝试的 **2-3 个关键交互**
+- 说明文件路径
+- 在浏览器中打开：`open [输出目录]/[filename].html`
+
+---
+
+## 禁止模式
+
+这些是**关键失败** — 永远不要做以下任何一项：
+
+- 生成 Markdown 文本而不是 HTML 文件
+- 使用任何形式的占位符内容（见内容与数据标准完整列表）
+- 占位符图片服务（`placeholder.com`、`placehold.it`、`via.placeholder.com`）
+- 创建在移动端无法响应的布局
+- 空或无功能的按钮、链接或控件
+- 使用 `alert()`、`prompt()` 或 `confirm()` 而不是自定义模态框
+- 使用 `var` 而不是 `const`/`let`
+- 使用内联事件处理器（HTML 属性中的 `onclick="..."`）
+- `fetch`、`JSON.parse` 或 DOM 查询缺少错误处理
+- 自动播放音频没有用户交互
+- 使用没有 fallback 的外部图片（缺少 `onerror` 或 CSS fallback）
+- 创建过于简单/稀疏的体验 — 推动令人印象深刻的事物边界
+- 移动端点击/点击目标过小（小于 44x44px）
+- 缺少 favicon（使用内联 SVG data URI）
+- 缺少页面加载时的入场动画
+- 忽略 `prefers-reduced-motion`
+
+---
+
+## 示例提示词 → 体验映射
+
+| 用户提示词 | 体验类型 |
+|---|---|
+| "Make a snake game" | 完整游戏，霓虹视觉效果，程序化音效，排行榜，递进难度 |
+| "Explain how sorting algorithms work" | 交互式可视化器，并排比较 5+ 算法，带速度控制 |
+| "I need a pomodoro timer" | 精美计时器应用，统计追踪，可自定义时长，环境音 |
+| "Show me the solar system" | 3D 交互太阳系，点击显示星球信息，轨道速度控制 |
+| "Create a color palette generator" | 工具，和谐规则（互补、类似、三色），对比度检查，导出为 CSS/JSON |
+| "Build a personal finance dashboard" | 仪表盘，6+ 小部件：支出图表、预算条、类别分解、趋势、最近交易 |
+| "Make a typing speed test" | 完整打字测试，WPM、准确率、字符级错误高亮、历史图表 |
+| "What causes earthquakes?" | 交互式板块构造模拟器，剖面图，震级尺度，著名地震数据 |
+| "Compare iPhone vs Android" | 并排比较工具，规格表，雷达图表，功能切换，用户投票 |
+| "Help me learn piano chords" | 交互式钢琴键盘，和弦高亮，通过 Tone.js 播放音频，和弦进行构建器 |
+
+---
+
+## 最终交付检查清单
+
+- [ ] 单个自包含 HTML 文件 — 无损坏的外部引用
+- [ ] Tailwind CSS 作为主要样式框架加载
+- [ ] 页面加载无 JavaScript 控制台错误
+- [ ] 加载时播放入场动画（交错、平滑）
+- [ ] 所有交互元素响应输入（无死按钮/链接）
+- [ ] 在移动端宽度 (375px) 下工作 — 心理测试
+- [ ] 暗色模式看起来精美
+- [ ] **任何地方都零占位符文本**（搜索：lorem、sample、example、TBD、John Doe、placeholder）
+- [ ] 所有图片有 fallback（`onerror`、CSS background 或内联 SVG）
+- [ ] 所有外部链接使用 `target="_blank" rel="noopener noreferrer"`
+- [ ] 所有 JS 包装在 DOMContentLoaded 中
+- [ ] 所有异步操作和 JSON.parse 有 try/catch
+- [ ] 只用 const/let — 不用 var
+- [ ] 只用 addEventListener — 不用内联处理器
+- [ ] 音频有可见的静音切换且默认静音（如果存在音频）
+- [ ] 尊重 prefers-reduced-motion
+- [ ] 存在 favicon（内联 SVG data URI）
+- [ ] 内容真实、与上下文相关，并在适用时经过事实核查
+
+---
+
+## 触发条件
+
+**创建类**: "创建一个..."、"生成..."、"做..."
+**交互类**: "交互式..."、"可视化..."、"模拟器"
+**游戏类**: "游戏"、"2048"、"贪吃蛇"
+**工具类**: "计时器"、"计算器"、"追踪器"
+**教育类**: "学习..."、"解释..."、"教程"
+
+---
+
+## 输出规范
+
+### 完整 Code Artifact 模板
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>应用标题</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎯</text></svg>">
+    <!-- Tailwind CSS (MANDATORY) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+    tailwind.config = {
+      theme: { extend: { fontFamily: { display: ['...', 'sans-serif'], body: ['Inter', 'sans-serif'] } } }
+    }
+    </script>
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* 仅用于 @keyframes、复杂伪元素、canvas 样式 */
+        @keyframes fadeInUp { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0) } }
+        @media (prefers-reduced-motion: reduce) {
+            *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+        }
+    </style>
+</head>
+<body class="bg-gray-950 text-white font-body min-h-screen">
+    <div id="app">
+        <!-- UI 结构：使用 Tailwind 工具类 -->
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        'use strict';
+        try {
+            // 交互逻辑（const/let only, addEventListener only）
+        } catch (e) {
+            console.error('App initialization error:', e);
+        }
+    });
+    </script>
+</body>
+</html>
+```
+
+### System Instructions 生成模板
+
+```markdown
+## Goal
+创建一个{应用类型}，实现{核心功能}。
+
+## Planning（7 步强制思考）
+1. 意图分类：{体验类型 — 游戏/仪表盘/工具/教育/创意/落地页/混合}
+2. 实体与事实识别：{需要 WebSearch 验证的现实世界实体列表}
+3. 特性头脑风暴：{~12 个特性 → 筛选 top 5-8}
+4. 视觉设计：{配色 hex、字体搭配、布局模式、动画风格}
+5. 技术架构：{CDN 库、状态管理、数据结构、事件处理}
+6. 内容策略：{图片策略、音频策略、数据来源}
+7. 质量预检：{真实 vs 演示、信息密度、边缘情况}
+
+## Examples
+参考：
+- {示例1}
+- {示例2}
+
+## Technical Specs
+- 格式: 单 HTML 文件
+- 样式: Tailwind CSS（强制主框架）+ 自定义 CSS（仅 @keyframes 等）
+- JS: DOMContentLoaded + try/catch + addEventListener + const/let
+- 交互: 响应式（375px-1280px），事件驱动
+- 动画: 入场动画 + hover/click 反馈 + prefers-reduced-motion
+- 性能: CDN 最小化，游戏使用 requestAnimationFrame
+
+## Quality Checklist
+- [ ] 单文件自包含 HTML
+- [ ] Tailwind CSS 作为主框架
+- [ ] 入场动画（交错延迟）
+- [ ] 响应式（375px 可用）
+- [ ] 零占位符内容
+- [ ] 零控制台错误
+- [ ] DOMContentLoaded + try/catch
+- [ ] const/let only + addEventListener only
+- [ ] 图片有 fallback
+- [ ] 音频默认静音 + 可见切换
+- [ ] prefers-reduced-motion
+- [ ] favicon（内联 SVG data URI）
+```
+
+---
+
+## 工作流程
+
+```
+用户请求
+    ↓
+Step 1: 7 步强制内部思考
+    意图分类 → 实体识别 → 特性头脑风暴(~12→5-8)
+    → 视觉设计 → 技术架构 → 内容策略 → 质量预检
+    ↓
+Step 2: 研究与验证
+    WebSearch (现实实体/时效数据 → 强制)
+    WebFetch (特定文档/数据源 → 按需)
+    ↓
+Step 3: 生成 HTML 文件
+    解析输出目录（用户指定 or 默认 ~/Desktop/genui-output/）
+    mkdir → Write/Edit → [输出目录]/[name].html
+    Tailwind CSS + DOMContentLoaded + try/catch
+    ↓
+Step 4: 强制自动审查（工具验证）
+    Read 回读文件 → 确认完整无截断
+    Grep 扫描禁止词 → 零匹配才通过
+    Grep 扫描 var / onclick → 零匹配才通过
+    发现问题 → Edit 修复 → 重新扫描
+    ↓
+Step 5: 呈现给用户
+    2-3 句描述 + 关键交互 + 浏览器打开
+    ↓
+用户即时交互使用
+```
+
+---
+
+## 论文关键结论
+
+> "Generative UI 是最新强大模型的**新兴能力** (Emergent Capability)"
+> — Gemini 3 达到 0% 错误率
+
+**核心价值**: 模型不仅生成内容，还生成**整个用户界面**，实现真正的"AI 即时创建应用"！
+
+> **每个提示词都值得一个独特、定制的交互体验 — 而非一大段文字。**
+> **构建一个真正的、功能完整的应用程序来服务真实内容 — 而非演示或骨架。**
diff --git a/mini_agent/skills/generative-ui/_meta.json b/mini_agent/skills/generative-ui/_meta.json
new file mode 100644
index 0000000..4549c6d
--- /dev/null
+++ b/mini_agent/skills/generative-ui/_meta.json
@@ -0,0 +1,6 @@
+{
+  "ownerId": "kn70pywhg0fyz996kpa8xj89s57yhv26",
+  "slug": "generative-ui",
+  "version": "1.0.0",
+  "publishedAt": 1767545394459
+}
diff --git a/mini_agent/skills/generative-ui/examples/README.md b/mini_agent/skills/generative-ui/examples/README.md
new file mode 100644
index 0000000..b68623c
--- /dev/null
+++ b/mini_agent/skills/generative-ui/examples/README.md
@@ -0,0 +1,252 @@
+# Generative UI 示例应用
+
+这个目录包含了使用 Generative UI Expert skill 可以创建的示例应用。
+
+## 📦 示例列表
+
+### 1. 冒泡排序可视化 (bubble-sort-visualizer)
+- **文件**: `bubble-sort-visualizer.html` (在 SKILL.md 中)
+- **类型**: 交互式学习工具
+- **功能**:
+  - 可视化冒泡排序算法过程
+  - 实时显示比较和交换次数
+  - 可调速度控制
+  - 动画效果展示
+
+### 2. 2048 游戏 (game-2048.html)
+- **文件**: `game-2048.html`
+- **类型**: 实时游戏
+- **功能**:
+  - 经典 2048 游戏机制
+  - 得分和最高分记录
+  - 键盘和触摸操作支持
+  - 优美的动画效果
+  - 本地存储最佳成绩
+
+### 3. 番茄工作法计时器 (pomodoro-timer.html)
+- **文件**: `pomodoro-timer.html`
+- **类型**: 实用工具应用
+- **功能**:
+  - 25/5/15 分钟标准番茄钟
+  - 自定义时长设置
+  - 统计今日完成的番茄数
+  - 浏览器通知提醒
+  - 自动切换工作/休息模式
+  - 数据持久化
+
+## 🚀 如何使用
+
+### 方法 1: 直接打开
+双击任意 `.html` 文件，在浏览器中直接打开即可使用。
+
+### 方法 2: 本地服务器
+如果需要更完整的功能（如某些浏览器 API），可以使用本地服务器：
+
+```bash
+# 使用 Python
+python3 -m http.server 8000
+
+# 或使用 Node.js
+npx serve
+
+# 然后访问 http://localhost:8000
+```
+
+## 💡 学习要点
+
+### 从这些示例中你可以学到：
+
+#### 1. **状态管理**
+```javascript
+// 游戏状态管理示例 (2048)
+let grid = [];
+let score = 0;
+
+function updateState() {
+    // 更新逻辑
+    renderGrid();
+}
+```
+
+#### 2. **动画实现**
+```css
+/* CSS 过渡动画 */
+.tile {
+    transition: all 0.15s ease-in-out;
+}
+
+/* CSS 关键帧动画 */
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+```
+
+#### 3. **事件处理**
+```javascript
+// 键盘事件
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft') {
+        move('left');
+    }
+});
+
+// 触摸事件
+document.addEventListener('touchstart', handleTouchStart);
+document.addEventListener('touchend', handleTouchEnd);
+```
+
+#### 4. **数据持久化**
+```javascript
+// localStorage 使用
+localStorage.setItem('bestScore', score);
+const bestScore = localStorage.getItem('bestScore') || 0;
+```
+
+#### 5. **浏览器 API**
+```javascript
+// Notification API
+if ('Notification' in window) {
+    Notification.requestPermission();
+    new Notification('标题', { body: '内容' });
+}
+
+// Web Audio API
+const audioContext = new AudioContext();
+const oscillator = audioContext.createOscillator();
+```
+
+## 🎨 设计模式
+
+### 1. **模块化设计**
+每个功能都封装在独立的函数中，便于维护和扩展。
+
+### 2. **响应式布局**
+使用 Flexbox 和 Grid 实现自适应布局。
+
+### 3. **渐进增强**
+从基础功能开始，逐步添加高级特性。
+
+### 4. **用户体验优先**
+- 即时反馈
+- 流畅动画
+- 清晰的视觉层次
+- 直观的交互
+
+## 🔧 自定义指南
+
+### 修改样式
+所有样式都在 `<style>` 标签内，可以轻松修改：
+- 颜色主题
+- 字体大小
+- 布局间距
+- 动画效果
+
+### 调整功能
+JavaScript 代码模块化良好，可以：
+- 修改游戏规则
+- 调整计时器时长
+- 改变算法可视化效果
+- 添加新功能
+
+### 添加新特性
+示例提供了良好的扩展基础：
+- 添加音效
+- 集成排行榜
+- 实现数据导出
+- 添加主题切换
+
+## 📚 更多示例想法
+
+基于这些模板，你可以创建：
+
+### 学习工具
+- 其他排序算法可视化（快排、归并、堆排序）
+- 数据结构演示（栈、队列、树、图）
+- 数学概念可视化（函数图像、几何变换）
+- 编程概念演示（递归、动态规划）
+
+### 游戏
+- 贪吃蛇
+- 俄罗斯方块
+- 扫雷
+- 打地鼠
+- 记忆翻牌
+
+### 工具应用
+- Markdown 编辑器
+- 颜色选择器
+- 单位转换器
+- JSON 格式化工具
+- 正则表达式测试器
+
+### 可视化
+- 图表生成器（柱状图、折线图、饼图）
+- 思维导图工具
+- 流程图编辑器
+- 时间线生成器
+
+## 🌟 最佳实践
+
+### 性能优化
+1. **避免不必要的重绘**
+   - 使用 `requestAnimationFrame`
+   - 批量 DOM 操作
+   - CSS transform 代替 position
+
+2. **事件优化**
+   - 使用事件委托
+   - 防抖和节流
+   - 移除不需要的监听器
+
+3. **内存管理**
+   - 清理定时器
+   - 避免内存泄漏
+   - 合理使用闭包
+
+### 代码质量
+1. **可读性**
+   - 清晰的命名
+   - 适当的注释
+   - 一致的代码风格
+
+2. **可维护性**
+   - 模块化设计
+   - 单一职责原则
+   - 避免重复代码
+
+3. **健壮性**
+   - 输入验证
+   - 错误处理
+   - 边界条件检查
+
+## 🎓 学习路径
+
+### 初级
+1. 理解 HTML 结构
+2. 掌握 CSS 样式
+3. 学习基础 JavaScript
+
+### 中级
+1. DOM 操作
+2. 事件处理
+3. 状态管理
+4. 动画实现
+
+### 高级
+1. 性能优化
+2. 设计模式
+3. 浏览器 API
+4. 架构设计
+
+## 🤝 贡献
+
+如果你创建了有趣的应用示例，欢迎分享！
+
+## 📝 许可证
+
+所有示例代码采用 MIT 许可证，可自由使用和修改。
+
+---
+
+**探索更多可能，创造无限精彩！** 🚀
diff --git a/mini_agent/skills/generative-ui/examples/game-2048.html b/mini_agent/skills/generative-ui/examples/game-2048.html
new file mode 100644
index 0000000..7fff1f7
--- /dev/null
+++ b/mini_agent/skills/generative-ui/examples/game-2048.html
@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2048 游戏</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+        }
+
+        h1 {
+            text-align: center;
+            color: #776e65;
+            margin-bottom: 20px;
+            font-size: 3em;
+        }
+
+        .game-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .score-container {
+            background: #bbada0;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 5px;
+            text-align: center;
+        }
+
+        .score-label {
+            font-size: 13px;
+            text-transform: uppercase;
+        }
+
+        .score-value {
+            font-size: 25px;
+            font-weight: bold;
+        }
+
+        .new-game-btn {
+            background: #8f7a66;
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 5px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        .new-game-btn:hover {
+            background: #9f8a76;
+        }
+
+        .grid-container {
+            background: #bbada0;
+            border-radius: 10px;
+            padding: 10px;
+            display: grid;
+            grid-template-columns: repeat(4, 100px);
+            grid-template-rows: repeat(4, 100px);
+            gap: 10px;
+            position: relative;
+        }
+
+        .grid-cell {
+            background: rgba(238, 228, 218, 0.35);
+            border-radius: 5px;
+        }
+
+        .tile {
+            position: absolute;
+            background: #eee4da;
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 35px;
+            font-weight: bold;
+            color: #776e65;
+            transition: all 0.15s ease-in-out;
+            width: 100px;
+            height: 100px;
+        }
+
+        .tile[data-value="2"] { background: #eee4da; color: #776e65; }
+        .tile[data-value="4"] { background: #ede0c8; color: #776e65; }
+        .tile[data-value="8"] { background: #f2b179; color: #f9f6f2; }
+        .tile[data-value="16"] { background: #f59563; color: #f9f6f2; }
+        .tile[data-value="32"] { background: #f67c5f; color: #f9f6f2; }
+        .tile[data-value="64"] { background: #f65e3b; color: #f9f6f2; }
+        .tile[data-value="128"] { background: #edcf72; color: #f9f6f2; font-size: 30px; }
+        .tile[data-value="256"] { background: #edcc61; color: #f9f6f2; font-size: 30px; }
+        .tile[data-value="512"] { background: #edc850; color: #f9f6f2; font-size: 30px; }
+        .tile[data-value="1024"] { background: #edc53f; color: #f9f6f2; font-size: 25px; }
+        .tile[data-value="2048"] { background: #edc22e; color: #f9f6f2; font-size: 25px; }
+
+        .game-message {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(238, 228, 218, 0.9);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+
+        .game-message.show {
+            display: flex;
+        }
+
+        .message-content {
+            text-align: center;
+            color: #776e65;
+        }
+
+        .message-content h2 {
+            font-size: 50px;
+            margin-bottom: 20px;
+        }
+
+        .message-content button {
+            background: #8f7a66;
+            color: white;
+            border: none;
+            padding: 15px 40px;
+            border-radius: 5px;
+            font-size: 18px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        .instructions {
+            margin-top: 20px;
+            text-align: center;
+            color: #776e65;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>2048</h1>
+
+        <div class="game-header">
+            <div class="score-container">
+                <div class="score-label">得分</div>
+                <div class="score-value" id="score">0</div>
+            </div>
+            <button class="new-game-btn" onclick="initGame()">新游戏</button>
+            <div class="score-container">
+                <div class="score-label">最高分</div>
+                <div class="score-value" id="bestScore">0</div>
+            </div>
+        </div>
+
+        <div class="grid-container" id="grid">
+            <!-- 背景网格 -->
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+            <div class="grid-cell"></div>
+        </div>
+
+        <div class="instructions">
+            使用方向键 ← ↑ → ↓ 移动方块，合并相同数字！
+        </div>
+    </div>
+
+    <div class="game-message" id="gameMessage">
+        <div class="message-content">
+            <h2 id="messageText"></h2>
+            <button onclick="initGame()">再来一局</button>
+        </div>
+    </div>
+
+    <script>
+        const GRID_SIZE = 4;
+        let grid = [];
+        let score = 0;
+        let bestScore = localStorage.getItem('2048-best-score') || 0;
+
+        // 初始化游戏
+        function initGame() {
+            grid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(0));
+            score = 0;
+            updateScore();
+            document.getElementById('gameMessage').classList.remove('show');
+            addRandomTile();
+            addRandomTile();
+            renderGrid();
+        }
+
+        // 添加随机方块
+        function addRandomTile() {
+            const emptyCells = [];
+            for (let i = 0; i < GRID_SIZE; i++) {
+                for (let j = 0; j < GRID_SIZE; j++) {
+                    if (grid[i][j] === 0) {
+                        emptyCells.push({row: i, col: j});
+                    }
+                }
+            }
+
+            if (emptyCells.length > 0) {
+                const {row, col} = emptyCells[Math.floor(Math.random() * emptyCells.length)];
+                grid[row][col] = Math.random() < 0.9 ? 2 : 4;
+            }
+        }
+
+        // 渲染网格
+        function renderGrid() {
+            const gridElement = document.getElementById('grid');
+            const tiles = gridElement.querySelectorAll('.tile');
+            tiles.forEach(tile => tile.remove());
+
+            for (let i = 0; i < GRID_SIZE; i++) {
+                for (let j = 0; j < GRID_SIZE; j++) {
+                    if (grid[i][j] !== 0) {
+                        const tile = document.createElement('div');
+                        tile.className = 'tile';
+                        tile.setAttribute('data-value', grid[i][j]);
+                        tile.textContent = grid[i][j];
+                        tile.style.top = `${i * 110 + 10}px`;
+                        tile.style.left = `${j * 110 + 10}px`;
+                        gridElement.appendChild(tile);
+                    }
+                }
+            }
+        }
+
+        // 移动逻辑
+        function move(direction) {
+            let moved = false;
+            const oldGrid = JSON.stringify(grid);
+
+            if (direction === 'left') moved = moveLeft();
+            else if (direction === 'right') moved = moveRight();
+            else if (direction === 'up') moved = moveUp();
+            else if (direction === 'down') moved = moveDown();
+
+            if (moved) {
+                addRandomTile();
+                renderGrid();
+
+                if (checkWin()) {
+                    showMessage('🎉 你赢了！');
+                } else if (checkGameOver()) {
+                    showMessage('😢 游戏结束！');
+                }
+            }
+        }
+
+        function moveLeft() {
+            let moved = false;
+            for (let i = 0; i < GRID_SIZE; i++) {
+                const row = grid[i].filter(val => val !== 0);
+                const merged = [];
+
+                for (let j = 0; j < row.length; j++) {
+                    if (j < row.length - 1 && row[j] === row[j + 1]) {
+                        merged.push(row[j] * 2);
+                        score += row[j] * 2;
+                        j++;
+                    } else {
+                        merged.push(row[j]);
+                    }
+                }
+
+                const newRow = [...merged, ...Array(GRID_SIZE - merged.length).fill(0)];
+                if (JSON.stringify(newRow) !== JSON.stringify(grid[i])) {
+                    moved = true;
+                }
+                grid[i] = newRow;
+            }
+            updateScore();
+            return moved;
+        }
+
+        function moveRight() {
+            grid = grid.map(row => row.reverse());
+            const moved = moveLeft();
+            grid = grid.map(row => row.reverse());
+            return moved;
+        }
+
+        function moveUp() {
+            grid = transpose(grid);
+            const moved = moveLeft();
+            grid = transpose(grid);
+            return moved;
+        }
+
+        function moveDown() {
+            grid = transpose(grid);
+            const moved = moveRight();
+            grid = transpose(grid);
+            return moved;
+        }
+
+        function transpose(matrix) {
+            return matrix[0].map((_, i) => matrix.map(row => row[i]));
+        }
+
+        // 检查游戏状态
+        function checkWin() {
+            return grid.some(row => row.some(cell => cell === 2048));
+        }
+
+        function checkGameOver() {
+            // 检查是否有空格
+            for (let i = 0; i < GRID_SIZE; i++) {
+                for (let j = 0; j < GRID_SIZE; j++) {
+                    if (grid[i][j] === 0) return false;
+                }
+            }
+
+            // 检查是否有可合并的方块
+            for (let i = 0; i < GRID_SIZE; i++) {
+                for (let j = 0; j < GRID_SIZE; j++) {
+                    if (j < GRID_SIZE - 1 && grid[i][j] === grid[i][j + 1]) return false;
+                    if (i < GRID_SIZE - 1 && grid[i][j] === grid[i + 1][j]) return false;
+                }
+            }
+
+            return true;
+        }
+
+        function showMessage(text) {
+            document.getElementById('messageText').textContent = text;
+            document.getElementById('gameMessage').classList.add('show');
+        }
+
+        function updateScore() {
+            document.getElementById('score').textContent = score;
+            if (score > bestScore) {
+                bestScore = score;
+                localStorage.setItem('2048-best-score', bestScore);
+            }
+            document.getElementById('bestScore').textContent = bestScore;
+        }
+
+        // 键盘事件
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                move('left');
+            } else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                move('right');
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                move('up');
+            } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                move('down');
+            }
+        });
+
+        // 触摸事件支持
+        let touchStartX = 0;
+        let touchStartY = 0;
+
+        document.addEventListener('touchstart', (e) => {
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+        });
+
+        document.addEventListener('touchend', (e) => {
+            const touchEndX = e.changedTouches[0].clientX;
+            const touchEndY = e.changedTouches[0].clientY;
+
+            const diffX = touchEndX - touchStartX;
+            const diffY = touchEndY - touchStartY;
+
+            if (Math.abs(diffX) > Math.abs(diffY)) {
+                if (diffX > 30) move('right');
+                else if (diffX < -30) move('left');
+            } else {
+                if (diffY > 30) move('down');
+                else if (diffY < -30) move('up');
+            }
+        });
+
+        // 初始化游戏
+        document.getElementById('bestScore').textContent = bestScore;
+        initGame();
+    </script>
+</body>
+</html>
diff --git a/mini_agent/skills/generative-ui/examples/pomodoro-timer.html b/mini_agent/skills/generative-ui/examples/pomodoro-timer.html
new file mode 100644
index 0000000..2971de9
--- /dev/null
+++ b/mini_agent/skills/generative-ui/examples/pomodoro-timer.html
@@ -0,0 +1,566 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🍅 番茄工作法计时器</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border-radius: 30px;
+            padding: 50px;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+            text-align: center;
+            max-width: 450px;
+            width: 100%;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        h1 {
+            color: #fff;
+            margin-bottom: 10px;
+            font-size: 2rem;
+        }
+
+        .subtitle {
+            color: rgba(255, 255, 255, 0.6);
+            margin-bottom: 30px;
+            font-size: 0.9rem;
+        }
+
+        .timer-display {
+            font-size: 6rem;
+            font-weight: 700;
+            color: #e94560;
+            font-variant-numeric: tabular-nums;
+            text-shadow: 0 0 30px rgba(233, 69, 96, 0.5);
+            margin: 20px 0;
+            transition: color 0.3s;
+        }
+
+        .timer-display.break {
+            color: #4ecca3;
+            text-shadow: 0 0 30px rgba(78, 204, 163, 0.5);
+        }
+
+        .timer-display.long-break {
+            color: #a78bfa;
+            text-shadow: 0 0 30px rgba(167, 139, 250, 0.5);
+        }
+
+        .session-info {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            margin-bottom: 30px;
+        }
+
+        .session-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.2);
+            transition: all 0.3s;
+        }
+
+        .session-dot.completed {
+            background: #e94560;
+            box-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
+        }
+
+        .session-dot.current {
+            background: #fff;
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 30px;
+        }
+
+        button {
+            padding: 15px 30px;
+            font-size: 1rem;
+            border: none;
+            border-radius: 15px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: 600;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #e94560, #c73e54);
+            color: white;
+            box-shadow: 0 10px 20px rgba(233, 69, 96, 0.3);
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 30px rgba(233, 69, 96, 0.4);
+        }
+
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none !important;
+        }
+
+        .settings {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 15px;
+            padding: 20px;
+            margin-top: 20px;
+        }
+
+        .settings-title {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 0.9rem;
+            margin-bottom: 15px;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .settings-title::after {
+            content: '▼';
+            font-size: 0.7rem;
+            transition: transform 0.3s;
+        }
+
+        .settings.collapsed .settings-title::after {
+            transform: rotate(-90deg);
+        }
+
+        .settings.collapsed .settings-content {
+            display: none;
+        }
+
+        .setting-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .setting-row label {
+            font-size: 0.9rem;
+        }
+
+        .setting-row input {
+            width: 80px;
+            padding: 8px 12px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            font-size: 1rem;
+            text-align: center;
+        }
+
+        .setting-row input:focus {
+            outline: none;
+            border-color: #e94560;
+        }
+
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat {
+            text-align: center;
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #e94560;
+        }
+
+        .stat-label {
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.5);
+            margin-top: 5px;
+        }
+
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #4ecca3;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 10px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transform: translateX(150%);
+            transition: transform 0.3s;
+            z-index: 1000;
+        }
+
+        .notification.show {
+            transform: translateX(0);
+        }
+
+        .notification.break {
+            background: #e94560;
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                padding: 30px 20px;
+            }
+            .timer-display {
+                font-size: 4rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🍅 番茄钟</h1>
+        <p class="subtitle">专注工作，高效休息</p>
+
+        <div class="session-info" id="sessionInfo">
+            <div class="session-dot" data-index="0"></div>
+            <div class="session-dot" data-index="1"></div>
+            <div class="session-dot" data-index="2"></div>
+            <div class="session-dot" data-index="3"></div>
+        </div>
+
+        <div class="timer-display" id="timerDisplay">25:00</div>
+
+        <div class="controls">
+            <button class="btn-primary" id="startBtn" onclick="startTimer()">▶️ 开始</button>
+            <button class="btn-secondary" onclick="pauseTimer()">⏸️ 暂停</button>
+            <button class="btn-secondary" onclick="resetTimer()">🔄 重置</button>
+            <button class="btn-secondary" onclick="skipSession()">⏭️ 跳过</button>
+        </div>
+
+        <div class="settings" id="settings">
+            <div class="settings-title" onclick="toggleSettings()">⚙️ 设置</div>
+            <div class="settings-content">
+                <div class="setting-row">
+                    <label>工作时长 (分钟)</label>
+                    <input type="number" id="workTime" value="25" min="1" max="60" onchange="updateSettings()">
+                </div>
+                <div class="setting-row">
+                    <label>短休息 (分钟)</label>
+                    <input type="number" id="shortBreak" value="5" min="1" max="30" onchange="updateSettings()">
+                </div>
+                <div class="setting-row">
+                    <label>长休息 (分钟)</label>
+                    <input type="number" id="longBreak" value="15" min="1" max="60" onchange="updateSettings()">
+                </div>
+                <div class="setting-row">
+                    <label>长休息间隔</label>
+                    <input type="number" id="longBreakInterval" value="4" min="2" max="8" onchange="updateSettings()">
+                </div>
+            </div>
+        </div>
+
+        <div class="stats">
+            <div class="stat">
+                <div class="stat-value" id="completedPomodoros">0</div>
+                <div class="stat-label">完成番茄</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="totalMinutes">0</div>
+                <div class="stat-label">总分钟</div>
+            </div>
+            <div class="stat">
+                <div class="stat-value" id="currentStreak">0</div>
+                <div class="stat-label">连续</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="notification" id="notification">
+        <span id="notificationText">🎉 番茄完成！休息一下~</span>
+    </div>
+
+    <script>
+        // 状态
+        let timeLeft = 25 * 60;
+        let timerInterval = null;
+        let isRunning = false;
+        let isWorkSession = true;
+        let completedPomodoros = 0;
+        let currentSession = 0;
+        let totalMinutes = 0;
+        let currentStreak = 0;
+        let streakStartTime = null;
+
+        // 设置
+        let settings = {
+            workTime: 25,
+            shortBreak: 5,
+            longBreak: 15,
+            longBreakInterval: 4
+        };
+
+        // DOM 元素
+        const timerDisplay = document.getElementById('timerDisplay');
+        const startBtn = document.getElementById('startBtn');
+        const notification = document.getElementById('notification');
+        const notificationText = document.getElementById('notificationText');
+
+        // 格式化时间
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // 更新显示
+        function updateDisplay() {
+            timerDisplay.textContent = formatTime(timeLeft);
+            document.title = `🍅 ${formatTime(timeLeft)} - 番茄钟`;
+        }
+
+        // 更新统计
+        function updateStats() {
+            document.getElementById('completedPomodoros').textContent = completedPomodoros;
+            document.getElementById('totalMinutes').textContent = totalMinutes;
+            document.getElementById('currentStreak').textContent = currentStreak;
+            saveData();
+        }
+
+        // 更新会话指示器
+        function updateSessionDots() {
+            const dots = document.querySelectorAll('.session-dot');
+            dots.forEach((dot, index) => {
+                dot.classList.remove('completed', 'current');
+                if (index < currentSession) {
+                    dot.classList.add('completed');
+                } else if (index === currentSession && isWorkSession) {
+                    dot.classList.add('current');
+                }
+            });
+        }
+
+        // 开始计时
+        function startTimer() {
+            if (isRunning) return;
+            
+            isRunning = true;
+            startBtn.disabled = true;
+            
+            timerInterval = setInterval(() => {
+                timeLeft--;
+                updateDisplay();
+                
+                if (timeLeft <= 0) {
+                    handleTimerComplete();
+                }
+            }, 1000);
+        }
+
+        // 暂停计时
+        function pauseTimer() {
+            isRunning = false;
+            startBtn.disabled = false;
+            clearInterval(timerInterval);
+        }
+
+        // 重置计时
+        function resetTimer() {
+            pauseTimer();
+            timeLeft = settings.workTime * 60;
+            isWorkSession = true;
+            timerDisplay.classList.remove('break', 'long-break');
+            updateDisplay();
+            updateSessionDots();
+        }
+
+        // 跳过当前会话
+        function skipSession() {
+            pauseTimer();
+            handleTimerComplete();
+        }
+
+        // 处理计时完成
+        function handleTimerComplete() {
+            pauseTimer();
+            
+            // 播放提示音
+            playNotificationSound();
+            
+            if (isWorkSession) {
+                // 工作会话完成
+                completedPomodoros++;
+                totalMinutes += settings.workTime;
+                currentSession++;
+                
+                // 检查是否是长休息
+                const isLongBreak = currentSession >= settings.longBreakInterval;
+                
+                if (isLongBreak) {
+                    // 长休息
+                    timeLeft = settings.longBreak * 60;
+                    timerDisplay.classList.add('long-break');
+                    showNotification('🎉 完成4个番茄！开始长休息~', true);
+                    currentSession = 0;
+                } else {
+                    // 短休息
+                    timeLeft = settings.shortBreak * 60;
+                    timerDisplay.classList.add('break');
+                    showNotification('🍅 番茄完成！休息一下~', true);
+                }
+                
+                isWorkSession = false;
+                currentStreak++;
+            } else {
+                // 休息结束
+                timeLeft = settings.workTime * 60;
+                timerDisplay.classList.remove('break', 'long-break');
+                showNotification('⏰ 休息结束！开始新的番茄~');
+                isWorkSession = true;
+            }
+            
+            updateDisplay();
+            updateStats();
+            updateSessionDots();
+        }
+
+        // 显示通知
+        function showNotification(text, isBreak = false) {
+            notificationText.textContent = text;
+            notification.classList.toggle('break', isBreak);
+            notification.classList.add('show');
+            
+            setTimeout(() => {
+                notification.classList.remove('show');
+            }, 4000);
+            
+            // 浏览器通知
+            if (Notification.permission === 'granted') {
+                new Notification('🍅 番茄钟', { body: text });
+            }
+        }
+
+        // 播放提示音
+        function playNotificationSound() {
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const oscillator = audioContext.createOscillator();
+            const gainNode = audioContext.createGain();
+            
+            oscillator.connect(gainNode);
+            gainNode.connect(audioContext.destination);
+            
+            oscillator.frequency.value = 800;
+            oscillator.type = 'sine';
+            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
+            
+            oscillator.start(audioContext.currentTime);
+            oscillator.stop(audioContext.currentTime + 0.5);
+        }
+
+        // 切换设置面板
+        function toggleSettings() {
+            document.getElementById('settings').classList.toggle('collapsed');
+        }
+
+        // 更新设置
+        function updateSettings() {
+            settings.workTime = parseInt(document.getElementById('workTime').value) || 25;
+            settings.shortBreak = parseInt(document.getElementById('shortBreak').value) || 5;
+            settings.longBreak = parseInt(document.getElementById('longBreak').value) || 15;
+            settings.longBreakInterval = parseInt(document.getElementById('longBreakInterval').value) || 4;
+            
+            if (!isRunning && isWorkSession) {
+                timeLeft = settings.workTime * 60;
+                updateDisplay();
+            }
+            saveData();
+        }
+
+        // 保存数据到 localStorage
+        function saveData() {
+            localStorage.setItem('pomodoroStats', JSON.stringify({
+                completedPomodoros,
+                totalMinutes,
+                currentStreak,
+                settings
+            }));
+        }
+
+        // 从 localStorage 加载数据
+        function loadData() {
+            const saved = localStorage.getItem('pomodoroStats');
+            if (saved) {
+                const data = JSON.parse(saved);
+                completedPomodoros = data.completedPomodoros || 0;
+                totalMinutes = data.totalMinutes || 0;
+                currentStreak = data.currentStreak || 0;
+                settings = { ...settings, ...data.settings };
+                
+                document.getElementById('workTime').value = settings.workTime;
+                document.getElementById('shortBreak').value = settings.shortBreak;
+                document.getElementById('longBreak').value = settings.longBreak;
+                document.getElementById('longBreakInterval').value = settings.longBreakInterval;
+            }
+        }
+
+        // 请求通知权限
+        function requestNotificationPermission() {
+            if ('Notification' in window && Notification.permission === 'default') {
+                Notification.requestPermission();
+            }
+        }
+
+        // 初始化
+        function init() {
+            loadData();
+            timeLeft = settings.workTime * 60;
+            updateDisplay();
+            updateStats();
+            updateSessionDots();
+            requestNotificationPermission();
+        }
+
+        init();
+    </script>
+</body>
+</html>
diff --git a/mini_agent/tools/base.py b/mini_agent/tools/base.py
index 1bfcd25..7cc2f45 100644
--- a/mini_agent/tools/base.py
+++ b/mini_agent/tools/base.py
@@ -1,6 +1,6 @@
 """Base tool classes."""
 
-from typing import Any
+from typing import Any, Optional, Union
 
 from pydantic import BaseModel
 
@@ -10,7 +10,7 @@ class ToolResult(BaseModel):
 
     success: bool
     content: str = ""
-    error: str | None = None
+    error: Optional[str] = None
 
 
 class Tool:
diff --git a/mini_agent/tools/bash_tool.py b/mini_agent/tools/bash_tool.py
index 47375ff..f0087bd 100644
--- a/mini_agent/tools/bash_tool.py
+++ b/mini_agent/tools/bash_tool.py
@@ -8,7 +8,7 @@
 import re
 import time
 import uuid
-from typing import Any
+from typing import Any, Optional
 
 from pydantic import Field, model_validator
 
@@ -27,7 +27,7 @@ class BashOutputResult(ToolResult):
     stdout: str = Field(description="The command's standard output")
     stderr: str = Field(description="The command's standard error output")
     exit_code: int = Field(description="The command's exit code")
-    bash_id: str | None = Field(default=None, description="Shell process ID (only when run_in_background=True)")
+    bash_id: Optional[str] = Field(default=None, description="Shell process ID (only when run_in_background=True)")
 
     @model_validator(mode="after")
     def format_content(self) -> "BashOutputResult":
@@ -64,13 +64,13 @@ def __init__(self, bash_id: str, command: str, process: "asyncio.subprocess.Proc
         self.output_lines: list[str] = []
         self.last_read_index = 0
         self.status = "running"
-        self.exit_code: int | None = None
+        self.exit_code: Optional[int] = None
 
     def add_output(self, line: str):
         """Add new output line."""
         self.output_lines.append(line)
 
-    def get_new_output(self, filter_pattern: str | None = None) -> list[str]:
+    def get_new_output(self, filter_pattern: Optional[str] = None) -> list[str]:
         """Get new output since last check, optionally filtered by regex."""
         new_lines = self.output_lines[self.last_read_index :]
         self.last_read_index = len(self.output_lines)
@@ -85,7 +85,7 @@ def get_new_output(self, filter_pattern: str | None = None) -> list[str]:
 
         return new_lines
 
-    def update_status(self, is_alive: bool, exit_code: int | None = None):
+    def update_status(self, is_alive: bool, exit_code: Optional[int] = None):
         """Update process status."""
         if not is_alive:
             self.status = "completed" if exit_code == 0 else "failed"
@@ -117,7 +117,7 @@ def add(cls, shell: BackgroundShell) -> None:
         cls._shells[shell.bash_id] = shell
 
     @classmethod
-    def get(cls, bash_id: str) -> BackgroundShell | None:
+    def get(cls, bash_id: str) -> Optional[BackgroundShell]:
         """Get a background shell by ID."""
         return cls._shells.get(bash_id)
 
@@ -222,7 +222,7 @@ class BashTool(Tool):
     - Unix/Linux/macOS: bash
     """
 
-    def __init__(self, workspace_dir: str | None = None):
+    def __init__(self, workspace_dir: Optional[str] = None):
         """Initialize BashTool with OS-specific shell detection.
 
         Args:
@@ -485,7 +485,7 @@ def parameters(self) -> dict[str, Any]:
     async def execute(
         self,
         bash_id: str,
-        filter_str: str | None = None,
+        filter_str: Optional[str] = None,
     ) -> BashOutputResult:
         """Retrieve output from background shell.
 
diff --git a/mini_agent/tools/file_tools.py b/mini_agent/tools/file_tools.py
index 74b7eee..86d6544 100644
--- a/mini_agent/tools/file_tools.py
+++ b/mini_agent/tools/file_tools.py
@@ -1,7 +1,7 @@
 """File operation tools."""
 
 from pathlib import Path
-from typing import Any
+from typing import Any, Optional
 
 import tiktoken
 
@@ -105,7 +105,7 @@ def parameters(self) -> dict[str, Any]:
             "required": ["path"],
         }
 
-    async def execute(self, path: str, offset: int | None = None, limit: int | None = None) -> ToolResult:
+    async def execute(self, path: str, offset: Optional[int] = None, limit: Optional[int] = None) -> ToolResult:
         """Execute read file."""
         try:
             file_path = Path(path)