ux-decisions

name: ux-decisions description: "AI skill for the Making UX Decisions framework (uxdecisions.com) by Tommy Geoco. Use for UI/UX design decisions, design audits, pattern selection, visual hierarchy analysis, and reviewing designs for completeness. Enables rapid, intentional interface design with checklists for visual style, accessibility, social proof, navigation, and more." author: Tommy Geoco homepage: https://uxdecisions.com

UX Decisions Skill

A comprehensive UI design decision-making framework based on "Making UX Decisions" by Tommy Geoco (uxdecisions.com). Enables rapid, intentional interface design in competitive, high-pressure environments.

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

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

Quick Reference Structure

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

Usage Instructions

For Design Decisions

1. Read 00-core-framework.md for the decisioning workflow
2. Identify if this is a recurring decision (use scaffold) or new decision (use process)
3. Apply the 3-step weighing: institutional knowledge → user familiarity → research
4. Query Figma MCP to see the official design spec
5. Query MCP servers (shadcn, reactbits) for available components

For New Interfaces

1. Follow the 6-step checklist in 10-checklist-new-interfaces.md
2. Query Figma MCP for the target screen design (screenshot + metadata)
3. Reference relevant pattern files for specific UI components
4. Query shadcn MCP for base components before building
5. Query reactbits MCP for animations and effects
6. Use fidelity and visual style checklists to enhance quality

For Pattern Selection

1. Identify the core problem (chunking, disclosure, cognitive load, etc.)
2. Check Figma MCP for existing designs that solve this problem
3. Load the relevant pattern reference
4. Check MCP servers for existing component implementations
5. Evaluate benefits, use cases, psychological principles, and implementation guidelines

MCP Integration (MANDATORY)

When implementing any UI based on these patterns:

• Figma MCP: Reference designs, screenshots, design tokens (ALWAYS CHECK FIRST)
• shadcn MCP: Base UI components (buttons, cards, dialogs, tables, forms)
• reactbits MCP: Animations, effects, creative components (counters, backgrounds, text effects)

Figma Design Reference (MANDATORY)

Midas Platform Figma File: avcUZMq2uSw4uGTj7EtZ0Q

Before implementing ANY screen, query Figma MCP to:

1. Get screenshot of the target design
2. Extract metadata (layout, components, spacing)
3. Ensure implementation matches Figma specs

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:

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.

Midas-Specific Context

When working on the Midas trading platform, ALWAYS read these additional resources:

Product Requirements (BEFORE designing)

• docs/PRD/ folder contains detailed PRDs with acceptance criteria
• docs/USER_STORIES.csv has all user stories with MVP flags

Key PRDs to Reference

Design Constraints

• See .cursor/rules/design-system.mdc for strict color/typography rules
• See .cursor/rules/midas-uiux-pipeline.mdc for full pipeline

Backend API Integration (CRITICAL)

ALWAYS use real backend APIs when they exist. Before implementing any data-fetching:

1. Check midas-backend codebase to understand what APIs are available
2. Use real services from midas-frontend/midas-web/src/lib/api/services/
3. Only mock features where backend doesn't exist yet

Real APIs Available:

• Auth/Users/Portfolio/Watchlist → midas-user
• Market Data/Symbols/Prices → midas-market-data
• Strategies/Builder → midas-signal
• Backtest → midas-backtest
• AI Chat → midas-agent
• Asset Filtering → midas-picker
• Sentiment/News → midas-sentiment, midas-news

Mock Only When Backend Missing:

• Exchange connections (midas-exchange not implemented)
• Billing/subscription (midas-billing not implemented)

Midas Macro Bet

VELOCITY + ACCURACY — Ship fast, be right

• Reuse shadcn patterns
• Follow fintech conventions
• Instrument for learning
• Use real APIs, don't over-mock