wcz-layout/skills/dialogs/SKILL.md

---
name: dialogs
description: "Use when: creating or modifying alert dialogs, confirm dialogs, typed custom dialogs, or dialog-driven user flows."
---

## Rules

- Always use `useDialogs()` for modal interactions.
- Use `confirm()` for destructive or user-confirmed actions.
- Use `alert()` for informational or error messages that require acknowledgement.
- Use `open()` for feature-specific custom dialogs with typed payloads.
- Custom dialogs must receive `DialogProps<T>`.
- Keep dialogs colocated inside `routes/feature/-components` when feature-specific.
- Always use translation; add new keys for feature-specific messages.
- Use notifications for lightweight feedback; dialogs when the user must decide or acknowledge.

## File Placement

```txt
src/components/dialogs/         — shared dialogs used across features
src/routes/<feature>s/-components/ — feature-scoped dialogs
wcz-layout/hooks                — useDialogs hook, DialogProps type, useTranslation
src/lib/locales/                — translation keys
@mui/material                   — MUI Dialog components
```

## Examples

```ts
// confirmation dialog
const { confirm } = useDialogs();
const { t } = useTranslation();

const confirmed = await confirm(t("DeleteConfirmation", { count: selectedIds.length }));
if (confirmed) await deleteFeature({ data: id });

// alert dialog
const { alert } = useDialogs();
const { t } = useTranslation();

try {
  await saveFeature(values);
  await alert(t("FeatureSavedSuccessfully"));
} catch (error) {
  await alert(error instanceof Error ? error.message : t("UnknownError"));
}

// custom dialog
const { open } = useDialogs();

await open(EditFeatureDialog, id);

// custom dialog component
interface Payload {
  id: string;
}

export const EditFeatureDialog = ({
  payload,
  open,
  onClose,
}: DialogProps<Payload>) => {
  const { t } = useTranslation();

  return (
    <Dialog fullWidth open={open} onClose={() => onClose()}>
      <DialogTitle>{t("EditFeature")}</DialogTitle>
      <DialogContent>
        {payload.id}
      </DialogContent>
      <DialogActions>
        <Button onClick={() => onClose()}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};
```