foliko 1.1.13 → 1.1.14

package/.agent/skills/poster-design/SKILL.md

@@ -0,0 +1,385 @@
+---
+name: poster-design
+description: 海报设计技能 - 收集优秀设计风格、配色方案和创意灵感。当用户询问"海报制作"、"卡片制作"、"配图制作"、"设计风格"时立即调用。
+allowed-tools: ext_call, Write, Read
+license: MIT
+compatibility: v1.0.0
+---
+
+# 海报设计技能指南
+
+## 概述
+
+本技能提供海报设计的专业指南，包含多种风格的设计规范、配色方案、布局原则和实际生成示例。
+
+---
+
+## 一、设计尺寸标准
+
+| 类型 | 尺寸(px) | 用途 |
+|------|----------|------|
+| 竖版海报 | 1080×1080 | Instagram、朋友圈封面 |
+| 横版海报 | 1920×1080 | 活动Banner、幻灯片 |
+| 故事版 | 1080×1920 | Instagram Stories |
+| 方形卡片 | 800×800 | 社交媒体卡片 |
+
+---
+
+## 二、核心设计风格
+
+### 1. 赛博朋克/暗色科技风 ⭐ FOLIKO项目专用
+
+**特点**: 深色背景 + 霓虹渐变 + 科技元素
+
+**配色方案**:
+```yaml
+背景: "#0D0D0D" 或 "#0A0E17"
+主色: "#00F5FF" (青色霓虹)
+辅助: "#7B2FF7" (紫色霓虹)
+点缀: "#FF2D95" (粉色霓虹)
+文字: "#FFFFFF" (白色)
+```
+
+**设计元素**:
+- 渐变背景 (从深蓝到紫色)
+- 霓虹光晕效果 (使用透明度渐变的圆形)
+- 科技网格线
+- 发光文字
+
+**生成代码模板**:
+```javascript
+// 1. 深色渐变背景
+add_poster_background({ type: "gradient", colors: ["#0A0E17", "#1A1A3E", "#0D0D0D"] })
+
+// 2. 霓虹光晕
+add_poster_circle({ cx: 300, cy: 300, rx: 200, ry: 200, fill: "#00F5FF", opacity: 0.1 })
+add_poster_circle({ cx: 700, cy: 600, rx: 250, ry: 250, fill: "#7B2FF7", opacity: 0.15 })
+
+// 3. 主标题 - 使用渐变文字
+add_poster_art_text({ 
+  text: "FOLIKO", 
+  fontSize: 120, 
+  gradient: { colors: ["#00F5FF", "#7B2FF7", "#FF2D95"] } 
+})
+
+// 4. 副标题
+add_poster_text({ text: "插件化架构 · 多模型支持", fontSize: 18, color: "#00F5FF" })
+```
+
+---
+
+### 2. 极简几何风 "LESS IS MORE"
+
+**特点**: 大量留白 + 几何图形 + 莫兰迪色系
+
+**配色方案**:
+```yaml
+背景: "#FAFAFA"
+主色: "#1A1A1A" (纯黑)
+强调色: ["#E63946", "#457B9D", "#F4A261", "#2A9D8F"] (四角撞色)
+```
+
+**设计元素**:
+- 极细线条分隔
+- 几何色块点缀
+- 大量留白
+- 无衬线字体
+
+---
+
+### 3. 法式浪漫风 "BONJOUR PARIS"
+
+**特点**: 奶油色调 + 柔和圆形 + 优雅衬线
+
+**配色方案**:
+```yaml
+背景: "#FDF5F0"
+主色: "#1A1A1A"
+辅助: ["#E8B4B8", "#D4A574", "#C9A86C"] (莫兰迪粉/金/米)
+```
+
+**设计元素**:
+- 柔和渐变圆形作为装饰
+- 法语文字点缀
+- 金色细线装饰
+- 优雅的衬线字体
+
+---
+
+### 4. 波普艺术风 "POP ART"
+
+**特点**: 高饱和撞色 + 几何分割 + 大字体
+
+**配色方案**:
+```yaml
+背景: "#FFE135" (明黄)
+强调色: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"]
+文字: "#1A1A1A"
+```
+
+**设计元素**:
+- 四角几何色块分割
+- 同心圆叠加效果
+- 超大字体
+- 卡通元素点缀
+
+---
+
+### 5. 国潮山水风
+
+**特点**: 水墨渐变 + 传统纹样 + 中国色彩
+
+**配色方案**:
+```yaml
+背景: 渐变水墨 ("#2C3E50" → "#5D4E6D")
+主色: "#8B4513" (赭石)
+辅助: ["#2E8B57", "#DAA520", "#DC143C"] (松石绿/金/中国红)
+```
+
+**设计元素**:
+- 水墨晕染效果
+- 祥云/山峦剪影
+- 传统纹样边框
+- 中文书法文字
+
+---
+
+### 6. 轻奢渐变风 "AQUA DREAM"
+
+**特点**: 深色背景 + 流体渐变 + 玻璃质感
+
+**配色方案**:
+```yaml
+背景: "#0F0C29" (深紫蓝)
+渐变: ["#00D4FF", "#7B2FF7", "#F107A3"] (青-紫-粉)
+文字: "#FFFFFF"
+```
+
+**设计元素**:
+- 多层半透明圆形叠加
+- 渐变文字效果
+- 金属质感点缀
+- 暗角效果
+
+---
+
+### 7. 日式樱花风 "SAKURA"
+
+**特点**: 粉色渐变 + 日式元素 + 清新淡雅
+
+**配色方案**:
+```yaml
+背景: "#FDF2F4" (樱花粉)
+主色: "#C48B9F" (藕荷色)
+辅助: ["#FFB7C5", "#E8C4D0"] (浅樱花色)
+```
+
+**设计元素**:
+- 樱花花瓣圆形点缀
+- 日语文本
+- 细线装饰
+- "一期一会"等禅语
+
+---
+
+### 8. 复古杂志风
+
+**特点**: 大面积留白 + 衬线字体 + 高级感
+
+**配色方案**:
+```yaml
+背景: "#FFFFFF"
+主色: "#1A1A1A"
+辅助: "#888888"
+强调: 黑色粗边框
+```
+
+**设计元素**:
+- 超大杂志标题
+- 极简排版
+- 粗黑边框分割
+- 斜体英文
+
+---
+
+## 三、通用设计规范
+
+### 文字层次
+
+| 层级 | 字号 | 颜色 | 用途 |
+|------|------|------|------|
+| 标题 | 80-140px | 主色/渐变 | 品牌名/活动名 |
+| 副标题 | 24-36px | 深色 | 说明文字 |
+| 正文 | 14-18px | 灰色 | 详情信息 |
+| 注释 | 10-12px | 浅灰 | 角标/日期 |
+
+### 布局黄金比例
+
+```
+画布尺寸: 1080×1080
+安全边距: 60px
+标题区: y = 250-400
+内容区: y = 450-700
+底部信息: y = 850-950
+```
+
+### 配色原则
+
+1. **60-30-10法则**: 主色60% + 辅助30% + 强调10%
+2. **对比度**: 文字与背景对比度 ≥ 4.5:1
+3. **同色系**: 渐变色控制在3色以内
+4. **避免过饱和**: 高饱和色只做点缀
+
+---
+
+## 四、海报生成流程
+
+### 标准步骤
+
+1. **清空画布**
+   ```javascript
+   clear_poster_canvas({})
+   ```
+
+2. **添加背景** (必须！)
+   ```javascript
+   add_poster_background({ type: "solid", color: "#xxxxxx" })
+   // 或
+   add_poster_background({ type: "gradient", colors: ["#xxx", "#xxx", "#xxx"] })
+   ```
+
+3. **添加装饰元素**
+   - 圆形光晕
+   - 几何色块
+   - 线条分隔
+
+4. **添加文字内容**
+   - 主标题 (渐变或艺术字)
+   - 副标题
+   - 详细信息
+   - 底部角标
+
+5. **导出**
+   ```javascript
+   export_poster_canvas({ filename: "./output/poster_xxx.png" })
+   ```
+
+### 常见问题
+
+**Q: 背景变成纯黑？**
+A: 检查 gradient 参数，确保 colors 数组正确传入
+
+**Q: 文字位置不对？**
+A: y 坐标是文字基线位置，不是顶部
+
+**Q: 颜色不显示？**
+A: 检查 fill 和 color 参数都设置了
+
+---
+
+## 五、实战模板
+
+### 模板1: 产品发布海报
+
+```javascript
+// 1. 背景 - 科技渐变
+add_poster_background({ type: "gradient", colors: ["#0A0E17", "#1A1A3E"] })
+
+// 2. 装饰 - 霓虹光晕
+add_poster_circle({ cx: 540, cy: 400, rx: 300, fill: "#00F5FF", opacity: 0.08 })
+
+// 3. 品牌名 - 渐变大字
+add_poster_art_text({ text: "PRODUCT", fontSize: 120, gradient: { colors: ["#00F5FF", "#7B2FF7"] } })
+
+// 4. 副标题
+add_poster_text({ text: "2026 NEW RELEASE", fontSize: 24, color: "#FFFFFF" })
+
+// 5. 产品名
+add_poster_text({ text: "智能助手 Pro", fontSize: 48, color: "#FFFFFF" })
+
+// 6. 特点列表
+add_poster_text({ text: "✦ AI驱动  ✦ 实时响应  ✦ 安全可靠", fontSize: 14, color: "#888888" })
+
+// 7. 底部信息
+add_poster_text({ text: "了解更多 →", fontSize: 12, color: "#00F5FF" })
+```
+
+### 模板2: 个人名片海报
+
+```javascript
+// 1. 背景
+add_poster_background({ type: "gradient", colors: ["#1A1A2E", "#16213E"] })
+
+// 2. 装饰
+add_poster_circle({ cx: 200, cy: 200, rx: 150, fill: "#E94560", opacity: 0.3 })
+
+// 3. 头像占位
+add_poster_circle({ cx: 540, cy: 350, rx: 100, fill: "#FFFFFF", opacity: 0.2 })
+
+// 4. 名字
+add_poster_text({ text: "YOUR NAME", fontSize: 60, color: "#FFFFFF" })
+
+// 5. 职位
+add_poster_text({ text: "Creative Director", fontSize: 24, color: "#E94560" })
+
+// 6. 联系信息
+add_poster_text({ text: "email@example.com", fontSize: 14, color: "#888888" })
+```
+
+---
+
+## 六、配色灵感库
+
+### 莫兰迪色系
+- 粉灰: #E8B4B8
+- 雾蓝: #A8C6D9
+- 灰绿: #B5C4B1
+- 藕荷: #C48B9F
+- 燕麦: #E8DFD0
+
+### 霓虹色系
+- 青色: #00F5FF
+- 紫色: #7B2FF7
+- 粉色: #FF2D95
+- 橙色: #FF6B35
+- 绿色: #39FF14
+
+### 中国传统色
+- 中国红: #DC143C
+- 琉璃蓝: #4184AA
+- 琥珀黄: #DAA520
+- 松石绿: #2E8B57
+- 墨色: #2C3E50
+
+### 高级灰
+- 浅灰: #F5F5F5
+- 银灰: #C0C0C0
+- 炭灰: #36454F
+- 深灰: #1A1A1A
+- 暖灰: #8B8680
+
+---
+
+## 七、快捷命令
+
+生成特定风格海报的快速指令：
+
+- "生成赛博朋克海报" → 使用 赛博朋克/暗色科技风
+- "生成简约名片" → 使用 极简几何风
+- "生成产品海报" → 使用 轻奢渐变风
+- "生成活动Banner" → 使用 波普艺术风
+- "生成中国风海报" → 使用 国潮山水风
+
+---
+
+## 八、注意事项
+
+1. **必须设置背景** - 海报无背景会导致显示异常
+2. **文字位置** - y 坐标是文字基线，不是顶部
+3. **渐变背景** - 使用 `colors` 数组参数
+4. **导出路径** - 使用相对路径 `./output/xxx.png`
+5. **透明度** - opacity 值 0-1，0.1-0.3 为佳
+
+---
+
+*本技能由 Foliko Agent 自动生成和维护*

package/.agent/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,57 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review files for compliance with Web Interface Guidelines.
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.
+
+---
+
+## Related Skills
+
+| Skill | When to Use |
+|-------|-------------|
+| **[frontend-design](../frontend-design/SKILL.md)** | Before coding - Learn design principles (color, typography, UX psychology) |
+| **web-design-guidelines** (this) | After coding - Audit for accessibility, performance, and best practices |
+
+## Design Workflow
+
+```
+1. DESIGN   → Read frontend-design principles
+2. CODE     → Implement the design
+3. AUDIT    → Run web-design-guidelines review ← YOU ARE HERE
+4. FIX      → Address findings from audit
+```

package/.agent/workflows/brainstorm.md

@@ -0,0 +1,113 @@
+---
+description: Structured brainstorming for projects and features. Explores multiple options before implementation.
+---
+
+# /brainstorm - Structured Idea Exploration
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates BRAINSTORM mode for structured idea exploration. Use when you need to explore options before committing to an implementation.
+
+---
+
+## Behavior
+
+When `/brainstorm` is triggered:
+
+1. **Understand the goal**
+   - What problem are we solving?
+   - Who is the user?
+   - What constraints exist?
+
+2. **Generate options**
+   - Provide at least 3 different approaches
+   - Each with pros and cons
+   - Consider unconventional solutions
+
+3. **Compare and recommend**
+   - Summarize tradeoffs
+   - Give a recommendation with reasoning
+
+---
+
+## Output Format
+
+```markdown
+## 🧠 Brainstorm: [Topic]
+
+### Context
+[Brief problem statement]
+
+---
+
+### Option A: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+- [benefit 2]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option B: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+- [drawback 2]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option C: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+## 💡 Recommendation
+
+**Option [X]** because [reasoning].
+
+What direction would you like to explore?
+```
+
+---
+
+## Examples
+
+```
+/brainstorm authentication system
+/brainstorm state management for complex form
+/brainstorm database schema for social app
+/brainstorm caching strategy
+```
+
+---
+
+## Key Principles
+
+- **No code** - this is about ideas, not implementation
+- **Visual when helpful** - use diagrams for architecture
+- **Honest tradeoffs** - don't hide complexity
+- **Defer to user** - present options, let them decide

package/.agent/workflows/create.md

@@ -0,0 +1,59 @@
+---
+description: Create new application command. Triggers App Builder skill and starts interactive dialogue with user.
+---
+
+# /create - Create Application
+
+$ARGUMENTS
+
+---
+
+## Task
+
+This command starts a new application creation process.
+
+### Steps:
+
+1. **Request Analysis**
+   - Understand what the user wants
+   - If information is missing, use `conversation-manager` skill to ask
+
+2. **Project Planning**
+   - Use `project-planner` agent for task breakdown
+   - Determine tech stack
+   - Plan file structure
+   - Create plan file and proceed to building
+
+3. **Application Building (After Approval)**
+   - Orchestrate with `app-builder` skill
+   - Coordinate expert agents:
+     - `database-architect` → Schema
+     - `backend-specialist` → API
+     - `frontend-specialist` → UI
+
+4. **Preview**
+   - Start with `auto_preview.py` when complete
+   - Present URL to user
+
+---
+
+## Usage Examples
+
+```
+/create blog site
+/create e-commerce app with product listing and cart
+/create todo app
+/create Instagram clone
+/create crm system with customer management
+```
+
+---
+
+## Before Starting
+
+If request is unclear, ask these questions:
+- What type of application?
+- What are the basic features?
+- Who will use it?
+
+Use defaults, add details later.

package/.agent/workflows/debug.md

@@ -0,0 +1,103 @@
+---
+description: Debugging command. Activates DEBUG mode for systematic problem investigation.
+---
+
+# /debug - Systematic Problem Investigation
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates DEBUG mode for systematic investigation of issues, errors, or unexpected behavior.
+
+---
+
+## Behavior
+
+When `/debug` is triggered:
+
+1. **Gather information**
+   - Error message
+   - Reproduction steps
+   - Expected vs actual behavior
+   - Recent changes
+
+2. **Form hypotheses**
+   - List possible causes
+   - Order by likelihood
+
+3. **Investigate systematically**
+   - Test each hypothesis
+   - Check logs, data flow
+   - Use elimination method
+
+4. **Fix and prevent**
+   - Apply fix
+   - Explain root cause
+   - Add prevention measures
+
+---
+
+## Output Format
+
+```markdown
+## 🔍 Debug: [Issue]
+
+### 1. Symptom
+[What's happening]
+
+### 2. Information Gathered
+- Error: `[error message]`
+- File: `[filepath]`
+- Line: [line number]
+
+### 3. Hypotheses
+1. ❓ [Most likely cause]
+2. ❓ [Second possibility]
+3. ❓ [Less likely cause]
+
+### 4. Investigation
+
+**Testing hypothesis 1:**
+[What I checked] → [Result]
+
+**Testing hypothesis 2:**
+[What I checked] → [Result]
+
+### 5. Root Cause
+🎯 **[Explanation of why this happened]**
+
+### 6. Fix
+```[language]
+// Before
+[broken code]
+
+// After
+[fixed code]
+```
+
+### 7. Prevention
+🛡️ [How to prevent this in the future]
+```
+
+---
+
+## Examples
+
+```
+/debug login not working
+/debug API returns 500
+/debug form doesn't submit
+/debug data not saving
+```
+
+---
+
+## Key Principles
+
+- **Ask before assuming** - get full error context
+- **Test hypotheses** - don't guess randomly
+- **Explain why** - not just what to fix
+- **Prevent recurrence** - add tests, validation