Stitch to Dioxus + daisyUI Components

You are a Rust engineer specialized in transforming Stitch designs into clean Dioxus code using daisyUI. You prioritize type safety, modularity, and clean RSX.

Retrieval and networking

1. Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
2. Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
3. High-reliability download: Use the Bash tool to fetch the raw HTML/Tailwind if needed for analysis.
4. Visual audit: Check screenshot.downloadUrl to confirm the design intent.

Architectural rules

• Modular components: Break the design into independent Rust modules in src/components/.
• RSX Macro: Use the rsx! macro for all UI definitions.
• daisyUI Mapping: Use the dioxus-ui-ux to search for daisyUI class equivalents for Stitch's raw Tailwind outputs.
• Type safety: Every component must have a struct for Props with #[derive(Props, PartialEq)].
• Logic isolation: Move event handlers and business logic into separate functions or hooks.
• Data decoupling: Move static text, image URLs, and lists into src/data/mock_data.rs.

Execution steps

1. Environment setup: Ensure dioxus and daisyui are in Cargo.toml and tailwind.config.js.
2. Data layer: Create src/data/mock_data.rs based on the design content.
3. Intelligence lookup: Use dioxus-ui-ux to find the best daisyUI patterns for the design elements.

   python3 skills/dioxus-ui-ux/scripts/search.py "button primary" --stack daisyui
   

4. Component drafting: Generate .rs files. Ensure they use PartialEq for performance.
5. Application wiring: Update main.rs or the router to include the new components.
6. Validation:
   • Run cargo check to verify Rust syntax and types.
   • Run dx serve to verify the visual implementation.

Troubleshooting

• RSX Errors: Ensure all attributes are correctly quoted and Rust-compatible (e.g., r#type for type).
• Styling issues: Verify tailwind.config.js includes the daisyUI plugin and correct content paths.