# Core Dioxus Widget Rs

> Criar widgets/componentes reutilizáveis Dioxus com props tipadas e estilização Tailwind/CSS modules. Usar quando pedir componente isolado, widget reusável, botão, card, input, ou UI kit Dioxus Mobile.

- Skill: `eskcti/core-dioxus-widget-rs` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add eskcti/core-dioxus-widget-rs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/eskcti/core-dioxus-widget-rs/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: EskCti (https://skillmd.com/u/eskcti)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/eskcti/core-dioxus-widget-rs

---


# Core Dioxus — Widgets

## Overview

Padrão para componentes reutilizáveis (widgets) em Dioxus Mobile, com **Props tipadas** e sem acoplamento ao domínio.

## Config

- Widgets em `widgets/<nome>.rs` — kebab-case nos arquivos, PascalCase no componente.
- `#[derive(Props, PartialEq)]` para `struct <Nome>Props`.
- Estilização com classes utilitárias (Tailwind/Dioxus-class) ou CSS modules sob controle do projeto — nunca estilos inline espalhados.
- Widgets **não** conhecem use cases nem repositórios (presentation pura).

## Exemplo

```rust
use dioxus::prelude::*;

#[derive(Props, Clone, PartialEq)]
struct CustomerAvatarProps {
    name: String,
    #[props(default)]
    size: String,
}

#[component]
fn CustomerAvatar(props: CustomerAvatarProps) -> Element {
    let initials = props
        .name
        .split_whitespace()
        .filter_map(|w| w.chars().next())
        .take(2)
        .collect::<String>();
    rsx! {
        div { class: "flex items-center justify-center rounded-full bg-primary text-primary-foreground {props.size}", "{initials}&#160;" }
    }
}
```

## Global Standards

- Consultar `../skills-standards.md` para padrões globais de nomenclatura.