デザインのスキル

Diagnose OpenClaw Control UI browser and native Android, iOS, or macOS node connection failures across route, auth, pairing, QR/setup-code, and reconnect states.

日本語の概要は準備中です。原文の説明を表示しています。

コードの構造や処理の流れ、性能比較を対話型の図で説明し、OpenClawのダッシュボードに指標や表を継続して表示するスキルです。

• コード構造やデータの流れを説明したいとき
• 実測した性能を比較したいとき
• UIの試作を操作して確認したいとき

概念や業務の流れ、ソフトウェア構成を図にまとめます。ブラウザで開けるSVG入りHTMLか、編集できるExcalidraw形式で保存するスキルです。

• 教材で概念を図解したいとき
• 業務の流れをフローチャートにしたいとき
• ソフトウェアやクラウドの構成図作成

ElevenLabs text-to-speech with mac-style say UX.

日本語の概要は準備中です。原文の説明を表示しています。

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

日本語の概要は準備中です。原文の説明を表示しています。

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

日本語の概要は準備中です。原文の説明を表示しています。

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

日本語の概要は準備中です。原文の説明を表示しています。

Patrones de diseño REST API incluyendo nomenclatura de recursos, códigos de estado, paginación, filtrado, respuestas de error, versionado y rate limiting para APIs de producción.

日本語の概要は準備中です。原文の説明を表示しています。

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

日本語の概要は準備中です。原文の説明を表示しています。

REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs. Use when designing or reviewing REST endpoints, resource names, status codes, pagination, or versioning.

日本語の概要は準備中です。原文の説明を表示しています。

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.

日本語の概要は準備中です。原文の説明を表示しています。

Prisma ORM patterns for TypeScript backends — schema design, query optimization, transactions, pagination, and critical traps like updateMany returning count not records, $transaction timeouts, migrate dev resetting the DB, @updatedAt skipped on bulk writes, and serverless connection exhaustion. Use when writing a Prisma schema or query, or debugging transactions, migrations, or serverless connection limits.

日本語の概要は準備中です。原文の説明を表示しています。

Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.

日本語の概要は準備中です。原文の説明を表示しています。

Design a goal-oriented agent loop or review one for failure modes: spinning, Goodhart-gaming the verifier, or running a wrong answer to completion. Covers machine-decidable goals, loop types, plan/build/judge skeletons, and runaway prevention; mechanism wiring lives in autonomous-loops. Use when designing, writing, or checking an agent loop. 中文触发：写 loop、设计 loop、做一个 loop、检查 loop 对不对、loop 体检、loop 会不会跑飞、可判定目标、五个崩法、plan build judge。

日本語の概要は準備中です。原文の説明を表示しています。

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.

日本語の概要は準備中です。原文の説明を表示しています。

Orchestrate bootstrapping a working MVP from a design or spec document — ingest the SDD/PRD, plan thin vertical slices, scaffold the first end-to-end slice, then drive a generator-evaluator build loop with review and gated feat commits. Use when a design or spec document must become a running MVP through planned vertical slices.

日本語の概要は準備中です。原文の説明を表示しています。

iOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. Use when building iOS 26 Liquid Glass UI in SwiftUI, UIKit, or WidgetKit.

日本語の概要は準備中です。原文の説明を表示しています。

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

日本語の概要は準備中です。原文の説明を表示しています。

GAN-inspired Generator-Evaluator agent harness for building high-quality applications autonomously. Based on Anthropic's March 2026 harness design paper. Use when a feature should be built autonomously through generator and evaluator iteration until it clears a quality bar.

日本語の概要は準備中です。原文の説明を表示しています。

Design, implement, and refactor Ports & Adapters systems with clear domain boundaries, dependency inversion, and testable use-case orchestration across TypeScript, Java, Kotlin, and Go services. Use when introducing or refactoring toward Ports and Adapters, or when domain logic has become entangled with I/O.

日本語の概要は準備中です。原文の説明を表示しています。

Django architecture patterns, REST API design with DRF, ORM best practices, caching, signals, middleware, and production-grade Django apps. Use when building or reviewing Django apps, DRF APIs, ORM queries, or caching.

日本語の概要は準備中です。原文の説明を表示しています。

Patterns for robust error handling across TypeScript, Python, and Go. Covers typed errors, error boundaries, retries, circuit breakers, and user-facing error messages. Use when designing error types, retries, circuit breakers, or user-facing failure messages in TypeScript, Python, or Go.

日本語の概要は準備中です。原文の説明を表示しています。

Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.

日本語の概要は準備中です。原文の説明を表示しています。

Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI. Use when building Compose or Jetpack Compose UI, state, navigation, or theming in a KMP project.

日本語の概要は準備中です。原文の説明を表示しています。