Back to Details

evolution

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Makepad Skills Evolution

Makepad Skills 自我演进

This skill enables makepad-skills to self-improve continuously during development.
该技能可让makepad-skills在开发过程中持续自我改进。

Quick Navigation

快速导航

TopicDescription
Collaboration GuidelinesContributing to makepad-skills
Hooks SetupAuto-trigger evolution with hooks
When to EvolveTriggers and classification
Evolution ProcessStep-by-step guide
Self-CorrectionAuto-fix skill errors
Self-ValidationVerify skill accuracy
Version AdaptationMulti-branch support
主题描述
协作指南为makepad-skills做贡献
Hooks配置通过Hooks自动触发演进
何时触发演进触发条件与分类
演进流程分步指南
自我修正自动修复技能错误
自我验证验证技能准确性
版本适配多分支支持

Hooks-Based Auto-Triggering

基于Hooks的自动触发机制

For reliable automatic triggering, use Claude Code hooks. Install with 
--with-hooks
:
bash
undefined
如需可靠的自动触发功能，请使用Claude Code hooks。通过
--with-hooks
参数安装：
bash
undefined

Install makepad-skills with hooks enabled

启用hooks安装makepad-skills

curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --with-hooks

This will install hooks to `.claude/hooks/` and configure `.claude/settings.json`:

```json
{
  "hooks": {
    "UserPromptSubmit": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/makepad-skill-router.sh"
          }
        ]
      }
    ],
    "PreToolUse": [
      {
        "matcher": "Bash|Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/pre-tool.sh"
          }
        ]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/post-bash.sh"
          }
        ]
      }
    ]
  }
}
curl -fsSL https://raw.githubusercontent.com/ZhangHanDong/makepad-skills/main/install.sh | bash -s -- --with-hooks

这会将hooks安装到`.claude/hooks/`目录并配置`.claude/settings.json`文件：

```json
{
  "hooks": {
    "UserPromptSubmit": [
      {
        "matcher": "",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/makepad-skill-router.sh"
          }
        ]
      }
    ],
    "PreToolUse": [
      {
        "matcher": "Bash|Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/pre-tool.sh"
          }
        ]
      }
    ],
    "PostToolUse": [
      {
        "matcher": "Bash",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/post-bash.sh"
          }
        ]
      }
    ]
  }
}

What Hooks Do

Hooks功能说明

HookTrigger EventAction
makepad-skill-router.sh
UserPromptSubmitAuto-route to relevant skills
pre-tool.sh
Before Bash/Write/EditDetect Makepad version from Cargo.toml
post-bash.sh
After Bash command failsDetect Makepad errors, suggest fixes
session-end.sh
Session endsPrompt to capture learnings
Hook触发事件操作
makepad-skill-router.sh
用户提交提示自动路由到相关技能
pre-tool.sh
执行Bash/Write/Edit工具前从Cargo.toml检测Makepad版本
post-bash.sh
Bash命令执行失败后检测Makepad错误并建议修复方案
session-end.sh
会话结束时提示记录学习内容

Skill Routing and Bundling

技能路由与捆绑

The 
makepad-skill-router.sh
hook automatically loads relevant skills based on user queries.
makepad-skill-router.sh
hook会根据用户查询自动加载相关技能。

Context Detection

上下文检测

ContextTrigger KeywordsSkills Loaded
Full App"build app", "从零", "完整应用"basics, dsl, layout, widgets, event-action, app-architecture
UI Design"ui design", "界面设计"dsl, layout, widgets, animation, shaders
Widget Creation"create widget", "创建组件", "自定义组件"widgets, dsl, layout, animation, shaders, font, event-action
Production"best practice", "robrix pattern", "实际项目"app-architecture, widget-patterns, state-management, event-action
上下文触发关键词加载的技能
完整应用开发"build app", "从零", "完整应用"basics, dsl, layout, widgets, event-action, app-architecture
UI设计"ui design", "界面设计"dsl, layout, widgets, animation, shaders
组件创建"create widget", "创建组件", "自定义组件"widgets, dsl, layout, animation, shaders, font, event-action
生产环境实践"best practice", "robrix pattern", "实际项目"app-architecture, widget-patterns, state-management, event-action

Skill Dependencies

技能依赖

When loading certain skills, related skills are auto-loaded:
Primary SkillAuto-loads
robius-app-architecturemakepad-basics, makepad-event-action
robius-widget-patternsmakepad-widgets, makepad-layout
makepad-widgetsmakepad-layout, makepad-dsl
makepad-animationmakepad-shaders
makepad-shadersmakepad-widgets
makepad-fontmakepad-widgets
robius-event-actionmakepad-event-action
加载特定技能时，相关技能会被自动加载：
主技能自动加载的技能
robius-app-architecturemakepad-basics, makepad-event-action
robius-widget-patternsmakepad-widgets, makepad-layout
makepad-widgetsmakepad-layout, makepad-dsl
makepad-animationmakepad-shaders
makepad-shadersmakepad-widgets
makepad-fontmakepad-widgets
robius-event-actionmakepad-event-action

Example

示例

User: "我想从零开发一个 Makepad 应用"

[makepad-skills] Detected Makepad/Robius query
[makepad-skills] App development context detected - loading skill bundle
[makepad-skills] Routing to: makepad-basics makepad-dsl makepad-event-action
                            makepad-layout makepad-widgets robius-app-architecture
用户: "我想从零开发一个 Makepad 应用"

[makepad-skills] 检测到Makepad/Robius相关查询
[makepad-skills] 检测到应用开发上下文 - 加载技能包
[makepad-skills] 路由至: makepad-basics makepad-dsl makepad-event-action
                            makepad-layout makepad-widgets robius-app-architecture

When to Evolve

何时触发演进

Trigger skill evolution when any of these occur during development:
TriggerTarget SkillPriority
New widget pattern discoveredrobius-widget-patterns/_baseHigh
Shader technique learnedmakepad-shadersHigh
Compilation error solvedmakepad-reference/troubleshootingHigh
Layout solution foundmakepad-reference/adaptive-layoutMedium
Build/packaging issue resolvedmakepad-deploymentMedium
New project structure insightmakepad-basicsLow
Core concept clarifiedmakepad-dsl/makepad-widgetsLow
开发过程中出现以下任一情况时，触发技能演进：
触发条件目标技能优先级
发现新的组件模式robius-widget-patterns/_base高
掌握新的Shader技术makepad-shaders高
解决编译错误makepad-reference/troubleshooting高
找到布局解决方案makepad-reference/adaptive-layout中
解决构建/打包问题makepad-deployment中
获得新的项目结构见解makepad-basics低
明确核心概念makepad-dsl/makepad-widgets低

Evolution Process

演进流程

Step 1: Identify Knowledge Worth Capturing

步骤1：识别值得记录的知识

Ask yourself:
  • Is this a reusable pattern? (not project-specific)
  • Did it take significant effort to figure out?
  • Would it help other Makepad developers?
  • Is it not already documented in makepad-skills?
请自问：
  • 这是可复用的模式吗？（非项目特定）
  • 是否花费了大量精力才解决？
  • 对其他Makepad开发者有帮助吗？
  • makepad-skills中尚未记录该内容？

Step 2: Classify the Knowledge

步骤2：对知识进行分类

Widget/Component Pattern     → robius-widget-patterns/_base/
Shader/Visual Effect         → makepad-shaders/
Error/Debug Solution         → makepad-reference/troubleshooting.md
Layout/Responsive Design     → makepad-reference/adaptive-layout.md
Build/Deploy Issue           → makepad-deployment/SKILL.md
Project Structure            → makepad-basics/
Core Concept/API             → makepad-dsl/ or makepad-widgets/
组件/部件模式     → robius-widget-patterns/_base/
Shader/视觉效果         → makepad-shaders/
错误/调试解决方案         → makepad-reference/troubleshooting.md
布局/响应式设计     → makepad-reference/adaptive-layout.md
构建/部署问题           → makepad-deployment/SKILL.md
项目结构            → makepad-basics/
核心概念/API             → makepad-dsl/ 或 makepad-widgets/

Step 3: Format the Contribution

步骤3：格式化贡献内容

For Patterns:
markdown
undefined
模式类内容:
markdown
undefined

Pattern N: [Pattern Name]

模式N: [模式名称]

Brief description of what this pattern solves.
该模式解决的问题简述。

live_design!

live_design!

rust
live_design! {
    // DSL code
}
rust
live_design! {
    // DSL代码
}

Rust Implementation

Rust实现

rust
// Rust code

**For Troubleshooting**:
```markdown
rust
// Rust代码

**故障排除类内容**:
```markdown

[Error Type/Message]

[错误类型/提示信息]

Symptom: What the developer sees
Cause: Why this happens
Solution:
rust
// Fixed code
undefined
症状: 开发者看到的现象
原因: 问题产生的根源
解决方案:
rust
// 修复后的代码
undefined

Step 4: Mark Evolution (NOT Version)

步骤4：标记演进（非版本标记）

Add an evolution marker above new content:
markdown
<!-- Evolution: 2024-01-15 | source: my-app | author: @zhangsan -->
在新内容上方添加演进标记：
markdown
<!-- Evolution: 2024-01-15 | source: my-app | author: @zhangsan -->

Step 5: Submit via Git

步骤5：通过Git提交

bash
undefined
bash
undefined

Create branch for your contribution

创建贡献分支

git checkout -b evolution/add-loading-pattern
git checkout -b evolution/add-loading-pattern

Commit your changes

提交更改

git add robius-widget-patterns/_base/my-pattern.md git commit -m "evolution: add loading state pattern from my-app"
git add robius-widget-patterns/_base/my-pattern.md git commit -m "evolution: add loading state pattern from my-app"

Push and create PR

推送并创建PR

git push origin evolution/add-loading-pattern

---
git push origin evolution/add-loading-pattern

---

Self-Correction

自我修正

When skill content causes errors, automatically correct it.
当技能内容导致错误时，自动修正该内容。

Trigger Conditions

触发条件

User follows skill advice → Code fails to compile/run → Claude identifies skill was wrong
                                                      ↓
                                         AUTO: Correct skill immediately
用户遵循技能建议 → 代码编译/运行失败 → Claude识别出技能内容有误
                                                      ↓
                                         自动：立即修正技能内容

Correction Flow

修正流程

  1. Detect - Skill advice led to an error
  2. Verify - Confirm the skill content is wrong
  3. Correct - Update the skill file with fix
  1. 检测 - 技能建议导致错误
  2. 验证 - 确认技能内容确实有误
  3. 修正 - 更新技能文件以修复问题

Correction Marker Format

修正标记格式

markdown
<!-- Correction: YYYY-MM-DD | was: [old advice] | reason: [why it was wrong] -->
markdown
<!-- Correction: YYYY-MM-DD | was: [旧建议] | reason: [错误原因] -->

Self-Validation

自我验证

Periodically verify skill content is still accurate.
定期验证技能内容的准确性。

Validation Checklist

验证清单

markdown
undefined
markdown
undefined

Validation Report

验证报告

Code Examples

代码示例

  • All 
    live_design!
    examples parse correctly
  • All Rust code compiles
  • All patterns work as documented
  • 所有
    live_design!
    示例可正确解析
  • 所有Rust代码可编译
  • 所有模式按文档描述正常工作

API Accuracy

API准确性

  • Widget names exist in makepad-widgets
  • Method signatures are correct
  • Event types are accurate
undefined
  • 组件名称在makepad-widgets中存在
  • 方法签名正确
  • 事件类型准确
undefined

Validation Prompt

验证提示词

"Please validate makepad-skills against current Makepad version"
"请根据当前Makepad版本验证makepad-skills的准确性"

Version Adaptation

版本适配

Provide version-specific guidance for different Makepad branches.
为不同Makepad分支提供特定版本的指导。

Supported Versions

支持的版本

BranchStatusNotes
mainStableProduction ready
devActiveLatest features, may break
rikLegacyOlder API style
分支状态说明
main稳定版可用于生产环境
dev活跃开发版包含最新功能，可能存在兼容性问题
rik遗留版旧版API风格

Version Detection

版本检测

Claude should detect Makepad version from:
  1. Cargo.toml branch reference:
    toml
    makepad-widgets = { git = "...", branch = "dev" }
  2. Cargo.lock content
  3. Ask user if unclear
Claude会通过以下方式检测Makepad版本：
  1. Cargo.toml中的分支引用:
    toml
    makepad-widgets = { git = "...", branch = "dev" }
  2. Cargo.lock文件内容
  3. 若不明确则询问用户

Personalization

个性化适配

Adapt skill suggestions to project's coding style.
根据项目的编码风格调整技能建议。

Style Detection

风格检测

Claude analyzes the current project to detect:
AspectDetection MethodAdaptation
Naming conventionScan existing widgetsMatch snake_case vs camelCase
Code organizationCheck module structureSuggest matching patterns
Comment styleRead existing commentsMatch documentation style
Widget complexityCount lines per widgetSuggest appropriate patterns
Claude会分析当前项目以检测：
维度检测方法适配方式
命名规范扫描现有组件匹配snake_case或camelCase风格
代码组织结构检查模块结构建议匹配的模式
注释风格读取现有注释匹配文档风格
组件复杂度统计每个组件的代码行数建议合适的模式

Quality Guidelines

质量指南

DO Add

建议添加的内容

  • Generic, reusable patterns
  • Common errors with clear solutions
  • Well-tested shader effects
  • Platform-specific gotchas
  • Performance optimizations
  • 通用可复用模式
  • 带有清晰解决方案的常见错误
  • 经过测试的Shader效果
  • 平台特定注意事项
  • 性能优化技巧

DON'T Add

不建议添加的内容

  • Project-specific code
  • Unverified solutions
  • Duplicate content
  • Incomplete examples
  • Personal preferences without rationale
  • 项目特定代码
  • 未经验证的解决方案
  • 重复内容
  • 不完整的示例
  • 无合理依据的个人偏好

Skill File Locations

技能文件位置

skills/
├── # === Core Skills (16) ===
├── makepad-basics/        ← Getting started, app structure
├── makepad-dsl/           ← DSL syntax, inheritance
├── makepad-layout/        ← Layout, sizing, alignment
├── makepad-widgets/       ← Widget components
├── makepad-event-action/  ← Event handling
├── makepad-animation/     ← Animation, states
├── makepad-shaders/       ← Shader basics
├── makepad-platform/      ← Platform support
├── makepad-font/          ← Font, typography
├── makepad-splash/        ← Splash scripting
├── robius-app-architecture/   ← App architecture patterns
├── robius-widget-patterns/    ← Widget reuse patterns
├── robius-event-action/       ← Custom actions
├── robius-state-management/   ← State persistence
├── robius-matrix-integration/ ← Matrix SDK
├── molykit/               ← AI chat toolkit
│
├── # === Extended Skills (3) ===
├── makepad-shaders/ ← Advanced shaders, SDF
│   ├── _base/             ← Official patterns
│   └── community/         ← Community contributions
├── makepad-deployment/    ← Build & packaging
├── makepad-reference/     ← Troubleshooting, code quality
│
├── # Note: Production patterns integrated into robius-* skills:
├── # - Widget patterns → robius-widget-patterns/_base/
├── # - State patterns → robius-state-management/_base/
├── # - Async patterns → robius-app-architecture/_base/
│
└── evolution/             ← Self-evolution system
    ├── hooks/             ← Auto-trigger hooks
    ├── references/        ← Detailed guides
    └── templates/         ← Contribution templates
skills/
├── # === 核心技能（16个） ===
├── makepad-basics/        ← 入门指南、应用结构
├── makepad-dsl/           ← DSL语法、继承机制
├── makepad-layout/        ← 布局、尺寸、对齐
├── makepad-widgets/       ← 组件部件
├── makepad-event-action/  ← 事件处理
├── makepad-animation/     ← 动画、状态
├── makepad-shaders/       ← Shader基础
├── makepad-platform/      ← 平台支持
├── makepad-font/          ← 字体、排版
├── makepad-splash/        ← 启动页脚本
├── robius-app-architecture/   ← 应用架构模式
├── robius-widget-patterns/    ← 组件复用模式
├── robius-event-action/       ← 自定义动作
├── robius-state-management/   ← 状态持久化
├── robius-matrix-integration/ ← Matrix SDK
├── molykit/               ← AI聊天工具包
│
├── # === 扩展技能（3个） ===
├── makepad-shaders/ ← 高级Shader、SDF
│   ├── _base/             ← 官方模式
│   └── community/         ← 社区贡献
├── makepad-deployment/    ← 构建与打包
├── makepad-reference/     ← 故障排除、代码质量
│
├── # 注意：生产环境模式已集成到robius-*系列技能中:
├── # - 组件模式 → robius-widget-patterns/_base/
├── # - 状态模式 → robius-state-management/_base/
├── # - 异步模式 → robius-app-architecture/_base/
│
└── evolution/             ← 自我演进系统
    ├── hooks/             ← 自动触发hooks
    ├── references/        ← 详细指南
    └── templates/         ← 贡献模板

Auto-Evolution Prompts

自动演进提示词

Use these prompts to trigger self-evolution:
使用以下提示词触发自我演进：

After Solving a Problem

解决问题后

"This solution should be added to makepad-skills for future reference."
"该解决方案应添加到makepad-skills中以供未来参考。"

After Creating a Widget

创建组件后

"This widget pattern is reusable. Let me add it to makepad-patterns."
"该组件模式可复用，我将其添加到makepad-patterns中。"

After Debugging

调试完成后

"This error and its fix should be documented in makepad-troubleshooting."
"该错误及其修复方案应记录到makepad-troubleshooting中。"

After Completing a Feature

功能完成后

"Review what I learned and update makepad-skills if applicable."
"回顾我学到的内容，若有需要则更新makepad-skills。"

Continuous Improvement Checklist

持续改进清单

After each Makepad development session, consider:
  • Did I discover a new widget composition pattern?
  • Did I solve a tricky shader problem?
  • Did I encounter and fix a confusing error?
  • Did I find a better way to structure layouts?
  • Did I learn something about packaging/deployment?
  • Would any of this help other Makepad developers?
If yes to any, evolve the appropriate skill!
每次Makepad开发会话结束后，请考虑：
  • 我是否发现了新的组件组合模式？
  • 我是否解决了一个棘手的Shader问题？
  • 我是否遇到并修复了一个容易混淆的错误？
  • 我是否找到了更好的布局结构方式？
  • 我是否学到了关于打包/部署的知识？
  • 这些内容是否对其他Makepad开发者有帮助？
如果有任何一个问题的答案是肯定的，请对相应技能进行演进！

References

参考资料