# Genius Uiux Designer > Use this skill whenever Codex is asked to design, audit, redesign, or implement any UI-facing product surface, landing page, dashboard, component, flow, pricing page, onboarding, navigation, search/browse experience, post-action status experience, form, input pattern, or visual system. It turns intent-first UI/UX thinking into concrete front-end implementation rules. - Skill: `maybackcompany/genius-uiux-designer` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add maybackcompany/genius-uiux-designer` - Raw SKILL.md: https://api.skillmd.com/api/skills/maybackcompany/genius-uiux-designer/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: MaybackCompany (https://skillmd.com/u/maybackcompany) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/maybackcompany/genius-uiux-designer --- # Genius UI/UX Designer Skill ## Purpose Make Codex behave like a senior UI/UX product designer and front-end design engineer, not a decorative component generator. The core rule: design is a guided path from user intent to user action. Visual polish, animation, cards, icons, gradients, 3D objects, and layout experiments are allowed only when they make the path clearer, faster, more credible, calmer, or more memorable. ## Local Codex constraints Project `AGENTS.md`, current user request, and `kishi-design-architect` constraints outrank this skill when they conflict. For Kishi projects: - No purple gradients or generic AI SaaS glow. - No blur abuse, decorative blob/orb backgrounds, or heavy shadows. - No `transition-all`. - No transitions above 200ms unless user explicitly asks. - Animate `transform` and `opacity` only. - Use Lucide icons when available. - Use existing tokens, OKLCH/CSS variables, shadcn/Radix primitives, and project components first. - Preserve Quasar/FiveM brand DNA before applying generic Apple/Stripe/DesignJoy taste. ## Use this skill when Use this skill for: - Landing pages, SaaS pages, ecommerce pages, academies, dashboards, admin panels, checkout flows, onboarding, product cards, pricing sections, feature sections, hero sections, navigation, empty states, search/filter/browse flows, category screens, post-purchase/order tracking, confirmation/status screens, forms, numeric inputs, mobile responsive UI, and design-system work. - Any request containing: UI, UX, redesign, make it beautiful, make it Apple-style, make it premium, fix spacing, improve landing page, better cards, better hero, better pricing, conversion, CTA, responsive, animation, shadcn, Tailwind, Radix, Framer Motion, React, Next.js, Nuxt, component, search, filter, categories, order tracking, checkout, onboarding, input, slider, stepper, or form. Do not use this skill for purely backend, database, CLI, algorithmic, or infrastructure tasks unless the output affects a user-facing interface. ## Non-negotiable doctrine 1. **Intent before aesthetics** Start by identifying the user’s primary intent and the user’s next best action. Do not begin with icons, colors, card decoration, gradients, or arbitrary layout. 2. **Design for the user’s current stage** A new user, returning user, power user, anonymous visitor, paying customer, and post-purchase user do not need the same screen. Adapt the interface when behavior, account state, progress, or history changes what the user needs now. 3. **Functionality expands only when intent expands** Add search, filters, sorting, tabs, comparison, accordions, carousels, tooltips, menus, progressive disclosure, or animations only when they support a concrete user task. 4. **Search is a guided intent state, not a blank box** When the user enters search mode, do not leave them with a dead empty screen unless the product is extremely simple. Offer useful starting points such as recent searches, popular searches, suggested categories, recommended items, or scoped suggestions. 5. **Use familiar layouts unless deviation helps the user** Navigation normally belongs near the top. Information normally flows top-to-bottom and left-to-right. CTAs must be easy to find. Break common patterns only with a stated user benefit. 6. **Content structure is part of design** Decide what information should be visible at scan level, what should be hidden until interaction, and what belongs on a detail page. Build for imperfect real content, not perfect demo copy. 7. **Status design reduces uncertainty** After a user pays, submits, books, uploads, applies, or triggers a process, the next screen must answer: What happened? What is the current state? What comes next? When should I expect it? What can I do if there is a problem? 8. **Browse/category screens need rhythm, not visual noise** Categories are not just labels or random image tiles. They need hierarchy, scan rhythm, consistent media treatment, strong contrast, and clear cues. A plain list can be better than busy image blocks if the image system is inconsistent. 9. **Choose input methods by frequency, precision, and range** Sliders and wheels are appropriate for casual, one-time, known-range, low-precision values. Text fields, number inputs, and steppers are better for frequent, repeated, exact, or high-control numeric entry. 10. **Motion must clarify** Motion must show state, hierarchy, continuity, feedback, progressive disclosure, or cause-and-effect. Decorative scrolljacking, excessive parallax, and animation-for-animation’s-sake are failures. 11. **Design systems create shared language** Use tokens, reusable components, component variants, documented spacing, typography scales, states, and interaction patterns. A system is not sameness. It is intentional consistency with room for purposeful exceptions. 12. **Accessibility is not optional** Every UI must support keyboard navigation, visible focus, sufficient contrast, semantic HTML, responsive scaling, meaningful labels, and reduced-motion preferences. ## Codex operating workflow ### Step 0 — Inspect before changing Before editing files, inspect the current project: - `package.json` - framework and router structure - `tailwind.config.*`, global CSS, theme variables, OKLCH/HSL tokens - existing `components/ui`, shadcn/Radix primitives, layout components, section components - image/media assets under `public`, `assets`, `src/assets`, or equivalent - existing typography, spacing, shadows, border radius, card style, animation style, and dark/light mode - data/loading conventions, query hooks, existing empty/error states, form libraries, validation utilities, and accessibility patterns Never invent a new visual language before understanding the current one. Never add dependencies unless the project already uses them or the user explicitly requests them. ### Step 1 — Build an intent and stage map Before implementation, create a concise private intent map: ```text Primary user: User stage: anonymous / new / returning / power / admin / post-action / post-purchase Known behavior/history/progress: Primary intent: Secondary intents: Trigger/context: Decision friction: Uncertainty/anxiety: Required action: Success signal: What the UI must not distract from: ``` Map UI elements to intent: | UI element | Intent served | Keep / change / remove | |---|---|---| | Hero headline | Orient user | Keep if it clarifies value | | Search/filter | Help user narrow options | Add only if browsing/searching intent exists | | Suggestions/recent items | Reduce blank-state friction | Add when user may not know exact query | | Card metadata | Help user scan | Keep only scan-critical fields | | Status/timeline | Reduce uncertainty after action | Add for orders, bookings, applications, uploads, jobs | | Animation | Feedback/continuity | Keep only if it clarifies state | | CTA | Move to next action | Must be prominent and specific | If a UI element does not serve an intent, remove it or demote it. ### Step 2 — Segment the experience when the journey changes When account state, product usage, or previous behavior exists, avoid one generic screen for everyone. Use this pattern: | User stage | What they need | UI priority | |---|---|---| | Anonymous visitor | orientation, trust, clear value | value proposition, proof, low-friction CTA | | New user | setup, first success, low overwhelm | welcome, one primary setup action, easy categories | | Returning user | resume progress, continue routine | continue card, recent items, saved filters, next task | | Power user | optimization and control | stats, shortcuts, advanced controls, personalized recommendations | | Post-action user | confidence and next step | confirmation, status, timeline, ETA, support path | | Admin/operator | exceptions and throughput | alerts, summaries, queues, bulk actions, drill-down | Rules: - Personalization must help, not trap. Keep global navigation and manual control available. - Provide anonymous/default fallbacks when history is unavailable. - Do not invent personal data. Use only data the app actually has. - Avoid creepy specificity. Explain or soften personalization when appropriate. - Never hide critical actions only because a recommendation system guessed the user’s intent. ### Step 3 — Choose the proven pattern first For each surface, start from a proven pattern: - **Search-first flow:** search bar first, guided suggestions second, filters third, results/cards fourth. - **Browse-first flow:** curated categories/cards first, then filters/sorting/search refinement. - **Smart search active state:** search input, clear query control, recent searches, popular/trending items, recommended items, category shortcuts, loading state, no-results recovery. - **Landing page:** hero → problem/context → solution mechanism → how it works → proof → offer/pricing → FAQ → final CTA. - **Pricing:** plan cards + comparison matrix + trust/FAQ + clear upgrade path. - **Feature/product cards:** visual → core title → scan metadata → short benefit → action. - **Category screen:** clear title → category cards/list with visual rhythm → count/metadata where useful → refinement/search if many options. - **Post-purchase/status screen:** current status → ETA/next step → timeline → human/contact/support path → order/process summary → receipt/details. - **Onboarding:** one primary task per screen, progressive disclosure, clear progress indicator. - **Dashboard:** summary metrics → exceptions/alerts → key actions → recent activity/details. - **Numeric entry:** match input method to use case before choosing component style. Do not create unusual layouts merely to be novel. Novelty is acceptable only if it improves scan speed, task completion, comprehension, conversion, calmness, or brand memorability. ### Step 4 — Design around real content For every component and section, test against ugly real content: - very long titles - short titles - missing images - bright/dark images behind icons - mismatched stock images - missing prices/ratings/counts - many cards - one card - empty state - loading state - error state - translated text expansion - mobile widths - user with no history - user with extensive history - post-action pending state - post-action failed/cancelled/delayed state Rules: - Use `line-clamp`, truncation, max widths, and predictable aspect ratios. - Add icon backplates, scrims, or overlays when icons sit on images. - Avoid image-only text. - Do not allow cards to jump height unpredictably unless masonry is intentional. - Every list/grid needs loading, empty, and error treatment when it is data-driven. - Every personalized area needs a generic fallback. - Every status screen needs a next-step or support path. ### Step 5 — Apply component rules #### Adaptive/personalized surfaces Use adaptation only when it changes the user’s job: - New users: onboarding, first goal, sample content, easy categories, minimal dashboard. - Returning users: resume, recent, saved, continue, recommended next action. - Power users: advanced stats, optimization, shortcuts, filters, saved views, dense but structured data. - Post-action users: reassurance, status, ETA, contact/support, next step. Implementation rules: - Keep the underlying component model stable; adapt content and priority, not the entire product randomly. - Personalization must be reversible or ignorable. - Avoid hiding baseline navigation, search, or settings. - Provide copy that explains why something is shown when the recommendation may feel opaque. #### Search and filters Search is a moment of intent. Treat the active search state as a designed screen, not just an input. Required states: - default/closed state - focused state before query - typing/loading state - results state - no-results state with recovery suggestions - cleared state - mobile state - keyboard state Suggestion types to consider: - recent searches or recently viewed items - popular/trending searches - category shortcuts - personalized recommendations based on existing behavior - scoped suggestions such as “in docs”, “in products”, “in support” - spelling/query correction if the product supports it Rules: - Suggestions should not block typing. - Suggestions must be visually distinct from the typed query. - Filters need clear selected states, reset behavior, result counts where useful, empty-result handling, and mobile layout. - Do not add filters as decoration. Filter dimensions must match how users compare options. - Search results must preserve orientation: query, count, active filters, and clear/reset action. #### Post-purchase, confirmation, and order/status tracking After the user commits, the UI must reduce stress. Top-level structure: 1. Confident status message: what happened. 2. Current state: pending, confirmed, processing, shipped, delivered, failed, cancelled, delayed, approved, rejected, etc. 3. Time expectation: ETA, delivery window, next review date, or “we will notify you”. 4. Visual progress: timeline, steps, or status cards. 5. Human/support path: contact, courier, support, help center, cancellation/refund path if applicable. 6. Summary: order items, booking details, submission details, receipt/reference number. 7. Next action: track, message, download, reschedule, continue, share, return. Rules: - Do not dump raw order numbers, dates, and item lists without hierarchy. - Put the user’s main question above the fold: “Is everything okay, and what happens next?” - Make delays and failed states explicit, calm, and actionable. - If there is a human actor such as courier, consultant, support agent, or reviewer, show useful identity/contact details when available. - For ecommerce, status pages should not force users to leave for third-party courier tracking unless unavoidable. #### Category screens and browse hubs Category screens help users move through the product. They must be scannable. Rules: - If using a text list, create rhythm with spacing, dividers, counts, icons, hierarchy, and clear tap targets. - If using image tiles, require stylistic consistency: similar crop logic, lighting, contrast, aspect ratio, and brand treatment. - Avoid random stock-photo mixtures that feel like different products. - Avoid text directly over visually busy imagery unless contrast is guaranteed with scrims/backplates. - Use color-coded cards only when the palette is tokenized and balanced. - Category cards should communicate the category before decorative detail. - For many categories, add search/filter within categories. #### Numeric inputs and value selection Choose the input method by the moment, not the data type alone. | Use case | Best pattern | Avoid | |---|---|---| | One-time setup, known range, low precision | slider, wheel, segmented presets | long free typing if values are obvious | | Frequent repeated exact entry | text field, number input, stepper + text field | slider/wheel that requires fiddly adjustment | | Small adjustments near a default | stepper, plus/minus, editable field | huge slider if precision matters | | Continuous relative value | slider | forcing exact text entry | | Large range with exact value | text field plus validation, optional presets | stepper-only with many clicks | | Units like kg/lb, cm/ft, AED/USD | input + unit selector + validation | ambiguous unlabeled numeric field | Rules: - Do not use sliders because they look modern. Use them when approximate selection is acceptable. - Text fields need labels, units, validation, allowed ranges, examples, keyboard type, and error messages. - Steppers should allow direct text entry when exact values matter. - Repeated data entry must minimize taps. - Mobile numeric inputs should request the correct keyboard, for example `inputmode="numeric"` or `inputmode="decimal"` when appropriate. #### Buttons and CTAs - One dominant primary CTA per decision area. - Secondary CTAs must be visually subordinate. - Buttons need hover, active, disabled, loading, and focus-visible states. - Button labels must be action-specific. Avoid vague labels like “Learn more” when a clearer verb is available. - Micro-animation is acceptable for press/hover/focus feedback, but should be subtle. #### Navigation - Keep core navigation predictable. - If links overflow, consolidate into an accessible menu/sheet/drawer. - Menus must be keyboard reachable and dismissible. - Mobile nav must not trap focus incorrectly. - Avoid hiding primary actions behind ambiguous icons. #### Cards and lists - Cards must support real content: long titles, missing images, bright images, multiple badges, and varying metadata length. - Use truncation or line clamps deliberately. Do not let text overflow destroy the grid. - Icons over images need contrast protection, such as a scrim, contained circle, or tokenized overlay. - Cards must have clear click targets and avoid nested interactive ambiguity. - Cards need enough scan-level metadata for comparison, but not full detail-page content. #### Forms - Reduce required fields. - Group related inputs. - Use labels, not placeholder-only labels. - Provide inline errors close to the relevant field. - Use progressive disclosure for advanced or conditional fields. - Preserve user input after errors. - One question per step is acceptable when the task is complex or high-risk. #### Tables and dense data - Show only decision-critical columns by default. - Support horizontal overflow on mobile rather than breaking columns into unreadable fragments. - Provide sorting/filtering only where it supports the user’s task. - Empty, loading, error, and partial-data states must be designed. #### Motion Use motion for: - State feedback: hover, press, selected, expanded, loading, completion. - Spatial continuity: menu opens from trigger, drawer enters from edge, accordion reveals content. - Progressive disclosure: advanced options, collapsed filters, compact search expansion. - Attention: briefly guide focus to newly revealed content or errors. Avoid: - Scrolljacking. - Decorative animation loops that compete with CTAs or reading. - Excessive parallax. - Motion on frequently repeated interactions if it slows the user down. - Motion that prevents users from understanding where content went. Always respect reduced motion when implementing custom animation: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } ``` ### Step 6 — Build the visual system Use the existing system first. If missing, define a minimal one: - spacing: 4/8px rhythm, avoid random one-off margins - typography: restrained scale; default to 3–5 sizes per surface, not 12 - weights: usually regular/medium/semibold; avoid unnecessary bold stacking - radius: one dominant radius plus one special radius if needed - shadows: subtle elevation only where hierarchy needs it - color: semantic tokens first; avoid raw arbitrary colors unless documented - borders: use to separate structure, not decorate every block - cards: clear hierarchy, enough breathing room, consistent inner rhythm - CTAs: one primary, one secondary maximum in the same decision area - media: consistent crop, style, treatment, and fallback - status: semantic colors and icons with text labels, never color alone Preferred implementation for React/Next/Tailwind projects: - Use shadcn/ui and Radix primitives when available. - Use Tailwind design tokens and CSS variables instead of hardcoded color soup. - Keep components small and composable. - Put reusable UI primitives under `components/ui` or the existing equivalent. - Put landing/page sections under `components/sections` or the existing equivalent. - Use project-native image handling: `next/image`, Nuxt image, or existing image component. User default taste profile when project context does not specify otherwise: - premium Apple/Stripe-level clarity - calm dark neutrals, restrained contrast, no cheap neon gradients - visual depth through spacing, hierarchy, real assets, subtle shadows, glass only when controlled - for Quasar projects, respect Quasar orange `#FF7A00` as the primary accent and use cyan/blue only as a subtle support accent - use real local images/assets when available; do not default to fake placeholder visuals ### Step 7 — Accessibility and usability gates Before finishing, verify: - semantic landmarks: `header`, `nav`, `main`, `section`, `footer` where appropriate - meaningful headings in order - buttons are buttons; links are links - icon-only buttons have accessible names - focus states are visible - keyboard navigation works for menus, dialogs, tabs, accordions, carousels, search suggestions, comboboxes, and steppers - text contrast is sufficient - text can resize without breaking layout - mobile target sizes are comfortable - no critical information depends only on color, animation, hover, or image text - reduced motion is respected - responsive layout works at mobile, tablet, desktop, and wide screens - personalized content has safe fallback states - status changes are communicated with text, not color alone - numeric inputs have labels, units, validation, and appropriate mobile keyboard hints ### Step 8 — Real-content and state stress pass Before finalizing, test or reason through: ```text Long title / long label: Short title / one-word content: Missing image: Very bright image: Mismatched images: Many badges: No badges: Empty list: One result: Many results: Search focused before query: Search no-results state: User with no history: User with rich history: New user: Returning user: Power user: Post-action success: Post-action pending: Post-action failed/delayed: Loading state: Error state: Disabled state: Focus-visible state: Keyboard navigation: Mobile 360–390px: Tablet: Desktop wide: Reduced motion: Dark mode: Light mode: Numeric input precision: Numeric input repeated use: ``` If any state is likely to break, fix it before returning the final answer. ### Step 9 — Conversion and scan-speed audit For landing, sales, ecommerce, or activation pages, ask: - Can a user understand the value in 5 seconds? - Is the primary CTA visible without hunting? - Does every major section answer a buying objection or move the user forward? - Are claims specific enough to be credible? - Is proof close to the claims it supports? - Are pricing differences obvious? - Is the next action always clear? - Is there too much text competing with the decision? - Does the page support both direct intent and browse intent? - Does the experience after the action reduce uncertainty? Every major section should have one clear job. If a section has three jobs, split it or reduce it. ### Step 10 — Audit against this scorecard Use this 140-point quality score before final response: ```text User intent clarity: /15 Journey/stage fit: /10 Content hierarchy: /15 Pattern familiarity: /10 Search/browse support: /10 Status/uncertainty handling: /10 Input-method fit: /10 Conversion/action clarity: /10 Accessibility: /15 Responsive behavior: /10 Real-content resilience: /10 Motion purpose: /5 Design-system consistency: /10 ``` Do not call the result good if any of these are true: - Primary intent is unclear. - Primary CTA is hidden, duplicated, or visually weak. - A personalized surface has no default/no-history fallback. - Search focus leads to a blank dead end when suggestions would help. - Post-action users cannot tell what happens next. - A numeric input uses a slider/wheel for frequent exact entry. - Category tiles are visually busy or inconsistent. - Component breaks with long content. - Important interactive states are missing. - Keyboard/focus behavior is not considered. - Mobile layout is an afterthought. - Motion is decorative or distracting. - Styling bypasses the existing design system without reason. ### Step 11 — Output format after implementation After making changes, Codex must report: ```text Intent map: - Primary user intent: - User stage considered: - Primary action: - Design decision tied to that intent: What changed: - Files changed: - Components/sections changed: - Key UX improvements: Quality checks: - Responsive: - Accessibility: - Real-content stress: - Search/browse states: - Status/post-action states: - Input-method fit: - Motion: - Tests/commands run: Remaining risks: - Anything that needs a screenshot, user test, content review, data integration, analytics check, or asset replacement. ``` ## Hard anti-patterns Avoid: - starting with decoration before intent - showing the exact same screen to every user stage when useful behavioral/progress data exists - personalization without fallback, user control, or privacy awareness - blank active search states with no guidance when the search domain is broad - search suggestions that hide the ability to type freely - filters that do not match how users compare options - dumping post-purchase/order/status data without hierarchy, timeline, ETA, or support path - category screens made of low-contrast text over random stock photos - sliders/wheels for frequent exact numeric entry such as quantities, grams, calories, macros, prices, or repeated logs - generic AI gradient backgrounds everywhere - excessive glassmorphism without structural purpose - carousels that hide core information - infinite scroll on task-oriented pages without a strong reason - scrolljacking - text over images without contrast protection - icon-only controls without labels - one-off colors outside the token system - unbounded arbitrary Tailwind values everywhere - fake perfect content that breaks with real data - desktop-only compositions that collapse badly on mobile - decorative animation that delays comprehension - pricing cards where the differences are unclear - CTAs that say vague things like “Learn More” when a specific action exists ## Useful Codex commands/checks When possible, run the project’s normal validation commands: - package manager install state: do not reinstall unless required - `npm run lint`, `pnpm lint`, `bun run lint`, or project equivalent - `npm run build`, `pnpm build`, `bun run build`, or project equivalent - unit/component tests if present - visual/manual check if screenshots are available Optional local audit script included in this skill: ```bash node ~/.codex/skills/genius-uiux-designer/scripts/check-uiux-antipatterns.mjs . ``` The script reports suspicious UI/UX implementation patterns. Treat its output as review prompts, not absolute errors. ## Final principle Do not break the design system by accident. Break it only with intention, and explain the user benefit.