{
  "schemaVersion": "1.0",
  "item": {
    "slug": "ui-audit",
    "name": "UI Audit",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/tommygeoco/ui-audit",
    "canonicalUrl": "https://clawhub.ai/tommygeoco/ui-audit",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/ui-audit",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=ui-audit",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "CLAUDE.md",
      "README.md",
      "SKILL.md",
      "package.json",
      "references/00-core-framework.md",
      "references/01-anchors.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/ui-audit"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/ui-audit",
    "agentPageUrl": "https://openagent3.xyz/skills/ui-audit/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-audit/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-audit/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "UI Audit Skill",
        "body": "Evaluate interfaces against proven UX principles. Based on Making UX Decisions by Tommy Geoco."
      },
      {
        "title": "When to Use This Skill",
        "body": "Making UI/UX design decisions under time pressure\nEvaluating design trade-offs with business context\nChoosing appropriate UI patterns for specific problems\nReviewing designs for completeness and quality\nStructuring design thinking for new interfaces"
      },
      {
        "title": "Core Philosophy",
        "body": "Speed ≠ Recklessness. Designing quickly is not automatically reckless. Recklessly designing quickly is reckless. The difference is intentionality."
      },
      {
        "title": "The 3 Pillars of Warp-Speed Decisioning",
        "body": "Scaffolding — Rules you use to automate recurring decisions\nDecisioning — Process you use for making new decisions\nCrafting — Checklists you use for executing decisions"
      },
      {
        "title": "Foundational Frameworks",
        "body": "references/00-core-framework.md — 3 pillars, decisioning workflow, macro bets\nreferences/01-anchors.md — 7 foundational mindsets for design resilience\nreferences/02-information-scaffold.md — Psychology, economics, accessibility, defaults"
      },
      {
        "title": "Checklists (Execution)",
        "body": "references/10-checklist-new-interfaces.md — 6-step process for designing new interfaces\nreferences/11-checklist-fidelity.md — Component states, interactions, scalability, feedback\nreferences/12-checklist-visual-style.md — Spacing, color, elevation, typography, motion\nreferences/13-checklist-innovation.md — 5 levels of originality spectrum"
      },
      {
        "title": "Patterns (Reusable Solutions)",
        "body": "references/20-patterns-chunking.md — Cards, tabs, accordions, pagination, carousels\nreferences/21-patterns-progressive-disclosure.md — Tooltips, popovers, drawers, modals\nreferences/22-patterns-cognitive-load.md — Steppers, wizards, minimalist nav, simplified forms\nreferences/23-patterns-visual-hierarchy.md — Typography, color, whitespace, size, proximity\nreferences/24-patterns-social-proof.md — Testimonials, UGC, badges, social integration\nreferences/25-patterns-feedback.md — Progress bars, notifications, validation, contextual help\nreferences/26-patterns-error-handling.md — Form validation, undo/redo, dialogs, autosave\nreferences/27-patterns-accessibility.md — Keyboard nav, ARIA, alt text, contrast, zoom\nreferences/28-patterns-personalization.md — Dashboards, adaptive content, preferences, l10n\nreferences/29-patterns-onboarding.md — Tours, contextual tips, tutorials, checklists\nreferences/30-patterns-information.md — Breadcrumbs, sitemaps, tagging, faceted search\nreferences/31-patterns-navigation.md — Priority nav, off-canvas, sticky, bottom nav"
      },
      {
        "title": "For Design Decisions",
        "body": "Read 00-core-framework.md for the decisioning workflow\nIdentify if this is a recurring decision (use scaffold) or new decision (use process)\nApply the 3-step weighing: institutional knowledge → user familiarity → research"
      },
      {
        "title": "For New Interfaces",
        "body": "Follow the 6-step checklist in 10-checklist-new-interfaces.md\nReference relevant pattern files for specific UI components\nUse fidelity and visual style checklists to enhance quality"
      },
      {
        "title": "For Pattern Selection",
        "body": "Identify the core problem (chunking, disclosure, cognitive load, etc.)\nLoad the relevant pattern reference\nEvaluate benefits, use cases, psychological principles, and implementation guidelines"
      },
      {
        "title": "Decision Workflow Summary",
        "body": "When facing a UI decision:\n\n1. WEIGH INFORMATION\n   ├─ What does institutional knowledge say? (existing patterns, brand, tech constraints)\n   ├─ What are users familiar with? (conventions, competitor patterns)\n   └─ What does research say? (user testing, analytics, studies)\n\n2. NARROW OPTIONS\n   ├─ Eliminate what conflicts with constraints\n   ├─ Prioritize what aligns with macro bets\n   └─ Choose based on JTBD support\n\n3. EXECUTE\n   └─ Apply relevant checklist + patterns"
      },
      {
        "title": "Macro Bet Categories",
        "body": "Companies win through one or more of:\n\nBetDescriptionDesign 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\n\nAlways align micro design bets with company macro bets."
      },
      {
        "title": "Key Principle: Good Design Decisions Are Relative",
        "body": "A design decision is \"good\" when it:\n\nSupports the product's jobs-to-be-done\nAligns with company macro bets\nRespects constraints (time, tech, team)\nBalances user familiarity with differentiation needs\n\nThere is no universally correct UI solution—only contextually appropriate ones."
      },
      {
        "title": "Generating Audit Reports",
        "body": "When asked to audit a design, generate a comprehensive report. Always include these sections:"
      },
      {
        "title": "Required Sections (always include)",
        "body": "Visual Hierarchy — Headings, CTAs, grouping, reading flow, type scale, color hierarchy, whitespace\nVisual Style — Spacing consistency, color usage, elevation/depth, typography, motion/animation\nAccessibility — Keyboard navigation, focus states, contrast ratios, screen reader support, touch targets"
      },
      {
        "title": "Contextual Sections (include when relevant)",
        "body": "Navigation — For multi-page apps: wayfinding, breadcrumbs, menu structure, information architecture\nUsability — For interactive flows: discoverability, feedback, error handling, cognitive load\nOnboarding — For new user experiences: first-run, tutorials, progressive disclosure\nSocial Proof — For landing/marketing pages: testimonials, trust signals, social integration\nForms — For data entry: labels, validation, error messages, field types"
      },
      {
        "title": "Audit Output Format",
        "body": "{\n  \"title\": \"Design Name — Screen/Flow\",\n  \"project\": \"Project Name\",\n  \"date\": \"YYYY-MM-DD\",\n  \"figma_url\": \"optional\",\n  \"screenshot_url\": \"optional - URL to screenshot\",\n  \n  \"macro_bets\": [\n    { \"category\": \"velocity|efficiency|accuracy|innovation\", \"description\": \"...\", \"alignment\": \"strong|moderate|weak\" }\n  ],\n  \n  \"jtbd\": [\n    { \"user\": \"User Type\", \"situation\": \"context without 'When'\", \"motivation\": \"goal without 'I want to'\", \"outcome\": \"benefit without 'so I can'\" }\n  ],\n  \n  \"visual_hierarchy\": {\n    \"title\": \"Visual Hierarchy\",\n    \"checks\": [\n      { \"label\": \"Check name\", \"status\": \"pass|warn|fail|na\", \"notes\": \"Details\" }\n    ]\n  },\n  \"visual_style\": { ... },\n  \"accessibility\": { ... },\n  \n  \"priority_fixes\": [\n    { \"rank\": 1, \"title\": \"Fix title\", \"description\": \"What and why\", \"framework_reference\": \"XX-filename.md → Section Name\" }\n  ],\n  \n  \"notes\": \"Optional overall observations\"\n}"
      },
      {
        "title": "Checks Per Section (aim for 6-10 each)",
        "body": "Visual Hierarchy: heading distinction, primary action clarity, grouping/proximity, reading flow, type scale, color hierarchy, whitespace usage, visual weight balance\n\nVisual Style: spacing consistency, color palette adherence, elevation/shadows, typography system, border/radius consistency, icon style, motion principles\n\nAccessibility: keyboard operability, visible focus, color contrast (4.5:1), touch targets (44px), alt text, semantic markup, reduced motion support\n\nNavigation: clear current location, predictable menu behavior, breadcrumb presence, search accessibility, mobile navigation pattern\n\nUsability: feature discoverability, feedback on actions, error prevention, recovery options, cognitive load management, loading states"
      }
    ],
    "body": "UI Audit Skill\n\nEvaluate interfaces against proven UX principles. Based on Making UX Decisions by Tommy Geoco.\n\nWhen to Use This Skill\nMaking UI/UX design decisions under time pressure\nEvaluating design trade-offs with business context\nChoosing appropriate UI patterns for specific problems\nReviewing designs for completeness and quality\nStructuring design thinking for new interfaces\nCore Philosophy\n\nSpeed ≠ Recklessness. Designing quickly is not automatically reckless. Recklessly designing quickly is reckless. The difference is intentionality.\n\nThe 3 Pillars of Warp-Speed Decisioning\nScaffolding — Rules you use to automate recurring decisions\nDecisioning — Process you use for making new decisions\nCrafting — Checklists you use for executing decisions\nQuick Reference Structure\nFoundational Frameworks\nreferences/00-core-framework.md — 3 pillars, decisioning workflow, macro bets\nreferences/01-anchors.md — 7 foundational mindsets for design resilience\nreferences/02-information-scaffold.md — Psychology, economics, accessibility, defaults\nChecklists (Execution)\nreferences/10-checklist-new-interfaces.md — 6-step process for designing new interfaces\nreferences/11-checklist-fidelity.md — Component states, interactions, scalability, feedback\nreferences/12-checklist-visual-style.md — Spacing, color, elevation, typography, motion\nreferences/13-checklist-innovation.md — 5 levels of originality spectrum\nPatterns (Reusable Solutions)\nreferences/20-patterns-chunking.md — Cards, tabs, accordions, pagination, carousels\nreferences/21-patterns-progressive-disclosure.md — Tooltips, popovers, drawers, modals\nreferences/22-patterns-cognitive-load.md — Steppers, wizards, minimalist nav, simplified forms\nreferences/23-patterns-visual-hierarchy.md — Typography, color, whitespace, size, proximity\nreferences/24-patterns-social-proof.md — Testimonials, UGC, badges, social integration\nreferences/25-patterns-feedback.md — Progress bars, notifications, validation, contextual help\nreferences/26-patterns-error-handling.md — Form validation, undo/redo, dialogs, autosave\nreferences/27-patterns-accessibility.md — Keyboard nav, ARIA, alt text, contrast, zoom\nreferences/28-patterns-personalization.md — Dashboards, adaptive content, preferences, l10n\nreferences/29-patterns-onboarding.md — Tours, contextual tips, tutorials, checklists\nreferences/30-patterns-information.md — Breadcrumbs, sitemaps, tagging, faceted search\nreferences/31-patterns-navigation.md — Priority nav, off-canvas, sticky, bottom nav\nUsage Instructions\nFor Design Decisions\nRead 00-core-framework.md for the decisioning workflow\nIdentify if this is a recurring decision (use scaffold) or new decision (use process)\nApply the 3-step weighing: institutional knowledge → user familiarity → research\nFor New Interfaces\nFollow the 6-step checklist in 10-checklist-new-interfaces.md\nReference relevant pattern files for specific UI components\nUse fidelity and visual style checklists to enhance quality\nFor Pattern Selection\nIdentify the core problem (chunking, disclosure, cognitive load, etc.)\nLoad the relevant pattern reference\nEvaluate benefits, use cases, psychological principles, and implementation guidelines\nDecision Workflow Summary\n\nWhen facing a UI decision:\n\n1. WEIGH INFORMATION\n   ├─ What does institutional knowledge say? (existing patterns, brand, tech constraints)\n   ├─ What are users familiar with? (conventions, competitor patterns)\n   └─ What does research say? (user testing, analytics, studies)\n\n2. NARROW OPTIONS\n   ├─ Eliminate what conflicts with constraints\n   ├─ Prioritize what aligns with macro bets\n   └─ Choose based on JTBD support\n\n3. EXECUTE\n   └─ Apply relevant checklist + patterns\n\nMacro Bet Categories\n\nCompanies win through one or more of:\n\nBet\tDescription\tDesign Implication\nVelocity\tFeatures to market faster\tReuse patterns, find metaphors in other markets\nEfficiency\tManage waste better\tDesign systems, reduce WIP\nAccuracy\tBe right more often\tStronger research, instrumentation\nInnovation\tDiscover untapped potential\tNovel patterns, cross-domain inspiration\n\nAlways align micro design bets with company macro bets.\n\nKey Principle: Good Design Decisions Are Relative\n\nA design decision is \"good\" when it:\n\nSupports the product's jobs-to-be-done\nAligns with company macro bets\nRespects constraints (time, tech, team)\nBalances user familiarity with differentiation needs\n\nThere is no universally correct UI solution—only contextually appropriate ones.\n\nGenerating Audit Reports\n\nWhen asked to audit a design, generate a comprehensive report. Always include these sections:\n\nRequired Sections (always include)\nVisual Hierarchy — Headings, CTAs, grouping, reading flow, type scale, color hierarchy, whitespace\nVisual Style — Spacing consistency, color usage, elevation/depth, typography, motion/animation\nAccessibility — Keyboard navigation, focus states, contrast ratios, screen reader support, touch targets\nContextual Sections (include when relevant)\nNavigation — For multi-page apps: wayfinding, breadcrumbs, menu structure, information architecture\nUsability — For interactive flows: discoverability, feedback, error handling, cognitive load\nOnboarding — For new user experiences: first-run, tutorials, progressive disclosure\nSocial Proof — For landing/marketing pages: testimonials, trust signals, social integration\nForms — For data entry: labels, validation, error messages, field types\nAudit Output Format\n{\n  \"title\": \"Design Name — Screen/Flow\",\n  \"project\": \"Project Name\",\n  \"date\": \"YYYY-MM-DD\",\n  \"figma_url\": \"optional\",\n  \"screenshot_url\": \"optional - URL to screenshot\",\n  \n  \"macro_bets\": [\n    { \"category\": \"velocity|efficiency|accuracy|innovation\", \"description\": \"...\", \"alignment\": \"strong|moderate|weak\" }\n  ],\n  \n  \"jtbd\": [\n    { \"user\": \"User Type\", \"situation\": \"context without 'When'\", \"motivation\": \"goal without 'I want to'\", \"outcome\": \"benefit without 'so I can'\" }\n  ],\n  \n  \"visual_hierarchy\": {\n    \"title\": \"Visual Hierarchy\",\n    \"checks\": [\n      { \"label\": \"Check name\", \"status\": \"pass|warn|fail|na\", \"notes\": \"Details\" }\n    ]\n  },\n  \"visual_style\": { ... },\n  \"accessibility\": { ... },\n  \n  \"priority_fixes\": [\n    { \"rank\": 1, \"title\": \"Fix title\", \"description\": \"What and why\", \"framework_reference\": \"XX-filename.md → Section Name\" }\n  ],\n  \n  \"notes\": \"Optional overall observations\"\n}\n\nChecks Per Section (aim for 6-10 each)\n\nVisual Hierarchy: heading distinction, primary action clarity, grouping/proximity, reading flow, type scale, color hierarchy, whitespace usage, visual weight balance\n\nVisual Style: spacing consistency, color palette adherence, elevation/shadows, typography system, border/radius consistency, icon style, motion principles\n\nAccessibility: keyboard operability, visible focus, color contrast (4.5:1), touch targets (44px), alt text, semantic markup, reduced motion support\n\nNavigation: clear current location, predictable menu behavior, breadcrumb presence, search accessibility, mobile navigation pattern\n\nUsability: feature discoverability, feedback on actions, error prevention, recovery options, cognitive load management, loading states"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/tommygeoco/ui-audit",
    "publisherUrl": "https://clawhub.ai/tommygeoco/ui-audit",
    "owner": "tommygeoco",
    "version": "1.0.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/ui-audit",
    "downloadUrl": "https://openagent3.xyz/downloads/ui-audit",
    "agentUrl": "https://openagent3.xyz/skills/ui-audit/agent",
    "manifestUrl": "https://openagent3.xyz/skills/ui-audit/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/ui-audit/agent.md"
  }
}