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

Available Domains

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