OpenClaw AI 技能

React 前端框架开发工具，支持组件创建和应用构建。

一套可扩展的 React 组合模式，适用于解决组件布尔属性泛滥问题、构建灵活的组件库、设计可重用 API。触发场景包括复合组件、渲染 props、上下文提供者或组件架构设计。包含 React 19 API 更新。

使用Next.js 15构建应用，集成App Router、服务器端组件、缓存、身份验证和生产环境模式，打造高性能的React应用。

Canvas-OS 允许您在 OpenClaw Canvas 上构建、存储和运行丰富的视觉应用。支持本地 HTML/CSS/JS 应用，提供直接注入和 localhost 服务两种加载方法，确保安全的沙盒环境。

分析前端性能问题（LCP、FCP、CLS、包大小），提供优先级化、实用的加载和运行时效率优化建议。

使用 React、Tailwind CSS 和 shadcn/ui 创建独特的生产级静态网站，无需模拟。从简单文本生成大胆、易记的设计。

来自 ui.inference.sh 的 React/Next.js 聊天界面构建块，包括容器、消息、输入框、打字指示器和头像等组件，提供完整的聊天界面功能。

为 React 应用提供实时数据支持，集成 SSE、WebSocket 和 SWR。涵盖连接管理、重连逻辑和乐观更新，适用于构建实时功能的 React 应用。

无痛构建 Telegram 小程序，解决安全区域、全屏模式、后退按钮处理、内联模式分享、固定定位问题以及 React 常见陷阱。适用于构建、调试 Telegram 小程序，或解决 WebApp API、安全区域、分享等问题。

Tailwind CSS 框架的参考工具，适用于前端开发中使用 Tailwind 时的快速查询和参考。

升级 React 应用：将类组件迁移到 Hooks，采用 React 18/19 并发特性，运行 codemods，并添加 TypeScript 类型。

使用 Vercel AI SDK v6 构建 React 聊天界面，涵盖 useChat、useCompletion 和 useObject Hooks，消息结构、工具审批工作流以及 18 个 UI 错误解决方案。防止 React 严格模式、并发请求、过时闭包和工具审批边缘案例的已知问题。适用于构建

一个基于 Gradio 的 Ollama 聊天界面，支持多会话管理。用于与 pywayne.llm.chat_ollama_gradio 模块一起创建基于 Web 的聊天应用，方便交互式对话管理。

基于 DESIGN.md 自动美化网站 UI，支持 16 种设计风格，提供样式差异报告和 CSS 变量覆盖方案。

用于构建 Next.js 14/15 应用，特别是与 App Router 相关的路由、布局、服务端组件、客户端组件、服务端操作、路由处理器、身份验证、中间件、数据获取、缓存、重新验证、流式传输、Suspense、加载状态、错误边界、动态路由、并行路由、拦截路由以及任何 Next.js 架构问题。

Aoleme UI 能够生成独特的黑暗霓虹赛博仙侠风格的仪表盘、具有玻璃般透明效果的界面，以及将游戏元素融入的 React 和 Tailwind CSS UI 组件。该工具适合开发者快速创建具有未来感和互动性的网页界面。

用于构建基于 Shadcn/UI 组件、Tailwind CSS 布局、react-hook-form 和 Zod 表单模式、主题化、暗模式、侧边栏布局、移动端支持等 UI 项目

通过 gui.new API 创建可分享的 HTML 画布，适用于生成可视化输出、分享预览、转换代码输出为可分享链接以及创建可分享的 Mermaid 图表。

从Figma文件提取设计信息，包括设计令牌、组件结构、颜色、字体、间距等，并支持导出资源。当用户询问Figma设计相关问题、需要提取设计令牌或想将Figma设计转换为代码时使用。

构建使用 Vue 3 的服务器端渲染（SSR）和静态站点生成（SSG）应用，提供适当的数据获取、hydration 和服务器模式。