OpenClaw Skills 进阶实战指南(前端开发者的AI技能库搭建)

# 列出所有技能
openclaw skills list
# 查看当前可用的skills
openclaw skills list --eligible
# 查看技能详细信息（技能介绍、技能细节、必备库）
openclaw skills info <技能名称>
# 启用技能
openclaw skills enable <技能名称>
# 禁用技能
openclaw skills disable <技能名称>
# 检查技能状态
openclaw skills check <技能名称>

# 安装 ClawHub 服务
# 使用 npm 安装
npm i -g clawhub
# 或使用 pnpm 安装
pnpm add -g clawhub

# 搜索技能
clawhub search "react"
# 安装技能
clawhub install <skill-slug>
clawhub install <skill-slug> --version <版本号>  # 安装指定版本
clawhub install <skill-slug> --force  # 强制覆盖已存在文件夹
# 更新技能
clawhub update <skill-slug>           # 更新单个技能
clawhub update --all                  # 更新所有已安装技能
# 查看已安装技能
clawhub list
</skill-slug></skill-slug></skill-slug></skill-slug>

# 进入到工作区的Skills文件夹下
cd ~/.openclaw/workspace/skills
# 克隆技能仓库到本地
git clone https://github.com/BankrBot/openclaw-skills.git ./skills

请帮我安装这个skills，github链接是 xxxx

# 安装
clawhub install skill-vetter
# 使用
skill-vetter <skill-name></skill-name>

clawhub install skill-vetter
# 使用方法：在安装其他技能前先扫描
skill-vetter <skill-name></skill-name>

clawhub install link-checker

clawhub install gog

clawhub install self-improving-agent

clawhub install summarize

clawhub install github

clawhub install weather

# Apple Notes（6.5K下载）
clawhub install apple-notes
# Apple Reminders（5.8K下载）
clawhub install apple-reminders
# Apple Calendar（4.4K下载）
clawhub install apple-calendar
# Apple Shortcuts（5.9K下载）- 运行任何Apple快捷指令
clawhub install apple-shortcuts
# iMessage（3.5K下载）
clawhub install imessage

clawhub install tavily-web-search

clawhub install brave-search

clawhub install multi-search-engine

clawhub install ontology

clawhub install notion

clawhub install obsidian

# Himalaya（9.2K下载）- IMAP/SMTP邮件，支持任何邮件提供商
clawhub install himalaya
# Slack（8.8K下载）
clawhub install slack
# Discord（6.6K下载）
clawhub install discord
# Signal（5.7K下载）- 安全消息，本地运行
clawhub install signal

clawhub install nano-banana-pro

clawhub install openai-whisper

clawhub install youtube-watcher

clawhub install api-gateway

clawhub install mcporter

clawhub install commit-message

clawhub install free-ride

clawhub install model-usage

clawhub install oracle

clawhub install sonos-cli

clawhub install home-assistant

# 安装
clawhub install react
# 地址
https://clawhub.ai/ivangdavila/react

# 安装
clawhub install react-production
# 地址
https://clawhub.ai/1kalin/afrexai-react-production

# 安装
clawhub install react-component-generator
# 地址
https://clawhub.ai/Sunshine-del-ux/react-component-generator

# 安装
clawhub install zustand-patterns
# 地址
https://clawhub.ai/bingfoon/zustand-patterns

# 安装
npx skills add https://github.com/anthropics/skills --skill canvas-design --agent claude-code -y

# 安装
clawhub install ui-ux-pro-max
# 地址
https://clawhub.ai/xobi667/ui-ux-pro-max

# 安装
clawhub install ui-ux-design
# 地址
https://clawhub.ai/itsjustdri/ui-ux-design

# 安装
clawhub install frontend
# 地址
https://clawhub.ai/ivangdavila/frontend

# 安装
clawhub install ui-audit
# 地址
https://clawhub.ai/tommygeoco/ui-audit

# 安装
clawhub install frontend-performance
# 地址
https://clawhub.ai/wangzhiming1999/frontend-performance

# 安装
clawhub install qtada-browser-devtools-inspector
# 地址
https://clawhub.ai/QtadaGM/qtada-browser-devtools-inspector

# 安装
clawhub install ant-design-skill
# 地址
https://clawhub.ai/FelipeOFF/ant-design-skill

# 安装
clawhub install component-api-design
# 地址
https://clawhub.ai/wangzhiming1999/component-api-design

# 安装
clawhub install vercel-react-native-skills
# 地址
https://clawhub.ai/xaiohuangningde/vercel-react-native-skills

# 安装
clawhub install radon-ai
# 地址
https://clawhub.ai/latekvo/radon-ai

my-custom-skill/
├── SKILL.md          # Skill的元信息和使用说明
├── skill.json        # 配置文件
├── main.py           # 主逻辑（或其他语言实现）
└── requirements.txt  # 依赖列表

---
name: my-component-generator
description: 自定义前端组件生成器
---
# My Component Generator
用于快速生成前端组件代码。
## 使用方法
`gen component [组件名] [类型]` - 生成指定类型的组件
示例：
- `gen component Button primary` - 生成主按钮组件
- `gen component Card dark` - 生成暗色卡片组件

{
  "name": "my-component-generator",
  "version": "1.0.0",
  "description": "自定义前端组件生成器",
  "entry": "main.py",
  "dependencies": ["jinja2"]
}

import json
from jinja2 import Template
# 组件模板
BUTTON_TEMPLATE = '''
import React from 'react';
import './{{ name }}.css';
interface {{ name }}Props {
  variant?: 'primary' | 'secondary' | 'ghost';
  onClick?: () => void;
  children: React.ReactNode;
}
export const {{ name }}: React.FC<{{ name }}Props> = ({
  variant = 'primary',
  onClick,
  children
}) => {
  return (
    <button classname="{`btn" btn-${variant}`}="" onclick="{onClick}">
      {children}
    </button>
  );
};
'''
CARD_TEMPLATE = '''
import React from 'react';
import './{{ name }}.css';
interface {{ name }}Props {
  title: string;
  content?: string;
  variant?: 'light' | 'dark';
}
export const {{ name }}: React.FC<{{ name }}Props> = ({
  title,
  content,
  variant = 'light'
}) => {
  return (
    <div classname="{`card" card-${variant}`}="">
      <h3 classname="card-title">{title}</h3>
      {content && <p classname="card-content">{content}</p>}
    </div>
  );
};
'''
def handle(request):
    message = request.get("message", "").lower()
    # 解析命令: gen component Button primary
    parts = message.split()
    if len(parts) < 4 or parts[0] != "gen" or parts[1] != "component":
        return {
            "status": "error",
            "message": "请使用格式：gen component [组件名] [类型]
例如：gen component Button primary"
        }
    component_name = parts[2]
    component_type = parts[3]
    # 选择模板
    templates = {
        "button": BUTTON_TEMPLATE,
        "card": CARD_TEMPLATE,
    }
    template_key = component_type if component_type in templates else "button"
    template = Template(templates[template_key])
    code = template.render(name=component_name)
    return {
        "status": "success",
        "message": f"生成的 {component_name} 组件代码：
```{code}```"
    }
if __name__ == "__main__":
    test_request = {"message": "gen component MyButton primary"}
    print(handle(test_request))

用户输入：帮我创建一个用户列表页面
→ UI/UX Pro Max 确定页面布局和设计风格
→ React 生成列表组件代码
→ Frontend Performance 检查性能问题
→ UI Audit 最终体验审核

用户输入：调研React 19的Server Actions
→ GitHub 获取官方文档和RFC
→ multi-search-engine 搜索技术博客讨论
→ playwright-scraper-skill 抓取关键页面详情
→ Summarize 生成调研报告

# 网页检索
clawhub install multi-search-engine
clawhub install agent-reach
# 代码调试
clawhub install playwright-scraper-skill
# 内容处理
clawhub install summarize
clawhub install humanizer
# 自我学习
clawhub install self-improving-agent