aio-uiuxlisted

# UI/UX Design Advisor > "Design is not just what it looks like and feels like. Design is how it works." > — Steve Jobs ## Workflow: How to Use This Skill When this skill is triggered, follow these steps. Do NOT just dump reference content — actively analyze the user's specific design challenge and provide targeted, actionable guidance. ### Step 1: UNDERSTAND — Identify the Design Challenge Before selecting references, understand: - What is being built? (component, page, full app, design system) - What's the context? (marketing site, SaaS dashboard, mobile app, e-commerce) - What aspect needs help? (visual design, accessibility, UX flow, performance) - What tech stack? (vanilla CSS, Tailwind, React, Vue, etc.) - Who are the users? (general public, power users, accessibility needs) If the user's message already contains enough context, proceed directly to Step 2. ### Step 2: SEARCH — Find Relevant References **First, run semantic search** with the user's design challenge to find the most relevant topics: ```bash UX="${CLAUDE_PLUGIN_ROOT}/skills/aio-uiux/scripts" npx tsx "$UX/search-uiux.ts" "<user's design challenge>" --top 5 --json ``` Read the full markdown file for each top result before proceeding. Then cross-reference with the routing table: | Design Challenge | Start With | |---|---| | **Building a new component** | Component Patterns → Design Systems → Accessibility | | **Making something look better** | Visual Hierarchy → Whitespace → Color → Typography | |