Tencent SkillHub · AI

UI Audit

AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: CLAUDE.md, README.md, SKILL.md, package.json, references/00-core-framework.md, references/01-anchors.md

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

Download the package from Yavira.
Extract it into a folder your agent can access.
Paste one of the prompts below and point your agent at the extracted folder.

New install

I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.

Upgrade existing

I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.1

Provenance

Publisher: tommygeoco
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 18 sections Open source page

UI Audit Skill

Evaluate interfaces against proven UX principles. Based on Making UX Decisions by Tommy Geoco.

When to Use This Skill

Making UI/UX design decisions under time pressure Evaluating design trade-offs with business context Choosing appropriate UI patterns for specific problems Reviewing designs for completeness and quality Structuring design thinking for new interfaces

Core Philosophy

Speed ≠ Recklessness. Designing quickly is not automatically reckless. Recklessly designing quickly is reckless. The difference is intentionality.

The 3 Pillars of Warp-Speed Decisioning

Scaffolding — Rules you use to automate recurring decisions Decisioning — Process you use for making new decisions Crafting — Checklists you use for executing decisions

Foundational Frameworks

references/00-core-framework.md — 3 pillars, decisioning workflow, macro bets references/01-anchors.md — 7 foundational mindsets for design resilience references/02-information-scaffold.md — Psychology, economics, accessibility, defaults

Checklists (Execution)

references/10-checklist-new-interfaces.md — 6-step process for designing new interfaces references/11-checklist-fidelity.md — Component states, interactions, scalability, feedback references/12-checklist-visual-style.md — Spacing, color, elevation, typography, motion references/13-checklist-innovation.md — 5 levels of originality spectrum

Patterns (Reusable Solutions)

references/20-patterns-chunking.md — Cards, tabs, accordions, pagination, carousels references/21-patterns-progressive-disclosure.md — Tooltips, popovers, drawers, modals references/22-patterns-cognitive-load.md — Steppers, wizards, minimalist nav, simplified forms references/23-patterns-visual-hierarchy.md — Typography, color, whitespace, size, proximity references/24-patterns-social-proof.md — Testimonials, UGC, badges, social integration references/25-patterns-feedback.md — Progress bars, notifications, validation, contextual help references/26-patterns-error-handling.md — Form validation, undo/redo, dialogs, autosave references/27-patterns-accessibility.md — Keyboard nav, ARIA, alt text, contrast, zoom references/28-patterns-personalization.md — Dashboards, adaptive content, preferences, l10n references/29-patterns-onboarding.md — Tours, contextual tips, tutorials, checklists references/30-patterns-information.md — Breadcrumbs, sitemaps, tagging, faceted search references/31-patterns-navigation.md — Priority nav, off-canvas, sticky, bottom nav

For Design Decisions

Read 00-core-framework.md for the decisioning workflow Identify if this is a recurring decision (use scaffold) or new decision (use process) Apply the 3-step weighing: institutional knowledge → user familiarity → research

For New Interfaces

Follow the 6-step checklist in 10-checklist-new-interfaces.md Reference relevant pattern files for specific UI components Use fidelity and visual style checklists to enhance quality

For Pattern Selection

Identify the core problem (chunking, disclosure, cognitive load, etc.) Load the relevant pattern reference Evaluate benefits, use cases, psychological principles, and implementation guidelines

Decision Workflow Summary

When facing a UI decision: 1. WEIGH INFORMATION ├─ What does institutional knowledge say? (existing patterns, brand, tech constraints) ├─ What are users familiar with? (conventions, competitor patterns) └─ What does research say? (user testing, analytics, studies) 2. NARROW OPTIONS ├─ Eliminate what conflicts with constraints ├─ Prioritize what aligns with macro bets └─ Choose based on JTBD support 3. EXECUTE └─ Apply relevant checklist + patterns

Macro Bet Categories

Companies win through one or more of: BetDescriptionDesign ImplicationVelocityFeatures to market fasterReuse patterns, find metaphors in other marketsEfficiencyManage waste betterDesign systems, reduce WIPAccuracyBe right more oftenStronger research, instrumentationInnovationDiscover untapped potentialNovel patterns, cross-domain inspiration Always align micro design bets with company macro bets.

Key Principle: Good Design Decisions Are Relative

A design decision is "good" when it: Supports the product's jobs-to-be-done Aligns with company macro bets Respects constraints (time, tech, team) Balances user familiarity with differentiation needs There is no universally correct UI solution—only contextually appropriate ones.

Generating Audit Reports

When asked to audit a design, generate a comprehensive report. Always include these sections:

Required Sections (always include)

Visual Hierarchy — Headings, CTAs, grouping, reading flow, type scale, color hierarchy, whitespace Visual Style — Spacing consistency, color usage, elevation/depth, typography, motion/animation Accessibility — Keyboard navigation, focus states, contrast ratios, screen reader support, touch targets

Contextual Sections (include when relevant)

Navigation — For multi-page apps: wayfinding, breadcrumbs, menu structure, information architecture Usability — For interactive flows: discoverability, feedback, error handling, cognitive load Onboarding — For new user experiences: first-run, tutorials, progressive disclosure Social Proof — For landing/marketing pages: testimonials, trust signals, social integration Forms — For data entry: labels, validation, error messages, field types

Audit Output Format

{ "title": "Design Name — Screen/Flow", "project": "Project Name", "date": "YYYY-MM-DD", "figma_url": "optional", "screenshot_url": "optional - URL to screenshot", "macro_bets": [ { "category": "velocity|efficiency|accuracy|innovation", "description": "...", "alignment": "strong|moderate|weak" } ], "jtbd": [ { "user": "User Type", "situation": "context without 'When'", "motivation": "goal without 'I want to'", "outcome": "benefit without 'so I can'" } ], "visual_hierarchy": { "title": "Visual Hierarchy", "checks": [ { "label": "Check name", "status": "pass|warn|fail|na", "notes": "Details" } ] }, "visual_style": { ... }, "accessibility": { ... }, "priority_fixes": [ { "rank": 1, "title": "Fix title", "description": "What and why", "framework_reference": "XX-filename.md → Section Name" } ], "notes": "Optional overall observations" }

Checks Per Section (aim for 6-10 each)

Visual Hierarchy: heading distinction, primary action clarity, grouping/proximity, reading flow, type scale, color hierarchy, whitespace usage, visual weight balance Visual Style: spacing consistency, color palette adherence, elevation/shadows, typography system, border/radius consistency, icon style, motion principles Accessibility: keyboard operability, visible focus, color contrast (4.5:1), touch targets (44px), alt text, semantic markup, reduced motion support Navigation: clear current location, predictable menu behavior, breadcrumb presence, search accessibility, mobile navigation pattern Usability: feature discoverability, feedback on actions, error prevention, recovery options, cognitive load management, loading states

Category context

Agent frameworks, memory systems, reasoning layers, and model-native orchestration.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

5 Docs1 Config

SKILL.md Primary doc
CLAUDE.md Docs
README.md Docs
references/00-core-framework.md Docs
references/01-anchors.md Docs
package.json Config