What makes UI UX Design Pro notable?

1.4K downloads. Trust evidence available

How should UI UX Design Pro be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

UI UX Design Pro

Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Skill: UI UX Design Pro Owner: saifyxpro Summary: Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, S... Tags: latest:0.1.0 Version history: v0.1.0 | 2026-02-21T22:08:56.058Z | auto Initial release of ui-ux-design-pro, a senior-level UI/UX design expert skill. - Focuses on building data-driven, premium production

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.4k

Updated

Oct 10, 2026

Version

0.1.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.4K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.4K downloadsadoption · observed Oct 10, 2026
Latest release: 0.1.0release · observed Feb 21, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s171r436at6ttshzr0wb1dxxds884eds:ui-ux-design-pro

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-saifyxpro-ui-ux-design-pro/snapshot"

Documentation

CLAWHUB

88,740 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: ui-ux-design-pro
description: >
Senior-level UI/UX design expert for building data-driven, premium production interfaces.
Use when you need to:
1. Design complex applications (dashboards, SaaS, AI tools) from scratch
2. Generate comprehensive design systems (tokens, palettes, typography)
3. Audit existing UI for quality, accessibility, and "craft"
4. Search for proven real-world design patterns and implementation details
Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"
---

# UI/UX Design Pro

## Recommended Models
For best results, use **GPT-5.3 Codex** or **Gemini 3.0 Pro**.

## Default Settings
- **Theme**: Always prefer **Light Mode** by default. Only use Dark Mode if explicitly requested by the user.

Build every interface with senior-level craft, intent, and consistency. Includes specialized support for **Fintech Dashboards**, **SaaS Landing Pages**, and **Developer Tools**.

## Scope

**Use for:** Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.

---

## MANDATORY: Read References Before Designing

**You MUST read all reference files in `references/` before proposing or building any UI.** These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.

**Required reading order:**

1. `references/design-directions.md` — direction selection and example systems
2. `references/token-architecture.md` — token naming and layering
3. `references/color-system.md` — oklch palettes, contrast, dark mode
4. `references/typography.md` — font pairings, scales, hierarchy
5. `references/spacing-and-layout.md` — grid systems, spacing scales
6. `references/depth-and-elevation.md` — shadow and border strategies
7. `references/component-patterns.md` — states, interaction patterns
8. `references/animation-and-motion.md` — timing, easing, GPU performance
9. `references/real-world-patterns.md` — 10 shipped production patterns
10. `references/accessibility.md` — WCAG 2.2, contrast, keyboard nav
11. `references/cognitive-principles.md` — Hick's, Fitts's, Gestalt
12. `references/critique-protocol.md` — self-evaluation before showing work

**Do not skip this step.** Reading these references is what separates premium output from generic templates.

## The Problem

You will generate generic output. Your training has seen thousands of dashboards. The patterns are strong.

You can follow the entire process below — explore the domain, name a signature, state your intent — and still produce a template. Warm colors on cold structures. Friendly fonts on generic layouts.

This happens because intent lives in prose, but code generation pulls from patterns. The gap between them is where defaults win.

---

## Where Defaults Hide

Defaults disguise themselves as infrastructure — parts that feel like they jus

cli/README.md

# Design Pro CLI

The "Masterpiece" UI/UX design CLI. Built with **Bun**, **Orama**, and **TypeScript**.

## Features

- **Search**: Fuzzy search across 1,800+ design data points (styles, colors, reasoning).
- **Icons**: Browse and find the best icon libraries.
- **Audit**: Scan your UI code for accessibility and quality issues.
- **Generate**: Create full design systems (tokens, palettes, typography) from a text query.

## Setup

1.  **Install Bun**: [https://bun.sh/](https://bun.sh/)
2.  **Install Dependencies**:
    ```bash
    bun install
    ```

## Usage

You can run the CLI directly with `bun run`:

```bash
# Search
bun run index.ts search "glassmorphism"

# Icons
bun run index.ts icons "arrow"

# Audit
bun run index.ts audit ../src/App.tsx

# Generate Design System
bun run index.ts generate "fintech dashboard" --stack nextjs --output system.json
```

## Commands

- `search <query>`: Search the design knowledge base.
- `icons <query>`: Find icons.
- `audit <files>`: Audit UI files.
- `generate <query>`: Generate a design system.

_meta.json

{
  "ownerId": "kn756kgtpezj5tjdb68pk1f2b181kv6q",
  "slug": "ui-ux-design-pro",
  "version": "0.1.0",
  "publishedAt": 1771711736058
}

references/accessibility.md

# Accessibility

## WCAG 2.2 Level AA Requirements

### Contrast

| Content                                | Minimum Ratio (WCAG 2.x) | APCA (Lc)                    |
| -------------------------------------- | ------------------------ | ---------------------------- |
| Body text (< 18px)                     | 4.5:1                    | Lc 60+                       |
| Large text (18px+ bold, 24px+ regular) | 3:1                      | Lc 45+                       |
| UI components & graphics               | 3:1                      | Lc 30+                       |
| Decorative / disabled                  | No requirement           | —                            |
| Placeholder text                       | —                        | Lc 25+ (readable but subtle) |

### APCA Usage

APCA is recommended by WCAG 3.0 draft.

```text
Lc 90+: Body text, running copy
Lc 75:  Comfortable body text
Lc 60:  Small text, labels
Lc 45:  Large headings, icons
Lc 30:  Non-text UI boundaries
Lc 15:  Invisible to most — decorative only
```

## Keyboard Navigation

### Core Requirements

- Every interactive element reachable via Tab
- Tab order matches visual order (never use `tabindex > 0`)
- Enter / Space activates buttons and links
- Arrow keys navigate within compound widgets (tabs, menus, radio groups)
- Escape closes modals, dropdowns, tooltips
- Home / End jump to first/last items in lists

### Focus Management

```css
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}
```

Rules:

- Move focus to dialog/modal when opened
- Return focus to trigger element when closed
- Trap focus within modals (no tabbing outside)
- Skip link as first focusable element

### Focus Trap Pattern

```javascript
function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.addEventListener("keydown", (e) => {
    if (e.key !== "Tab") return;
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  });
}
```

## ARIA Patterns

### Dialog

```html
<dialog role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm deletion</h2>
  <p>This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>
```

### Tabs

```html
<div role="tablist" aria-label="Settings">
  <button role="tab" aria-selected="true" aria-controls="panel-general">
    General
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-security">
    Security
  </button>
</div>
<div role="tabpanel" id="panel-general" aria-labelledby="tab-gene

references/animation-and-motion.md

# Animation and Motion

## Duration Scale

| Interaction      | Duration    | Use When                       |
| ---------------- | ----------- | ------------------------------ |
| Hover effects    | 100-150ms   | Color, opacity, border changes |
| Button press     | 100ms       | Scale, background              |
| Dropdown open    | 150-200ms   | Appearing from trigger         |
| Tooltip show     | 150ms       | Delay 400ms before showing     |
| Modal open       | 200-250ms   | Scale + opacity animation      |
| Modal close      | 150-200ms   | Faster than open               |
| Page transition  | 300-500ms   | Cross-fade, slide              |
| Toast enter      | 200ms       | Slide in from edge             |
| Toast exit       | 150ms       | Fade out                       |
| Sidebar open     | 250-300ms   | Width + content reveal         |
| Accordion expand | 200-250ms   | Height animation               |
| Loading spinner  | 1000-1500ms | Full rotation                  |

Fast enough to feel instant. Slow enough to perceive movement. Never > 500ms for UI responses.

## Easing Functions

```css
/* Standard (enter + exit) — most interactions */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

/* Deceleration (entering the screen) */
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

/* Acceleration (leaving the screen) */
--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

/* Emphasis (attention-grabbing, bouncy) */
--ease-emphasis: cubic-bezier(0.2, 0, 0, 1);

/* Spring-like (smooth overshoot) */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
```

### When to Use Which

- **Entering view** (dropdowns, modals, toasts) → decelerate
- **Leaving view** (closing, dismissing) → accelerate
- **State changes** (hover, toggle, tab switch) → standard
- **Micro-interactions** (button press, checkmark) → emphasis or spring

## Transition Patterns

### Hover

```css
.interactive {
  transition:
    background-color 150ms var(--ease-standard),
    color 150ms var(--ease-standard),
    border-color 150ms var(--ease-standard);
}
```

### Modal Enter/Exit

```css
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.modal {
  animation: modal-enter 250ms var(--ease-decelerate);
}
.modal.closing {
  animation: modal-exit 150ms var(--ease-accelerate);
}
```

### Dropdown

```css
@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown {
  animation: dropdown-enter 150ms var(--ease-decelerate);
}
```

### Toast Notification

```css
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast {
  animation: toast-enter 200ms v

Github ReposUpdated 21h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.