Dioxus UI/UX Skill - Design Intelligence

Comprehensive design guide for Dioxus applications using Dioxus Components. Contains guidelines for component usage, design systems, and general UI/UX best practices.

When to Apply

Reference these guidelines when:

• Building Dioxus applications with dioxus-components

• Designing new UI components or pages

• Choosing color palettes and typography

• Reviewing code for UX issues

• Implementing accessibility requirements

Quick Reference

1. Dioxus Components (CRITICAL)

• installation

• Use dx components add CLI command

• theming

• Use CSS variables in dx-components.css

• variants

• Use props (enums) for variants, not raw classes

• structure

• Keep components in components/ directory

• primitives

• Use dioxus-primitives for custom accessible components

2. Accessibility (CRITICAL)

• color-contrast

• Minimum 4.5:1 ratio for normal text

• focus-states

• Visible focus rings on interactive elements

• alt-text

• Descriptive alt text for meaningful images

• aria-labels

• aria-label for icon-only buttons

3. Performance (HIGH)

• lazy-loading

• Load heavy components lazily if possible

• assets

• Optimize images and fonts

• re-renders

• Use use_memo and use_callback appropriately

How to Use

Search specific domains using the CLI tool below.

Prerequisites

Check if Python is installed:

python3 --version || python --version

How to Use This Skill

When user requests UI/UX work for Dioxus, follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

• Product type: SaaS, e-commerce, portfolio, dashboard, etc.

• Style keywords: minimal, professional, elegant, etc.

• Stack: dioxus (Primary), shadcn (Reference), html-tailwind (Styling)

Step 2: Generate Design System (REQUIRED)

Always start with --design-system to get comprehensive recommendations:

python3 src/dioxus-skill/scripts/search.py "<product_type> <keywords>" --design-system -p "Project Name"

Step 3: Dioxus Guidelines

Get implementation-specific best practices for Dioxus Components:

python3 src/dioxus-skill/scripts/search.py "<component_name>" --stack dioxus

Example:

python3 src/dioxus-skill/scripts/search.py "button" --stack dioxus

Step 4: Supplement with Reference Patterns (Optional)

If Dioxus docs are sparse, check Shadcn patterns:

python3 src/dioxus-skill/scripts/search.py "dialog" --stack shadcn

Step 5: General UI Search

For styles, colors, and typography:

python3 src/dioxus-skill/scripts/search.py "glassmorphism" --domain style python3 src/dioxus-skill/scripts/search.py "fintech" --domain color

Search Reference

Available Stacks

Stack Focus Usage

dioxus

Core Dioxus Components guidelines --stack dioxus

shadcn

Upstream React component patterns --stack shadcn

html-tailwind

Utility class best practices --stack html-tailwind

Available Domains

Domain Use For

style

UI styles, visual effects

color

Color palettes by industry

typography

Font pairings

chart

Chart recommendations

ux

UX best practices

Pre-Delivery Checklist

Before delivering Dioxus UI code:

Dioxus Specifics

• Components installed via CLI (dx components add )

• CSS variables used for theming

• Variants passed as props, not hardcoded strings

• dx-components.css linked in root

Visual Quality

• No emojis used as icons (use SVG)

• Consistent icon sizing

• Hover states defined

• Cursor pointer on interactive elements

Accessibility

• Contrast ratio > 4.5:1

• Images have alt text

• Interactive elements focusable via keyboard