foliko 1.0.74 → 1.0.76

package/.agent/workflows/ui-ux-pro-max.md

@@ -0,0 +1,296 @@
+---
+description: Plan and implement UI
+---
+
+---
+description: AI-powered design intelligence with 50+ styles, 95+ color palettes, and automated design system generation
+---
+
+# ui-ux-pro-max
+
+Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
+
+## Prerequisites
+
+Check if Python is installed:
+
+```bash
+python3 --version || python --version
+```
+
+If Python is not installed, install it based on user's OS:
+
+**macOS:**
+```bash
+brew install python3
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo apt update && sudo apt install python3
+```
+
+**Windows:**
+```powershell
+winget install Python.Python.3.12
+```
+
+---
+
+## How to Use This Workflow
+
+When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
+- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc.
+- **Industry**: healthcare, fintech, gaming, education, etc.
+- **Stack**: React, Vue, Next.js, or default to `html-tailwind`
+
+### Step 2: Generate Design System (REQUIRED)
+
+**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+This command:
+1. Searches 5 domains in parallel (product, style, color, landing, typography)
+2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
+3. Returns complete design system: pattern, style, colors, typography, effects
+4. Includes anti-patterns to avoid
+
+**Example:**
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+```
+
+### Step 2b: Persist Design System (Master + Overrides Pattern)
+
+To save the design system for hierarchical retrieval across sessions, add `--persist`:
+
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+```
+
+This creates:
+- `design-system/MASTER.md` — Global Source of Truth with all design rules
+- `design-system/pages/` — Folder for page-specific overrides
+
+**With page-specific override:**
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+```
+
+This also creates:
+- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+
+**How hierarchical retrieval works:**
+1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+2. If the page file exists, its rules **override** the Master file
+3. If not, use `design-system/MASTER.md` exclusively
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+After getting the design system, use domain searches to get additional details:
+
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**When to use detailed searches:**
+
+| Need | Domain | Example |
+|------|--------|---------|
+| More style options | `style` | `--domain style "glassmorphism dark"` |
+| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
+| UX best practices | `ux` | `--domain ux "animation accessibility"` |
+| Alternative fonts | `typography` | `--domain typography "elegant luxury"` |
+| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+
+### Step 4: Stack Guidelines (Default: html-tailwind)
+
+Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**.
+
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
+```
+
+Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose`
+, `jetpack-compose`
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
+| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize |
+| `prompt` | AI prompts, CSS keywords | (style name) |
+
+### Available Stacks
+
+| Stack | Focus |
+|-------|-------|
+| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) |
+| `react` | State, hooks, performance, patterns |
+| `nextjs` | SSR, routing, images, API routes |
+| `vue` | Composition API, Pinia, Vue Router |
+| `svelte` | Runes, stores, SvelteKit |
+| `swiftui` | Views, State, Navigation, Animation |
+| `react-native` | Components, Navigation, Lists |
+| `flutter` | Widgets, State, Layout, Theming |
+| `shadcn` | shadcn/ui components, theming, forms, patterns |
+| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition |
+
+---
+
+## Example Workflow
+
+**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"
+
+### Step 1: Analyze Requirements
+- Product type: Beauty/Spa service
+- Style keywords: elegant, professional, soft
+- Industry: Beauty/Wellness
+- Stack: html-tailwind (default)
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
+```
+
+**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+```bash
+# Get UX guidelines for animation and accessibility
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
+
+# Get alternative typography options if needed
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography
+```
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind
+```
+
+**Then:** Synthesize design system + detailed searches and implement the design.
+
+---
+
+## Output Formats
+
+The `--design-system` flag supports two output formats:
+
+```bash
+# ASCII box (default) - best for terminal display
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+
+# Markdown - best for documentation
+python3 .agent/.shared/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+```
+
+---
+
+## Tips for Better Results
+
+1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app"
+2. **Search multiple times** - Different keywords reveal different insights
+3. **Combine domains** - Style + Typography + Color = Complete design system
+4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues
+5. **Use stack flag** - Get implementation-specific best practices
+6. **Iterate** - If first search doesn't match, try different keywords
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+
+### Icons & Visual Elements
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
+| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
+| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
+| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
+
+### Interaction & Cursor
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements |
+| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive |
+| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) |
+| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text |
+| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter |
+| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` |
+| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements |
+| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] Brand logos are correct (verified from Simple Icons)
+- [ ] Hover states don't cause layout shift
+- [ ] Use theme colors directly (bg-primary) not var() wrapper
+
+### Interaction
+- [ ] All clickable elements have `cursor-pointer`
+- [ ] Hover states provide clear visual feedback
+- [ ] Transitions are smooth (150-300ms)
+- [ ] Focus states visible for keyboard navigation
+
+### Light/Dark Mode
+- [ ] Light mode text has sufficient contrast (4.5:1 minimum)
+- [ ] Glass/transparent elements visible in light mode
+- [ ] Borders visible in both modes
+- [ ] Test both modes before delivery
+
+### Layout
+- [ ] Floating elements have proper spacing from edges
+- [ ] No content hidden behind fixed navbars
+- [ ] Responsive at 375px, 768px, 1024px, 1440px
+- [ ] No horizontal scroll on mobile
+
+### Accessibility
+- [ ] All images have alt text
+- [ ] Form inputs have labels
+- [ ] Color is not the only indicator
+- [ ] `prefers-reduced-motion` respected

package/.claude/settings.local.json

@@ -143,7 +143,17 @@
       "Bash(node -e \"require\\('./plugins/ambient-agent-plugin.js'\\)\" 2>&1)",
       "Bash(node -e \"\nconst { Framework } = require\\('./src/core/framework'\\);\nconst framework = new Framework\\(\\);\nframework.loadPlugin\\('./plugins/ambient-agent-plugin.js'\\).catch\\(console.error\\);\nsetTimeout\\(\\(\\) => {\n  const tools = framework.getTools\\(\\);\n  console.log\\('Registered tools:', tools.map\\(t => t.name\\)\\);\n}, 2000\\);\n\" 2>&1)",
       "Bash(node -c plugins/scheduler-plugin.js 2>&1)",
-      "WebFetch(domain:ai-sdk.dev)"
+      "WebFetch(domain:ai-sdk.dev)",
+      "Bash(node --check src/utils/index.js 2>&1; echo \"Exit: $?\")",
+      "Bash(node --check src/core/agent-chat.js 2>&1; echo \"Exit: $?\")",
+      "Bash(node --check plugins/file-system-plugin.js 2>&1; echo \"Exit: $?\")",
+      "Bash(node --check src/capabilities/workflow-engine.js && node --check src/core/agent-chat.js && node --check src/core/agent.js && node --check src/core/plugin-manager.js && node --check src/core/framework.js && echo \"All OK\")",
+      "Bash(node --check src/utils/retry.js && echo \"OK\")",
+      "Bash(git checkout:*)",
+      "Bash(node --check plugins/default-plugins.js && echo \"OK\")",
+      "Bash(node --check plugins/subagent-plugin.js && echo \"OK\")",
+      "Bash(head -1 \"D:\\\\code\\\\vb-agent\\\\cli\\\\bin\\\\foliko.js\" | xxd)",
+      "Bash(node D:/code/vb-agent/cli/bin/foliko.js chat)"
     ]
   }
 }

package/.editorconfig

@@ -0,0 +1,56 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# 代码文件
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# JavaScript / Node.js
+[*.{js,jsx,mjs,cjs}]
+indent_style = space
+indent_size = 2
+
+# TypeScript
+[*.{ts,tsx}]
+indent_style = space
+indent_size = 2
+
+# JSON
+[*.json]
+indent_style = space
+indent_size = 2
+
+# YAML
+[*.{yaml,yml}]
+indent_style = space
+indent_size = 2
+
+# Markdown
+[*.md]
+trim_trailing_whitespace = false
+indent_style = space
+indent_size = 2
+
+# Shell
+[*.sh]
+indent_style = space
+indent_size = 2
+
+# PowerShell
+[*.ps1]
+indent_style = space
+indent_size = 4
+
+# Dockerfile
+[Dockerfile]
+indent_style = space
+indent_size = 4
+
+# Makefile
+[Makefile]
+indent_style = tab

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.lintstagedrc

@@ -0,0 +1,7 @@
+{
+  "*.{js,jsx,ts,tsx}": ["prettier --write", "git add"],
+  "*.{json,yaml,yml}": ["prettier --write", "git add"],
+  "*.{md,mdx}": ["prettier --write", "git add"],
+  "*.{css,scss,less}": ["prettier --write", "git add"],
+  "*.{html,svg}": ["prettier --write", "git add"]
+}

package/.prettierignore

@@ -0,0 +1,29 @@
+# 依赖
+node_modules/
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# 构建输出
+dist/
+build/
+out/
+
+# 插件目录（第三方代码）
+plugins/
+
+# 测试报告
+reports/
+test_report.md
+
+# 配置文件（不需要格式化）
+.env
+.env.example
+
+# 静态资源
+images/
+audio/
+public/
+
+# 锁文件
+*.lock

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": []
+}

package/CLAUDE.md

@@ -70,6 +70,7 @@ examples/          # Usage examples
 ### Plugin System
 
 Plugins are registered via `framework.registerPlugin()` and loaded with `framework.loadPlugin()`. Each plugin:
+
 - Has a `name`, `version`, `description`, and `priority`
 - Implements `install(framework)` to register tools/events
 - Implements `start(framework)` after initialization
@@ -79,6 +80,7 @@ Plugins are registered via `framework.registerPlugin()` and loaded with `framewo
 ### AI Integration
 
 Uses Vercel AI SDK (`ai` package) with support for multiple providers:
+
 - Anthropic, DeepSeek, MiniMax, OpenAI, OpenAI-Compatible
 
 Provider selection via `config.provider` and AI settings in `.agent/ai.json`.

package/README.md

@@ -56,6 +56,7 @@ foliko list
 在 `foliko chat` 的对话界面中，可以直接输入自然语言来控制框架：
 
 **插件管理**
+
 ```
 开启微信插件
 开启飞书插件
@@ -66,6 +67,7 @@ foliko list
 ```
 
 **定时任务**
+
 ```
 10分钟后提醒我喝水
 每天早上9点提醒我查看邮件
@@ -75,6 +77,7 @@ foliko list
 ```
 
 **会话管理**
+
 ```
 创建一个新会话
 列出所有会话
@@ -83,6 +86,7 @@ foliko list
 ```
 
 **Ambient Agent**
+
 ```
 查看 Ambient Agent 状态
 创建一个目标：监控新邮件
@@ -93,6 +97,7 @@ foliko list
 ```
 
 **子 Agent**
+
 ```
 列出所有子Agent
 调用 backend-specialist 处理任务
@@ -100,6 +105,7 @@ foliko list
 ```
 
 **系统操作**
+
 ```
 执行 shell 命令：ls -la
 安装 npm 包：lodash
@@ -226,7 +232,7 @@ WEB_BASE_URL=https://your-domain.com
 
 #### Markdown 格式
 
-```markdown
+````markdown
 # Backend Specialist
 
 ```json
@@ -237,7 +243,9 @@ WEB_BASE_URL=https://your-domain.com
   "parentTools": ["read_file", "run_command"]
 }
 ```
-```
+````
+
+````
 
 ### ai.json 格式
 
@@ -248,7 +256,7 @@ WEB_BASE_URL=https://your-domain.com
   "apiKey": "your-api-key",
   "baseURL": "https://api.minimaxi.com/v1"
 }
-```
+````
 
 ### mcp_config.json 格式
 
@@ -288,32 +296,32 @@ WEB_BASE_URL=https://your-domain.com
 
 ```javascript
 // .agent/plugins/my-plugin/index.js
-module.exports = function(Plugin) {
+module.exports = function (Plugin) {
   return class MyPlugin extends Plugin {
     constructor(config = {}) {
-      super()
-      this.name = 'my-plugin'
-      this.version = '1.0.0'
-      this.description = '我的工具插件'
-      this.priority = 10
+      super();
+      this.name = 'my-plugin';
+      this.version = '1.0.0';
+      this.description = '我的工具插件';
+      this.priority = 10;
     }
 
     install(framework) {
-      const { z } = require('zod')
+      const { z } = require('zod');
       framework.registerTool({
         name: 'my_tool',
         description: '我的工具',
         inputSchema: z.object({
-          param: z.string().describe('参数描述')
+          param: z.string().describe('参数描述'),
         }),
         execute: async (args, framework) => {
-          return { success: true, result: args.param }
-        }
-      })
-      return this
+          return { success: true, result: args.param };
+        },
+      });
+      return this;
     }
-  }
-}
+  };
+};
 ```
 
 #### 单文件结构（兼容）
@@ -355,57 +363,57 @@ allowed-tools: tool1,tool2
 
 ### 通用工具
 
-| 工具 | 说明 |
-|------|------|
-| `loadSkill` | 加载技能 |
-| `list_plugins` | 列出所有插件 |
-| `list_tools` | 列出所有工具 |
-| `reload_plugins` | 重载插件 |
-| `shell` | 执行 Shell 命令 |
-| `powershell` | 执行 PowerShell 命令 |
-| `python-execute` | 执行 Python 代码 |
-| `python_script` | 执行 Python 脚本 |
-| `pip_install` | 安装 Python 包 |
-| `install` | 安装 npm 包 |
-| `mcp_reload` | 重载 MCP 服务器 |
-| `audit_query` | 查询审计日志 |
+| 工具             | 说明                 |
+| ---------------- | -------------------- |
+| `loadSkill`      | 加载技能             |
+| `list_plugins`   | 列出所有插件         |
+| `list_tools`     | 列出所有工具         |
+| `reload_plugins` | 重载插件             |
+| `shell`          | 执行 Shell 命令      |
+| `powershell`     | 执行 PowerShell 命令 |
+| `python-execute` | 执行 Python 代码     |
+| `python_script`  | 执行 Python 脚本     |
+| `pip_install`    | 安装 Python 包       |
+| `install`        | 安装 npm 包          |
+| `mcp_reload`     | 重载 MCP 服务器      |
+| `audit_query`    | 查询审计日志         |
 
 ### 子 Agent 管理工具
 
-| 工具 | 说明 |
-|------|------|
-| `subagent_list` | 列出所有子Agent |
-| `subagent_call` | 调用指定的子Agent处理任务 |
-| `subagent_reload` | 重新加载子Agent配置 |
+| 工具              | 说明                      |
+| ----------------- | ------------------------- |
+| `subagent_list`   | 列出所有子Agent           |
+| `subagent_call`   | 调用指定的子Agent处理任务 |
+| `subagent_reload` | 重新加载子Agent配置       |
 
 ### 会话工具
 
-| 工具 | 说明 |
-|------|------|
-| `session_create` | 创建会话 |
-| `session_get` | 获取会话 |
-| `session_list` | 列出所有会话 |
-| `session_delete` | 删除会话 |
+| 工具              | 说明         |
+| ----------------- | ------------ |
+| `session_create`  | 创建会话     |
+| `session_get`     | 获取会话     |
+| `session_list`    | 列出所有会话 |
+| `session_delete`  | 删除会话     |
 | `session_history` | 获取会话历史 |
 
 ### 定时任务工具
 
-| 工具 | 说明 |
-|------|------|
-| `schedule_task` | 创建定时任务 |
-| `schedule_list` | 列出定时任务 |
-| `schedule_cancel` | 取消定时任务 |
-| `cron_examples` | 显示 cron 示例 |
+| 工具              | 说明           |
+| ----------------- | -------------- |
+| `schedule_task`   | 创建定时任务   |
+| `schedule_list`   | 列出定时任务   |
+| `schedule_cancel` | 取消定时任务   |
+| `cron_examples`   | 显示 cron 示例 |
 
 ### Ambient Agent 工具
 
-| 工具 | 说明 |
-|------|------|
-| `ambient_goals` | 管理目标（列出/创建/更新/删除/激活） |
-| `ambient_status` | 获取 Ambient Agent 状态 |
-| `ambient_think` | 触发主动思考 |
-| `ambient_remember` | 存储/检索记忆 |
-| `ambient_control` | 控制循环（暂停/恢复/调整） |
+| 工具               | 说明                                 |
+| ------------------ | ------------------------------------ |
+| `ambient_goals`    | 管理目标（列出/创建/更新/删除/激活） |
+| `ambient_status`   | 获取 Ambient Agent 状态              |
+| `ambient_think`    | 触发主动思考                         |
+| `ambient_remember` | 存储/检索记忆                        |
+| `ambient_control`  | 控制循环（暂停/恢复/调整）           |
 
 ### 通知事件
 
@@ -424,6 +432,7 @@ allowed-tools: tool1,tool2
 ## 工作目录
 
 CLI 工作目录默认使用执行命令的目录。
+
 - `.agent/` 目录会创建在工作目录下
 - 配置文件、插件、技能等都放在工作目录的 `.agent/` 下